/* ==========================================================================
   1. ГЛОБАЛЬНА ШАПКА ТА БАНЕР (HERO-СЕКЦІЯ ДЛЯ ВНУТРІШНІХ СТОРІНОК)
   ========================================================================== */

   header {
    position: relative;
    background-color: #ffffff; 
    padding-bottom: 340px; /* Збільшили простір для ефектного банера */
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.site-title, #top-nav, #search {
    position: relative;
    z-index: 10;
}

.site-title a {
    display: inline-flex;
    align-items: center;
    gap: 15px; 
    text-decoration: none;
    vertical-align: middle;
}

.site-title img {
    max-height: 55px; 
    width: auto;
    padding: 10px 0;
    display: block;
}

.site-title a::after {
    content: 'Digital Law Library';
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2rem; 
    font-weight: 700;
    letter-spacing: 3px; 
    color: #920b0b; /* ФІРМОВИЙ КОЛІР */
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.site-title a:hover::after { color: #b31717; }

.banner {
    position: absolute;
    top: 114px; 
    left: 0;
    right: 0;
    bottom: 0; 
    z-index: 1; 
    pointer-events: none; 
    overflow: hidden;
    background-color: #111111;
}

/* Насичене зображення з легким розмиттям для фону */
.banner img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center top; 
    opacity: 1; /* Зображення тепер яскраве, не бліде */
    filter: brightness(0.65) blur(2px); /* Заблюрено та затемнено для текстури */
    transform: scale(1.05); /* Щоб розмиті краї не вилазили */
    transition: all 0.5s ease;
}

/* Овальний (скруглений) перехід від банера до контенту сторінки */
.banner::after {
    content: ''; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    height: 50px; 
    background-color: #f7f7f7; /* Зливається з фоном сторінки */
    border-radius: 40px 40px 0 0; /* Ті самі красиві овальні кути */
    z-index: 2;
}

.banner::before { display: none !important; }

@media (max-width: 900px) {
    header { padding-bottom: 260px; }
    .site-title a::after { font-size: 1.6rem; letter-spacing: 2px; }
    .banner { top: 100px; }
    .banner::after { height: 40px; border-radius: 30px 30px 0 0; }
}

@media (max-width: 600px) {
    header { padding-bottom: 220px; }
    .site-title a { justify-content: center; }
    .site-title a::after { font-size: 1.3rem; letter-spacing: 1.5px; }
    .banner { top: 90px; }
}


/* ==========================================================================
   2. WOW-ЕФЕКТ: ГОЛОВНА СТОРІНКА (ПОВНІСТЮ НА ВЕСЬ ЕКРАН)
   ========================================================================== */

.site-page-home header {
    background-color: transparent !important;
    padding-bottom: 0 !important;
    border: none;
    box-shadow: none;
}

.site-page-home .banner {
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%;
    height: 100vh; 
    background-color: #111111; 
    z-index: 0; 
}

.site-page-home .banner img {
    opacity: 1; 
    filter: blur(3px) brightness(0.5); 
    transform: scale(1.15); 
}

/* Прибираємо овальний білий перехід на головній, бо банер фіксований */
.site-page-home .banner::after { display: none; }

.site-page-home .site-title a::after,
.site-page-home #top-nav .navigation a {
    color: #920b0b !important;
    
}


/* ==========================================================================
   3. ПРЯМОКУТНІ ПРОЗОРІ КНОПКИ (GLASSMORPHISM) НА ГОЛОВНІЙ
   ========================================================================== */

.site-page-home #content {
    position: relative;
    z-index: 10;
}

.site-page-home .block-asset {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 80vh; 
    padding: 12vh 20px 40px 20px; 
    box-sizing: border-box;
}

.site-page-home .assets {
    margin-top: 0;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px; 
    justify-content: center;
}

.site-page-home .asset {
    flex: 1 1 400px;
    max-width: 480px; 
}

.site-page-home .asset a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px;
    
    background: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9); 
    border-radius: 16px; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
    
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    box-sizing: border-box;
}

.site-page-home .asset a:hover {
    transform: translateY(-8px) scale(1.02); 
    background: rgba(255, 255, 255, 0.95); 
    border: 1px solid #ffffff;
    box-shadow: 0 25px 55px rgba(146, 11, 11, 0.25); 
}

