/* ============================================
   АДАПТИВНЫЕ СТИЛИ
   ============================================ */

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
    .hero__title {
        font-size: 2rem;
    }
    
    .cta {
        grid-template-columns: 1fr;
    }
    
    .service-detail {
        grid-template-columns: 1fr;
    }
    
    /* Modal на планшетах */
    .modal__content {
        max-width: 450px;
        width: 85%;
        padding: var(--spacing-md);
        margin: 3% auto;
    }
    
    /* Hero--main на планшетах */
    .hero--main .hero__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .hero--main .hero__title {
        font-size: 2.5rem;
    }
    
    .hero--main .hero__benefits {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero--main .hero__form-card {
        position: relative;
        top: 0;
    }
}

/* Mobile (до 767px) - должен быть после всех других стилей */
/* Используем max-width: 767.98px чтобы избежать конфликтов с min-width: 768px */
@media screen and (max-width: 767.98px) {
    /* Header */
    .header__inner {
        height: 70px;
        padding: var(--spacing-xs) 0;
        justify-content: space-between;
    }
    
    .header {
        height: 70px;
    }
    
    /* Логотип слева */
    .header__logo {
        flex: 0 0 auto;
        order: 1;
    }
    
    /* Скрываем контакты на мобильных */
    .header__contact {
        display: none;
    }
    
    /* Смена языка по центру с отступом от логотипа */
    .header__lang-switcher {
        position: absolute;
        left: calc(50% + 80px); /* Смещаем вправо от центра с учетом ширины логотипа и отступа */
        transform: translateX(-50%);
        order: 2;
        margin: 0;
        flex-shrink: 0;
        z-index: 1000;
        display: flex !important;
    }
    
    /* Кнопка меню справа */
    .header__burger {
        display: flex;
        order: 3;
        flex: 0 0 auto;
        z-index: 1001;
    }
    
    /* Мобильное меню - базовые стили (скрыто по умолчанию) */
    .header__nav {
        display: none !important;
    }
    
    /* Мобильное меню - показываем когда активно - максимальная специфичность */
    .header__nav.active,
    nav.header__nav.active,
    #mainNav.active,
    nav#mainNav.active,
    nav.header__nav#mainNav.active,
    .header__nav#mainNav.active {
        display: flex !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        background: white !important;
        flex-direction: column !important;
        padding: var(--spacing-lg) !important;
        box-shadow: var(--shadow-lg) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        gap: 0 !important;
        align-items: stretch !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin: 0 !important;
    }
    
    /* Убеждаемся, что все ссылки видны в активном мобильном меню */
    .header__nav.active .nav-link {
        padding: var(--spacing-md) !important;
        border-bottom: 1px solid var(--color-border);
        font-size: 1.125rem;
        width: 100% !important;
        text-align: left;
        display: block !important;
        box-sizing: border-box;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        color: var(--color-text) !important;
    }
    
    .header__nav.active .nav-link:last-of-type:not(.nav-link--phone) {
        border-bottom: none;
    }
    
    /* Убеждаемся, что mobile-only элементы видны в активном меню */
    .header__nav.active .mobile-only {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Показываем кнопку звонка в активном мобильном меню */
    .header__nav.active .nav-link--phone {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        background: var(--color-primary);
        color: white !important;
        border-radius: var(--radius-md);
        margin-top: var(--spacing-md);
        text-align: center;
        border: none;
        padding: var(--spacing-md) var(--spacing-lg);
        font-weight: 600;
    }
    
    .header__nav.active .nav-link--phone:hover {
        background: var(--color-primary-dark);
        color: white !important;
    }
    
    .header__nav.active .nav-link--phone i {
        font-size: 1.125rem;
    }
    
    .breadcrumbs {
        padding: var(--spacing-xs) 0;
    }
    
    .pricing-section {
        scroll-margin-top: 100px;
    }
    
    .floating-buttons {
        bottom: 80px;
        right: 15px;
    }
    
    .floating-btn {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .floating-btn__tooltip {
        font-size: 0.75rem;
        padding: var(--spacing-xs);
    }
    
    .section__title {
        font-size: 1.5rem;
    }
    
    /* Cards */
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .countries-grid {
        grid-template-columns: 1fr;
    }
    
    /* Steps */
    .steps {
        grid-template-columns: 1fr;
    }
    
    /* CTA */
    .cta {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    /* Pricing */
    .filters {
        flex-direction: column;
    }
    
    .pricing-table {
        font-size: 0.875rem;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: var(--spacing-sm);
    }
    
    /* ============================================
       STICKY CTA - Выезжающая плашка на мобильных
       ============================================ */
    
    /* Плашка скрыта по умолчанию на мобильных */
    .sticky-cta {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--color-primary) !important;
        color: var(--color-text-on-green) !important;
        padding: var(--spacing-md) 0 !important;
        box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1) !important;
        z-index: 1001 !important;
        /* Скрываем плашку по умолчанию - выезжает снизу */
        transform: translateY(100%) !important;
        transition: transform 0.3s ease-in-out !important;
        /* Учитываем высоту кнопки и safe-area */
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    /* Когда плашка открыта */
    .sticky-cta.active {
        transform: translateY(0) !important;
        z-index: 1001 !important;
    }
    
    .sticky-cta__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .sticky-cta__inner > span {
        white-space: normal; /* Разрешаем перенос на мобильных */
        text-align: center;
        font-size: 0.875rem;
        line-height: 1.4;
    }
    
    .sticky-cta__actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-xs);
    }
    
    /* Кнопка для открытия/закрытия плашки - всегда видна на мобильных */
    .sticky-cta-toggle {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 40px;
        background: var(--color-primary) !important;
        color: white !important;
        border: none;
        border-radius: 20px 20px 0 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1000;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        /* Учитываем safe-area для iPhone с вырезом */
        padding-bottom: env(safe-area-inset-bottom, 0);
        height: calc(40px + env(safe-area-inset-bottom, 0));
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .sticky-cta-toggle:hover {
        background: var(--color-primary-dark, #0d4a1f) !important;
    }
    
    .sticky-cta-toggle i {
        transition: transform 0.3s ease;
        font-size: 1.25rem;
    }
    
    /* Поворачиваем стрелку когда плашка открыта */
    .sticky-cta.active ~ .sticky-cta-toggle i,
    .sticky-cta-toggle.active i {
        transform: rotate(180deg);
    }
    
    /* Добавляем отступ снизу для body, чтобы футер не перекрывался кнопкой */
    body {
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0)) !important;
        margin-bottom: 0 !important;
        overflow-x: hidden;
        background-color: var(--color-bg) !important;
    }
    
    /* Когда плашка открыта, увеличиваем отступ для футера */
    body.sticky-cta-open {
        padding-bottom: calc(250px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    html {
        overflow-x: hidden;
        height: 100%;
        background-color: var(--color-bg) !important;
    }
    
    main {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Footer */
    .footer {
        padding: var(--spacing-lg) 0 var(--spacing-md);
    }
    
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .footer__social {
        justify-content: center;
    }
    
    /* Hero */
    .hero {
        padding: var(--spacing-lg) 0;
    }
    
    .hero__title {
        font-size: 1.75rem;
    }
    
    .hero__subtitle {
        font-size: 1rem;
    }
    
    .hero__features {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    /* Новый hero--main на мобильных */
    .hero--main .hero__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .hero--main {
        padding: var(--spacing-md) 0; /* Уменьшен padding */
        max-height: none; /* Убираем ограничение на мобильных */
        overflow: visible; /* Разрешаем скролл на мобильных */
    }
    
    .hero--main .hero__grid {
        max-height: none; /* Убираем ограничение на мобильных */
        overflow: visible; /* Разрешаем скролл на мобильных */
    }
    
    .hero--main .hero__title {
        font-size: 1.5rem; /* Уменьшен размер */
        margin-bottom: var(--spacing-sm);
        line-height: 1.2;
    }
    
    .hero--main .hero__subtitle {
        font-size: 0.875rem; /* Уменьшен размер */
        max-width: 100%;
        margin-bottom: var(--spacing-sm);
        line-height: 1.4;
    }
    
    .hero--main .hero__benefits {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs); /* Уменьшен gap */
        margin-top: var(--spacing-sm);
    }
    
    .hero--main .hero__benefit {
        padding: var(--spacing-xs) var(--spacing-sm); /* Уменьшен padding */
    }
    
    .hero--main .hero__benefit-icon {
        width: 36px; /* Уменьшен размер */
        height: 36px;
        font-size: 1rem;
    }
    
    .hero--main .hero__benefit-text {
        font-size: 0.8125rem; /* Уменьшен размер */
    }
    
    .hero--main .hero__benefit-text strong {
        font-size: 0.875rem; /* Уменьшен размер */
    }
    
    .hero--main .hero__benefit-text span {
        font-size: 0.75rem; /* Уменьшен размер */
    }
    
    .hero--main .hero__form-card {
        position: relative;
        top: 0;
        padding: var(--spacing-md); /* Уменьшен padding */
        margin-top: var(--spacing-sm);
    }
    
    .hero--main .hero__form-title {
        font-size: 1.125rem; /* Уменьшен размер */
    }
    
    .hero--main .hero__form-subtitle {
        font-size: 0.8125rem; /* Уменьшен размер */
    }
    
    /* Новые маркетинговые элементы на мобильных */
    .hero__badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.875rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .hero__title-sub {
        font-size: 0.65em;
        margin-top: 0.25rem;
    }
    
    .hero__social-proof {
        padding: var(--spacing-sm);
        margin: var(--spacing-md) 0;
    }
    
    .hero__rating {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .hero__rating-stars {
        font-size: 1rem;
    }
    
    .hero__rating-text {
        font-size: 0.875rem;
    }
    
    .hero__trust-badges {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .hero__trust-badge {
        font-size: 0.8125rem;
        padding: 0.25rem 0.625rem;
    }
    
    .hero__phone-link {
        font-size: 0.9375rem;
        padding: var(--spacing-xs) var(--spacing-sm);
        width: 100%;
        justify-content: center;
    }
    
    .hero__form-badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.75rem;
    }
    
    .hero__form-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .hero__form-guarantee {
        font-size: 0.75rem;
        justify-content: center;
    }
    
    /* Forms */
    .form__row {
        grid-template-columns: 1fr;
    }
    
    .form--inline {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form--inline .form__group {
        min-width: 100%;
    }
    
    /* Sections */
    .section {
        padding: var(--spacing-lg) 0;
    }
    
    .section__title {
        font-size: 1.5rem;
    }
    
    /* Cards */
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .countries-grid {
        grid-template-columns: 1fr;
    }
    
    /* Steps */
    .steps {
        grid-template-columns: 1fr;
    }
    
    /* CTA */
    .cta {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    /* Pricing */
    .filters {
        flex-direction: column;
    }
    
    .pricing-table {
        font-size: 0.875rem;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: var(--spacing-sm);
    }
    
    .breadcrumbs {
        padding: var(--spacing-xs) 0;
    }
    
    .breadcrumbs__list {
        font-size: 0.8125rem;
    }
    
    .city-info__main {
        grid-template-columns: 1fr;
    }
    
    .attractions-grid {
        grid-template-columns: 1fr;
    }
    
    .cards-grid--why {
        grid-template-columns: 1fr;
    }

    .schedule-timetable,
    .schedule-preview {
        grid-template-columns: 1fr;
    }

    .schedule-days {
        grid-template-columns: 1fr;
    }

    .schedule-route {
        padding: var(--spacing-lg);
    }
}