/*
Theme Name: Мукачівський ліцей №11 2.0
Description: Тема Мукачівського ліцею №11 з помаранчевими кольорами та шрифтом e-Ukraine.
Author: Григорій Астаф'єв
Version: 1.0
*/

/* =========================================
   1. ПІДКЛЮЧЕННЯ ШРИФТІВ
   ========================================= */
@font-face {
    font-family: 'e-Ukraine';
    src: url('assets/fonts/e-Ukraine-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('assets/fonts/e-Ukraine-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('assets/fonts/e-Ukraine-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'e-Ukraine-Logo';
    src: url('assets/fonts/e-UkraineHead-LOGO.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   2. ЗМІННІ ТА БАЗОВІ НАЛАШТУВАННЯ
   ========================================= */
:root {
    --primary-orange: #d35400;
    --glow-orange: #f39c12;
    --text-white: #ffffff;
    --font-main: 'e-Ukraine', sans-serif;
}

body {
    margin: 0;
    font-family: var(--font-main);
    background-color: #f4f5f7;
}

/* Кастомний скролбар (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #e56b09; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #cc5f08; }

/* Кастомний скролбар (Firefox) */
html {
    scrollbar-width: thin;
    scrollbar-color: #e56b09 #f1f1f1;
}

.icon-svg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
}

/* =========================================
   3. КОРОБКОВИЙ ДИЗАЙН (ІДЕАЛЬНЕ ВИРІВНЮВАННЯ)
   ========================================= */
.site-header,
.site-main,
.site-footer {
    width: 100% !important;
    max-width: 1350px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.site-main {
    background-color: #ffffff !important;
    padding: 40px 40px 60px 40px !important;
    box-shadow: 0 5px 30px rgba(0,0,0,0.03);
}

.site-header .header-container,
.site-footer .container {
    padding: 0 40px !important; 
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .site-main { padding: 20px 15px !important; }
    .site-header .header-container,
    .site-footer .container { padding: 0 15px !important; }
}

/* =========================================
   4. ХЕДЕР ТА БРЕНДИНГ
   ========================================= */
.site-header {
    background-color: #d35400;
    color: var(--text-white);
    position: relative !important;
    padding-top: 20px; /* Збільшили відступ зверху (було 20px) */
    padding-bottom: 5px; /* Невеликий відступ знизу для балансу */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    z-index: 1000;
}


.header-top-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    margin-bottom: 30px;
}

.hotline { display: flex; flex-direction: column; font-size: 20px; font-weight: 500; }
.hotline-title { font-size: 13px; font-weight: 400; opacity: 0.8; margin-bottom: 5px; }
.hotline a { color: var(--text-white); text-decoration: none; margin-bottom: 3px; }

.header-branding { display: flex; flex-direction: column; align-items: center; text-align: center; }
.site-logo img { max-height: 60px; width: auto; margin-bottom: 10px; }

.site-title-group { display: flex; flex-direction: column; align-items: center; }
.site-title { 
    font-family: 'e-Ukraine-Logo', sans-serif; 
    color: var(--text-white); 
    text-decoration: none; 
    font-size: 20px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 5px;
}
.site-description {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.5px;
    font-family: var(--font-main);
}

.top-right-actions { text-align: right; }

/* Контроли доступності в шапці */
.accessibility-wrapper { 
    display: flex; align-items: center; justify-content: flex-end; gap: 15px; 
}
.accessibility-link { 
    display: inline-flex; align-items: center; gap: 8px; color: var(--text-white); 
    text-decoration: none; font-size: 14px; opacity: 0.9; transition: opacity 0.3s; 
}
.accessibility-link:hover { opacity: 1; }

.btn-reset { background: transparent; border: none; font-family: inherit; cursor: pointer; padding: 0; }
.font-size-controls { display: none; align-items: center; margin-left: 15px; gap: 8px; }
.font-btn { 
    background: #ffffff; border: 2px solid #000000; color: #000000; 
    padding: 4px 10px; font-weight: bold; font-size: 16px; cursor: pointer; transition: all 0.2s ease;
}
.font-btn:hover { background: #000000; color: #ffffff; }

.header-bottom-bar {
    display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px;
}

/* Електронний кабінет ПК */
.cabinet-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-white);
    text-decoration: none;
    font-size: 14px;
    opacity: 0.9;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.cabinet-link:hover {
    opacity: 1;
    color: var(--glow-orange);
}

.desktop-cabinet {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}
.desktop-cabinet .acc-text {
    font-size: 14px;
}

.mobile-cabinet {
    display: none;
}

/* Блок доступності + кабінет (ПК) */
.desktop-acc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.accessibility-wrapper.desktop-acc {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px;
}

/* =========================================
   5. МЕНЮ ТА НАВІГАЦІЯ
   ========================================= */
.main-navigation ul.nav-list { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.main-navigation ul li a { color: var(--text-white); text-decoration: none; font-weight: 700; font-size: 15px; padding: 10px 0; display: block; transition: color 0.2s; }
.mobile-menu-toggle, .mobile-menu-close, .mobile-acc { display: none; }

/* Соцмережі і пошук */
.nav-right-actions { display: flex; align-items: center; gap: 25px; }
.social-links { display: flex; gap: 15px; }
.social-links a { color: var(--text-white); opacity: 0.8; transition: opacity 0.3s; }
.social-links a:hover { opacity: 1; }
.social-links .icon-svg { width: 20px; height: 20px; margin: 0; }

.search-toggle { 
    background: transparent; border: none; color: var(--text-white); 
    font-family: var(--font-main); cursor: pointer; font-size: 16px; font-weight: 500;
    display: flex; align-items: center; padding: 0;
}

/* --- ПК ВЕРСІЯ МЕНЮ (>992px) --- */
@media (min-width: 993px) {
    .main-navigation {
        display: flex !important; align-items: center; position: relative; width: 100%; overflow: hidden !important; position: static !important;
    }
    .nav-menu-wrapper {
        overflow-x: auto !important; position: static !important; white-space: nowrap; scroll-behavior: smooth;
        -ms-overflow-style: none; scrollbar-width: none; flex: 1;
    }
    .nav-menu-wrapper::-webkit-scrollbar { display: none; }
    
    .nav-menu-wrapper ul.nav-list {
        display: flex !important; flex-wrap: nowrap !important; gap: 30px !important; width: max-content !important;
    }
    .main-navigation ul.nav-list, .main-navigation ul.nav-list > li { position: static !important; }

    /* Мега-меню (випадаюче) - Оновлений світлий дизайн */
    .main-navigation ul ul.children, .main-navigation ul ul.sub-menu {
        position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important;
        background-color: #ffffff !important; /* Змінено на білий фон */
        padding: 30px 5% !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important; /* М'якша тінь для гармонії з сайтом */
        display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 20px 30px !important; box-sizing: border-box !important;
        visibility: hidden; opacity: 0; transform: translateY(15px); transition: all 0.3s ease;
        z-index: 9999 !important; border-top: 3px solid #d35400 !important; /* Помаранчева лінія-розділювач зверху */
    }

    .main-navigation ul li.mega-active > ul.children,
    .main-navigation ul li.mega-active > ul.sub-menu {
        visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important;
    }

    .main-navigation ul ul.children > li, .main-navigation ul ul.sub-menu > li {
        flex: 1 1 calc(25% - 30px) !important; min-width: 220px !important;
        list-style: none !important; /* Прибираємо стандартні маркери списку */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Жорстко прибираємо "цяточки", якщо тема додає їх через псевдоелементи */
    .main-navigation ul ul.children > li::before, 
    .main-navigation ul ul.sub-menu > li::before {
        content: none !important;
        display: none !important;
    }

    .main-navigation ul ul li a {
        color: #2c3e50 !important; /* Темно-синій/сірий колір тексту замість білого */
        padding: 12px 15px !important; font-weight: 500 !important; font-size: 15px !important;
        border-bottom: 1px solid #f1f2f6 !important; /* Ледве помітна лінія між пунктами */
        display: block !important; transition: all 0.2s ease !important;
        border-radius: 4px; /* Легке заокруглення */
    }
    
    .main-navigation ul ul li a:hover { 
        color: #d35400 !important; /* Помаранчевий при наведенні (в колір шапки) */
        padding-left: 20px !important; /* Ефект зсуву вправо */
        background-color: #fff8f3 !important; /* Дуже легкий помаранчевий відтінок фону при наведенні */
        border-bottom-color: transparent !important;
    }

    /* Стрілочки ПК */
    .main-navigation ul.nav-list > li.menu-item-has-children > a,
    .main-navigation ul.nav-list > li.page_item_has_children > a {
        display: inline-flex !important; align-items: center !important; gap: 8px !important;
    }
    .main-navigation ul.nav-list > li.menu-item-has-children > a::after,
    .main-navigation ul.nav-list > li.page_item_has_children > a::after {
        content: '\f078' !important; font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important;
        font-size: 10px !important; color: rgba(255, 255, 255, 0.7) !important; transition: transform 0.3s ease !important;
    }
    .main-navigation ul.nav-list > li:hover > a::after,
    .main-navigation ul.nav-list > li.mega-active > a::after {
        transform: rotate(180deg) !important; color: #ffffff !important;
    }

    /* Навігаційні стрілки скролу */
    .nav-arrow {
        background: transparent; border: none; color: #ffffff; font-size: 20px; cursor: pointer;
        padding: 0 15px; display: none; align-items: center; justify-content: center;
        z-index: 10; transition: opacity 0.3s ease; flex-shrink: 0;
    }
    .nav-arrow:hover { opacity: 0.6; }
}

/* --- МОБІЛЬНА ВЕРСІЯ ХЕДЕРУ ТА МЕНЮ (<=992px) --- */
@media (max-width: 992px) {
    .header-top-grid { display: flex; flex-direction: column; text-align: center; gap: 20px; position: relative; }
    .hotline { width: 100%; text-align: left; margin-bottom: 15px; }
    
    .header-container { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .site-logo { margin: 0 auto 15px auto !important; }
    .site-title, .site-description { width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
    .header-text-block { display: flex; flex-direction: column; align-items: center; }

    /* Центрування блоків у мобільній шапці */
    .top-right-actions { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 15px; }
    .header-bottom-bar { display: flex; flex-direction: column; align-items: center; width: 100%; padding-bottom: 20px; margin-top: 25px; }
    .nav-right-actions { display: flex !important; justify-content: center !important; align-items: center !important; width: 100%; gap: 25px; flex-wrap: wrap; margin-top: 15px; }
    .accessibility-wrapper.desktop-acc { display: flex !important; flex-direction: row !important; justify-content: center !important; width: 100%; }
    
    .desktop-cabinet { display: none !important; }
    .mobile-cabinet { display: inline-flex !important; color: var(--text-white); }
    .mobile-cabinet .icon-svg { width: 22px; height: 22px; margin: 0; }
    
    .nav-arrow { display: none !important; }

    .mobile-menu-toggle {
        display: inline-flex; align-items: center; gap: 10px; background: none; border: none; color: var(--text-white);
        font-size: 18px; font-weight: 700; font-family: var(--font-main); cursor: pointer;
        position: absolute; top: 0; right: 0; padding: 0;
    }

    /* Виїзне мобільне меню */
    .main-navigation {
        position: fixed !important; top: 0; right: 0; transform: translateX(100%); width: 100%; height: 100vh;
        background-color: #2a1100; z-index: 9999; padding: 80px 20px 40px 20px; transition: transform 0.4s ease;
        overflow-y: auto; box-sizing: border-box; display: block !important;
    }
    .main-navigation.active { transform: translateX(0); }

    .mobile-menu-close { display: block; position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 32px; cursor: pointer; padding: 10px; }

    .nav-menu-wrapper { overflow: visible !important; white-space: normal !important; width: 100% !important; }
    .nav-menu-wrapper ul.nav-list, .main-navigation ul.nav-list { display: flex !important; flex-direction: column !important; flex-wrap: wrap !important; width: 100% !important; gap: 0; }
    .main-navigation ul li { width: 100% !important; box-sizing: border-box !important; }

    .main-navigation ul li a { font-size: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05); width: 100%; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; }
    
    .main-navigation ul ul.children, .main-navigation ul ul.sub-menu { position: static; display: none; background: transparent; box-shadow: none; border: none; padding-left: 15px; visibility: visible; opacity: 1; transform: none; width: 100%; box-sizing: border-box; }
    .main-navigation ul ul li a { font-size: 16px; color: #cccccc !important; padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.05); }

    /* Стрілочки мобільного меню */
    .main-navigation ul li.menu-item-has-children > a, .main-navigation ul li.page_item_has_children > a {
        display: flex !important; justify-content: space-between !important; align-items: center !important; padding-right: 15px !important;
    }
    .main-navigation ul li.menu-item-has-children > a::after, .main-navigation ul li.page_item_has_children > a::after {
        content: '\f078' !important; font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important; font-size: 12px !important; transition: transform 0.3s ease !important; display: inline-block !important; margin-left: auto !important; margin-right: 0 !important;
    }
    .main-navigation li.mega-active > a::after, .main-navigation li.current-menu-ancestor > a::after, .main-navigation li.open > a::after { transform: rotate(180deg) !important; }

    .mobile-acc { display: flex; flex-direction: column; align-items: flex-start; padding-top: 25px; margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
    .mobile-acc .accessibility-link { font-size: 16px; padding: 5px 0; color: #cccccc; display: inline-flex !important; }
    .mobile-acc .font-size-controls { margin-top: 15px; }
}

@media (max-width: 480px) {
    .nav-right-actions { gap: 15px; }
    .accessibility-wrapper.desktop-acc { flex-direction: column !important; gap: 10px; }
}

/* --- ПАНЕЛЬ ПОШУКУ (ДРОПДАУН) --- */
.search-dropdown-panel {
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    background: #1e293b;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: all 0.3s ease;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255,255,255,0.05);
    font-family: 'e-Ukraine', -apple-system, sans-serif;
}

.search-dropdown-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.advanced-search-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 40px;
    position: relative;
    color: #fff;
    box-sizing: border-box;
}
.advanced-search-container * { box-sizing: border-box; }

.close-search {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 5px;
    transition: 0.2s;
}
.close-search:hover { color: #fff; transform: scale(1.1); }
.close-search svg { width: 24px; height: 24px; }

/* Вкладки (Tabs) - Стиль міськради */
.search-tabs {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.search-tab {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 15px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    transition: 0.3s;
    font-family: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 5px;
    text-decoration-color: rgba(255,255,255,0.4);
}
.search-tab:hover {
    color: #fff;
    text-decoration-color: #fff;
}
.search-tab.active {
    background: #FF6B08; 
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}
.tab-divider { color: #94a3b8; font-size: 14px; }

/* Форми */
.search-form-tab {
    display: none;
    animation: fadeInTab 0.3s ease;
}
.search-form-tab.active { display: block; }

/* Поля вводу */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}
.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
}
.advanced-search-container input, 
.advanced-search-container select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 4px; 
    border: 1px solid #fff;
    background: #fff;
    color: #0f172a;
    font-size: 15px;
    outline: none;
    transition: 0.2s;
    font-family: inherit;
    height: 46px; 
}
.advanced-search-container input:focus, 
.advanced-search-container select:focus {
    border-color: #FF6B08;
    box-shadow: 0 0 0 3px rgba(255, 107, 8, 0.25);
}

/* Сітка для документів */
.doc-search-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: end; 
}
@media (min-width: 768px) {
    .doc-search-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .doc-search-grid { grid-template-columns: repeat(3, 1fr); }
}

.date-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: end;
}

/* Кнопка пошуку */
.search-submit-btn {
    background: #FF6B08; 
    color: #fff;
    border: none;
    padding: 0 24px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.3s;
    font-family: inherit;
    height: 46px;
    width: 100%;
}
.search-submit-btn:hover { background: #E55A00; }
.search-submit-btn svg { width: 20px; height: 20px; }

/* Звичайний пошук - розміщення в рядок */
.simple-search-flex {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-direction: column;
}
.simple-search-flex .form-group { width: 100%; }

@media (min-width: 768px) {
    .simple-search-flex { flex-direction: row; }
    .simple-search-flex .form-group { flex-grow: 1; }
    .simple-search-flex .search-submit-btn { width: 250px; }
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .advanced-search-container { padding: 20px 15px 30px; }
    .search-tabs { gap: 8px; margin-bottom: 20px; }
    .search-tab { font-size: 13px; padding: 6px 12px; }
    .doc-search-grid { gap: 15px; }
}

/* =========================================
   6. ОСНОВНИЙ КОНТЕНТ (СІТКА, ПЛИТКИ)
   ========================================= */
.container { max-width: 1400px; margin: 40px auto; padding: 0 40px; }
.main-layout { display: grid; grid-template-columns: 2.5fr 1fr; gap: 40px; align-items: start; }

.section-title, .widget-title, .news-title {
    font-size: 24px; font-weight: 700; color: #333; margin: 0 0 25px 0; padding-bottom: 10px; border-bottom: 3px solid var(--glow-orange); display: inline-block;
}

/* Плитки */
.tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 60px; }
.tile-item { background: #ffffff; border-radius: 0; padding: 20px; display: flex; align-items: center; text-decoration: none; color: #333; box-shadow: 0 4px 15px rgba(0,0,0,0.04); transition: all 0.3s ease; border: 1px solid #eaeaea; }
.tile-item:hover { box-shadow: 0 8px 25px rgba(211, 84, 0, 0.12); transform: translateY(-4px); border-color: var(--glow-orange); }
.tile-icon { width: 45px; height: 45px; background: rgba(243, 156, 18, 0.1); color: var(--primary-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 15px; flex-shrink: 0; }
.tile-text { font-weight: 500; font-size: 15px; line-height: 1.4; }

/* БЛОК НОВИН ТА ОГОЛОШЕНЬ (ВКЛАДКИ) */
.news-announce-section { margin-bottom: 50px; }
.news-announce-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #eaeaea; margin-bottom: 25px; padding-bottom: 5px; }
.na-tabs { display: flex; gap: 30px; }
.na-tab { font-size: 22px; font-weight: 700; color: #95a5a6; margin: 0; padding-bottom: 10px; position: relative; cursor: pointer; transition: color 0.3s; }
.na-tab:hover { color: #2c3e50; }
.na-tab.active { color: #2c3e50; }
.na-tab.active::after { content: ''; position: absolute; bottom: -7px; left: 0; width: 100%; height: 4px; background-color: var(--primary-orange); }

.na-rss { color: #7f8c8d; text-decoration: none; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #eaeaea; border-radius: 4px; transition: all 0.3s; }
.na-rss:hover { color: var(--primary-orange); border-color: var(--primary-orange); }
.na-tab-pane { animation: fadeInTab 0.4s ease; }
.na-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.na-column { display: flex; flex-direction: column; gap: 20px; }

/* Ліва колонка - Новини */
.na-news-item { display: flex; gap: 20px; background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid #eaeaea; transition: all 0.3s ease; align-items: center; }
.na-news-item:hover { box-shadow: 0 8px 25px rgba(211, 84, 0, 0.12); border-color: var(--glow-orange); transform: translateY(-2px); }
.na-news-thumb { flex-shrink: 0; width: 140px; height: 100px; }
.na-news-thumb img, .na-news-thumb .no-photo-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.na-news-content { display: flex; flex-direction: column; justify-content: center; }
.na-news-title { font-size: 17px; font-weight: 700; margin: 0 0 8px 0; line-height: 1.4; }
.na-news-title a { color: #2c3e50; text-decoration: none; transition: color 0.2s; }
.na-news-title a:hover { color: var(--primary-orange); }
.na-news-date { font-size: 13px; color: #7f8c8d; }
.na-news-date i { color: var(--glow-orange); }

/* Права колонка - Оголошення */
.na-ann-item { padding-bottom: 15px; border-bottom: 1px solid #eaeaea; }
.na-ann-item:last-child { border-bottom: none; }
.na-ann-title { font-size: 16px; font-weight: 500; margin: 0 0 8px 0; line-height: 1.4; }
.na-ann-title a { color: #2c3e50; text-decoration: none; transition: color 0.2s; }
.na-ann-title a:hover { color: var(--primary-orange); }
.na-ann-date { font-size: 13px; color: #95a5a6; }
.na-ann-date i { color: var(--glow-orange); }
.na-announcements-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.large-ann .na-ann-title { font-size: 18px; font-weight: 600; }

@media (max-width: 992px) {
    .na-grid { grid-template-columns: 1fr; gap: 30px; }
    .na-announcements-list { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 768px) {
    .na-tab { font-size: 18px !important; }
    .na-tabs { gap: 20px !important; }
}
@media (max-width: 576px) {
    .na-news-item { flex-direction: column; align-items: stretch; }
    .na-news-thumb { width: 100%; height: 160px; }
}

/* Старий список новин (Контент) - на випадок використання в інших місцях */
.news-list { display: flex; flex-direction: column; gap: 20px; }
.news-item { display: flex; gap: 25px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid #eaeaea; transition: box-shadow 0.3s; }
.news-item:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.news-thumbnail { flex-shrink: 0; width: 240px; }
.news-thumbnail img { width: 100%; height: 160px; object-fit: cover; border-radius: 6px; }
.no-photo-placeholder { width: 100%; height: 160px; background-color: #f8f9fa; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #ccc; }
.news-content { display: flex; flex-direction: column; justify-content: center; }
.news-heading { margin: 0 0 10px 0; font-size: 20px; line-height: 1.3; }
.news-heading a { color: #2c3e50; text-decoration: none; transition: color 0.2s; }
.news-heading a:hover { color: var(--primary-orange); }
.news-date { font-size: 13px; color: #7f8c8d; margin-bottom: 10px; display: inline-block; }
.news-date i { color: var(--glow-orange); margin-right: 5px; }
.news-excerpt { font-size: 15px; color: #555; line-height: 1.5; }

.news-actions { margin-top: 30px; text-align: center; }
.btn-all-posts { display: inline-block; padding: 12px 30px; background-color: var(--primary-orange); color: #fff; text-decoration: none; font-weight: 700; border-radius: 30px; font-size: 16px; transition: all 0.3s ease; }
.btn-all-posts i { margin-left: 8px; }
.btn-all-posts:hover { background-color: var(--glow-orange); box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4); transform: translateY(-2px); }

/* Сайдбар */
.widget { background: #ffffff; border-radius: 0; padding: 25px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid #eaeaea; }
.director-widget { text-align: center; }
.director-link { display: block; text-decoration: none; transition: transform 0.3s ease; }
.director-link:hover { transform: translateY(-3px); }
.director-link:hover .director-name { color: var(--primary-orange); }

.director-photo img { 
    width: 160px; 
    height: auto; 
    border-radius: 0; 
    border: none; 
    padding: 0; 
    margin-bottom: 15px; 
    object-fit: contain;
}

.director-name { font-size: 18px; margin: 0 0 5px 0; color: #2c3e50; }
.director-title { font-size: 14px; color: #7f8c8d; }

.sidebar-nav { padding: 10px 25px; }
.sidebar-nav-item { display: flex; align-items: center; padding: 15px 0; color: #2c3e50; text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 1px solid #eaeaea; transition: color 0.2s; }
.sidebar-nav-item:last-child { border-bottom: none; }
.sidebar-nav-item:hover { color: var(--primary-orange); }
.nav-icon { width: 35px; height: 35px; background: #f8f9fa; color: var(--primary-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 16px; }

/* Важливі посилання */
.image-links-grid { display: flex; flex-direction: column; gap: 25px; align-items: center; }
.image-link { display: block; width: 100%; background-color: transparent !important; border: none !important; box-shadow: none !important; transition: transform 0.3s ease; padding: 0; text-align: center; }
.image-link img { display: block; max-width: 100%; height: 85px !important; width: auto !important; margin: 0 auto; object-fit: contain; padding: 0 !important; transition: opacity 0.3s, filter 0.3s; }
.image-link:hover { transform: translateY(-4px); box-shadow: none !important; border-color: transparent !important; }
.image-link:hover img { opacity: 0.9; filter: drop-shadow(0 6px 12px rgba(211, 84, 0, 0.25)); }

/* Адаптивність Контенту */
@media (max-width: 992px) {
    .container { padding: 0 20px; margin: 20px auto; }
    .main-layout { grid-template-columns: 1fr; }
    .sidebar-column { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .widget { margin-bottom: 0; }
    .important-links-widget { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .tiles-grid { grid-template-columns: 1fr; }
    .news-item { flex-direction: column; padding: 15px; gap: 15px; }
    .news-thumbnail { width: 100%; }
    .news-thumbnail img, .no-photo-placeholder { height: 200px; }
    .news-heading { font-size: 18px; }
    .sidebar-column { grid-template-columns: 1fr; }
}

/* =========================================
   7. СТОРІНКИ, ЗАПИСИ, 404, ПОШУК
   ========================================= */
.single-post-container, .page-container {
    max-width: 900px; margin: 40px auto 80px auto; background: #ffffff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid #eaeaea;
}
.breadcrumbs { font-size: 14px; color: #7f8c8d; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; }
.breadcrumbs a { color: var(--primary-orange); text-decoration: none; transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--glow-orange); text-decoration: underline; }
.breadcrumbs .separator { color: #bdc3c7; }
.breadcrumbs .current-page { color: #95a5a6; }

.post-header, .page-container .page-header { text-align: center; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #f0f0f0; }
.post-title, .page-container .page-title { font-size: 32px; color: #2c3e50; line-height: 1.3; margin: 0 0 15px 0; font-weight: 700; }
.post-meta { font-size: 15px; color: #7f8c8d; margin-bottom: 20px; }
.post-category { color: var(--primary-orange); text-decoration: none; }
.post-category:hover { text-decoration: underline; }
.post-tags { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.post-tag-pill { display: inline-block; padding: 6px 15px; border: 1px solid var(--primary-orange); color: var(--primary-orange); border-radius: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; text-decoration: none; letter-spacing: 0.5px; transition: all 0.3s ease; }
.post-tag-pill:hover { background-color: var(--primary-orange); color: #ffffff; }

.entry-content { font-size: 18px; line-height: 1.8; color: #333333; }
.entry-content p { margin-bottom: 25px; }
.entry-content h2, .entry-content h3 { color: #2c3e50; margin-top: 40px; margin-bottom: 20px; font-weight: 700; }
.entry-content h2 { font-size: 24px; }
.entry-content h3 { font-size: 20px; }
.entry-content img, .page-main-image img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; }
.wp-block-gallery { margin-top: 40px; margin-bottom: 40px; }
.wp-block-gallery .wp-block-image img { border-radius: 6px; transition: transform 0.3s ease; }
.wp-block-gallery .wp-block-image img:hover { transform: scale(1.02); }

/* ГОЛОВНЕ ФОТО ЗАПИСУ (МІНІАТЮРА) */
.post-main-image img {
    max-height: 450px !important; 
    width: auto !important;       
    max-width: 100% !important;   
    object-fit: contain;          
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
}

/* Всі новини (home.php) */
.all-news-container { max-width: 1200px; margin: 40px auto 80px auto; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; margin-bottom: 50px; }
.news-card { background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #eaeaea; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.news-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(211, 84, 0, 0.12); border-color: var(--glow-orange); }
.news-card-thumb img, .news-card-thumb .no-photo-placeholder { width: 100%; height: 220px; object-fit: cover; display: block; }
.news-card-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.news-card-title { font-size: 20px; margin: 0 0 15px 0; line-height: 1.3; }
.news-card-title a { color: #2c3e50; text-decoration: none; transition: color 0.2s; }
.news-card-title a:hover { color: var(--primary-orange); }
.news-card-excerpt { color: #555; font-size: 15px; line-height: 1.5; margin-bottom: 20px; flex-grow: 1; }
.read-more-link { color: var(--primary-orange); text-decoration: none; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s; }
.read-more-link:hover { color: var(--glow-orange); }

.pagination-wrapper { text-align: center; margin-top: 50px; }
.pagination-wrapper .page-numbers { display: inline-block; padding: 10px 18px; margin: 0 4px; background-color: #ffffff; border: 1px solid #eaeaea; color: #333333; text-decoration: none; font-weight: 600; border-radius: 4px; transition: all 0.2s; }
.pagination-wrapper .page-numbers:hover { background-color: #fdf3e9; border-color: var(--primary-orange); color: var(--primary-orange); }
.pagination-wrapper .page-numbers.current { background-color: var(--primary-orange); border-color: var(--primary-orange); color: #ffffff; }

/* 404 Помилка */
.error-404-container { display: flex; justify-content: center; align-items: center; min-height: 65vh; padding: 60px 20px; }
.error-404-content { max-width: 650px; width: 100%; background: #ffffff; padding: 60px 40px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); border: 1px solid #eaeaea; text-align: center; }
.error-code { font-size: 140px; font-weight: 900; color: var(--primary-orange); margin: 0; line-height: 1; text-shadow: 6px 6px 0px rgba(255, 122, 33, 0.15); }
.error-title { font-size: 32px; color: #2c3e50; margin: 20px 0 15px 0; font-weight: 700; }
.error-message { font-size: 18px; color: #7f8c8d; margin-bottom: 40px; line-height: 1.6; }
.search-form-404 { display: flex; gap: 10px; justify-content: center; margin-bottom: 40px; }
.search-field-404 { padding: 15px 20px; border: 2px solid #eaeaea; border-radius: 8px; width: 60%; font-size: 16px; outline: none; transition: border-color 0.3s; font-family: inherit; }
.search-field-404:focus { border-color: var(--primary-orange); }
.search-submit-404, .btn-return-home { padding: 15px 30px; font-weight: bold; font-size: 16px; border-radius: 8px; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border: none;}
.search-submit-404 { background-color: var(--primary-orange); color: white; }
.search-submit-404:hover { background-color: var(--glow-orange); transform: translateY(-2px); }
.btn-return-home { background-color: #2c3e50; color: #ffffff; }
.btn-return-home:hover { background-color: #1a252f; color: #ffffff; transform: translateY(-2px); }

/* Результати пошуку */
.search-results-container { max-width: 1000px; margin: 40px auto 80px auto; background: #ffffff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid #eaeaea; }
.search-info { font-size: 16px; color: #555555; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--primary-orange); }
.search-info strong { color: #2c3e50; }
.search-result-item { padding: 25px 0; border-bottom: 1px solid #f0f0f0; transition: background-color 0.3s ease; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background-color: #fafafa; border-radius: 8px; padding: 25px 15px; margin: 0 -15px; }
.search-result-title { font-size: 22px; margin: 0 0 10px 0; }
.search-result-title a { color: #2c3e50; text-decoration: none; transition: color 0.2s; }
.search-result-title a:hover { color: var(--primary-orange); }
.search-result-meta { font-size: 13px; color: #7f8c8d; margin-bottom: 15px; }
.search-result-meta i { color: var(--glow-orange); margin-right: 5px; }
.search-result-excerpt { font-size: 16px; line-height: 1.6; color: #555555; margin-bottom: 15px; }
.no-results-box { text-align: center; padding: 60px 20px; background-color: #f8f9fa; border-radius: 8px; border: 1px dashed #cccccc; }
.no-results-icon { font-size: 40px; color: #bdc3c7; margin-bottom: 15px; }
.no-results-box p { font-size: 16px; color: #7f8c8d; margin: 0; }

@media (max-width: 768px) {
    .single-post-container, .page-container, .search-results-container { margin: 20px auto; padding: 20px; border-radius: 0; border-left: none; border-right: none; }
    .post-title { font-size: 24px; }
    .entry-content { font-size: 16px; }
    .news-grid { grid-template-columns: 1fr; }
    .pagination-wrapper .page-numbers { padding: 8px 12px; margin: 0 2px; font-size: 14px; }
    .error-code { font-size: 100px; }
    .error-title { font-size: 24px; }
    .error-404-content { padding: 40px 20px; }
    .search-form-404 { flex-direction: column; }
    .search-field-404 { width: 100%; }
    .search-submit-404 { justify-content: center; }
    .search-result-item:hover { padding: 25px 0; margin: 0; background-color: transparent; }
}

/* =========================================
   СТИЛІ ДЛЯ КАРТОК ДОКУМЕНТІВ 
   ========================================= */
.doc-result-item {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.doc-result-item:hover {
    box-shadow: 0 8px 25px rgba(211, 84, 0, 0.12);
    border-color: var(--glow-orange);
    transform: translateY(-3px);
}
.doc-header-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px dashed #eaeaea;
    padding-bottom: 15px;
}
.doc-badge {
    background: rgba(243, 156, 18, 0.1);
    color: var(--primary-orange);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.doc-number {
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
}
.doc-date {
    font-size: 14px;
    color: #7f8c8d;
    margin-left: auto;
}
.doc-date i { color: var(--glow-orange); margin-right: 5px; }

.doc-title {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    line-height: 1.4;
}
.doc-keywords { font-size: 13px; color: #95a5a6; }
.doc-keywords strong { color: #7f8c8d; }

.doc-btn-wrap { margin-top: 5px; }

.doc-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 25px;
    background-color: var(--primary-orange);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 30px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.doc-btn-download:hover {
    background-color: var(--glow-orange);
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4);
    transform: translateY(-2px);
    color: #ffffff;
}

@media (max-width: 768px) {
    .doc-result-item { padding: 15px; }
    .doc-date { margin-left: 0; width: 100%; }
    .doc-btn-wrap { width: 100%; }
    .doc-btn-download { width: 100%; justify-content: center; text-align: center; }
    .doc-title, .doc-number { word-break: break-word; }
}

/* =========================================
   8. КОМЕНТАРІ ТА ЗВОРОТНІЙ ЗВ'ЯЗОК
   ========================================= */
.post-share-block { margin-top: 50px; padding-top: 30px; border-top: 1px solid #eaeaea; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.share-title { font-size: 16px; font-weight: 700; color: #2c3e50; text-transform: uppercase; letter-spacing: 0.5px; }
.share-buttons { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 6px; color: white !important; text-decoration: none !important; font-weight: 600; font-size: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.share-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.share-fb { background-color: #1877f2; }
.share-tg { background-color: #0088cc; }
.share-vb { background-color: #7360f2; }

#comments { margin-top: 50px; padding-top: 30px; border-top: 1px solid #eaeaea; }
.comments-title, #reply-title { font-size: 24px; font-weight: 700; color: #2c3e50; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-orange); display: inline-block; }
.comment-list, .commentlist { list-style: none !important; padding: 0; margin: 0 0 40px 0; }
.comment-list li, .commentlist li { margin-bottom: 25px; }
.comment-body { background: #fafafa; border: 1px solid #eaeaea; border-radius: 10px; padding: 25px; position: relative; transition: background 0.3s ease; }
.comment-body:hover { background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.comment-meta { margin-bottom: 15px; }
.comment-author { display: flex; align-items: center; gap: 15px; font-size: 16px; font-weight: 700; color: #2c3e50; }
.comment-author img.avatar { border-radius: 50%; width: 45px; height: 45px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.comment-author .fn { font-style: normal; }
.comment-author .fn a { color: #2c3e50; text-decoration: none; }
.comment-metadata { margin-top: 5px; margin-left: 60px; }
.comment-metadata a { color: #95a5a6; font-size: 13px; text-decoration: none; }
.comment-metadata a:hover { color: var(--primary-orange); }
.comment-content { margin-left: 60px; font-size: 15px; line-height: 1.6; color: #444; }
.comment-content p { margin-bottom: 10px; }
.reply { margin-left: 60px; margin-top: 15px; }
.reply a { background: rgba(255, 122, 33, 0.1); color: var(--primary-orange); padding: 6px 15px; border-radius: 20px; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease; }
.reply a:hover { background: var(--primary-orange); color: white; }
.comment-list .children { list-style: none !important; padding-left: 40px; margin-top: 20px; border-left: 2px solid #ff7a2133; }

#respond { background: #ffffff; padding: 30px; border-radius: 10px; border: 1px solid #eaeaea; box-shadow: 0 5px 20px rgba(0,0,0,0.02); }
#commentform { display: flex; flex-direction: column; gap: 20px; }
.comment-notes, .logged-in-as { color: #7f8c8d; font-size: 14px; margin-bottom: 10px; }
.logged-in-as a { color: var(--primary-orange); text-decoration: none; font-weight: 600; }
.logged-in-as a:hover { text-decoration: underline; }
.comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.comment-form-comment label, .comment-form-author label, .comment-form-email label, .comment-form-url label { font-weight: 600; color: #2c3e50; font-size: 14px; }
#commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"], #commentform textarea { width: 100%; padding: 15px; border: 1px solid #dcdcdc; border-radius: 8px; font-family: inherit; font-size: 15px; background: #fafafa; transition: border-color 0.3s, background 0.3s; box-sizing: border-box; }
#commentform input:focus, #commentform textarea:focus { border-color: var(--primary-orange); background: #ffffff; outline: none; }
.form-submit { margin: 0; }
#commentform .submit { background-color: var(--primary-orange); color: white; border: none; padding: 12px 35px; font-size: 16px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: background 0.3s, transform 0.2s; }
#commentform .submit:hover { background-color: var(--glow-orange); transform: translateY(-2px); }

/* Віджет Зворотнього зв'язку (Сайдбар) */
.feedback-widget { padding: 25px; }
.feedback-form { display: flex; flex-direction: column; gap: 15px; }
.feedback-form .form-group { display: flex; flex-direction: column; gap: 6px; }
.feedback-form label { 
    font-size: 14px; 
    font-weight: 600; 
    color: #2c3e50 !important; 
    opacity: 1 !important;     
    margin-left: 2px; 
    display: block;            
}
.feedback-form input, .feedback-form textarea { width: 100%; padding: 12px 15px; border: 1px solid #dcdcdc; border-radius: 8px; font-family: var(--font-main); font-size: 14px; background: #fafafa; transition: all 0.3s ease; box-sizing: border-box; resize: vertical; }
.feedback-form input:focus, .feedback-form textarea:focus { border-color: var(--primary-orange); background: #ffffff; outline: none; box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.1); }
.feedback-form .btn-submit { background-color: var(--primary-orange); color: #ffffff; border: none; padding: 14px 20px; border-radius: 8px; font-family: var(--font-main); font-weight: 700; font-size: 15px; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; margin-top: 10px; }
.feedback-form .btn-submit:hover { background-color: var(--glow-orange); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4); }

@media (max-width: 768px) {
    .comment-list .children { padding-left: 15px; }
    .comment-metadata, .comment-content, .reply { margin-left: 0; }
    .comment-author { flex-direction: column; align-items: flex-start; gap: 10px;}
    #respond { padding: 20px; }
}

/* =========================================
   9. ЧИСТА МЕДІАГАЛЕРЕЯ (БЕЗ КОНФЛІКТІВ)
   ========================================= */
.ml11-gallery-section {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #eaeaea; 
    width: 100%;
}

.ml11-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.ml11-gal-small-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Картки зображень */
.ml11-gal-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: #000;
    border-radius: 6px;
    aspect-ratio: 16 / 10;
    width: 100%;
}

.ml11-gal-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.4s ease;
    display: block;
}

.ml11-gal-card:hover img {
    transform: scale(1.05);
    opacity: 0.85;
}

/* Ефект наведення (лупа/камера) */
.ml11-gal-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0;
    transition: all 0.3s ease;
}

.ml11-gal-large .ml11-gal-overlay {
    width: 56px;
    height: 56px;
    font-size: 22px;
}

.ml11-gal-card:hover .ml11-gal-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Дата на фото */
.ml11-gal-date {
    position: absolute;
    bottom: 12px;
    left: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

.ml11-gal-large .ml11-gal-date {
    font-size: 14px;
    bottom: 16px;
    left: 16px;
}

/* Заголовки під фото */
.ml11-gal-title {
    margin: 12px 0 0 0;
    line-height: 1.3;
}

.ml11-gal-title a {
    text-decoration: none;
    color: #333333; 
    transition: color 0.2s ease;
}

.ml11-gal-title a:hover {
    color: #d35400; 
}

.ml11-gal-title.large {
    font-size: 18px;
    font-weight: 600;
}

.ml11-gal-title.small {
    font-size: 14px;
    font-weight: 500;
}

/* Адаптивність */
@media (max-width: 992px) {
    .ml11-gallery-grid { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
    .ml11-gal-small-grid { grid-template-columns: 1fr; }
}

/* =========================================
   10. ВІДЖЕТИ ТА РОБОЧИЙ ПЛАН
   ========================================= */

/* Таймлайн */
.events-timeline-widget { margin-top: 30px; }
.timeline-container { position: relative; padding-left: 35px; margin-top: 20px; }
.timeline-line { position: absolute; top: 5px; bottom: 25px; left: 15px; width: 2px; background-color: #eaeaea; z-index: 1; }
.timeline-item { position: relative; margin-bottom: 25px; display: flex; align-items: flex-start; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-icon { position: absolute; left: -35px; top: -2px; width: 32px; height: 32px; background-color: #ffffff; border: 2px solid var(--primary-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-orange); font-size: 14px; z-index: 2; transition: all 0.3s ease; }
.timeline-content { display: flex; flex-direction: column; padding-left: 10px; }
.timeline-date { font-size: 13px; font-weight: 600; color: #95a5a6; margin-bottom: 3px; }
.timeline-title { font-size: 16px; font-weight: 700; color: #2c3e50; text-decoration: none; line-height: 1.3; transition: color 0.2s ease; }
a.timeline-title:hover { color: var(--primary-orange); text-decoration: underline; }

.timeline-item.past .timeline-icon { border-color: #bdc3c7; color: #bdc3c7; background-color: #f8f9fa; }
.timeline-item.past .timeline-title { color: #7f8c8d; }
.timeline-item.current .timeline-icon { background-color: var(--primary-orange); color: #ffffff; box-shadow: 0 0 10px rgba(211, 84, 0, 0.4); }

/* Блок "Файл" у WordPress */
.wp-block-file { display: flex; align-items: center; justify-content: space-between; background-color: #f8f9fa; border: 1px solid #e0e0e0; border-left: 4px solid #e67e22; padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.wp-block-file a:not(.wp-block-file__button) { font-weight: bold; font-size: 16px; color: #2c3e50; text-decoration: none; transition: color 0.2s ease; }
.wp-block-file a:not(.wp-block-file__button):hover { color: #e67e22; }
.wp-block-file .wp-block-file__button { background-color: #e67e22; color: #ffffff !important; padding: 8px 16px; border-radius: 5px; font-size: 14px; font-weight: bold; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; }
.wp-block-file .wp-block-file__button:hover { background-color: #d35400; transform: translateY(-1px); }

/* Робочий План (Новий дизайн 3 колонки) */
.ml11-full-events-section { margin-top: 70px; width: 100%; clear: both; }
.events-header-wrap { margin-bottom: 20px; }

.ml11-wp-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
    overflow: hidden;
    margin-top: 35px;
    margin-bottom: 30px;
    font-family: var(--font-main);
}

.ml11-wp-col { padding: 30px; position: relative; }
.wp-main { border-right: 1px solid #eaeaea; background: #fdfdfd; }
.wp-past { border-right: 1px solid #eaeaea; }

.wp-header-main { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.wp-title { font-size: 26px; font-weight: 800; color: #111; margin: 0; }
.wp-clock { text-align: right; line-height: 1.1; }
.wp-city { display: block; font-size: 12px; color: #95a5a6; margin-bottom: 2px; }
.wp-time-live { font-size: 24px; font-weight: 700; color: #bdc3c7; }

.wp-header-nav { margin-bottom: 35px; font-size: 14px; font-weight: 700; color: var(--primary-orange, #d35400); }
.wp-header-nav.right { text-align: right; }
.nav-cycle { cursor: pointer; user-select: none; transition: opacity 0.2s; display: inline-block; padding: 5px 10px; margin: -5px -10px; border-radius: 4px; }
.nav-cycle:hover { background: rgba(211, 84, 0, 0.05); }
.nav-cycle.disabled { cursor: default; opacity: 0.4; background: transparent; }

.wp-date-heading { font-size: 15px; color: #111; text-transform: uppercase; font-weight: 700; margin-bottom: 25px; letter-spacing: 0.5px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.wp-badge { background: #27ae60; color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 12px; font-weight: 700; }

.wp-events-scrollable { max-height: 350px; overflow-y: auto; padding-right: 10px; }
.wp-events-scrollable::-webkit-scrollbar { width: 6px; }
.wp-events-scrollable::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.wp-events-scrollable::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

.wp-timeline-list { list-style: none; margin: 0; padding: 0; position: relative; }
.wp-timeline-list::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 45px; width: 1px; background: #eaeaea; }

.wp-item { display: flex; position: relative; margin-bottom: 30px; align-items: flex-start; }
.wp-item:last-child { margin-bottom: 10px; }
.wp-item-time { width: 40px; font-size: 13px; font-weight: 700; color: #111; padding-top: 2px; flex-shrink: 0; }

.wp-item-dot { width: 11px; height: 11px; border-radius: 50%; margin-left: 5px; margin-right: 15px; margin-top: 5px; flex-shrink: 0; position: relative; z-index: 2; background: #fff; }
.dot-orange { background: var(--primary-orange, #d35400); }
.dot-orange.hollow { background: #fff; border: 2px solid var(--primary-orange, #d35400); }
.dot-gray { background: #bdc3c7; }
.dot-orange.active-glow { background: #e67e22; box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.25); }

.wp-item-content { font-size: 14px; line-height: 1.5; font-weight: 600; }
.wp-item-content a { color: #2c3e50; text-decoration: none; transition: color 0.2s; }
.wp-item-content a:hover { color: var(--primary-orange, #d35400); }
.wp-empty-state { padding: 40px 20px; text-align: left; }

@media (max-width: 992px) {
    .ml11-wp-container { grid-template-columns: 1fr; }
    .wp-main, .wp-past { border-right: none; border-bottom: 1px solid #eaeaea; }
}

/* =========================================
   11. ФУТЕР
   ========================================= */
.site-footer {
    background-color: #2a1100;
    color: #e0e0e0;
    padding: 40px 0;
    margin-top: 60px;
    font-size: 14px;
}

.footer-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.sitemap-toggle { background: transparent; border: none; color: #ffffff; font-size: 18px; font-weight: 700; font-family: var(--font-main); cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 20px; }
.sitemap-content { display: none; padding: 20px 0 30px 0; }
.sitemap-content.active { display: block; animation: fadeIn 0.4s ease; }

.sitemap-list, .sitemap-content .menu > ul { column-count: 3; column-gap: 50px; list-style: none; padding: 0; margin: 0; }
.sitemap-list > li, .sitemap-content .menu > ul > li { break-inside: avoid; margin-bottom: 20px; }
.sitemap-list a, .sitemap-content .menu a { color: #ffffff; text-decoration: none; transition: color 0.2s; }
.sitemap-list > li > a, .sitemap-content .menu > ul > li > a { font-weight: 700; font-size: 16px; display: block; margin-bottom: 12px; }
.sitemap-list ul, .sitemap-content .menu ul ul { list-style: none; border-left: 1px solid rgba(255,255,255,0.2); padding-left: 15px; margin-left: 5px; }
.sitemap-list ul li, .sitemap-content .menu ul ul li { margin-bottom: 10px; }
.sitemap-list ul a, .sitemap-content .menu ul ul a { font-size: 14px; font-weight: 400; color: #cccccc; }
.sitemap-content a:hover { color: var(--glow-orange); }

.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 30px 0; }
.footer-main-info { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.brand-col { display: flex; align-items: center; gap: 20px; flex: 1; }
.footer-logo img { width: 50px; height: auto; }
.brand-text h4 { font-family: 'e-Ukraine-Logo', sans-serif; color: #ffffff; margin: 0 0 5px 0; font-size: 15px !important; text-transform: uppercase; }
.brand-text p { margin: 0; color: #aaaaaa; line-height: 1.4; }

.contact-col { display: flex; gap: 40px; }
.contact-block { display: flex; flex-direction: column; }
.contact-label { font-size: 12px; color: #aaaaaa; margin-bottom: 5px; }
.contact-block a { color: #ffffff; text-decoration: none; font-weight: 500; font-size: 15px; transition: color 0.2s;}
.contact-block a:hover { color: var(--glow-orange); text-decoration: underline; }

.footer-bottom-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
.ownership { display: flex; align-items: center; gap: 15px; color: #cccccc;}
.ownership-icon { font-size: 24px; color: rgba(255,255,255,0.2); }
.footer-socials { display: flex; align-items: center; gap: 15px; }
.footer-socials a { color: #aaaaaa; font-size: 16px; transition: color 0.2s; }
.footer-socials a:hover { color: #ffffff; }

.notices-row { border-top: 1px solid rgba(255,255,255,0.05); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; }
.last-row { padding-bottom: 0; }
.notice-block { display: flex; align-items: center; gap: 15px; }
.notice-block p { margin: 0; color: #aaaaaa; }
.notice-block a { color: #ffffff; text-decoration: underline; }
.notice-block a:hover { color: var(--glow-orange); }
.beta-badge { background-color: #c0392b; color: white; padding: 3px 8px; font-weight: bold; font-size: 12px; border-radius: 3px; }
.cc-icon { font-size: 30px; color: #ffffff; }
.developer-info { color: #aaaaaa; text-align: right; }

/* Додаткове меню та графік у футері */
.footer-extra-content { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.footer-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.footer-menu-col h5 { color: #ffffff; font-size: 16px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-menu-col ul { list-style: none; padding: 0; margin: 0; }
.footer-menu-col ul li { margin-bottom: 12px; }
.footer-menu-col ul li a { color: #cccccc; text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.footer-menu-col ul li a:hover { color: var(--glow-orange); }

.schedule-info p { color: #cccccc; margin-bottom: 8px; font-size: 14px; }
.schedule-status { margin-top: 15px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px !important; background: rgba(255, 255, 255, 0.05); padding: 5px 12px; border-radius: 20px; }
.schedule-status .dot { width: 8px; height: 8px; background-color: #e74c3c; border-radius: 50%; display: inline-block; }

.scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background-color: var(--primary-orange); color: white; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
.scroll-to-top.show { opacity: 1; visibility: visible; }
.scroll-to-top:hover { background-color: var(--glow-orange); transform: translateY(-5px); }

/* Адаптивність Футера */
@media (max-width: 992px) {
    .sitemap-list, .sitemap-content .menu > ul { column-count: 2; }
    .footer-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

@media (max-width: 768px) {
    .footer-container { padding: 0 20px; }
    .sitemap-list, .sitemap-content .menu > ul { column-count: 1; }
    
    .footer-main-info { flex-direction: column !important; align-items: center !important; text-align: center !important; }
    .brand-col { flex-direction: column !important; gap: 15px !important; }
    
    .contact-col { width: 100%; justify-content: center !important; text-align: center !important; gap: 20px !important; flex-wrap: wrap; }
    .contact-block { align-items: center !important; }
    
    .footer-menu-grid { grid-template-columns: 1fr !important; text-align: center !important; }
    .footer-menu-col ul { display: flex; flex-direction: column; align-items: center; }
    .footer-menu-col h5::after { content: ''; display: block; width: 40px; height: 2px; background: var(--primary-orange); margin: 10px auto 0; }
    .schedule-status { justify-content: center; }

    .footer-bottom-row, .notices-row.last-row { flex-direction: column; align-items: center; gap: 15px; }
    .footer-socials { justify-content: center !important; margin: 20px 0 !important; }
    
    .notices-row { justify-content: center !important; text-align: center !important; flex-direction: column; }
    .notice-block { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
    .cc-block { text-align: center !important; }
    
    .developer-info { text-align: center; margin-top: 10px; }
    .scroll-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 16px; }
}

/* =========================================
   12. РЕЖИМ ДОСТУПНОСТІ (СЛАБОЗОРІ)
   ========================================= */
body.accessibility-mode {
    background-color: #ffffff !important;
    color: #000000 !important;
    filter: grayscale(100%) contrast(120%) !important;
}

body.accessibility-mode .site-header, body.accessibility-mode .site-footer { background: #ffffff !important; color: #000000 !important; border-bottom: 2px solid #000000; }
body.accessibility-mode .site-footer { border-top: 2px solid #000000; border-bottom: none; }
body.accessibility-mode .site-title, body.accessibility-mode .site-description, body.accessibility-mode .hotline a, body.accessibility-mode .accessibility-link, body.accessibility-mode .main-navigation ul li a, body.accessibility-mode .search-toggle, body.accessibility-mode .mobile-menu-toggle, body.accessibility-mode .brand-text h4, body.accessibility-mode .contact-block a, body.accessibility-mode .sitemap-toggle, body.accessibility-mode .notice-block p, body.accessibility-mode .notice-block a { color: #000000 !important; }

body.accessibility-mode .tile-item, body.accessibility-mode .widget, body.accessibility-mode .news-card, body.accessibility-mode .single-post-container, body.accessibility-mode .page-container { background: #ffffff !important; border: 2px solid #000000 !important; box-shadow: none !important; }
body.accessibility-mode .tile-icon, body.accessibility-mode .nav-icon { background: #f0f0f0 !important; color: #000000 !important; }

body.accessibility-mode .btn-all-posts, body.accessibility-mode .read-more-link, body.accessibility-mode .post-tag-pill { background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; text-decoration: underline !important; }
body.accessibility-mode .main-navigation ul ul.children, body.accessibility-mode .main-navigation ul ul.sub-menu { background-color: #ffffff !important; border: 2px solid #000000 !important; }
body.accessibility-mode .main-navigation ul ul li a { color: #000000 !important; }

body.accessibility-mode .timeline-line { background-color: #000000; }
body.accessibility-mode .timeline-icon { border-color: #000000 !important; color: #000000 !important; background-color: #ffffff !important; }
body.accessibility-mode .timeline-title { color: #000000 !important; text-decoration: underline; }

body.accessibility-mode .feedback-form input, body.accessibility-mode .feedback-form textarea { background: #ffffff !important; border: 2px solid #000000 !important; color: #000000 !important; }
body.accessibility-mode .feedback-form .btn-submit { background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; }

body.accessibility-mode .cabinet-link { color: #000000 !important; }
body.accessibility-mode .desktop-cabinet { border-left-color: #000000 !important; }

/* Виправлення мобільного меню для доступності */
body.accessibility-mode .main-navigation { background-color: #ffffff !important; border-left: 4px solid #000000 !important; }
body.accessibility-mode .mobile-menu-close { color: #000000 !important; }
body.accessibility-mode .main-navigation ul li a { color: #000000 !important; border-bottom: 2px solid #000000 !important; }
body.accessibility-mode .main-navigation ul li.menu-item-has-children > a::after, 
body.accessibility-mode .main-navigation ul li.page_item_has_children > a::after { color: #000000 !important; }

body.accessibility-mode.large-text { zoom: 1.2; }
body.accessibility-mode.extra-large-text { zoom: 1.4; }

/* =========================================
   13. АВТОМАТИЧНИЙ СЛАЙДЕР ГАЛЕРЕЙ ТА ФОТО
   ========================================= */
.custom-gallery-slider {
    position: relative;
    margin-bottom: 30px;
    width: 100%;
}

.gallery-main-swiper { 
    margin-bottom: 15px; 
    border-radius: 12px;
    background-color: #f8f9fa;
    overflow: hidden;
}

.gallery-main-swiper .swiper-slide { 
    height: 500px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-sizing: border-box;
    padding: 10px;
}

.gallery-main-swiper .swiper-slide img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.gallery-thumb-swiper {
    padding: 10px 0;
    box-sizing: border-box;
}

.gallery-thumb-swiper .swiper-slide { 
    height: 100px;
    opacity: 0.5; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    border-radius: 8px; 
    overflow: hidden; 
    box-sizing: border-box; 
    border: 2px solid transparent;
}

.gallery-thumb-swiper .swiper-slide:hover { opacity: 0.8; }
.gallery-thumb-swiper .swiper-slide-thumb-active { opacity: 1; border-color: var(--primary-orange, #ff6b00); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.gallery-thumb-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.custom-gallery-slider .swiper-button-next, 
.custom-gallery-slider .swiper-button-prev { 
    color: var(--primary-orange, #ff6b00) !important; 
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
    width: 44px !important; 
    height: 44px !important; 
    border-radius: 50%; 
    transition: all 0.3s ease;
    z-index: 10;
}

.custom-gallery-slider .swiper-button-next:hover, 
.custom-gallery-slider .swiper-button-prev:hover {
    background-color: var(--primary-orange, #ff6b00); 
    color: #ffffff !important;
    transform: scale(1.1);
}

.custom-gallery-slider .swiper-button-next::after, 
.custom-gallery-slider .swiper-button-prev::after {
    font-size: 16px !important; 
    font-weight: 900;
}

@media (max-width: 768px) {
    .gallery-main-swiper .swiper-slide { height: 300px; }
    .gallery-thumb-swiper .swiper-slide { height: 60px; }
    .custom-gallery-slider .swiper-button-next, 
    .custom-gallery-slider .swiper-button-prev { width: 36px !important; height: 36px !important; }
    .custom-gallery-slider .swiper-button-next::after, 
    .custom-gallery-slider .swiper-button-prev::after { font-size: 14px !important; }
}

/* =========================================
   14. ІНШІ КОМПОНЕНТИ (ПАРОЛЬ, AJAX, ТОЩО)
   ========================================= */

/* ФОРМА ВВЕДЕННЯ ПАРОЛЯ (ЗАХИЩЕНА СТОРІНКА) */
.custom-password-container { display: flex; justify-content: center; align-items: center; padding: 60px 20px; font-family: var(--font-main, 'e-Ukraine', sans-serif); width: 100%; }
.custom-password-card { background: #ffffff; border: 1px solid #eaeaea; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); padding: 40px; max-width: 450px; width: 100%; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.custom-password-card:hover { box-shadow: 0 15px 50px rgba(211, 84, 0, 0.08); transform: translateY(-2px); }
.pw-icon { font-size: 45px; color: var(--primary-orange, #d35400); margin-bottom: 20px; opacity: 0.9; }
.pw-title { font-size: 24px; font-weight: 700; color: #2c3e50; margin: 0 0 10px 0; }
.pw-desc { font-size: 15px; color: #7f8c8d; margin: 0 0 30px 0; line-height: 1.5; }
.pw-input-group { display: flex; flex-direction: column; gap: 15px; }
.pw-input-group input[type="password"] { width: 100%; padding: 16px 20px; border: 2px solid #eaeaea; border-radius: 8px; font-family: inherit; font-size: 16px; outline: none; transition: all 0.3s ease; box-sizing: border-box; text-align: center; background: #fafafa; }
.pw-input-group input[type="password"]:focus { border-color: var(--primary-orange, #d35400); background: #ffffff; box-shadow: 0 0 0 4px rgba(211, 84, 0, 0.1); }
.pw-submit { background-color: var(--primary-orange, #d35400); color: #ffffff; border: none; padding: 16px 25px; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 16px; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; }
.pw-submit:hover { background-color: var(--glow-orange, #f39c12); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(211, 84, 0, 0.25); }

@media (max-width: 480px) {
    .custom-password-card { padding: 30px 20px; }
    .pw-icon { font-size: 35px; }
    .pw-title { font-size: 20px; }
}

/* ЕКРАН ДИНАМІЧНОГО ЗАВАНТАЖЕННЯ (AJAX) - ТОНКА СМУЖКА ЗВЕРХУ */
.preloader-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 3px; /* Товщина смужки */
    background-color: transparent; /* Прозорий фон контейнера */
    z-index: 99999; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
}

/* Показуємо смужку, коли додається клас active */
.preloader-overlay.active { 
    opacity: 1; 
    visibility: visible; 
}

/* Анімація самої бігучої лінії */
.preloader-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #d35400; /* Колір лінії (взяв помаранчевий з вашого старого коду) */
    box-shadow: 0 0 10px rgba(211, 84, 0, 0.5); /* Легке світіння навколо лінії */
    animation: loadingBar 1.5s infinite ease-in-out;
}

@keyframes loadingBar {
    0% {
        left: -100%;
        width: 100%;
    }
    50% {
        left: 20%;
        width: 10%; /* Смужка стискається, створюючи ефект швидкості */
    }
    100% {
        left: 100%;
        width: 100%;
    }
}