/* ===========================================================
   Ha Long Bay Wedding — Coastal Design System
   Emerald/teal water tones + warm gold accents
   =========================================================== */

:root {
    /* Color Palette — Ha Long Bay coastal */
    --color-primary: #157a74;       /* Deep teal (water) */
    --color-primary-dark: #0f5e59;  /* Darker teal for hover */
    --color-primary-light: #e3f2f1; /* Pale aqua */
    --color-gold: #c39a52;          /* Warm champagne gold accent */
    --color-gold-dark: #a87f3c;
    --color-deep: #0d3b3a;          /* Deep emerald (hero/footer) */
    --color-bg-light: #fbfaf7;      /* Warm off-white */
    --color-bg-alt: #eef4f3;        /* Soft aqua-tinted sand */
    --color-text-dark: #1d2e2c;     /* Deep slate green */
    --color-text-muted: #5c6b69;    /* Muted teal-gray */
    --color-white: #ffffff;

    /* Typography */
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Montserrat', sans-serif;

    /* Layout & Transitions */
    --max-width: 1140px;
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-soft: 0 10px 30px rgba(13, 59, 58, 0.05);
    --shadow-medium: 0 15px 40px rgba(13, 59, 58, 0.10);
}

/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.2;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-smooth);
}
a:hover { color: var(--color-gold-dark); }

/* ===== Layout Utilities ===== */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 100px 0; }

.section-header { text-align: center; margin-bottom: 50px; }