.site-page-home .asset img {
    width: 100%;
    height: 240px; 
    object-fit: cover;
    border-radius: 10px; 
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: transform 0.5s ease;
}

.site-page-home .asset a:hover img { transform: scale(1.04); }

.site-page-home .asset .link-title {
    color: #920b0b; 
    font-size: 1.45rem;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); 
    line-height: 1.4;
    letter-spacing: 0.5px;
}


/* ==========================================================================
   4. СІТКА КАРТОК ДЛЯ КОЛЕКЦІЙ
   ========================================================================== */

.block-itemSetShowcase .item-set-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-top: 30px;
    padding: 0 15px;
}

.block-itemSetShowcase .item-set {
    flex: 1 1 calc(25% - 30px);
    max-width: 280px;
    box-sizing: border-box;
    
    background: #ffffff;
    border: 1px solid rgba(146, 11, 11, 0.15); 
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block-itemSetShowcase .item-set:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(146, 11, 11, 0.15); 
    border-color: rgba(146, 11, 11, 0.4);
}

.block-itemSetShowcase .item-set a:first-child { width: 100%; display: block; }
.block-itemSetShowcase .item-set img {
    width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08); transition: transform 0.5s ease;
}
.block-itemSetShowcase .item-set:hover img { transform: scale(1.04); }
.block-itemSetShowcase .item-set a:last-child {
    display: block; text-decoration: none; color: #920b0b; font-size: 1.15rem; font-weight: 700; line-height: 1.4; text-align: center; transition: color 0.3s ease;
}
.block-itemSetShowcase .item-set a:last-child:hover { color: #b31717; }

@media (max-width: 1024px) { .block-itemSetShowcase .item-set { flex: 1 1 calc(33.33% - 30px); } }
@media (max-width: 768px) { .block-itemSetShowcase .item-set { flex: 1 1 calc(50% - 30px); } }
@media (max-width: 480px) { .block-itemSetShowcase .item-set { flex: 1 1 100%; max-width: 350px; } }

/* Біле тло для блоків знизу, щоб вони перекривали фіксований банер на головній */
.site-page-home .block-itemSetsTree,
.site-page-home .block-itemSetShowcase {
    background-color: #ffffff;
    position: relative;
    z-index: 10;
    padding: 60px 20px 40px 20px;
    box-shadow: 0 -20px 40px rgba(0,0,0,0.25); 
    border-radius: 40px 40px 0 0; 
    margin-top: 0;
}


/* ==========================================================================
   5. ПАНЕЛЬ МЕТАДАНИХ НА СТОРІНКАХ ITEM
   ========================================================================== */

#content > dl:not(.item-sets) {
    margin: 30px auto; padding: 30px; background-color: #ffffff !important; opacity: 1 !important; 
    position: relative; z-index: 10; border: 1px solid #e9e9e9; border-radius: 20px; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; max-width: 1000px; 
}
#content > dl:not(.item-sets) .property {
    display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px 16px; padding: 16px 0; 
    border-bottom: 1px solid #f4f4f4; align-items: start; position: relative; transition: background-color 0.25s ease;
}
#content > dl:not(.item-sets) .property:last-child { border-bottom: none; }
#content > dl:not(.item-sets) .property:hover { background-color: rgba(146, 11, 11, 0.02); }
#content > dl:not(.item-sets) .property::after {
    content: ''; position: absolute; left: 200px; bottom: 0; width: 0; height: 2px;
    background: linear-gradient(90deg, #920b0b, #920b0b, transparent); transition: width 0.4s ease, opacity 0.3s ease; opacity: 0;
}
#content > dl:not(.item-sets) .property:hover::after { width: calc(100% - 200px); opacity: 1; }
#content > dl:not(.item-sets) dt { 
    grid-column: 1; grid-row: 1; margin: 0; color: #920b0b; font-size: 0.82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; padding-top: 3px; 
}
#content > dl:not(.item-sets) dd { grid-column: 2; margin: 0; display: flex; align-items: baseline; gap: 10px; }
#content > dl:not(.item-sets) .value-content { color: #2c2c2c; font-size: 1.05rem; line-height: 1.6; word-break: break-word; }
#content > dl:not(.item-sets) .language {
    background-color: rgba(146, 11, 11, 0.08); color: #920b0b; padding: 2px 8px; border-radius: 6px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; 
    border: 1px solid rgba(146, 11, 11, 0.15); box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
