/* ==========================================================================
   TIGER YACHT STM - SITE-WIDE "SUNRISE OF 2027" THEME
   Loaded last on every page. Re-skins the shared design tokens, makes the
   header sticky, restyles inner page headers, adds animated sea waves to
   every section and a wave-topped footer. No emojis.
   ========================================================================== */

:root {
    --bg-body: #FFFBF3;
    --bg-surface: #FFF6E8;
    --bg-dark-section: #FFF1DD;
    --border-light: #F3E3C8;
    --ny-cream: #FFF8EC;
    --ny-peach: #FFE3CC;
    --ny-sky: #D9F1F2;
    --ny-coral: #FF6B57;
    --ny-teal: #0E8A94;
    --ny-ink: #1B2A3A;
    --ny-muted: #5B6B7B;
    --ny-gold-2: #E8B93C;
    --ny-gold-3: #B8821A;
    --text-primary: #1B2A3A;
    --text-muted: #55677A;
    --shadow-card: 0 12px 30px -6px rgba(27, 42, 58, .12), 0 3px 10px -2px rgba(27, 42, 58, .06);
}

/* ---------- 1. Sticky header (needs overflow-x: clip, not hidden) ---------- */
html, body { overflow-x: clip !important; }
.header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 100% !important;
    z-index: 1000 !important;
}
/* header used to be fixed, so inner page headers carried 150px of top padding */
.page-header { padding-top: 64px !important; padding-bottom: 76px !important; }
body { padding-top: 0 !important; }