.section-title {
    font-size: 2.8rem;
    color: var(--color-text-dark);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.divider {
    width: 60px;
    height: 2px;
    background-color: var(--color-gold);
    margin: 0 auto 20px;
}

.section-subtitle {
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.subsection-title {
    font-size: 2rem;
    text-align: center;
    color: var(--color-primary);
    margin: 60px 0 30px;
    letter-spacing: 0.5px;
}

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    padding: 14px 34px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-primary {
    /* Pill shape with a warm gold-lacquer gradient (nod to Vietnamese gilt lacquerware) */
    padding: 13px 40px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    border-radius: 50px;
    color: #fffdf7;
    background-image: linear-gradient(135deg, #e0bd74 0%, #c39a52 45%, #a87f3c 100%);
    border: 1px solid rgba(255, 240, 210, 0.55);
    box-shadow: 0 6px 18px rgba(168, 127, 60, 0.35), inset 0 1px 0 rgba(255, 248, 230, 0.5);
}
.btn-primary:hover {
    color: #fffdf7;
    transform: translateY(-2px);
    background-image: linear-gradient(135deg, #e9c884 0%, #d4a85f 45%, #b88a44 100%);
    box-shadow: 0 10px 26px rgba(168, 127, 60, 0.5), inset 0 1px 0 rgba(255, 248, 230, 0.6);
}

/* ===== Navbar ===== */
.navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 40px 34px;
    background: linear-gradient(180deg, rgba(4, 25, 25, 0.32) 0%, rgba(4, 25, 25, 0.16) 56%, transparent 100%);
    transition: var(--transition-smooth);
}
.navbar.scrolled {
    background: rgba(251, 250, 247, 0.95);
    backdrop-filter: blur(10px);
    padding: 6px 40px 22px;
    box-shadow: 0 2px 20px rgba(13, 59, 58, 0.06);
    border-bottom: 1px solid rgba(21, 122, 116, 0.1);
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 2.05rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 2px;
    color: #ffd36a;
    text-shadow: 0 1px 2px rgba(2, 16, 16, 0.9);
    transition: var(--transition-smooth);
}
.navbar.scrolled .nav-logo {
    color: #b88224;
    text-shadow: none;
}

.nav-links { display: flex; align-items: center; gap: 28px; }

.nav-links a {
    font-size: 1.06rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffd36a;
    position: relative;
    padding: 6px 0;
    text-shadow: 0 1px 2px rgba(2, 16, 16, 0.9);
}
.nav-links a:hover, .nav-links a.active { color: #ffe29a; }
.navbar.scrolled .nav-links a {
    color: #b88224;
    text-shadow: none;
}
.navbar.scrolled .nav-links a:hover,
.navbar.scrolled .nav-links a.active { color: #8f641c; }
.nav-fancy {
    font-family: var(--font-heading);
    font-size: 1.35em;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: none;
    line-height: 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background-color: var(--color-gold);
    transition: var(--transition-smooth);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-nav-toggle .bar {
    display: block;
    width: 25px; height: 2px;
    margin: 5px auto;
    background-color: var(--color-white);
    transition: var(--transition-smooth);
}
.navbar.scrolled .mobile-nav-toggle .bar { background-color: var(--color-text-dark); }

/* ===== Hero ===== */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(135deg, #0d3b3a 0%, #1a6b65 50%, #2c8c84 100%);
    background-size: cover;
    background-position: center;
    color: var(--color-white);
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('images/halong-hero-boat.png');
    background-size: cover;
    background-position: center bottom;
    filter: brightness(1.22) saturate(1.08);
    transform: scale(1.01);
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse 58% 50% at 50% 46%, rgba(6, 28, 27, 0.08) 0%, rgba(6, 28, 27, 0.03) 48%, transparent 78%);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    padding: 0 20px 11vh;
    animation: fadeIn 1.8s ease-out;
}
.hero-subtitle {
    font-size: 1.38rem;
    font-weight: 800;
    letter-spacing: 5px;
    margin-bottom: 18px;
    text-transform: uppercase;
    color: #ffd36a;
    text-shadow: 0 1px 2px rgba(2, 16, 16, 0.95), 0 2px 10px rgba(4, 25, 25, 0.78);
}
.hero-title {
    font-size: 6.65rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 2px;
    line-height: 1.1;
    font-style: italic;
    color: #ffd36a;
    text-shadow: 0 1px 2px rgba(2, 16, 16, 0.95), 0 4px 18px rgba(4, 25, 25, 0.86), 0 0 34px rgba(4, 25, 25, 0.62);
}
.hero-date {
    font-size: 1.32rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #ffd36a;
    text-shadow: 0 1px 2px rgba(2, 16, 16, 0.95), 0 2px 12px rgba(4, 25, 25, 0.86), 0 0 20px rgba(4, 25, 25, 0.62);
}
.hero-names {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffd36a;
    margin-bottom: 40px;
    text-shadow: 0 1px 2px rgba(2, 16, 16, 0.95), 0 2px 12px rgba(4, 25, 25, 0.86), 0 0 20px rgba(4, 25, 25, 0.62);
}
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 32px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-right: 5px solid #ffd36a;
    border-bottom: 5px solid #ffd36a;
    transform: translateX(-50%) rotate(45deg);
    filter: drop-shadow(0 2px 3px rgba(2, 16, 16, 0.95)) drop-shadow(0 4px 14px rgba(4, 25, 25, 0.8));
    animation: scrollCue 1.8s ease-in-out infinite;
}
.hero-scroll-cue:hover {
    border-color: #ffe29a;
}

/* ===== Countdown ===== */
.countdown-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 45px;
}
.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 78px;
}
.countdown-num {
    font-family: var(--font-heading);
    font-size: 3.45rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
    color: #ffd36a;
    text-shadow: 0 1px 2px rgba(2, 16, 16, 0.95), 0 3px 14px rgba(4, 25, 25, 0.86), 0 0 20px rgba(4, 25, 25, 0.62);
}
.countdown-label {
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffd36a;
    text-shadow: 0 1px 2px rgba(2, 16, 16, 0.95), 0 2px 10px rgba(4, 25, 25, 0.86), 0 0 18px rgba(4, 25, 25, 0.58);
}

/* ===== Welcome ===== */
.welcome-section { background-color: var(--color-bg-light); }
.welcome-text {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.welcome-text p { color: var(--color-text-muted); margin-bottom: 22px; font-size: 1.02rem; }
.welcome-text strong { color: var(--color-text-dark); font-weight: 600; }
.welcome-note { font-style: italic; }

.quickfacts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 60px;
}
.quickfact {
    background-color: var(--color-bg-alt);
    padding: 30px 20px;
    text-align: center;
    border-top: 3px solid var(--color-gold);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.quickfact-icon { font-size: 1.6rem; margin-bottom: 4px; }
.quickfact-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
}
.quickfact-value {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-primary);
    line-height: 1.3;
}

/* ===== The Cruise ===== */
.cruise-section { background-color: var(--color-bg-alt); }
.cruise-intro, .pretrip-intro, .posttrip-intro {
    max-width: 740px;
    margin: 0 auto 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.02rem;
}
.posttrip-intro {
    max-width: 920px;
}

/* Shared card grid (cruise, hotels, post-trip ideas) */
.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}
/* Cruise section has 2 cards — center them to line up with the
   Included / Not-Included blocks below */