#content > dl:not(.item-sets) a { color: #920b0b; text-decoration: none; border-bottom: 1px dotted rgba(146, 11, 11, 0.4); transition: color 0.2s ease, border-color 0.2s ease; }
#content > dl:not(.item-sets) a:hover { color: #b31717; border-bottom-color: #b31717; }


/* ==========================================================================
   5.1. ПАНЕЛЬ "НАБІР ЕЛЕМЕНТІВ" (КОЛЕКЦІЇ НА СТОРІНЦІ ITEM)
   ========================================================================== */
#content > dl.item-sets {
    margin: 30px auto 20px; padding: 25px 30px; background-color: #ffffff !important; position: relative; z-index: 10; 
    border: 1px solid rgba(146, 11, 11, 0.15); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; max-width: 1000px; box-sizing: border-box;
}
#content > dl.item-sets .property { display: block; border-bottom: none; padding: 0; }
#content > dl.item-sets dt { margin: 0 0 15px 0; color: #920b0b; font-size: 0.9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: block; }
#content > dl.item-sets dd { margin: 0; }
#content > dl.item-sets .value-content { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: #bbbbbb; font-size: 0.9rem; }
#content > dl.item-sets a {
    display: inline-flex; align-items: center; justify-content: center; background: #ffffff;
    border: 1px solid rgba(146, 11, 11, 0.2); border-radius: 12px; padding: 10px 20px; color: #920b0b !important;
    font-size: 1.05rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#content > dl.item-sets a:hover {
    transform: translateY(-4px); box-shadow: 0 15px 25px rgba(146, 11, 11, 0.15); 
    border-color: rgba(146, 11, 11, 0.4); background: rgba(146, 11, 11, 0.02);
}

@media (max-width: 768px) {
    #content > dl:not(.item-sets), #content > dl.item-sets { padding: 20px; margin: 20px 10px; }
    #content > dl:not(.item-sets) .property { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
    #content > dl:not(.item-sets) dt { grid-column: 1; grid-row: auto; }
    #content > dl:not(.item-sets) dd { grid-column: 1; }
    #content > dl:not(.item-sets) .property::after { left: 0; }
    #content > dl:not(.item-sets) .property:hover::after { width: 100%; }
    #content > dl:not(.item-sets) dt, #content > dl.item-sets dt { font-size: 0.75rem; }
    #content > dl:not(.item-sets) .value-content { font-size: 0.95rem; }
    #content > dl.item-sets a { font-size: 0.95rem; padding: 8px 16px; }
}


/* ==========================================================================
   6. ПАГІНАЦІЯ (КНОПКА "НАСТУПНИЙ" НА ВНУТРІШНІХ СТОРІНКАХ)
   ========================================================================== */

/* Приховуємо пагінацію на головній сторінці, як ви просили */
.site-page-home .site-page-pagination {
    display: none !important;
}

/* Красивий дизайн кнопки "Наступний" для інших сторінок */
.site-page-pagination {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    background-color: transparent;
}

