/* ==============================
   Homepage Fixes V3
   Задачи 3-7 из tasks-v3.md
   ============================== */

/* ЗАДАЧА 3: Убрать текст "Park map" tooltip */
.tooltip-content,
.tooltip-text,
[class*="tooltip-content"],
[class*="tooltip-text"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ЗАДАЧА 5: pin-spacer — НЕ скрывать (содержит milestones!), но убрать лишние отступы */
.pin-spacer {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* ЗАДАЧА 5: Белые отступы от GSAP scroll trigger */
.animation-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ЗАДАЧА 6: Шапка НЕ прозрачная */
header.header,
.header.svelte-1pbvoor,
header[class*="header"] {
    background-color: #242F65 !important;
    background: #242F65 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
}

.header-main,
.header-main-content,
[class*="header-main"] {
    background-color: #242F65 !important;
    background: #242F65 !important;
}

/* ЗАДАЧА 7: Убрать горизонтальный скролл + FIX scroll sticking */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    scroll-behavior: auto !important;
    overscroll-behavior: auto !important;
}
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    overscroll-behavior: auto !important;
}

/* ==============================
   FIX: Убрать двойные скроллбары в секции Timeline/Milestones
   Проблема: .container.svelte-ck6h0h и .animation-container.svelte-ck6h0h
   имеют overflow-y: auto с небольшим overflow (3-5px), создавая лишние скроллбары
   ============================== */