.details-grid.cruise-cards {
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.details-card {
    background-color: var(--color-bg-light);
    padding: 45px 30px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(21, 122, 116, 0.06);
    transition: var(--transition-smooth);
}
.details-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(195, 154, 82, 0.3);
}
.details-icon { font-size: 2.2rem; margin-bottom: 22px; display: inline-block; }
.details-card h3 { font-size: 1.8rem; margin-bottom: 12px; letter-spacing: 0.5px; }
.details-time {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gold-dark);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}
.details-location { font-size: 0.95rem; color: var(--color-text-dark); margin-bottom: 12px; line-height: 1.6; }
.details-desc { font-size: 0.92rem; color: var(--color-text-muted); }

/* ===== Itinerary (vertical day list) ===== */
.itinerary-section { background-color: var(--color-bg-light); }
.itinerary-list {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
}
.itinerary-list::before {
    content: '';
    position: absolute;
    left: 39px; top: 10px; bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-gold), rgba(195, 154, 82, 0.2));
}
.itin-day {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
}
.itin-marker {
    flex-shrink: 0;
    width: 60px; height: 60px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    box-shadow: 0 6px 16px rgba(21, 122, 116, 0.25);
}
.itin-marker span {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
}
.itin-content {
    background-color: var(--color-bg-alt);
    padding: 26px 30px;
    flex-grow: 1;
    box-shadow: var(--shadow-soft);
    border-left: 3px solid var(--color-gold);
}
.itin-date {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--color-gold-dark);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}
.itin-content h3 { font-size: 1.7rem; margin-bottom: 10px; color: var(--color-text-dark); }
.itin-content p { color: var(--color-text-muted); font-size: 0.95rem; }

/* ===== Cruise: included / not-included lists ===== */
.incl-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.incl-col {
    background-color: var(--color-bg-light);
    padding: 34px 36px;
    box-shadow: var(--shadow-soft);
}
.incl-col h4 {
    font-size: 1.35rem;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(21, 122, 116, 0.12);
}
.incl-yes h4 { color: var(--color-primary); }
.incl-no h4 { color: var(--color-gold-dark); }
.incl-col ul { list-style: none; }
.incl-col li {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    padding: 6px 0 6px 20px;
    position: relative;
}
.incl-yes li::before {
    content: '✓';
    position: absolute; left: 0;
    color: var(--color-primary);
    font-weight: 600;
}
.incl-no li::before {
    content: '·';
    position: absolute; left: 4px;
    color: var(--color-gold-dark);
    font-weight: 700;
}

/* ===== Itinerary: day-by-day cards ===== */
.itin-note {
    text-align: center;
    max-width: 720px;
    margin: -20px auto 50px;
    font-size: 0.92rem;
    font-style: italic;
    color: var(--color-text-muted);
}
.itin-days {
    display: grid;
    gap: 34px;
    max-width: 860px;
    margin: 0 auto;
}
.day-card {
    background-color: var(--color-bg-light);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(21, 122, 116, 0.07);
    overflow: hidden;
}
.day-head {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 34px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}
.day-num {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
    width: 64px; height: 64px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.day-date {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.85);
    display: block;
    margin-bottom: 4px;
}
.day-meta h3 { font-size: 1.9rem; font-style: italic; }
.wd-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-style: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background-color: var(--color-gold);
    color: var(--color-white);
    padding: 4px 10px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 8px;
}
.wedding-day .day-head {
    background: linear-gradient(135deg, var(--color-deep) 0%, var(--color-primary) 100%);
}
.wedding-day { border-color: var(--color-gold); border-width: 2px; }

.schedule { list-style: none; padding: 14px 34px 28px; }
.schedule li {
    display: flex;
    gap: 22px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(21, 122, 116, 0.07);
    align-items: baseline;
}
.schedule li:last-child { border-bottom: none; }
.schedule .time {
    flex-shrink: 0;
    width: 52px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-primary);
}
.schedule .event { font-size: 0.95rem; color: var(--color-text-dark); }
.highlight-row {
    background-color: var(--color-primary-light);
    margin: 4px -16px;
    padding: 12px 16px !important;
    border-radius: 4px;
    border-bottom: none !important;
}
.highlight-row .time { color: var(--color-gold-dark); }
.highlight-row .event strong { color: var(--color-deep); }