.site-page-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 14px 30px;
    background: linear-gradient(180deg, #920b0b 0%, #6f1b1b 100%); /* Фірмовий колір */
    color: #ffffff !important;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(146, 11, 11, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-page-pagination a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(146, 11, 11, 0.45);
    background: linear-gradient(180deg, #b31717 0%, #7e1f1f 100%);
}


/* ==========================================================================
   7. ФУТЕР (ПІДВАЛ З ОВАЛЬНИМИ КУТАМИ)
   ========================================================================== */

footer {
    background: linear-gradient(135deg, #471f1f 0%, #641e1e 100%); /* Преміальний графітовий фон */
    color: #ffffff;
    text-align: center;
    padding: 20px 20px;
    border-radius: 35px 35px 0 0; /* Красиві овальні кути зверху */
    margin-top: 40px; /* Відступ від контенту */
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1); /* Легка тінь зверху футера */
    position: relative;
    z-index: 10;
}

/* На головній сторінці прибираємо відступ, щоб футер ідеально стикався з контентом */
.site-page-home footer {
    margin-top: 0;
}


/* ==========================================================================
   8. ФОРМИ ЛОГІНУ ТА РЕЄСТРАЦІЇ
   ========================================================================== */
.block-login form, .block-register form {
  max-width: 400px; margin: 60px auto; padding: 30px 40px; background: #ffffff;
  border-radius: 12px; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; gap: 20px;
}
.block-login h1, .block-register h1 { text-align: center; font-weight: 600; font-size: 1.6em; margin-bottom: 10px; }
.block-login .field, .block-register .field { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.block-login .field-meta label, .block-register .field-meta label { flex: 1 1 35%; font-weight: 600; color: #333; font-size: 0.95em; text-align: right; }
.block-login .inputs input, .block-register .inputs input { flex: 1 1 60%; padding: 10px 12px; font-size: 1em; border: 1px solid #ccc; border-radius: 8px; transition: border-color 0.2s, box-shadow 0.2s; }
.block-login .inputs input:focus, .block-register .inputs input:focus { outline: none; border-color: #920b0b; box-shadow: 0 0 0 2px rgba(146, 11, 11, 0.25); }
.block-login input[type="submit"], .block-register button[type="submit"] { background: #920b0b; color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: 1em; cursor: pointer; transition: background 0.3s ease; }
.block-login input[type="submit"]:hover, .block-register button[type="submit"]:hover { background: #b31717; }
.block-login, .block-register { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.block-login .forgot-password { text-align: center; margin-top: -10px; font-size: 0.9em; }
.block-login .forgot-password a { color: #920b0b; text-decoration: none; }
.block-login .forgot-password a:hover { opacity: 0.8; }

.block-anonymous form {
  max-width: 500px; margin: 60px auto; padding: 40px 50px; background: #ffffff;
  border-radius: 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.block-anonymous h1 .title { display: block; text-align: center; font-weight: 700; font-size: 1.8rem; margin: 40px 0 20px; color: #222; }
.block-anonymous .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.block-anonymous label { font-weight: 600; font-size: 1rem; color: #333; }
.block-anonymous input[type="email"] { width: 100%; padding: 10px 14px; font-size: 1rem; border: 1px solid #ccc; border-radius: 8px; }
.block-anonymous input[type="email"]:focus { border-color: #920b0b; box-shadow: 0 0 0 3px rgba(146, 11, 11, 0.15); outline: none; }
.block-anonymous button.button { width: 100%; padding: 12px; background: #920b0b; color: #fff; border: none; border-radius: 8px; font-size: 1.05rem; cursor: pointer; font-weight: 600; }
.block-anonymous button.button:hover { background: #a41515; }

@media (max-width: 768px) {
  .block-login .field, .block-register .field { flex-direction: column; align-items: stretch; }
  .block-login .field-meta label, .block-register .field-meta label { text-align: left; flex: none; }
  .block-login .inputs input, .block-register .inputs input { width: 100%; }
}


/* ==========================================================================
   9. UNIVERSAL VIEWER
   ========================================================================== */
.mirador a[href*="projectmirador"], .mirador .mirador2 { display: none !important; }
.uv, .universal-viewer, .uv *, .universal-viewer * { box-sizing: border-box; }
.uv .mainPanel, .uv .centerPanel, .uv .content, .uv #content, .uv .openseadragon-container { position: relative; }
.uv .mainPanel, .uv .centerPanel, .uv .content { overflow: hidden !important; }
.uv .centerPanel { padding-left: 70px !important; padding-right: 70px !important; position: relative !important; }
.uv .paging.prev, .uv .paging.next, .uv .btn.paging { opacity: 1 !important; visibility: visible !important; z-index: 200 !important; }
.uv .paging.prev { margin-left: 12px !important; }
.uv .paging.next { margin-right: 12px !important; }
.uv .leftPanel { overflow-y: auto !important; overflow-x: hidden !important; }
.uv .headerPanel .rightOptions { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 6px; }
.uv .headerPanel .rightOptions .btn { white-space: nowrap; }

@media (max-width: 768px) {
    .uv .headerPanel .options { display: flex !important; flex-wrap: wrap !important; align-items: center; justify-content: space-between; gap: 8px; padding: 6px; }
    .uv .headerPanel .rightOptions { display: flex !important; flex-wrap: wrap !important; justify-content: center; align-items: center; width: 100%; gap: 6px; margin-top: 6px; }
    .uv .fullScreen.btn.imageBtn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 13px !important; padding: 6px 10px !important; }
    .uv .centerOptions { width: 100% !important; left: auto !important; display: flex !important; justify-content: center; flex-wrap: wrap; gap: 6px; }
    .uv .search { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; }
    .uv .search input { max-width: 90px; }
    .uv .paging.prev, .uv .paging.next { margin: 0 !important; }
    .uv .centerPanel { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 480px) {
    .uv .headerPanel { font-size: 13px; }
    .uv .headerPanel .btn { padding: 5px 8px !important; font-size: 12px !important; }
    .uv .fullScreen.btn.imageBtn { width: auto !important; min-width: unset !important; }
    .uv .search input { width: 70px !important; }
}


/* ==========================================================================
   10. КНОПКИ НАВІГАЦІЇ (ПОПЕРЕДНІЙ / НАСТУПНИЙ - РЕСУРС)
   ========================================================================== */
.block-previous-next {
    display: flex; justify-content: center; align-items: center; gap: 18px; margin: 40px auto 30px; padding: 10px 0; flex-wrap: wrap;
}
.block-previous-next .button {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 72px; height: 52px; padding: 0 22px; border-radius: 14px;
    background: linear-gradient(180deg, #920b0b 0%, #6f1b1b 100%);
    color: #fff !important; text-decoration: none; font-size: 0; font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease; overflow: hidden;
}
.block-previous-next .button[rel="prev"]::before { content: '←'; font-size: 22px; margin-right: 10px; line-height: 1; }
.block-previous-next .button[rel="prev"]::after { content: 'Попередній'; font-size: 15px; letter-spacing: .02em; }
.block-previous-next .button[rel="next"]::before { content: 'Наступний'; font-size: 15px; letter-spacing: .02em; margin-right: 10px; }
.block-previous-next .button[rel="next"]::after { content: '→'; font-size: 22px; line-height: 1; }
.block-previous-next .button:hover {
    transform: translateY(-2px); background: linear-gradient(180deg, #b31717 0%, #7e1f1f 100%);
    box-shadow: 0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
}
.block-previous-next .button:active { transform: translateY(0); }
.block-previous-next .button:focus-visible { outline: 3px solid rgba(146,11,11,.25); outline-offset: 3px; }

@media (max-width: 600px) {
    .block-previous-next { gap: 12px; }
    .block-previous-next .button { min-width: 58px; height: 46px; padding: 0 16px; border-radius: 12px; }
    .block-previous-next .button[rel="prev"]::after, .block-previous-next .button[rel="next"]::before { font-size: 13px; }
    .block-previous-next .button[rel="prev"]::before, .block-previous-next .button[rel="next"]::after { font-size: 18px; }
}
 /* --- 9. UNIVERSAL VIEWER --- */
/* --- Виправлення: клікабельна область стрілок збігається з іконкою --- */
.uv .paging.prev,
.uv .paging.next,
.uv button.paging.prev,
.uv button.paging.next {
    padding-bottom: 40px !important;
    padding-top: 10px !important;
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* На планшеті і мобільному — повертаємо padding для стрілок */
@media (max-width: 768px) {
    .uv .centerPanel {
        padding-left: 44px !important;
        padding-right: 44px !important;
    }
    .uv .paging.prev {
        margin-left: 4px !important;
    }
    .uv .paging.next {
        margin-right: 4px !important;
    }
}

@media (max-width: 480px) {
    .uv .centerPanel {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
}
/* --- Кнопка Full Screen: не тоне, завжди в рядку --- */
@media (max-width: 768px) {
    .uv .fullScreen.btn.imageBtn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 110px !important;
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
}

@media (max-width: 480px) {
    .uv .fullScreen.btn.imageBtn {
        max-width: 90px !important;
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* --- Закруглення кутів UV-контейнера --- */
.uv,
.uv-iiif-extension-host,
div.uv.universal-viewer.viewer > div.loaded {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Щоб тінь підкреслила закруглення */
div.uv.universal-viewer.viewer {
    border-radius: 16px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
}