/* --- Планшетні розміри (до 1024px) --- */
@media (max-width: 1024px) {
    :root {
        --header-height: 70px;
    }
    .container { padding: 0 15px; }
    .header-container {
        position: relative;
        justify-content: space-between; /* Розмістить елементи з order 0 і 1 по краях */
        display: flex; /* Переконаємось, що це flex */
        align-items: center; /* Вирівнювання по вертикалі */
    }
    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-right: 0;
    }
    .logo img {
        max-height: calc(var(--header-height) - 20px);
    }

    /* --- ЗМІНА: Бургер зліва --- */
    .burger-menu {
        display: block;
        order: 0; /* ЗМІНЕНО - Тепер зліва */
        width: 40px;
        height: 40px;
        /* margin-left: auto; */ /* ВИДАЛЕНО */
        margin-right: 15px; /* ДОДАНО - Невеликий відступ справа, якщо потрібно */
        padding: 10px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1012;
        box-sizing: content-box;
    }
    /* --- КІНЕЦЬ ЗМІНИ --- */

    .header-right-panel {
        /* Ця панель як контейнер залишається, але керуємо її дітьми */
        margin-left: 0;
        display: contents; /* Щоб панель "зникла", а її діти стали прямими дітьми .header-container у flex-розкладці */
        /* Або можна залишити display: block/flex і керувати порядком/розміщенням */
        /* Якщо display: contents не працює як очікувалось, спробуйте: */
        /* display: flex; */
        /* flex-grow: 1; /* Щоб займала доступне місце */
        /* justify-content: flex-end; /* Щоб притиснути вміст (контроли) вправо */
        /* order: 1; /* Щоб вся панель була справа від бургера */
    }

    /* --- ЗМІНА: Приховуємо все в панелі, крім НАВІГАЦІЇ та КОНТРОЛІВ --- */
    .header-right-panel > *:not(.main-nav):not(.header-controls) {
        display: none;
    }
    /* --- КІНЕЦЬ ЗМІНИ --- */

    /* --- ЗМІНА: Стилі для .header-controls у ШАПЦІ на мобільних --- */
    .header-container .header-controls { /* Більш специфічний селектор для шапки */
        display: flex; /* Показуємо контроли */
        align-items: center;
        order: 1; /* ЗМІНЕНО - Тепер справа від бургера */
        margin-left: auto; /* ДОДАНО - Надійно притискає до правого краю */
        /* Скидаємо стилі, які були для меню */
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        width: auto;
    }
    /* --- КІНЕЦЬ ЗМІНИ --- */

    /* Стилі для перемикача мов (залишаються, але тепер працюють в шапці) */
    .header-container .lang-switcher {
         display: flex;
         align-items: center;
         justify-content: flex-end; /* Вирівнюємо вправо всередині .header-controls */
         font-size: 0.9rem; /* Можна налаштувати розмір для моб. шапки */
    }


    /* --- Мобільна навігація (висувне меню) --- */
    .main-nav {
         position: fixed;
         top: 0;
         left: -100%;
         width: 50%;
         max-width: 300px;
         height: 100vh;
         background-color: var(--background-color);
         box-shadow: 2px 0 10px rgba(0,0,0,0.1);
         padding: 20px 25px;
         padding-top: calc(var(--header-height) + 10px);
         transition: left 0.4s ease-in-out;
         z-index: 1011;
         overflow-y: auto;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }
    .main-nav.active { left: 0; }
    .nav-list {
        display: block;
        padding-top: 20px;
        flex-grow: 1;
    }
    .main-nav li { margin: 0 0 1.5em 0; }
    .main-nav a {
        font-size: 1.1rem;
        padding: 8px 0;
        position: relative;
        z-index: 1;
        color: var(--primary-color);
    }
    .main-nav a::after { display: none; }
    .dropdown-menu { /* Стилі для випадаючого меню всередині мобільного */
        display: none;
        position: static;
        background: none;
        box-shadow: none;
        border: none;
        padding: 10px 0 0 15px;
        margin-top: 10px;
        min-width: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .dropdown-menu a {
        font-size: 1rem;
        padding: 6px 0;
        font-weight: 400;
        color: var(--dark-gray);
    }
    .dropdown-menu a:hover {
         background: none;
         color: var(--secondary-color);
     }
    .dropdown-arrow { transition: transform 0.3s ease; }
    .main-nav li.has-dropdown.open > a > .dropdown-arrow { transform: rotate(180deg); }
    .close-menu { /* Кнопка закриття всередині мобільного меню */
        display: block;
        position: absolute;
        top: calc(var(--header-height) / 2 - 1.25rem);
        right: 15px;
        background: none;
        border: none;
        font-size: 2.5rem;
        color: var(--primary-color);
        cursor: pointer;
        line-height: 1;
        padding: 5px;
        z-index: 1012;
    }

    /* --- ЗМІНА: Стилі для .header-controls В СЕРЕДИНІ висувного меню --- */
    /* Робимо селектор більш специфічним */
    .main-nav .header-controls {
        display: block; /* Контроли в меню займають всю ширину */
        order: 2; /* Внизу меню */
        margin: 20px 0 0 0; /* Відступ зверху */
        padding-top: 20px;
        border-top: 1px solid var(--medium-gray);
        width: 100%;
    }
    /* Стилі для перемикача мов В СЕРЕДИНІ висувного меню */
    .main-nav .lang-switcher {
        display: flex;
        justify-content: center; /* Центруємо мови в меню */
        font-size: 1rem;
    }
    /* --- КІНЕЦЬ ЗМІНИ --- */


    /* Промо секція */
    .promo-section {
        background-size: cover; /* або cover — залежить від бажаного ефекту */
        background-repeat: no-repeat;
        background-position: center;
    }
    .promo-container {
        flex-direction: column-reverse;
        text-align: center;
        gap: 30px;
    }
    .promo-text { max-width: 100%; }
    .promo-text h1 { font-size: 2.2rem; }
    .promo-image { width: 80%; max-width: 400px; margin: 0 auto; }
     /* Футер */
     .footer-content { grid-template-columns: 1fr; text-align: center; }
     .footer-section ul { display: inline-block; text-align: left; }
}