/* ===== Placeholder "coming soon" banner ===== */
.placeholder-banner {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 30px;
    padding: 12px 24px;
    background-color: rgba(195, 154, 82, 0.12);
    border: 1px dashed var(--color-gold);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--color-gold-dark);
}

/* ===== Pre-Trip / Post-Trip info blocks ===== */
.pretrip-section { background-color: var(--color-bg-alt); }
.posttrip-section { background-color: var(--color-bg-light); }

.info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}
.info-block {
    background-color: var(--color-bg-light);
    padding: 35px;
    box-shadow: var(--shadow-soft);
    border-top: 3px solid var(--color-primary);
}
.posttrip-section .info-block { background-color: var(--color-bg-alt); }
.info-block.highlight {
    border-top-color: var(--color-gold);
    background-color: var(--color-primary-light);
}
.info-block h4 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--color-primary);
}
.info-block p { color: var(--color-text-muted); font-size: 0.95rem; }
.info-row:has(.highlight) { grid-template-columns: 1fr; max-width: 760px; }

/* ===== Travel Essentials ===== */
.essentials-section { background-color: var(--color-bg-alt); }

/* Layout: tall checklist on the left, six info boxes (2×3) on the right */
.essentials-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    align-items: stretch;
}
.essentials-checklist {
    background-color: var(--color-bg-light);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    border-top: 3px solid var(--color-gold);
    padding: 30px 28px;
}
.essentials-checklist h3 { font-size: 1.7rem; color: var(--color-primary); margin-bottom: 4px; }
.checklist-note { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 18px; font-style: italic; }
.checklist { list-style: none; }
.checklist li {
    position: relative;
    padding: 11px 0 11px 30px;
    border-bottom: 1px solid rgba(21, 122, 116, 0.08);
    font-size: 0.92rem;
    color: var(--color-text-dark);
    line-height: 1.5;
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before {
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 16px; height: 16px;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    background-color: transparent;
}

.essentials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
/* Inside the layout the six boxes sit 2 across */
.essentials-layout .essentials-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.essential-item {
    background-color: var(--color-bg-light);
    padding: 32px 28px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    border-bottom: 3px solid transparent;
}
.essential-item:hover {
    border-bottom-color: var(--color-gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}
.essential-item h4 { font-size: 1.35rem; margin-bottom: 10px; color: var(--color-text-dark); }
.essential-item p { color: var(--color-text-muted); font-size: 0.92rem; }
.essential-item strong { color: var(--color-primary); font-weight: 600; }

/* ===== Per-section photo carousel ===== */
.section-carousel {
    max-width: 620px;
    margin: 56px auto 0;
}
.carousel-label {
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}
.carousel-track {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background-color: var(--color-bg-alt);
}
.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}
.carousel-slide.active { opacity: 1; visibility: visible; }
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Hanoi & Ninh Binh galleries: show the top of each photo (avoid cropping the top off) */
[data-autoload="hanoi"] .carousel-slide img,
[data-autoload="ninhbinh"] .carousel-slide img {
    object-position: top;
}
/* Caption overlay (itinerary slideshow) */
.slide-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 18px 14px;
    background: linear-gradient(to top, rgba(6, 28, 27, 0.92) 0%, rgba(6, 28, 27, 0.55) 55%, transparent 100%);
    color: #fff;
    text-align: left;
    pointer-events: none;
}
.slide-caption .cap-day {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 4px;
}
.slide-caption .cap-text {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.3;
}
/* Placeholder slide until real photos are dropped in */
.carousel-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(21, 122, 116, 0.35);
    border-radius: 8px;
    background:
        repeating-linear-gradient(45deg, rgba(21,122,116,0.03) 0 12px, transparent 12px 24px),
        var(--color-bg-alt);
}
.carousel-placeholder span {
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--color-text-muted);
}

/* Prev / next arrows */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-deep);
    background-color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 2px 10px rgba(13, 40, 39, 0.25);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
}
.carousel-btn:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-50%) scale(1.08);
}
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }
/* Hide arrows when there's only one slide (JS adds this class) */
.section-carousel.single .carousel-btn,
.section-carousel.single .carousel-dots { display: none; }

