/* Mobile V2 - Новая чистая мобильная версия */
/* Только для мобильных устройств, десктоп версия не затрагивается */

/* ============================= */
/* MOBILE (≤768px) */
/* ============================= */
@media (max-width: 768px) {
    
    /* Fix global container width for mobile */
    body, html {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .container, .luxury-container, .site-main {
        max-width: none !important;
        width: 100% !important;
        padding: 0 5px !important;
        margin: 0 !important;
    }
    
    /* Special case for hero section - full width background */
    .hero-content-block {
        padding: 18px 0px !important;
        /* margin-top: 70px; */
        /* margin-left: -16px;
        margin-right: -16px; */
        /* padding-left: 16px;
        padding-right: 16px; */
    }
    
    /* Mobile Header V2 - полоска с логотипом и меню */
    .mobile-header-v2 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid #f0f0f0;
        height: 44px;
        display: block !important;
    }
    
    .mobile-header-container-v2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 15px;
        height: 44px;
    }
    
    .mobile-header-text {
        flex: 1;
        text-align: center;
    }
    
    .mobile-logo-v2 {
        display: flex-end;
        align-items: right;
    }
    
    .mobile-logo-svg-v2 {
        width: 32px;
        height: 32px;
    }
    
    .mobile-menu-toggle-v2 {
        display: flex-end;
        flex-direction: column;
        justify-content: right;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        padding-top: 5px;
        margin-right: -7px;
        position: relative;
    }
    
    /* Крестик для обычного меню (скрывается когда модальное окно открыто) */
    .mobile-menu-toggle-v2.active::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
    }
    
    .mobile-menu-toggle-v2:not(.active)::after {
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-menu-toggle-v2 span {
        display: block;
        width: 24px;
        height: 2px;
        background: #000;
        margin: 3px 0;
        transition: all 0.3s ease;
        transform-origin: center;
    }
    
    /* Скрываем полоски когда модальное окно открыто */
    .mobile-menu-toggle-v2.active span {
        opacity: 0;
        visibility: hidden;
    }
    
    .mobile-menu-toggle-v2.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .mobile-menu-toggle-v2.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle-v2.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    
    /* Модальное окно меню (Premium Full-Screen) */
    .mobile-menu-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        z-index: 9999;
        display: flex;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .mobile-menu-modal.active {
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-menu-modal-content {
        background: transparent;
        border-radius: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: none;
        transform: translateY(-20px);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow-y: auto;
    }

    .mobile-menu-modal.active .mobile-menu-modal-content {
        transform: translateY(0);
    }

    /* Top bar inside the modal */
    .mobile-menu-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .mobile-logo-modal {
        display: flex;
        align-items: center;
    }
    
    .mobile-menu-close {
        background: rgba(0,0,0,0.03);
        border: none;
        cursor: pointer;
        padding: 10px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        position: static; /* override previous absolute */
    }
    
    .mobile-menu-close:hover {
        background: rgba(0, 0, 0, 0.08);
        transform: rotate(90deg);
    }
    
    .mobile-menu-items {
        display: flex;
        flex-direction: column;
        padding: 30px 24px;
        flex-grow: 1;
        gap: 15px;
    }
    
    .mobile-nav-link-v2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 0;
        color: #1a1a1a;
        text-decoration: none;
        font-size: 24px;
        font-family: 'Times New Roman', serif;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        opacity: 0;
        transform: translateY(15px);
    }

    .mobile-menu-modal.active .mobile-nav-link-v2 {
        opacity: 1;
        transform: translateY(0);
    }
    
    .mobile-menu-modal.active .mobile-nav-link-v2:nth-child(1) { transition-delay: 0.1s; }
    .mobile-menu-modal.active .mobile-nav-link-v2:nth-child(2) { transition-delay: 0.15s; }
    .mobile-menu-modal.active .mobile-nav-link-v2:nth-child(3) { transition-delay: 0.2s; }
    .mobile-menu-modal.active .mobile-nav-link-v2:nth-child(4) { transition-delay: 0.25s; }
    
    .nav-arrow {
        font-family: sans-serif;
        font-size: 20px;
        color: #1a1a1a;
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
    }

    .mobile-nav-link-v2:hover {
        background: transparent;
        color: #1a1a1a;
        padding-left: 10px;
    }

    .mobile-nav-link-v2:hover .nav-arrow {
        opacity: 1;
        transform: translateX(0);
    }
    
    .mobile-nav-cta-wrapper {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        opacity: 0;
        transform: translateY(15px);
        transition: all 0.3s ease;
    }
    
    .mobile-menu-modal.active .mobile-nav-cta-wrapper {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.3s;
    }

    .mobile-nav-cta-v2 {
        background: #1a1a1a;
        color: #fff;
        font-family: sans-serif;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 18px 30px;
        border-radius: 4px;
        text-align: center;
        width: 100%;
        border: none;
        text-decoration: none;
        transition: background 0.3s ease;
    }
    
    .mobile-nav-cta-v2:hover {
        background: #1a1a1a;
        color: #fff;
    }

    .mobile-menu-footer {
        padding: 24px;
        text-align: center;
        margin-top: auto;
        opacity: 0;
        transform: translateY(15px);
        transition: all 0.3s ease;
    }
    
    .mobile-menu-modal.active .mobile-menu-footer {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.4s;
    }

    .menu-footer-text {
        font-size: 12px;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }

    .menu-social-links {
        display: flex;
        justify-content: center;
        gap: 20px;
        align-items: center;
    }

    .social-icon-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #f8f8f8;
        transition: all 0.3s ease;
    }

    .social-icon-link:hover {
        background: #f0f0f0;
        transform: translateY(-2px);
    }

    .social-icon-img {
        width: 36px;
        height: 36px;
        object-fit: contain;
    }

    .max-icon-img {
        width: 60px;
        height: 60px;
        transform: scale(1.4); /* Визуально увеличиваем картинку, обходя ограничения контейнера */
    }
    
    /* Add spacing for fixed header */
    .hero-content-block {
        padding-top: 76px;
    }
    
    /* Hero Section - Новая мобильная версия */
    .hero-content-block {
        padding: 100px 16px 40px;
        background: #ffffff;
        min-height: auto;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    
    .hero-content-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
    }
    
    .hero-left-block {
        order: 3;
        width: 100%;
        max-width: 400px;
    }
    
    .hero-right-block {
        order: 2;
        width: 400px;
        /* height: 600px; */
        display: flex;
        align-items: flex-start;
        /* padding: 0 25px; */
    }
    
    /* Hide old mobile elements */
    .hero-title-table,
    .hero-mobile-header,
    .hero-side-menu,
    .mobile-nav-simple {
        display: none;
    }
    
    /* Ensure mobile header is visible */
    .mobile-header-v2 {
        display: block !important;
    }
    
    .mobile-header-container-v2 {
        display: flex !important;
    }
    
    .mobile-logo-v2 {
        display: flex !important;
    }
    
    .mobile-menu-toggle-v2 {
        display: flex !important;
    }
    
    /* Hide any conflicting elements */
    .feminine-hero-actions {
        display: none !important;
    }
    .mobile-feminine-hero-actions {
        /* width: 400px; */
        /* width: 100%; */
    }
    .mobile-feminine-hero-actions .feminine-hero-actions {
        display: flex !important;
        /* width: 400px !important; */
        
    }
    .mobile-hide {}
    .desktop-text-view {
        display: none;
    }
    .btn-feminine-primary {
        /* display: none !important; */
    }
    
    .btn {
        /* display: none !important; */
    }
    
    /* Hide any yellow bars or conflicting headers */
    .hero-content-block > .btn,
    .hero-content-block > .feminine-hero-actions,
    .hero-left-block > .feminine-hero-actions {
        display: none !important;
    }
    
    /* Hide hero-scroll-menu-clone in mobile version */
    #hero-scroll-menu-clone,
    .hero-scroll-menu {
        display: none !important;
    }
    
    /* Hide any scroll menu clones */
    [id*="hero-scroll-menu"],
    [class*="hero-scroll-menu"] {
        display: none !important;
    }
    
    /* Mobile Typography */
    .feminine-heading {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 16px;
        color: #382E2C;
        font-weight: 400;
        letter-spacing: -0.5px;
    }
    
    .feminine-subheading {
        font-size: 16px;
        line-height: 1.5;
        color: #666;
        margin-bottom: 24px;
        font-weight: 350;
    }
    
    .feminine-text-light {
        font-size: 14px;
        color: #888;
        margin-top: 16px;
        line-height: 1.4;
    }
    
    /* Mobile Button */
    .feminine-hero-actions {
        margin: 20px 0;
        text-align: center;
    }
    
    .btn-feminine-primary {
        padding: 16px 32px;
        font-size: 16px;
        border-radius: 24px;
        /* background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%); */
        color: white;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
        border: none;
        font-weight: 600;
        letter-spacing: 0.5px;
        /* box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3); */
        min-width: 200px;
    }
    
    .btn-feminine-primary:hover {
        /* background: linear-gradient(135deg, #b8941f 0%, #d4af37 100%); */
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    }

    /* Override editorial-luxury button styles for mobile */
    .btn-feminine-outline {
        background: transparent !important;
        color: #3a2e28 !important;
        border: 1px solid #3a2e28 !important;
        border-radius: 24px !important;
        padding: 16px 32px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
        display: inline-block !important;
        transition: all 0.3s ease !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
    }

    .btn-feminine-outline:hover {
        background: #faf9f7 !important;
        color: #3a2e28 !important;
        border-color: #3a2e28 !important;
        transform: translateY(-1px) !important;
    }
    
    /* Mobile Video */
    .hero-video-frame {
        width: 700px;
        height: 300px;
        border-radius: 0;
        overflow: hidden;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        position: relative;
        color: inherit !important;
    }
    
    .hero-video-frame video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        opacity: 1;
        /* border-radius: 15px; */
    }
    
    .video-overlay-text {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 1px;
        background: transparent;
        padding: 0;
        border-radius: 0;
        backdrop-filter: none;
        border: none;
    }
    
    /* Mobile Menu - простое и чистое */
    .mobile-nav-simple {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-bottom: 20px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 12px;
        border: 1px solid rgba(139, 111, 71, 0.1);
    }
    
    .mobile-nav-simple a {
        padding: 8px 16px;
        color: #382E2C;
        text-decoration: none;
        font-size: 13px;
        border: 1px solid rgba(139, 111, 71, 0.2);
        border-radius: 20px;
        transition: all 0.2s ease;
        background: rgba(255, 255, 255, 0.6);
    }
    
    .mobile-nav-simple a:hover,
    .mobile-nav-simple a.active {
        background: #1a1a1a;
        color: white;
        border-color: #d4af37;
        transform: translateY(-1px);
    }
    
    /* Add mobile navigation to hero */
    .hero-left-block {
        text-align: left;
    }
    
    .hero-text-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 10px;
    }

    .mobile-art-minimal-hero-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
    }

    .mobile-art-minimal-hero-actions .art-minimal-hero-btn {
        width: 100%;
        text-align: center;
    }

    .mobile-art-minimal-hero-actions .art-minimal-hero-socials {
        display: flex;
        align-items: center;
        gap: 15px;
        justify-content: flex-start;
    }

    .mobile-art-minimal-hero-actions .art-minimal-hero-social {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-text-stack::before {
        content: '';
        display: none;
    }
    
    /* Mobile spacing adjustments */
    .section {
        padding: 40px 16px;
    }
    
    .container {
        padding: 0 16px;
    }
    
    /* Hide mobile menu on desktop */
    @media (min-width: 769px) {
        .mobile-nav-simple {
            display: none;
        }
    }
}