/* --- Мобільні розміри (до 767px) --- */
@media (max-width: 767px) {
    :root {
        --header-height: 65px;
    }
    body { font-size: 15px; }
    .section-padding { padding: 40px 0; }
    .section-title { font-size: 1.8rem; margin-bottom: 30px; }
    .page-title { font-size: 2rem; }
    .logo img { max-height: calc(var(--header-height) - 18px); }
    .main-nav {
        width: 50%;
        padding-top: calc(var(--header-height));
    }
    .close-menu { top: calc(var(--header-height) / 2 - 1.25rem); }
    /* Подальші стилі без змін */
    .promo-text h1 { font-size: 2rem; }
    .promo-text p { font-size: 1rem; }
    .promo-button { padding: 12px 30px; font-size: 1rem; }
    /* .service-links-grid { grid-template-columns: 1fr; gap: 20px; } */
    .service-link {
        padding: 25px 20px;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .service-link h2 { font-size: 1.1rem; margin-bottom: 0; flex-grow: 1; margin-right: 15px; }
    .service-link .arrow { position: static; opacity: 1; transform: none; font-size: 1.3rem; color: var(--secondary-color); }
    .service-link.disabled .arrow { display: none; }
    /* .advantages-grid { grid-template-columns: 1fr; } */
}

/* --- Дуже маленькі екрани (до 480px) --- */
@media (max-width: 480px) {
     .container { padding: 0 15px; }
     .promo-text h1 { font-size: 1.8rem; }
     .main-nav { width: 50%; }

    img, picture, figure img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
}