/* Dots */
.carousel-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background-color: rgba(21, 122, 116, 0.25);
    transition: var(--transition-smooth);
}
.carousel-dots .dot:hover { background-color: rgba(21, 122, 116, 0.5); }
.carousel-dots .dot.active {
    background-color: var(--color-gold);
    transform: scale(1.25);
}

/* ===== Pre-Trip: aligned 3×4 band grid =====
   Each of the 12 boxes is its own card; grid rows force every band
   (cities / galleries / hotels / transport) to line up across columns. */
.pretrip-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 16px;
    align-items: stretch;
}
.pt-box {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-light);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    padding: 28px 24px;
}

/* Row 1 — city */
.pt-city { text-align: center; align-items: center; border-top: 3px solid var(--color-gold); }
.pt-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.pt-city h3 { font-size: 2rem; color: var(--color-text-dark); }
.pt-tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-gold-dark);
    font-weight: 600;
    margin-bottom: 14px;
}
.pt-desc { font-size: 0.92rem; color: var(--color-text-muted); }

/* Row 2 — gallery box (holds the carousel); shared by Pre-Trip & Post-Trip */
.pt-gallery { padding: 16px; justify-content: center; }
.pt-gallery .section-carousel { margin: 0; max-width: 100%; width: 100%; }
.pt-gallery .carousel-track { aspect-ratio: 4 / 3; }
.pt-gallery .carousel-label { margin-bottom: 10px; }

/* Row 4 — getting to the cruise */
.pt-transport h4 { font-size: 1.15rem; color: var(--color-primary); margin-bottom: 8px; }
.pt-transport p { font-size: 0.88rem; color: var(--color-text-muted); }

/* ===== Post-Trip: aligned place grids (2-col plans + 3-col "things to do") ===== */
.places-grid {
    display: grid;
    gap: 22px;
    align-items: stretch;
    margin-top: 16px;
}
.places-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* Pre-Cruise / Post-Cruise group labels (a header row inside the 3-col grid) */
.group-label {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--color-gold-dark);
    margin: 0;
    align-self: end;
}
.plans-grid { margin-top: 28px; }
.plans-grid .pre-label  { grid-column: 1; }
.plans-grid .post-label { grid-column: 2 / 4; }
.places-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.places-grid + .places-grid { margin-top: 22px; }

/* "Choose Your Adventure" — two explore blocks (Vietnam slideshow + stopover chips) */
.explore-block { text-align: center; margin-top: 30px; }
.explore-block + .explore-block { margin-top: 56px; }
.explore-title { font-size: 1.9rem; color: var(--color-text-dark); margin-bottom: 12px; }
.explore-text { max-width: 720px; margin: 0 auto 26px; color: var(--color-text-muted); }
.explore-carousel { max-width: 760px; }
.country-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
}
.country-chip {
    background-color: var(--color-bg-light);
    border: 1px solid rgba(21, 122, 116, 0.18);
    border-radius: 50px;
    padding: 9px 20px;
    font-size: 0.92rem;
    color: var(--color-text-dark);
    box-shadow: var(--shadow-soft);
}

/* "Our Plans" info block — left-aligned, gold accent */
.pt-plan { text-align: left; border-left: 4px solid var(--color-gold); }
.pt-plan h3 { font-size: 1.9rem; color: var(--color-text-dark); margin-bottom: 4px; }
.pt-plan .pt-tag { display: block; margin-bottom: 12px; }
.plan-link { margin-top: 12px; font-size: 0.85rem; font-weight: 600; }
.plan-link a { color: var(--color-primary); }
.plan-link a:hover { color: var(--color-gold-dark); }

/* Recommended hotels + booking-status dots */
.pt-hotels > h4 {
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-bottom: 10px;
    text-align: center;
}
.hotel-list { list-style: none; }
.hotel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid rgba(21, 122, 116, 0.08);
}
.hotel:last-child { border-bottom: none; }
.hotel-name { font-size: 0.92rem; color: var(--color-text-dark); }
a.hotel-name { color: var(--color-primary); transition: var(--transition-smooth); }
a.hotel-name::after { content: ' ↗'; font-size: 0.78em; opacity: 0.55; }
a.hotel-name:hover { color: var(--color-gold-dark); }

/* Tier labels inside a hotels box */
.hotel-tier-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--color-gold-dark);
    margin: 16px 0 2px;
}
.pt-hotels > .hotel-tier-label:first-of-type { margin-top: 8px; }

