/* ============================================================================
   AAGAM HOLIDAYS AND LEISURES — Single Source Stylesheet
   Palette: "Peacock Premium" — deep teal + warm gold, light airy content.
   Linked from every page (no per-page <style> blocks).
   ============================================================================ */

:root{
  /* Dark structure (nav / hero / footer) */
  --ink:#0E2A33;
  /* Brand teal family (harmonises with the cyan logo) */
  --primary:#0F6E7E; --cyan:#19B7C9; --aqua:#8FD9E0;
  /* Warm gold accent */
  --gold:#E8A23D;
  /* Neutrals */
  --canvas:#F6F9FA; --text:#1C2B30;
  /* Gradients */
  --grad-hero:linear-gradient(140deg,#0B232B 0%,#0F5160 48%,#0C4250 100%);
  --grad-band:linear-gradient(135deg,#0E2A33 0%,#125464 100%);
  --grad-cta:linear-gradient(135deg,#0F6E7E 0%,#19B7C9 100%);
  --grad-teal:linear-gradient(135deg,#0F6E7E 0%,#19B7C9 100%);
  /* Effects */
  --glow-teal:0 4px 20px rgba(25,183,201,.40);
  --shadow-card:0 1px 3px rgba(15,110,126,.04),0 6px 16px rgba(15,110,126,.05),0 18px 36px rgba(15,110,126,.045);
  /* Typography — two families only: Montserrat (headings/labels), Poppins (body).
     Playfair Display is reserved for pull-quotes and nothing else. */
  --font-head:'Montserrat', sans-serif;
  --font-body:'Poppins', sans-serif;
  --font-quote:'Playfair Display', Georgia, serif;
  /* Spacing scale — every vertical rhythm on the site comes from these tokens.
     NOTE: adjacent sections each contribute their own padding, so the gap a
     visitor sees at a section boundary is DOUBLE these values. They are sized
     for that: 2.75rem × 2 = 5.5rem of real gap between sections on desktop. */
  --sp-section:2.25rem;      /* main content section, mobile   */
  --sp-section-lg:2.75rem;   /* main content section, ≥768px   */
  --sp-band:1.75rem;         /* CTA / stat band, mobile        */
  --sp-band-lg:2.25rem;      /* CTA / stat band, ≥768px        */
  --sp-head:1.75rem;         /* section header → content       */
  --sp-head-lg:2rem;
  --nav-h:4rem;              /* fixed navbar height, mobile    */
  --nav-h-lg:5rem;           /* fixed navbar height, ≥1024px   */
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--canvas); color: var(--text); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0A1F26; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary),var(--cyan)); border-radius: 3px; }

/* ── Type scale ─────────────────────────────────────────────────────────────
   One heading font (Montserrat) at four fixed steps. Pages must not override
   the family or the size — use the step that fits the role instead.

   NOTE the `body` prefix: Tailwind's CDN build injects its <style> into <head>
   *after* this file, and its preflight resets h1–h6 to `font-size:inherit;
   font-weight:inherit`. A bare `h1` selector loses that tie on source order,
   so every heading rule here is qualified to outrank it.                     */
body h1, body h2, body h3, body h4 { font-family: var(--font-head); }
body h1 { font-size: clamp(2.1rem, 4.8vw, 3.2rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; }
body h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; }
body h3 { font-size: 1.1rem;  font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
body h4 { font-size: .95rem;  font-weight: 700; letter-spacing: -0.01em; }
/* One body rhythm. The compound selectors are required: Tailwind's text-*
   utilities set line-height as well as font-size, and they load after this
   file, so a bare `p` rule would lose on every sized paragraph. */
p { line-height: 1.65; }
p.text-xs, p.text-sm, p.text-base, p.text-lg, p.text-xl { line-height: 1.65; }

/* Brand wordmark in the nav and footer (kept out of the heading scale —
   it is a logo lockup, not a heading) */
.wordmark { font-family: var(--font-head); font-weight: 900; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; }
.wordmark-sub { font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--aqua); }
/* Hero stat figures — Montserrat, matching .stat-num on the Why-Us page */
.stat-hero { font-family: var(--font-head); font-weight: 900; letter-spacing: -.03em; }

/* Heading roles below h2 — card titles, panel titles, image-overlay names.
   Compound selectors so they also beat a Tailwind text-* utility on the
   same element (both are one class, and Tailwind comes later). */
h2.sub-title, h3.sub-title, .sub-title     { font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
h3.panel-title, h4.panel-title, .panel-title { font-family: var(--font-head); font-size: 1rem;  font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; }
div.card-name, .card-name                  { font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
/* The one serif on the site: traveller quotes */
p.quote, .quote { font-family: var(--font-quote); font-style: italic; line-height: 1.7; }

.sec-label { font-family: var(--font-head); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* ── Vertical rhythm ────────────────────────────────────────────────────────
   Sections use these three classes only — no ad-hoc py-* on section elements. */
.section-pad   { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
.section-pad-b { padding-bottom: var(--sp-section); }   /* section that follows another directly */
.band-pad      { padding-top: var(--sp-band);    padding-bottom: var(--sp-band); }
.sec-head      { margin-bottom: var(--sp-head); }
@media (min-width: 768px) {
  .section-pad   { padding-top: var(--sp-section-lg); padding-bottom: var(--sp-section-lg); }
  .section-pad-b { padding-bottom: var(--sp-section-lg); }
  .band-pad      { padding-top: var(--sp-band-lg);    padding-bottom: var(--sp-band-lg); }
  .sec-head      { margin-bottom: var(--sp-head-lg); }
}

/* Sub-page hero banner: clears the fixed navbar, then a tight band of padding.
   No vh-based min-height — the content decides the height. */
.page-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--grad-hero); }
.hero-pad  { padding: calc(var(--nav-h) + 1.75rem) 1.25rem 2.5rem; }
@media (min-width: 1024px) { .hero-pad { padding: calc(var(--nav-h-lg) + 2rem) 1.25rem 3rem; } }

/* ── Logo chip — a light badge so the dark logo never camouflages on dark bars ── */
.logo-chip{
  display:inline-flex; align-items:center; justify-content:center; padding:5px; border-radius:12px;
  background:#ffffff;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.28), 0 0 0 1px rgba(25,183,201,.30);
}
.logo-chip img{ display:block; border-radius:7px; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
#navbar { transition: background 0.4s ease, box-shadow 0.4s ease; }
#navbar.scrolled { background: rgba(14,42,51,0.92) !important; backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(25,183,201,.35), 0 8px 34px rgba(0,0,0,.45); }
.nav-link { position: relative; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background: var(--gold); transition: width 0.3s ease; border-radius:2px; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active { color:#fff !important; }
#mobileMenu { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s ease; }
#mobileMenu.open { max-height: 520px; opacity: 1; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-p {
  background: var(--grad-cta); box-shadow: var(--glow-teal);
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease; display:inline-block;
}
.btn-p:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 32px rgba(25,183,201,.6); }
.btn-p:active { transform: scale(.98); }
.btn-p:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn-o { border: 2px solid rgba(255,255,255,.75); transition: all 0.22s cubic-bezier(.34,1.56,.64,1); background: transparent; }
.btn-o:hover { background: #fff; color: var(--primary) !important; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(255,255,255,.25); }
.btn-o:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ── Shared decorative ─────────────────────────────────────────────────── */
.badge { background: var(--grad-teal); box-shadow: 0 2px 12px rgba(25,183,201,.5); }
.lshadow { box-shadow: var(--shadow-card); transition: box-shadow 0.3s ease; }
.lshadow:hover { box-shadow: 0 2px 6px rgba(15,110,126,.06), 0 12px 26px rgba(15,110,126,.09), 0 28px 48px rgba(15,110,126,.07); }
.noise-layer { position:absolute; inset:0; pointer-events:none; opacity:.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.form-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(25,183,201,.2); outline: none; }
.img-wrap img { transition: transform 0.7s cubic-bezier(.25,.8,.25,1); }
.img-wrap:hover img { transform: scale(1.09); }

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.float-a { animation: floatY 6s ease-in-out infinite; }
.float-b { animation: floatY 5s ease-in-out 1.5s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.4)} }
.pulse-dot { animation: pulseDot 2s ease-in-out infinite; }

/* ── Cards (home / destinations) ───────────────────────────────────────── */
.dest-card { transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease; }
.dest-card:hover { transform: translateY(-10px) scale(1.01); }

/* ── Destinations tabs ─────────────────────────────────────────────────── */
.cat-tab { cursor:pointer; padding:0.6rem 1.4rem; border-radius:9999px; font-family:var(--font-head); font-size:0.8rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; border:2px solid #e2e8f0; transition:all 0.22s ease; white-space:nowrap; color:#64748b; background:transparent; }
.cat-tab:hover { border-color:var(--cyan); color:var(--primary); }
.cat-tab.active { background:var(--grad-teal); color:#fff; border-color:transparent; box-shadow:0 4px 16px rgba(25,183,201,.45); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Itinerary link ────────────────────────────────────────────────────── */
.itin-link { transition:color .2s ease, background .2s ease, gap .2s ease; color:var(--primary); }
.itin-link:hover { color:var(--ink) !important; }
.itin-link .itin-arrow { transition:transform .2s ease; }
.itin-link:hover .itin-arrow { transform:translateX(3px); }
.dest-card .itin-link:hover { background:#E6F6F8; }

/* ── Itinerary detail page ─────────────────────────────────────────────── */
.inc-tab { cursor:pointer; padding:.55rem 1.4rem; border-radius:9999px; font-family:var(--font-head); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border:2px solid #e2e8f0; color:#64748b; background:#fff; transition:all .2s ease; }
.inc-tab.active { background:var(--grad-teal); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(25,183,201,.35); }
.day-card { border-left:3px solid var(--cyan); background:#fff; border-radius:.75rem; padding:1rem 1.25rem; box-shadow:0 2px 8px rgba(15,110,126,.05); }
.day-badge { width:2.4rem; height:2.4rem; border-radius:50%; background:var(--grad-teal); color:#fff; font-family:var(--font-head); font-weight:800; font-size:.72rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 10px rgba(25,183,201,.4); }
.highlight-dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--gold); flex-shrink:0; margin-top:.45rem; }
.policy-icon { width:1.4rem; height:1.4rem; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.15rem; }

/* ── Services page ─────────────────────────────────────────────────────── */
.svc-card { background:#fff; border-radius:4px; border:1.5px solid var(--accent); padding:1.6rem 1.5rem 1.5rem; display:flex; flex-direction:column; transition:transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease; }
.svc-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.1); }
.icon-box { width:56px; height:56px; border-radius:8px; background:var(--icon-bg); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; flex-shrink:0; }
.svc-title { font-family:var(--font-head); font-size:1.1rem; font-weight:700; letter-spacing:-.02em; color:#1a1a1a; margin-bottom:.5rem; line-height:1.35; }
.svc-divider { width:32px; height:2.5px; background:var(--accent); border-radius:2px; margin-bottom:.8rem; }
.svc-desc { font-size:.875rem; color:#666; line-height:1.65; margin-bottom:1rem; }
.svc-bullets { list-style:none; padding:0; margin:0 0 1.15rem; flex:1; }
.svc-bullets li { font-size:.82rem; color:#555; padding:.2rem 0; display:flex; align-items:center; gap:.6rem; }
.svc-bullets li::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.svc-btn { border:1.5px solid var(--accent); color:var(--accent); text-align:center; padding:.7rem 1rem; font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; text-decoration:none; border-radius:3px; transition:background .22s ease, color .22s ease; display:block; }
.svc-btn:hover { background:var(--accent); color:#fff; }
.svc-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* ── Why-Us page ───────────────────────────────────────────────────────── */
.feature-card { background:#fff; border-radius:1.5rem; padding:1.6rem; transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease; }
.feature-card:hover { transform:translateY(-8px); }
.icon-wrap { width:56px; height:56px; border-radius:1rem; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#E6F6F8,#FBEFD9); }
.stat-num { font-family:var(--font-head); font-size:2.4rem; font-weight:900; line-height:1; background:linear-gradient(135deg,var(--primary),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.review-card { background:#fff; border-radius:1.25rem; padding:1.5rem; }

/* ── Contact page ──────────────────────────────────────────────────────── */
.contact-input { width:100%; padding:.75rem 1.1rem; border:2px solid #E2E8F0; border-radius:.875rem; font-family:var(--font-body); font-size:.9rem; color:var(--text); background:#FAFBFB; outline:none; transition:border-color .2s, box-shadow .2s; }
.contact-input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(25,183,201,.18); background:#fff; }
.contact-input::placeholder { color:#94a3b8; }
/* Date inputs & selects: show the same light-grey "placeholder" look when empty,
   and the normal dark text once a value is chosen — uniform with the text fields. */
select.contact-input, input.contact-input[type="date"] { color:#94a3b8; }
select.contact-input.has-value, input.contact-input[type="date"].has-value { color:var(--text); }
select.contact-input option { color:var(--text); }
input.contact-input[type="date"]::-webkit-calendar-picker-indicator { opacity:.55; }
.info-card { background:#fff; border-radius:1.25rem; padding:1.15rem 1.25rem; display:flex; gap:1rem; align-items:flex-start; }
.info-icon { width:46px; height:46px; min-width:46px; border-radius:.875rem; background:linear-gradient(135deg,#E6F6F8,#FBEFD9); display:flex; align-items:center; justify-content:center; }
select.contact-input { appearance:none; cursor:pointer; }
#formSuccess { display:none; }

/* ── Packages page ─────────────────────────────────────────────────────── */
.pkg-card { background:#fff; border-radius:1.25rem; overflow:hidden; transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease; }
.pkg-card:hover { transform:translateY(-10px); }
.inc-tag { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:600; color:var(--primary); background:#E6F6F8; border-radius:999px; padding:3px 10px; }

/* ── Policies page ─────────────────────────────────────────────────────── */
.pol-card { background:#fff; border-radius:1.5rem; overflow:hidden; }
.pol-head { background:var(--grad-band); padding:1.25rem 1.75rem; }
.pol-body { padding:1.5rem 1.75rem; }
.step-row { display:flex; gap:1rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid #f1f5f9; }
.step-row:last-child { border-bottom:none; }
.step-dot { width:36px; height:36px; min-width:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--grad-teal); color:#fff; font-family:var(--font-head); font-weight:800; font-size:.85rem; }
.cancel-row { display:flex; gap:1rem; align-items:center; padding:.75rem 1rem; border-radius:.75rem; margin-bottom:.5rem; }
.cancel-pct { font-family:var(--font-head); font-weight:900; font-size:1.4rem; }

/* ── WhatsApp floating widget (site-wide) ─────────────────────────────────── */
.wa-fab { position:fixed; right:22px; bottom:22px; z-index:80; width:58px; height:58px; border-radius:50%; background:#25D366; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 22px rgba(37,211,102,.5); transition:transform .2s ease, box-shadow .2s ease; }
.wa-fab:hover { transform:scale(1.08); box-shadow:0 10px 28px rgba(37,211,102,.6); }
.wa-fab svg { width:32px; height:32px; }
.wa-panel { position:fixed; right:22px; bottom:92px; z-index:80; width:310px; max-width:calc(100vw - 44px); background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 16px 44px rgba(14,42,51,.30); transform:translateY(12px) scale(.96); opacity:0; pointer-events:none; transform-origin:bottom right; transition:opacity .2s ease, transform .2s ease; }
.wa-panel.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.wa-head { background:#075E54; color:#fff; padding:14px 16px; display:flex; align-items:center; gap:11px; }
.wa-head .wa-av { width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wa-head .wa-av svg { width:24px; height:24px; }
.wa-body { padding:14px 16px; }
.wa-intro { font-size:.82rem; color:#5C7178; line-height:1.5; margin-bottom:12px; }
.wa-opt { display:block; background:#F0F7F4; border:1px solid #DCEFE6; color:#0F6E7E; border-radius:10px; padding:10px 12px; font-size:.85rem; font-weight:600; margin-bottom:8px; text-decoration:none; transition:background .15s ease, transform .15s ease; }
.wa-opt:last-child { margin-bottom:0; }
.wa-opt:hover { background:#E1F3EA; transform:translateX(2px); }