/**
 * Дополнительные стили для модифицированных цен
 * Основные стили применяются через inline JS
 */

/* Контейнер модифицированной цены */
[data-price-modified="true"] {
    /* Стили применяются inline через JS */
}

/* Анимация появления скидки */
@keyframes discountAppear {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Дополнительные стили для совместимости с темой */
.hotelhack-discount-badge {
    animation: discountAppear 0.3s ease-out;
}

/* Fix: Sticky footer — футер был посередине страницы на десктопе.
   Причина: Elementor Theme Builder ставит height:400px на content-area,
   а body не имеет flex layout — футер не прижимается к низу.
   Решение: flex column на body + flex-grow на main. */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

main#content {
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
}

.elementor-theme-builder-content-area {
    height: auto !important;
    min-height: 400px;
}

/* Футер должен быть прижат к низу, не фиксированным */
.elementor-location-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

/* Хедер не должен расти */
.elementor-location-header {
    flex-shrink: 0 !important;
}

/* Fix: Sletat результаты поиска рендерятся как position:fixed внутри Shadow DOM.
   Футер (за пределами Shadow DOM) рисуется поверх, т.к. стоит после main в DOM.
   Решение: поднять z-index Shadow host, чтобы его fixed дети были выше футера. */
.SLT-module6 {
    position: relative;
    z-index: 100;
}

/* Футер не должен перекрывать fixed-popup результатов Sletat */
.elementor-location-footer {
    z-index: 50 !important;
}

/* Хедер выше всех */
.elementor-location-header {
    z-index: 200 !important;
}

/* Скрыть текст-заглушку "Загрузка модуля..." в контейнерах Sletat модулей.
   Модуль создаёт iframe внутри div, но текстовый узел-заглушка остаётся видимым. */
#sletat-frame-hot {
    font-size: 0 !important;
    line-height: 0 !important;
}
#sletat-frame-hot iframe {
    font-size: 16px !important;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 767px) {

    /* 1. Запретить горизонтальный скролл на всех страницах */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* 2. Контент не должен вылезать за экран */
    main#content,
    .elementor-theme-builder-content-area,
    .elementor-location-header,
    .elementor-location-footer {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* 3. Все iframe (Sletat виджеты) — вписывать в ширину экрана.
       Sletat SDK ставит inline style min-width:450px !important —
       переопределяем через более специфичный селектор. */
    iframe {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    iframe.sletat-frame {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 4. Контейнеры виджетов — вписывать в экран */
    .elementor-widget-container {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* 5. Dropdown навигационное меню.
       JS (MutationObserver) — основная защита от Elementor inline !important.
       CSS ниже — baseline на случай если JS не загрузился. */
    .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        display: none !important;
    }
    .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        display: block !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        z-index: 9999 !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e0e0e0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Пункты меню видимы */
    .elementor-nav-menu--dropdown .menu-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Стрелка подменю */
    .hh-submenu-arrow {
        float: right;
        font-size: 10px;
        line-height: 1.6;
        transition: transform 0.2s;
    }

    /* Подпункты с отступом */
    .elementor-nav-menu--dropdown .sub-menu .menu-item {
        padding-left: 24px !important;
    }

    /* 6. Иконки в хедере — увеличить до 20px, зона тапа через padding.
       Иконки в одну строку: уменьшаем gap между ними. */
    .elementor-location-header .elementor-icon {
        font-size: 20px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .elementor-location-header .elementor-icon svg {
        height: 20px !important;
        width: 20px !important;
    }
    /* Контейнер иконок — меньше gap чтобы уместить в одну строку */
    .elementor-location-header .e-con {
        gap: 4px !important;
    }
    /* Контейнер с иконками — не переносить на новую строку */
    .elementor-location-header .elementor-element-0000abd {
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }
    /* Иконки-обёртки — компактнее */
    .elementor-location-header .elementor-icon-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 7. Гамбургер-меню — удобная зона тапа */
    .elementor-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* 8. Кнопки — минимальная зона тапа */
    .elementor-button {
        min-height: 44px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* 9. Изображения не вылезают за контейнер */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 10. Таблицы — горизонтальный скролл внутри контейнера */
    table {
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }

    /* 11. Elementor Tabs (e-n-tabs) — вертикальный стек на мобильном.
       3 вкладки подписок ~540px не влезают в 390px экран.
       На мобильном — кнопки в столбик на всю ширину. */
    .e-n-tabs-heading {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    .e-n-tab-title {
        padding: 12px 16px !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
        white-space: normal !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* 12. Elementor sections / containers — не вылезать за экран */
    .elementor-section,
    .elementor-container,
    .e-con {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}