/* Status dot — hollow by default */
.status {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid;
    background-color: transparent;
    box-sizing: border-box;
}
.status-none   { border-color: rgba(92, 107, 105, 0.55); background-color: transparent; }
.status-couple { border-color: var(--color-gold);    background-color: var(--color-gold);
                 box-shadow: 0 0 0 3px rgba(195, 154, 82, 0.18); }
.status-guests { border-color: var(--color-primary); background-color: var(--color-primary); }

/* Shared booking key */
.hotel-key {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 24px;
    max-width: 760px;
    margin: 0 auto 44px;
    padding: 14px 24px;
    background-color: var(--color-bg-light);
    border: 1px solid rgba(21, 122, 116, 0.12);
    border-radius: 50px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}
.hotel-key .key-title {
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-text-dark);
}
.hotel-key .key-item { display: inline-flex; align-items: center; gap: 8px; }

/* Carousel images are clickable to enlarge (no blue selection/tap highlight) */
.carousel-slide img, .lb-img {
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}
.lb-img { cursor: default; }
.carousel-slide img:focus, .lb-img:focus,
.lb-btn:focus, .carousel-btn:focus { outline: none; }

/* Cruise gallery sits at the top of the section — a touch wider, with breathing room */
.cruise-gallery { max-width: 780px; margin-top: 0; margin-bottom: 46px; }

/* ===== Lightbox (full-screen photo viewer) ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(6, 28, 27, 0.93);
    backdrop-filter: blur(4px);
    padding: 5vh 6vw;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.lightbox.open { display: flex; opacity: 1; }
/* Image + caption stack as a centered column */
.lb-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 94vw;
    max-height: 94vh;
    animation: lbZoom 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.lb-img {
    max-width: 94vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    cursor: default;
}
@keyframes lbZoom { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.lb-btn {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    z-index: 2;
}
.lb-btn:hover { background-color: rgba(255, 255, 255, 0.25); }
.lb-close {
    top: 22px; right: 28px;
    width: 46px; height: 46px;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    padding-bottom: 3px;
}
.lb-prev, .lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 54px; height: 54px;
    border-radius: 50%;
    font-size: 2.2rem;
    line-height: 1;
    padding-bottom: 5px;
}
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
/* Caption: solid dark bar directly beneath the image (no overlap) */
.lb-caption {
    max-width: min(860px, 92vw);
    padding: 12px 26px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    pointer-events: none;
}
.lb-caption:empty { display: none; }
.lb-caption .cap-day {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 4px;
}
.lb-caption .cap-text {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-style: italic;
    line-height: 1.3;
    color: #fff;
}
.lb-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    letter-spacing: 2px;
}
@media (max-width: 768px) {
    .lb-caption .cap-text { font-size: 1.1rem; }
    .lb-img { max-height: 74vh; }
}

@media (max-width: 768px) {
    .lb-prev { left: 10px; } .lb-next { right: 10px; }
    .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 1.8rem; }
    .lb-close { top: 12px; right: 14px; }
}

/* ===== Footer ===== */
.footer {
    background-color: var(--color-deep);
    color: rgba(255, 255, 255, 0.65);
    padding: 80px 0;
    text-align: center;
}
.footer-logo {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--color-white);
    letter-spacing: 5px;
    margin-bottom: 18px;
}
.footer-thankyou {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-style: italic;
    color: var(--color-primary-light);
    margin-bottom: 22px;
    letter-spacing: 0.5px;
}
.footer-contact-label { font-size: 0.9rem; margin-bottom: 24px; }
.footer-contact-label a { color: var(--color-gold); }
.footer-contact-label a:hover { color: var(--color-primary-light); }
.footer-contacts {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.footer-person { display: flex; flex-direction: column; gap: 4px; }
.fp-name {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--color-white);
    margin-bottom: 4px;
}
.footer-person a { color: var(--color-gold); font-size: 0.88rem; }
.footer-person a:hover { color: var(--color-primary-light); }
.footer-copyright {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

/* ===== Animations ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollCue {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(45deg); opacity: 0.72; }
    50% { transform: translateX(-50%) translateY(8px) rotate(45deg); opacity: 1; }
}

/* Scroll-reveal for cards / itinerary days */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .details-grid, .essentials-grid { grid-template-columns: 1fr 1fr; }
    /* Stack the checklist above the boxes on tablet */
    .essentials-layout { grid-template-columns: 1fr; }
    .quickfacts { grid-template-columns: repeat(2, 1fr); }
    .hero-title { font-size: 4.55rem; }
}