/* Убрать overflow-y: auto на Svelte контейнерах timeline */
.container.svelte-ck6h0h,
div.container.svelte-ck6h0h {
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

.animation-container.svelte-ck6h0h,
div.animation-container.svelte-ck6h0h {
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

/* Убрать горизонтальный скролл на interactive (timeline slider) */
.interactive.svelte-ck6h0h,
div.interactive.svelte-ck6h0h {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* Скрыть скроллбары на всех Svelte компонентах timeline */
.container.svelte-ck6h0h::-webkit-scrollbar,
.animation-container.svelte-ck6h0h::-webkit-scrollbar,
.interactive.svelte-ck6h0h::-webkit-scrollbar,
.timeline.svelte-ck6h0h::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.container.svelte-ck6h0h,
.animation-container.svelte-ck6h0h,
.interactive.svelte-ck6h0h,
.timeline.svelte-ck6h0h {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Kill dead GSAP will-change that causes scroll jank */
.timeline,
.background.svelte-ck6h0h,
.interactive.svelte-ck6h0h,
.slider.svelte-ck6h0h,
.slider.svelte-bio6lf {
    will-change: auto !important;
    touch-action: auto !important;
}

/* Kill touch-action:none on dead slider elements */
[class*="slider"][class*="svelte"] {
    touch-action: auto !important;
}

/* Hero section — keep its natural height from clientlib-base.min.css
   DO NOT set height:auto — all content is position:absolute, auto=0px */

.root.responsivegrid,
.root.responsivegrid > .aem-Grid {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Fix side scroll from timeline/milestones */
[class*="animation-container"],
[class*="timeline"],
[class*="milestones"] {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ЗАДАЧА 4: Rides carousel — Swiper fix */

/* CRITICAL FIX: Override .swiper-slide { width: auto !important } from clientlib-base.min.css
   The base CSS has specificity (0,1,0) with !important. Our selector has (0,2,0) with !important → wins */
.swiper-dynamic-carousel .swiper-slide {
    flex-shrink: 0 !important;
    backface-visibility: visible !important;
    /* Height based on original site aspect ratio (~406/260) */
    height: auto !important;
}

/* Remove overflow clipping that breaks Swiper 3D coverflow */
.swiper-dynamic-carousel .swiper-wrapper {
    overflow: visible !important;
}

/* Ensure the carousel container has proper sizing */
.swiper-dynamic-carousel {
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Rides wrapper should not clip 3D content */
.rides-wrapper {
    overflow: visible !important;
}

/* The .rides-carousel-slides is the main content area — needs explicit height
   On original: ~406px for ~260px width, aspect-ratio ≈ 0.64
   CRITICAL: position must be STATIC so image's containing block = .swiper-slide */
.swiper-dynamic-carousel .rides-carousel-slides {
    position: static !important;
    overflow: hidden !important;
    width: 100% !important;
    aspect-ratio: 260 / 406 !important;
    min-height: 350px !important;
    display: block !important;
}

/* Shape — container for media and info
   MUST be position: static (same as original)
   border-radius: 0 (same as original — 3D perspective makes edges look rounded) */
.swiper-dynamic-carousel .shape {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Media wrap — flex row container — position: static (same as original) */
.swiper-dynamic-carousel .rides-carousel-media-wrap {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

/* Media — width 0 is OK (same as original), height 100% — position: static! */
.swiper-dynamic-carousel .rides-carousel-media {
    height: 100% !important;
    position: static !important;
    display: block !important;
}

/* Image must cover the slide — position: absolute with inset: 0
   Containing block = .swiper-slide (position: relative, set by Swiper)
   This gives the image the full slide dimensions */
.swiper-dynamic-carousel .dynamic-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
}

/* Dark overlay on images — matches original (.rides-carousel-media::before) */
.swiper-dynamic-carousel .rides-carousel-media::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.4), rgba(0,0,0,0.4)) !important;
    pointer-events: none !important;
}

/* Info overlay above image — matches original exactly */
.swiper-dynamic-carousel .rides-carousel-info-wrap {
    position: absolute !important;
    z-index: 3 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 48px !important;
    padding: 0 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    color: #fff !important;
    text-align: center !important;
    background: transparent !important;
}

/* Title — 48px on mobile like original */
.swiper-dynamic-carousel .dynamic-title {
    font-size: 48px !important;
    font-weight: 600 !important;
    line-height: 48px !important;
    color: #fff !important;
    text-align: center !important;
    font-family: Outfit, sans-serif !important;
}

/* Subtitle — 24px like original */
.swiper-dynamic-carousel .sub-title {
    font-size: 24px !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Button — transparent with white border, pill shape */
.swiper-dynamic-carousel .dynamic-carousel-btn {
    font-size: 12px !important;
    border: 1px solid #fff !important;
    border-radius: 50px !important;
    padding: 12px 16px !important;
    background: transparent !important;
    color: #fff !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 16px !important;
    letter-spacing: 1px !important;
}

/* Navigation arrows */
.swiper-dynamic-carousel .swiper-button-next,
.swiper-dynamic-carousel .swiper-button-prev {
    color: #fff !important;
    background: rgba(255,255,255,0.9) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
}
.swiper-dynamic-carousel .swiper-button-next::after,
.swiper-dynamic-carousel .swiper-button-prev::after {
    font-size: 18px !important;
    color: #242F65 !important;
}

/* Pagination dots */
.swiper-dynamic-carousel .swiper-pagination-bullet {
    background: #fff !important;
    opacity: 0.5 !important;
}
.swiper-dynamic-carousel .swiper-pagination-bullet-active {
    opacity: 1 !important;
}

/* Progress circles/stats in slide — HIDDEN on mobile (same as original) */
@media (max-width: 767px) {
    .swiper-dynamic-carousel .progress-wrap {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .swiper-dynamic-carousel .progress-wrap {
        display: flex !important;
        justify-content: center !important;
        gap: 24px !important;
        margin-bottom: 16px !important;
        position: relative !important;
        z-index: 4 !important;
    }
}

/* ride-carousel parent — allow overflow for 3D effect */
.ride-carousel {
    overflow: visible !important;
}

/* Fix hero section height to avoid excess space */
.hero-home {
    max-height: 100vh !important;
    overflow: hidden !important;
}

/* ==============================
   HERO CAROUSEL — override Svelte CSS
   Svelte sets :nth-child rules + opacity:0 that hide slides
   We use .hc-ready / .hc-visible to control visibility
   ============================== */

/* Hide ALL hero carousel slides by default */
.hero-carousel .carousel-slide.hc-ready {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transition: opacity 0.8s ease !important;
    pointer-events: none !important;
}

/* Show ONLY the active hero slide */
.hero-carousel .carousel-slide.hc-visible {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Video inside hero slides — cover the entire area */
.hero-carousel .carousel-slide video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Hero carousel text overlay — needs to be above dots and within clip area */
.hero-carousel .carousel-inner {
    position: absolute !important;
    bottom: 120px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3 !important;
    padding: 0 24px !important;
    text-align: center !important;
    color: #fff !important;
}

/* Hero navigation dots — inner-hero is 884px but hero-home clips at 844px (100vh)
   So bottom:24px inside inner-hero puts dots below the clip.
   Use bottom: 70px to stay well inside visible area */
.hc-dots {
    position: absolute !important;
    bottom: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 20 !important;
}
.hc-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,0.4) !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 0.3s, transform 0.3s !important;
}
.hc-dot.active {
    background: #fff !important;
    transform: scale(1.3) !important;
}

/* Arrow buttons in hero - HIDDEN on mobile (same as original) */
.hero-carousel .leading,
.hero-carousel .trailing {
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    color: #fff !important;
}
/* Show arrows only on desktop (768px+) */
@media (min-width: 768px) {
    .hero-carousel .leading,
    .hero-carousel .trailing {
        display: flex !important;
    }
}
.hero-carousel .leading {
    left: 16px !important;
}
.hero-carousel .trailing {
    right: 16px !important;
}

/* Active tab styling for rides segmented control */
.segmented-control .swiper-slide.swiper-slide-thumb-active {
    color: #fff !important;
    font-weight: 700 !important;
}
.segmented-control .swiper-slide.swiper-slide-thumb-active .carousel-nav-wrapper {
    border-bottom: 3px solid #E31937 !important;
    padding-bottom: 8px !important;
}

/* Removed dangerous broad selector section[style*="height"]
   It was collapsing content sections indiscriminately */

/* Sub-nav / second header bar — ensure visibility */
.sub-header,
[class*="sub-header"],
[class*="header-info"] {
    background: #242F65 !important;
}

/* ==============================
   MOBILE MENU OVERLAY
   Matches original: fullscreen dark blue panel
   ============================== */
#sfqc-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #1a2352;
    z-index: 99999;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#sfqc-mobile-menu.open {
    display: flex;
}

/* Menu header — logo + icons + close */
#sfqc-mobile-menu .mm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    min-height: 70px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
#sfqc-mobile-menu .mm-header .mm-logo img,
#sfqc-mobile-menu .mm-header .mm-logo svg {
    height: 48px;
    width: auto;
    max-width: 160px;
}
#sfqc-mobile-menu .mm-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
#sfqc-mobile-menu .mm-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
}
#sfqc-mobile-menu .mm-close-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* Menu items */
#sfqc-mobile-menu .mm-nav {
    padding: 10px 0;
    flex: 1;
}
#sfqc-mobile-menu .mm-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    color: #fff;
    font-family: Outfit, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
#sfqc-mobile-menu .mm-nav-item:active {
    background: rgba(255,255,255,0.05);
}
#sfqc-mobile-menu .mm-chevron {
    font-size: 18px;
    color: rgba(255,255,255,0.6);
}