/* ============================= */
/* DESKTOP (≥769px) */
/* ============================= */
@media (min-width: 769px) {
    /* Прячем старые мобильные элементы */
    .mobile-feminine-hero-actions .feminine-hero-actions {
        display: none !important;
    }
    .mobile-text-view {
        display: none !important;
    }
    
    /* Скрываем старое меню слева */
    .hero-side-menu {
        display: none !important;
    }

    /* НОВЫЙ ДЕСКТОПНЫЙ ХЕДЕР (ПРЕМИУМ) */
    .desktop-header-v2 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 90px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        z-index: 9999;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
    }

    .desktop-header-container {
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
        padding: 0 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .desktop-logo {
        text-decoration: none;
        flex: 1;
    }

    .desktop-nav {
        display: flex;
        gap: 45px;
        flex: 2;
        justify-content: center;
    }

    .desktop-nav-link {
        color: #1a1a1a;
        text-decoration: none;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        padding: 5px 0;
        transition: color 0.3s ease;
    }

    .desktop-nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        background: #1a1a1a;
        transition: width 0.3s ease;
    }

    .desktop-nav-link:hover {
        color: #333333;
    }

    .desktop-nav-link:hover::after {
        width: 100%;
    }

    .desktop-header-actions {
        display: flex;
        align-items: center;
        gap: 30px;
        flex: 1;
        justify-content: flex-end;
    }

    .desktop-socials {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .desktop-social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f8f8f8;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .desktop-social-link:hover {
        background: #f0f0f0;
        transform: translateY(-2px);
    }

    .desktop-social-link img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .desktop-social-link.max-social img {
        width: 32px;
        height: 32px;
        transform: scale(1.4);
    }

    .desktop-btn-book {
        background: #1a1a1a;
        color: #fff;
        text-decoration: none;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 16px 28px;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .desktop-btn-book:hover {
        background: #ffffff;
        color: #1a1a1a;
        border: 1px solid #1a1a1a;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    /* Отступ для контента, чтобы фиксированный хедер его не перекрывал */
    .site-main {
        padding-top: 90px;
    }

    /* Единый контейнер для контента (кроме booking) с той же шириной, что и меню */
    .container,
    .feminine-section .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
    }

    /* Hero блок выравниваем по меню */
    .hero-content-block {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
    }

    .hero-content-grid {
        max-width: 100%;
        margin: 0;
    }

    /* Опускаем текст в Hero блоке */
    .hero-left-block {
        padding-top: 100px;
    }

    /* Увеличиваем размер видео */
    .hero-video-frame {
        width: 100%;
        height: 600px;
        border-radius: 0;
        overflow: hidden;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .hero-video-frame video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: none;
        outline: none;
    }

    /* Исключение для страницы booking */
    body:not(.booking-page) .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
    }
}

/* Скрываем десктопное меню на мобильных */
@media (max-width: 768px) {
    .desktop-header-v2 {
        display: none !important;
    }
}