@media (max-width: 768px) {
    .navbar { padding: 4px 24px 30px; }
    .navbar.scrolled { padding: 6px 24px 20px; }

    .mobile-nav-toggle { display: block; z-index: 1001; }

    .nav-links {
        position: fixed;
        top: 0; right: -100%;
        height: 100vh;
        width: 100%;
        max-width: 300px;
        background-color: var(--color-bg-light);
        flex-direction: column;
        justify-content: center;
        gap: 32px;
        padding: 40px;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
        transition: var(--transition-smooth);
        z-index: 1000;
    }
    .nav-links.active { right: 0; }
    .nav-links a, .navbar.scrolled .nav-links a { color: #b88224; font-size: 1.28rem; font-weight: 700; text-shadow: none; }
    .navbar.scrolled .mobile-nav-toggle .bar { background-color: var(--color-text-dark); }

    .mobile-nav-toggle.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-nav-toggle.active .bar:nth-child(2) { opacity: 0; }
    .mobile-nav-toggle.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .details-grid, .essentials-grid, .info-row, .quickfacts, .incl-wrap, .pretrip-matrix { grid-template-columns: 1fr; gap: 18px; }
    .essentials-layout, .essentials-layout .essentials-grid { grid-template-columns: 1fr; }
    /* On phones, regroup the 12 boxes by city (city → photos → hotels → transport) */
    .pretrip-matrix .col-1.pt-city { order: 1; }
    .pretrip-matrix .col-1.pt-gallery { order: 2; }
    .pretrip-matrix .col-1.pt-hotels { order: 3; }
    .pretrip-matrix .col-1.pt-transport { order: 4; }
    .pretrip-matrix .col-2.pt-city { order: 5; }
    .pretrip-matrix .col-2.pt-gallery { order: 6; }
    .pretrip-matrix .col-2.pt-hotels { order: 7; }
    .pretrip-matrix .col-2.pt-transport { order: 8; }
    .pretrip-matrix .col-3.pt-city { order: 9; }
    .pretrip-matrix .col-3.pt-gallery { order: 10; }
    .pretrip-matrix .col-3.pt-hotels { order: 11; }
    .pretrip-matrix .col-3.pt-transport { order: 12; }

    /* Post-Trip place grids: stack and regroup each place (info → its gallery) */
    .places-grid.cols-2, .places-grid.cols-3 { grid-template-columns: 1fr; }
    /* Group labels: full width, ordered with their group */
    .plans-grid .pre-label, .plans-grid .post-label { grid-column: 1; margin-top: 18px; }
    .plans-grid .pre-label { order: -3; }
    .plans-grid .post-label { order: 0; }
    .places-grid .place-0.pt-city, .places-grid .place-0.pt-plan { order: -2; }
    .places-grid .place-0.pt-gallery { order: -1; }
    .places-grid .place-1.pt-city, .places-grid .place-1.pt-plan { order: 1; }
    .places-grid .place-1.pt-gallery { order: 2; }
    .places-grid .place-2.pt-city, .places-grid .place-2.pt-plan { order: 3; }
    .places-grid .place-2.pt-gallery { order: 4; }
    .places-grid .place-3.pt-city { order: 5; }
    .places-grid .place-3.pt-gallery { order: 6; }
    .section-carousel { max-width: 100%; }
    .footer-contacts { gap: 28px; }

    .day-head { padding: 20px 22px; gap: 16px; }
    .day-num { width: 52px; height: 52px; font-size: 1.2rem; }
    .day-meta h3 { font-size: 1.5rem; }
    .wd-badge { display: block; margin: 8px 0 0; width: fit-content; }
    .schedule { padding: 12px 22px 22px; }
    .schedule li { gap: 14px; }
    .incl-col { padding: 28px 26px; }

    .countdown-container { gap: 14px; }
    .countdown-num { font-size: 2.4rem; }
    .countdown-item { min-width: 60px; }
    .hero-title { font-size: 3.7rem; }
    .itinerary-list { padding-left: 0; }
    .itin-day { gap: 18px; }
}