/* ---------- 2. Slim announcement bar (every page) ---------- */
.nye-announcement-bar {
    background: linear-gradient(90deg, #FF6B57 0%, #FF9A5A 50%, #FFC857 100%) !important;
    padding: 8px 14px !important;
    position: relative;
    z-index: 1002;
    overflow: hidden;
    border: 0 !important;
    font-size: inherit !important;
}
.nye-announcement-bar::before {
    content: '';
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation: nyThemeSweep 5s infinite linear;
}
@keyframes nyThemeSweep { to { left: 160%; } }
.nye-bar-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; z-index: 1; }
.nye-bar-left { display: inline-flex; align-items: center; gap: 8px; }
.nye-badge-gold { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #FF6B57; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nye-bar-text { font-size: .82rem; color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.nye-bar-text strong { color: #fff; font-weight: 800; }
.nye-bar-cta { color: #fff !important; font-size: .78rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 600px) { .nye-bar-text { display: none; } .nye-bar-inner { justify-content: space-between; } }

/* ---------- 3. Buttons: warm gold, teal hover ---------- */
.btn { background: linear-gradient(135deg, #F2B63A 0%, #FFD36B 100%); border-color: #E8B93C; color: #1B2A3A !important; box-shadow: 0 8px 20px rgba(232,185,60,.35); }
.btn:hover { background: linear-gradient(135deg, #0E8A94 0%, #14A9B3 100%); border-color: #0E8A94; color: #fff !important; box-shadow: 0 10px 24px rgba(14,138,148,.35); }
.btn-outline { border-color: #E8B93C; }
.btn-outline:hover { background: #0E8A94; border-color: #0E8A94; }
.btn-transparent { background: rgba(255,255,255,.7) !important; border: 1.5px solid #E8B93C !important; color: #1B2A3A !important; box-shadow: 0 4px 16px rgba(184,130,26,.2) !important; }
.btn-transparent:hover { background: #E8B93C !important; border-color: #E8B93C !important; color: #1B2A3A !important; }
.btn-nav { background: linear-gradient(135deg, #FF6B57, #FF9A5A) !important; color: #fff !important; border-color: transparent !important; }

/* ---------- 4. Section skins (everything warm, never black) ---------- */
.bg-black { background: linear-gradient(180deg, #FFF3E0 0%, #FFE9D2 100%) !important; border-color: #F6DDBF !important; }
.bg-dark  { background: linear-gradient(180deg, #FFFBF3 0%, #FFF4E4 100%) !important; }
.bg-light { background: #FFFFFF !important; }
h2.text-gold, .bg-dark h2.text-gold, .bg-black h2.text-gold, .bg-light h2.text-gold { color: #1B2A3A !important; }
.text-gold { color: #B8821A !important; }
.bg-dark p[style*="#ccc"], .bg-dark p[style*="color: #ccc"] { color: #475569 !important; }

/* inner page headers: sunrise instead of black */
.page-header { background: linear-gradient(180deg, #FFF8EC 0%, #FFE3CC 70%, #D9F1F2 100%) !important; }
.page-header .hero-overlay { display: none !important; }

.page-header > .container, .page-header .hero-content { position: relative; z-index: 3 !important; }
.page-header h1, .page-header h1.text-gold, .page-header .text-gold { color: #1B2A3A !important; text-shadow: none !important; }
.page-header p { color: #3B4E62 !important; text-shadow: none !important; }
.page-header div[style*="border-radius: 30px"] { background: #fff !important; border-color: #E8B93C !important; color: #B8821A !important; }

/* cards: warmer, softer */
.yacht-card, .feature-card, .trust-card, .pkg-card, .package-card, .guest-moment-card, .faq-item, .route-card {
    border-color: #F3E3C8 !important;
}

/* ---------- 5. Animated waves under every section ---------- */
section.section-padding:not(.page-header) { position: relative; overflow: hidden; padding-bottom: 104px; }
section.section-padding > .container { position: relative; z-index: 2; }

section.section-padding:not(.page-header)::after,
.page-header .ny-page-wave {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
    pointer-events: none; z-index: 1;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%233BB5BE' fill-opacity='.32' d='M0 28 C150 0 450 0 600 28 S1050 56 1200 28 V56 H0Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FFB79A' fill-opacity='.45' d='M0 34 C100 8 300 8 400 34 S700 60 800 34 V56 H0Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' fill-opacity='.75' d='M0 40 C200 14 600 14 800 40 S1400 66 1600 40 V56 H0Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1200px 56px, 800px 56px, 1600px 56px;
    background-position: 0 100%, 0 100%, 0 100%;
    animation: nyWaveDrift 22s linear infinite;
}
@keyframes nyWaveDrift {
    from { background-position: 0 100%, 0 100%, 0 100%; }
    to   { background-position: -1200px 100%, 800px 100%, -1600px 100%; }
}
.page-header .ny-page-wave { position: absolute; z-index: 4; }

/* gentle drifting glitter in section backgrounds */
section.section-padding:not(.page-header)::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
    background-image:
        radial-gradient(circle, rgba(232,185,60,.55) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(255,107,87,.35) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(14,138,148,.30) 0 2px, transparent 3px);
    background-size: 220px 220px, 340px 340px, 280px 280px;
    background-position: 20px 30px, 140px 160px, 80px 110px;
    animation: nyGlitter 40s linear infinite;
}
@keyframes nyGlitter {
    to { background-position: 20px -190px, 140px -180px, 80px -170px; }
}

/* wave-style title accent */
section.section-padding h2.text-gold::after,
section.section-padding .section-title::after {
    content: '';
    display: block; width: 74px; height: 8px; margin: 12px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 8'%3E%3Cpath d='M0 4 Q9 -1 18.5 4 T37 4 T55.5 4 T74 4' fill='none' stroke='%23E8B93C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 6. Footer: deep gulf teal with a wave crest ---------- */
.footer {
    background: linear-gradient(180deg, #0E5560 0%, #0A3B45 100%) !important;
    border-top: 0 !important;
    padding-top: 96px !important;
    position: relative; overflow: hidden;
}
.footer::before {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 56px; pointer-events: none; z-index: 1;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FFF8EC' d='M0 0 H1200 V28 C1050 56 750 56 600 28 S150 0 0 28Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FFD9B5' fill-opacity='.7' d='M0 0 H800 V36 C700 62 500 62 400 36 S100 10 0 36Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1200px 56px, 800px 56px;
    animation: nyFooterWave 26s linear infinite;
}
@keyframes nyFooterWave { from { background-position: 0 0, 0 0; } to { background-position: 1200px 0, -800px 0; } }
.footer > .container { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
    section.section-padding::before, section.section-padding::after, .footer::before, .nye-announcement-bar::before, .page-header .ny-page-wave { animation: none !important; }
}



/* ==========================================================================
   NAVBAR: deep gulf teal (matches the footer) with a wave edge
   ========================================================================== */
.header {
    background: linear-gradient(135deg, #0E5560 0%, #0B4450 55%, #0A3B45 100%) !important;
    border-bottom: 0 !important;
    box-shadow: 0 6px 22px rgba(10, 59, 69, .28) !important;
}
.header.scrolled {
    background: linear-gradient(135deg, #0C4C57 0%, #0A3F4A 100%) !important;
    box-shadow: 0 8px 26px rgba(10, 59, 69, .38) !important;
}
/* thin gold-to-coral hairline */
.header::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, #E8B93C 0%, #FF9A5A 50%, #FF6B57 100%);
}
/* animated wave hanging below the bar */
.header::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath fill='%230A3B45' d='M0 0 H400 V3 C 350 14 300 14 250 3 S 150 -6 100 3 S 25 12 0 3Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-size: 400px 12px; background-position: 0 0;
    animation: nyNavWave 18s linear infinite;
}
@keyframes nyNavWave { to { background-position: -400px 0; } }
.header .nav-link { color: #F4FBFC !important; }
.header .nav-link:hover, .header .nav-link.active { color: #FFD36B !important; }
.header .brand-tagline { color: #FFD36B !important; }
.header .menu-toggle .bar { background: #fff !important; }

/* ==========================================================================
   PACKAGES PAGE: hero slider in the sunrise style
   ========================================================================== */
#packages-hero-slider {
    margin-top: 0 !important;               /* old fixed-header clearance caused the blank gap */
    background: #FFE3CC !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto;
    height: clamp(430px, 70vh, 640px) !important;
}
#packages-hero-slider::after {              /* sea waves along the bottom edge */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 6; pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%233BB5BE' fill-opacity='.45' d='M0 28 C150 0 450 0 600 28 S1050 56 1200 28 V56 H0Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFBF3' d='M0 40 C200 14 600 14 800 40 S1400 66 1600 40 V56 H0Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-size: 1200px 56px, 1600px 56px; background-position: 0 100%, 0 100%;
    animation: nyPkgWave 24s linear infinite;
}
@keyframes nyPkgWave { to { background-position: -1200px 100%, 1600px 100%; } }

.hero-overlay-container { bottom: 74px !important; }

.glass-hero-card {
    background: rgba(255, 255, 255, .88) !important;
    border: 1.5px solid #F0D9AE !important;
    box-shadow: 0 18px 44px rgba(27, 42, 58, .22) !important;
}
.glass-badge { background: linear-gradient(135deg, #FF6B57, #FF9A5A) !important; color: #fff !important; }
.glass-title { color: #1B2A3A !important; text-transform: none; letter-spacing: 0; }
.glass-desc { color: #3B4E62 !important; }
.btn-hero-cta {
    background: linear-gradient(135deg, #25D366, #12A150) !important; color: #fff !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .38) !important; border: 0 !important;
}
.btn-hero-cta:hover { background: linear-gradient(135deg, #1EBE5D, #0E8A44) !important; }

.glass-rating-badge {
    background: rgba(255, 255, 255, .9) !important; border: 1.5px solid #F0D9AE !important;
    box-shadow: 0 12px 30px rgba(27, 42, 58, .2);
}
.rating-stars { white-space: nowrap; display: flex; gap: 2px; }
.rating-stars i { color: #E8B93C !important; }
.rating-score { color: #1B2A3A !important; font-weight: 800; white-space: nowrap; }

.slider-arrow { background: rgba(255,255,255,.92) !important; color: #B8821A !important; border: 1.5px solid #E8B93C !important; box-shadow: 0 6px 16px rgba(27,42,58,.2) !important; }
.slider-arrow:hover { background: #FF6B57 !important; color: #fff !important; border-color: #FF6B57 !important; }
.slider-pagination { bottom: 22px !important; z-index: 9; }
.slider-pagination .dot { background: rgba(255,255,255,.7) !important; }
.slider-pagination .dot.active { background: #FF6B57 !important; }

@media (max-width: 768px) {
    #packages-hero-slider { height: auto !important; min-height: 520px !important; }
    .hero-overlay-container {
        position: absolute !important; flex-direction: column !important; align-items: stretch !important;
        gap: 10px !important; bottom: 78px !important; padding: 0 14px !important;
    }
    .glass-hero-card { order: 1; padding: 16px !important; background: rgba(255,255,255,.92) !important; }
    .glass-rating-badge {
        order: 0; align-self: flex-start; padding: 7px 14px !important; gap: 8px !important; border-radius: 999px !important;
    }
    .glass-rating-badge .rating-logo { display: none; }
    .glass-rating-badge .rating-info { display: flex; align-items: center; gap: 8px; }
    .rating-stars { font-size: .78rem !important; margin: 0 !important; }
    .rating-score { font-size: .82rem; }
    .slider-arrow { top: 24px !important; transform: none !important; width: 38px !important; height: 38px !important; }
    .prev-arrow { left: 12px !important; }
    .next-arrow { right: 12px !important; }
    .glass-title { font-size: 1.25rem !important; }
}


/* ---- fixes after review ---- */
@media (max-width: 768px) {
    #packages-hero-slider { height: 600px !important; min-height: 600px !important; }
    /* full-screen mobile menu: teal, not black */
    .nav-menu { background: linear-gradient(160deg, #0E5560 0%, #0A3B45 100%) !important; }
    .nav-menu .nav-link { color: #fff !important; }
    .nav-menu .nav-link.active { color: #FFD36B !important; }
}
.slider-pagination {
    background: rgba(10, 59, 69, .6);
    padding: 7px 12px !important;
    border-radius: 999px;
    width: auto !important;
    left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
    bottom: 20px !important;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.slider-pagination .dot.active { background: #FFD36B !important; }
.header .lang-dropdown .dropdown-menu { background: #0A3B45 !important; border-color: rgba(255, 211, 107, .4) !important; }