/* Divider */
#sfqc-mobile-menu .mm-divider {
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 8px 24px;
}

/* Language section */
#sfqc-mobile-menu .mm-language {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    color: rgba(255,255,255,0.5);
    font-family: Outfit, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}
#sfqc-mobile-menu .mm-lang-value {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Book Now button at bottom */
#sfqc-mobile-menu .mm-footer {
    padding: 16px 20px 32px;
    margin-top: auto;
}
#sfqc-mobile-menu .mm-book-btn {
    display: block;
    width: 100%;
    padding: 18px;
    background: #E31937;
    color: #fff;
    font-family: Outfit, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
#sfqc-mobile-menu .mm-book-btn:active {
    background: #c41430;
}

/* ==============================
   PARK MAP SECTION — Complete Rebuild
   Replaces dead Svelte component with working interactive map
   ============================== */

/* Section container */
.view-lands-map {
    position: relative !important;
    overflow: hidden !important;
    background: #1a1f4e !important;
    padding: 0 !important;
}

/* Video area — full width, fixed aspect ratio */
.pm-video-area {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 75vh;
    overflow: hidden;
}
@media (min-width: 768px) {
    .pm-video-area {
        aspect-ratio: 16 / 9;
        max-height: 80vh;
    }
}

/* Background map video */
.pm-bg-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.6s ease;
}

/* Zone videos — hidden by default, shown when active */
.pm-zone-video {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    z-index: 2 !important;
    opacity: 0 !important;
    transition: opacity 0.8s ease !important;
}
.pm-zone-video.active {
    opacity: 1 !important;
}

/* Dark gradient overlay on videos for text readability */
.pm-video-area::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* Zone info overlay — positioned over video */
.pm-zone-overlay {
    position: absolute;
    bottom: 100px;
    left: 0; right: 0;
    z-index: 10;
    padding: 0 24px;
}

/* Each zone info block */
.pm-zone-info {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    animation: pmFadeIn 0.5s ease;
}
.pm-zone-info.active {
    display: flex;
}

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

/* Feature tags */
.pm-tags {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.pm-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: Outfit, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.pm-tag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    color: #fff;
}
.pm-tag-icon svg {
    width: 18px;
    height: 18px;
}

/* CTA button */
.pm-cta-btn {
    display: inline-block;
    padding: 14px 32px;
    background: #fff;
    color: #1a1f4e;
    border-radius: 50px;
    text-decoration: none;
    font-family: Outfit, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s;
    margin-top: 8px;
    border: 3px solid transparent;
}
.pm-cta-btn:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

/* Zone selector tabs — bottom carousel */
.pm-zone-tabs {
    position: absolute;
    bottom: 16px;
    left: 0; right: 0;
    z-index: 15;
    display: flex;
    gap: 8px;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.pm-zone-tabs::-webkit-scrollbar { display: none; }

/* Individual zone tab */
.pm-tab {
    flex-shrink: 0;
    width: 110px;
    height: 62px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    background: rgba(0,0,0,0.3);
    padding: 0;
    transition: all 0.3s ease;
    scroll-snap-align: center;
    position: relative;
}
.pm-tab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: rgba(0,0,0,0.2);
    transition: background 0.3s;
}
.pm-tab:hover::after {
    background: transparent;
}
.pm-tab.active {
    border-color: var(--accent, #E8792B);
    transform: scale(1.05);
}
.pm-tab.active::after {
    background: transparent;
}

/* Tab image */
.pm-tab-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 7px;
}