:root {
  /* Brand palette (unchanged) */
  --ocean: #0a4f6e;
  --ocean-light: #1a7fa0;
  --sand: #e8d5a3;
  --sand-light: #f5edd6;
  --coral: #c95f3a;
  --coral-light: #e87a55;
  --gold: #c9a227;
  --dark: #0d1f2d;
  --white: #fdfaf4;
  --text: #1a2e3b;
  --muted: #6b8a9a;

  /* ── Semantic tokens (Phase 1 foundation) ──
     Surfaces, borders, text emphasis, shadows, type scale and motion
     easings live as named tokens so Phase 2 recompositions reach for
     intent ("--surface-elevated") rather than raw hex. Hex values still
     map to the brand palette above. */
  --surface: var(--white);
  --surface-elevated: #ffffff;
  --surface-sunk: #f4f7fa;
  --surface-dark: var(--dark);

  --border: rgba(10, 47, 70, 0.10);
  --border-strong: rgba(10, 47, 70, 0.18);
  --border-onDark: rgba(255, 255, 255, 0.10);

  --text-strong: #0a1a24;
  --text-body: var(--text);
  --text-muted: var(--muted);
  --text-onDark: rgba(255, 255, 255, 0.86);
  --text-onDark-muted: rgba(255, 255, 255, 0.58);

  --accent: var(--coral);
  --accent-hover: var(--coral-light);
  --accent-onDark: var(--sand);

  /* Tinted shadows — never pure black on the warm-cream surface */
  --shadow-card: 0 1px 2px rgba(10, 47, 70, 0.04), 0 8px 24px rgba(10, 47, 70, 0.07);
  --shadow-card-hover: 0 2px 4px rgba(10, 47, 70, 0.05), 0 14px 38px rgba(10, 47, 70, 0.11);
  --shadow-elevated: 0 4px 8px rgba(10, 47, 70, 0.06), 0 24px 60px rgba(10, 47, 70, 0.14);

  /* Type scale (Playfair display, DM Sans body) */
  --fs-display: clamp(3.2rem, 7vw, 5.5rem);
  --fs-h1: clamp(2.2rem, 4.4vw, 3.4rem);
  --fs-h2: clamp(1.8rem, 3.2vw, 2.6rem);
  --fs-h3: 1.4rem;
  --fs-body: 1rem;
  --fs-small: 0.88rem;
  --fs-micro: 0.78rem;
  --fs-eyebrow: 0.72rem;

  /* Tracking — display tightens, eyebrow opens up */
  --tracking-display: -0.018em;
  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.22em;

  /* Radii — one scale, used consistently per 4.4 SHAPE CONSISTENCY LOCK */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Spacing rhythm — premium-travel briefs need air (DENSITY 3) */
  --pad-section: clamp(5rem, 9vw, 8rem);
  --pad-section-tight: clamp(3rem, 5vw, 5rem);
  --gap-card: clamp(1.25rem, 2vw, 2rem);

  /* Motion easings — natural, never linear */
  --ease-out-cubic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 560ms;
}

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

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 4rem;
  background: rgba(10,20,30,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; color: var(--sand); letter-spacing: 0.03em;
}
.nav-logo span { color: var(--coral-light); }
.nav-links { display: flex; gap: 1.2rem; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,0.75); text-decoration: none;
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 0.3s;
  cursor: pointer;
}
.nav-links a:hover, .nav-links a.active { color: var(--sand); }
.nav-actions { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }

.nav-cta {
  background: var(--coral); color: white; border: none;
  padding: 0.6rem 1.2rem; border-radius: 2px;
  font-family: 'DM Sans', sans-serif; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: background 0.3s; white-space: nowrap;
}
.nav-cta:hover { background: var(--coral-light); }

/* ── LANGUAGE SELECTOR ── */
.lang-selector { position: relative; }
.lang-btn {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9); padding: 0.45rem 0.8rem;
  border-radius: 4px; font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
  cursor: pointer; display: flex; align-items: center; gap: 0.35rem;
  transition: all 0.25s; white-space: nowrap; letter-spacing: 0.04em;
}
.lang-btn:hover { background: rgba(255,255,255,0.22); }
.lang-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: white; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  min-width: 155px; overflow: hidden; z-index: 2000;
}
.lang-menu.open { display: block; }
.lang-menu a {
  display: block; padding: 0.65rem 1rem; color: var(--text);
  font-size: 0.84rem; cursor: pointer; transition: background 0.18s;
  text-decoration: none;
}
.lang-menu a:hover { background: #f5f7fa; }
.lang-menu a.active { background: var(--sand-light); color: var(--ocean); font-weight: 500; }

/* ── SIGN IN DROPDOWN ── */
.signin-selector { position: relative; }
.signin-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: white; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  min-width: 175px; overflow: hidden; z-index: 2000;
}
.signin-menu.open { display: block; }
.signin-menu a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1rem; color: var(--text);
  font-size: 0.88rem; cursor: pointer; transition: background 0.18s;
  text-decoration: none; border-bottom: 1px solid #f0f0f0;
}
.signin-menu a:last-child { border-bottom: none; }
.signin-menu a:hover { background: #f5f7fa; color: var(--ocean); }

/* ── MOBILE SIGN-IN PORTALS ── */
.mobile-signin-portals {
  padding: 1rem 0 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 0.5rem;
}
.mobile-signin-label {
  color: rgba(255,255,255,0.4); font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.mobile-portal-link {
  display: block; padding: 0.75rem 0;
  color: rgba(255,255,255,0.85); font-size: 0.9rem;
  cursor: pointer; transition: color 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-portal-link:last-child { border-bottom: none; }
.mobile-portal-link:hover { color: var(--sand); }

/* ── MOBILE LANGUAGE SELECTOR ── */
.mobile-lang-selector {
  padding: 1rem 0 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 0.5rem;
}
.mobile-lang-selector p {
  color: rgba(255,255,255,0.35); font-size: 0.68rem;
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.7rem;
}
.mobile-lang-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mobile-lang-btn {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75); padding: 0.4rem 0.65rem;
  border-radius: 4px; font-size: 0.78rem; cursor: pointer;
  font-family: 'DM Sans', sans-serif; transition: all 0.2s;
}
.mobile-lang-btn:hover { background: rgba(255,255,255,0.18); color: white; }
.mobile-lang-btn.active { background: var(--ocean); border-color: var(--ocean); color: white; }

/* ── RTL (Arabic) ── */
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .nav-actions { flex-direction: row-reverse; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .signin-menu { right: auto; left: 0; }
[dir="rtl"] .hero-content { direction: rtl; }
[dir="rtl"] .owner-auth-wrap,
[dir="rtl"] .super-auth-wrap { direction: rtl; }
[dir="rtl"] .guide-dashboard-content { direction: rtl; }

/* ── PAGES ── */
.page { display: none; min-height: 100vh; min-height: 100dvh; }
.page.active { display: flex; flex-direction: column; }
.page > footer { margin-top: auto; }

/* ═══════════════════════════════
   PAGE 1 — WELCOME / HERO
═══════════════════════════════ */
#page-home {
  background: var(--dark);
  position: relative; overflow: hidden;
}
/* Editorial split: headline column + image column.
   Layered radial glows kept as atmosphere, opacity halved so they
   don't compete with the photograph in the right column. */
.hero {
  min-height: 88dvh;
  background: linear-gradient(135deg, #0d1f2d 0%, #0a4f6e 55%, #1a3a2a 100%);
  position: relative; overflow: hidden;
  padding: calc(80px + 3rem) clamp(1.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    padding: calc(80px + 1.5rem) 1.5rem 3rem;
    min-height: auto;
    gap: 2rem;
  }
}
.hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.hero-bg-shapes::before {
  content: '';
  position: absolute; top: -25%; right: -15%;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(26,127,160,0.18) 0%, transparent 65%);
  border-radius: 50%;
}
.hero-bg-shapes::after {
  content: '';
  position: absolute; bottom: -25%; left: -15%;
  width: 42vw; height: 42vw;
  background: radial-gradient(circle, rgba(201,95,58,0.10) 0%, transparent 65%);
  border-radius: 50%;
}
.hero-content {
  text-align: left;
  z-index: 2;
  max-width: 620px;
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp 0.9s var(--ease-out-cubic) 0.05s forwards;
}
.hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--coral-light);
  margin-bottom: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.hero-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--coral-light);
  opacity: 0.7;
}
.hero-title {
  font-family: 'Playfair Display', serif;
  /* Larger than --fs-display because the hero gets a single dramatic
     two-line stack ("Experience / Zanzibar") and needs cover-poster
     scale to anchor the whole page. */
  font-size: clamp(3.6rem, 9vw, 8.4rem);
  color: var(--white);
  /* 1.02 line-height + 0.12em padding-bottom together reserve enough room
     for italic Playfair's descenders in the "Zanzibar" line. Tighter
     values clip the descender against the H1 box. */
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
  font-weight: 700;
  padding-bottom: 0.12em;
}
.hero-title em { color: var(--sand); font-style: italic; font-weight: 400; }

/* ── HERO WORD ROTATOR ────────────────────────────────────────
   Cycles the verb above "Zanzibar" (Experience → Discover →
   Explore → Live). The .hero-rotator__ghost is rendered invisible
   but takes layout space, so the container width stays locked to
   the widest word — no horizontal jump as words swap. Each word
   sweeps in from below the baseline and exits upward. JS lives at
   initHeroRotator() in main.js. ───────────────────────────────── */
.hero-rotator {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Padding-bottom matches .hero-title's descender room so the
     rotator's overflow:hidden doesn't clip italic letterforms.
     white-space:nowrap stops the ghost+absolute word from wrapping
     to two lines on very narrow phones (<340px) where 'Experience'
     barely fits the column. */
  padding-bottom: 0.12em;
  white-space: nowrap;
  max-width: 100%;
}
.hero-rotator__ghost {
  display: inline-block;
  visibility: hidden;
  pointer-events: none;
}
.hero-rotator__word {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.55s var(--ease-out-cubic),
              transform 0.7s var(--ease-out-cubic);
  will-change: transform, opacity;
}
.hero-rotator__word.is-active {
  opacity: 1;
  transform: translateY(0);
}
.hero-rotator__word.is-exit {
  opacity: 0;
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotator__word { transition: none; }
  /* JS skips the cycle for reduced-motion users; the first word
     stays static via .is-active. */
}
.hero-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  color: rgba(255,255,255,0.72);
  margin-bottom: 2.4rem;
  font-weight: 300;
  max-width: 38ch;
  line-height: 1.45;
}
.hero-buttons {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Hero photograph (right column). Single layered image with a subtle
   ocean wash on the inner edge so the headline column reads cleanly
   against the gradient backdrop instead of fighting the photo. */
.hero-visual {
  position: relative;
  z-index: 1;
  height: clamp(360px, 60dvh, 580px);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  transform: scale(1.04);
  animation: heroImageReveal 1.1s var(--ease-out-cubic) 0.15s forwards;
}
.hero-visual picture,
.hero-visual img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-visual img { object-fit: cover; }
.hero-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(13,31,45,0.32) 0%, transparent 38%, transparent 70%, rgba(13,31,45,0.22) 100%);
  pointer-events: none;
}
@media (max-width: 960px) {
  .hero-visual {
    height: clamp(220px, 38dvh, 320px);
    order: -1;
  }
  .hero-content { max-width: 100%; }
  .hero-subtitle { margin-bottom: 1.6rem; }
}

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── BOOKING MODAL (.sb-modal) ─────────────────────────────────
   Two-pane layout: summary on the left keeps the listing visible while
   the visitor fills the form on the right. Mobile collapses to a single
   column. Field IDs unchanged so updateServiceBookingEstimate() and
   submitServiceBooking() keep working untouched. */
.sb-modal {
  background: rgba(13,31,45,0.72);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  align-items: center;
  padding: clamp(1rem, 3vw, 3rem);
}
.sb-modal .sb-wrapper {
  width: min(960px, 94vw);
  max-width: 960px;
  background: transparent;
  position: relative;
  /* Let the inner .sb-card handle its own scroll, so the wrapper
     doesn't double-scrollbar against the base .modal-wrapper rule. */
  max-height: none;
  overflow: visible;
}
.sb-modal .modal-close {
  top: 0.9rem; right: 0.9rem;
  width: 38px; height: 38px;
  background: rgba(13,31,45,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.95);
  font-size: 0.95rem;
  z-index: 5;
  transition: background var(--dur-fast) var(--ease-out-cubic),
              transform var(--dur-fast) var(--ease-out-cubic);
}
.sb-modal .modal-close:hover {
  background: rgba(13,31,45,0.85);
  transform: scale(1.06);
}
.sb-card {
  background: var(--surface-elevated);
  border-radius: var(--r-lg);
  /* CRITICAL: explicit `height` (not just max-height) so the inner grid's
     `height: 100%` has something concrete to resolve against. max-height
     alone leaves height computed as auto, which means percentages collapse
     to "auto" — the grid grows to content size and the form column never
     becomes scrollable. With height + overflow:hidden the card is a real
     box that contains its grid. */
  height: 86dvh;
  max-height: 86dvh;
  overflow: hidden;
  box-shadow:
    0 28px 70px rgba(0,0,0,0.40),
    0 8px 22px rgba(0,0,0,0.22);
  /* Subtle entry. Fade up, no rotation. */
  opacity: 0;
  transform: translateY(24px);
  animation: sbEnter 480ms var(--ease-out-cubic) forwards;
}
@keyframes sbEnter {
  to { opacity: 1; transform: translateY(0); }
}
.sb-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  min-height: 540px;
  /* No max-height here — the parent .sb-card enforces it. The grid
     fills the available card height so its children's overflow:auto
     becomes a real scroll context. */
  height: 100%;
  max-height: none;
}

/* ── Summary pane (left) ── */
.sb-summary {
  background: linear-gradient(180deg, #0d1f2d 0%, var(--ocean) 100%);
  color: var(--text-onDark);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: relative;
  /* min-height: 0 is mandatory on grid children that need to scroll
     internally. Plus explicit height: 100% so the pane fills the grid
     track (which now has a concrete height thanks to .sb-card height). */
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.sb-summary-image-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #050b12;
  box-shadow: 0 8px 28px rgba(0,0,0,0.32);
}
.sb-summary-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out-cubic);
}
.sb-summary-image-wrap:hover .sb-summary-image { transform: scale(1.05); }
.sb-summary-type {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  padding: 0.3rem 0.7rem;
  background: rgba(13,31,45,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--sand);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.10);
}
.sb-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sb-summary-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--coral-light);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}
.sb-summary-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--coral-light);
  opacity: 0.7;
}
.sb-summary-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0;
  padding-bottom: 0.05em;
}
.sb-summary-rate {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  margin: 0.2rem 0 0;
  font-weight: 300;
}
.sb-summary-estimate {
  margin-top: auto;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-md);
  color: rgba(255,255,255,0.86);
  font-size: 0.9rem;
  line-height: 1.55;
  display: none;
}
.sb-summary-estimate strong { color: var(--sand); }

/* ── Form pane (right) ── */
.sb-form {
  background: var(--surface-elevated);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  /* Same scroll-context recipe as .sb-summary: height: 100% fills the
     grid track, min-height: 0 allows shrink, overflow-y: auto creates
     the scrollbar. All three must be present. */
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,47,70,0.18) transparent;
}
.sb-form-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.6rem;
}
.sb-form-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 1.5rem;
  line-height: 1.15;
}
.sb-form-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.sb-form-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0.5rem;
}
.sb-form-section-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  font-weight: 600;
}
.sb-form .form-group { margin-bottom: 0.85rem; }
.sb-form .form-group:last-child { margin-bottom: 0; }
.sb-form .form-group label {
  display: block;
  font-size: 0.84rem;
  color: var(--text-strong);
  margin-bottom: 0.35rem;
  font-weight: 500;
}
.sb-form .form-group input,
.sb-form .form-group textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--text-strong);
  background: white;
  transition: border-color var(--dur-fast) var(--ease-out-cubic),
              box-shadow var(--dur-fast) var(--ease-out-cubic);
}
.sb-form .form-group input:focus,
.sb-form .form-group textarea:focus {
  outline: none;
  border-color: var(--ocean-light);
  box-shadow: 0 0 0 3px rgba(26,127,160,0.18);
}
.sb-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.sb-optional {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 0.3rem;
  font-style: italic;
}
.sb-required {
  color: var(--coral);
  font-weight: 600;
}
.sb-form-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.6rem 0 0;
  line-height: 1.5;
}
.sb-deposit-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: #eef7f1;
  border: 1px solid #cfe8d8;
  border-radius: var(--r-md);
  margin: 0.6rem 0 1.2rem;
  font-size: 0.85rem;
  color: #2a5a3a;
  line-height: 1.5;
}
.sb-deposit-notice i { color: var(--ocean); margin-top: 0.15rem; }
.sb-deposit-notice strong { color: var(--text-strong); display: block; margin-bottom: 0.15rem; }
.sb-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.95rem 1.4rem;
  background: var(--coral);
  color: white;
  border: none;
  border-radius: var(--r-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-cubic),
              transform var(--dur-fast) var(--ease-out-cubic),
              box-shadow var(--dur-fast) var(--ease-out-cubic);
  box-shadow: 0 6px 18px rgba(201,95,58,0.30);
  margin-top: 0.4rem;
}
.sb-submit-btn:hover {
  background: var(--coral-light);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(201,95,58,0.36);
}
.sb-submit-btn:active { transform: translateY(0); }
.sb-submit-btn:disabled {
  background: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.sb-status {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0.8rem 0 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .sb-modal { padding: 0; align-items: stretch; }
  .sb-modal .sb-wrapper {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    max-height: 100dvh;
  }
  .sb-card {
    border-radius: 0;
    max-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .sb-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 0;
    max-height: none;
    flex: 1;
    overflow-y: auto;
  }
  /* Compact horizontal summary on mobile: tiny image thumb + name on
     one row, estimate slips below as a thin strip when active. */
  .sb-summary {
    display: grid;
    grid-template-columns: 78px 1fr;
    grid-template-areas:
      "img meta"
      "est est";
    gap: 0.7rem 1rem;
    padding: 1rem 1.25rem;
    overflow-y: visible;
  }
  .sb-summary-image-wrap {
    grid-area: img;
    aspect-ratio: 1 / 1;
    width: 78px;
  }
  .sb-summary-image-wrap .sb-summary-type { display: none; }
  .sb-summary-meta {
    grid-area: meta;
    align-self: center;
    min-width: 0;
    gap: 0.15rem;
  }
  .sb-summary-eyebrow { font-size: 0.65rem; margin-bottom: 0; }
  .sb-summary-name { font-size: 1.15rem; }
  .sb-summary-rate { font-size: 0.92rem; }
  /* Estimate keeps writing to #sbEstimate via the existing JS; the
     grid-area moves it into a full-width strip under the meta row so
     the conversion signal stays visible. */
  .sb-summary-estimate {
    grid-area: est;
    margin-top: 0;
    padding: 0.7rem 0.9rem;
    font-size: 0.84rem;
  }
  .sb-form {
    padding: 1.4rem 1.25rem 1.5rem;
  }
  .sb-form .form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sb-summary-image,
  .sb-submit-btn,
  .modal-close {
    transition: none !important;
  }
}

/* ── EDITORIAL ESSAY (home page) ──────────────────────────────
   Replaces the old gallery slideshow. Four moments, four compositions:
   moment 1 + 4 are full-bleed with overlaid text and a slow ken-burns
   on the photograph; moments 2 + 3 are asymmetric splits that mirror
   each other so the section reads as a rhythm, not a stack. Inner
   .reveal nodes on each text block trigger a single fade-up on entry
   (Section 5.C pattern). Reduced-motion users see the final state
   immediately via the global .reveal short-circuit. */
/* ── STORY SECTION ────────────────────────────────────────────
   Full-bleed crossfading photo carousel with a typed paragraph
   overlay. Replaces the old four-moment essay. JS hooks up at
   initStorySection() in main.js — rotates .story-slide.is-active
   on a timer, retypes the .story-typed__text on each slide.
   Layer order (bottom → top):
     1. .story-slides       absolutely stacked <picture>s; the active
                            one fades up, the others sit at opacity 0.
     2. .story-scrim        radial+linear vignette for text legibility.
     3. .story-text         eyebrow + headline + typed paragraph.
     4. .story-dots         clickable indicators bottom-center.
   ──────────────────────────────────────────────────────────── */
.story {
  position: relative;
  min-height: clamp(560px, 88vh, 760px);
  overflow: hidden;
  isolation: isolate;
  background: #07131c;
  display: grid;
  align-items: center;
}
.story-slides {
  position: absolute; inset: 0;
  z-index: 0;
}
.story-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.6s var(--ease-out-cubic), transform 8s linear;
  display: block;
}
.story-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.story-slide.is-active {
  opacity: 1;
  transform: scale(1);
  /* Slow Ken-Burns drift while the slide is the active one. */
  animation: storyKenBurns 9s ease-out forwards;
}
@keyframes storyKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.story-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 0%, transparent 35%, rgba(7,19,28,0.55) 100%),
    linear-gradient(180deg, rgba(7,19,28,0.55) 0%, rgba(7,19,28,0.25) 40%, rgba(7,19,28,0.78) 100%),
    radial-gradient(80% 60% at 0% 100%, rgba(26,127,160,0.22) 0%, transparent 60%);
}
.story-text {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem);
  color: var(--white);
}
.story-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--coral-light);
  margin-bottom: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.story-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--coral-light);
  opacity: 0.7;
}
.story-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.8rem;
  font-weight: 700;
  color: var(--white);
}
.story-headline em {
  color: var(--sand);
  font-style: italic;
  font-weight: 400;
}
.story-typed {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  min-height: 4.5em; /* keeps layout stable while the line types in */
  text-shadow: 0 1px 14px rgba(7,19,28,0.5);
}
.story-typed__caret {
  display: inline-block;
  width: 0.6ch;
  margin-left: 0.05em;
  color: var(--sand);
  animation: storyCaret 1s steps(1) infinite;
  font-weight: 300;
}
@keyframes storyCaret {
  50% { opacity: 0; }
}

/* Slide indicators — hairline pills that fill to the right while the
   active slide is on screen. JS toggles .is-active on click. */
.story-dots {
  position: absolute;
  bottom: clamp(1.5rem, 3vw, 2.8rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.7rem;
}
.story-dot {
  appearance: none;
  border: 0;
  background: transparent;
  /* Horizontal padding gives a 44×44px touch target on phones — the
     visible hairline (::after) sits in the middle of this hit area. */
  padding: 0.9rem 0.6rem;
  cursor: pointer;
  position: relative;
  min-height: 44px;
}
.story-dot::after {
  content: '';
  display: block;
  width: 36px; height: 2px;
  background: rgba(255,255,255,0.28);
  border-radius: 999px;
  transition: background 0.4s ease, width 0.4s ease;
}
.story-dot.is-active::after {
  background: var(--sand);
  width: 56px;
}
.story-dot:hover::after { background: rgba(255,255,255,0.5); }

@media (max-width: 720px) {
  .story { min-height: 78vh; }
  /* 7em accommodates the longest line ("Cinnamon, clove, vanilla,
     cardamom — …", ~100 chars) wrapping to ~4 lines at phone width
     without the surrounding layout shifting as text types in. */
  .story-typed { min-height: 7em; }
  .story-dot::after { width: 24px; }
  .story-dot.is-active::after { width: 40px; }
}

/* Reduced motion: kill Ken-Burns and caret blink, show the first
   slide statically and the typed text fully rendered. JS also
   short-circuits the typing loop when prefers-reduced-motion matches. */
@media (prefers-reduced-motion: reduce) {
  .story-slide,
  .story-slide.is-active { animation: none; transition: none; transform: none; }
  .story-typed__caret { animation: none; opacity: 0; }
}

/* Scroll-reveal utility: section opts in by adding the .reveal class,
   the IntersectionObserver in main.js flips it to .in-view on entry.
   Pure transform/opacity, GPU-friendly, prefers-reduced-motion safe. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out-cubic),
    transform var(--dur-slow) var(--ease-out-cubic);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── RTL: mirror the booking modal grid for Arabic. CSS Grid auto-
   mirrors when the parent has direction: rtl. ──────────────────── */
[dir="rtl"] .sb-grid {
  direction: rtl;
}
[dir="rtl"] .sb-form,
[dir="rtl"] .sb-summary,
[dir="rtl"] .sb-form .form-group label,
[dir="rtl"] .sb-summary-meta,
[dir="rtl"] .sb-form-title,
[dir="rtl"] .sb-form-section-label {
  text-align: right;
}
/* Eyebrow's hairline rule sits before the text via flex. In RTL flex
   reverses naturally, so the hairline ends up on the right side of
   the text. No extra rule needed. */
@keyframes heroImageReveal {
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content,
  .hero-visual {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* RTL (Arabic): mirror the editorial split so the photograph sits on the
   reader's "first-seen" side and the headline reads from the natural side. */
[dir="rtl"] .hero { direction: rtl; }
[dir="rtl"] .hero-content { text-align: right; }
[dir="rtl"] .hero-buttons { justify-content: flex-start; }
/* The decorative radial-gradient blobs use absolute `right`/`left`,
   which don't auto-flip on RTL. Mirror them explicitly so the ocean
   glow stays behind the headline column for Arabic readers. */
[dir="rtl"] .hero-bg-shapes::before {
  right: auto;
  left: -15%;
}
[dir="rtl"] .hero-bg-shapes::after {
  left: auto;
  right: -15%;
}
.btn-primary {
  background: var(--coral); color: white; border: none;
  padding: 1rem 2.5rem; font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: all 0.3s; border-radius: 2px;
}
.btn-primary:hover { background: var(--coral-light); transform: translateY(-2px); }
.btn-outline {
  background: transparent; color: var(--sand);
  border: 1px solid rgba(232,213,163,0.5);
  padding: 1rem 2.5rem; font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: all 0.3s; border-radius: 2px;
}
.btn-outline:hover { border-color: var(--sand); background: rgba(232,213,163,0.1); }

.section-header {
  text-align: center; padding: 4rem 2rem 2.5rem; margin-bottom: 0;
}
.section-eyebrow {
  font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--coral-light); margin-bottom: 1rem;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem); color: var(--white);
}
.section-title span { color: var(--sand); }

/* STATS STRIP — hairline-divided composition, count-up on view */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ocean);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  gap: 0;
  position: relative;
}
.stats-row .stat-item {
  padding: 0.4rem clamp(0.8rem, 2vw, 1.8rem);
  border-right: 1px solid rgba(255,255,255,0.10);
}
.stats-row .stat-item:last-child { border-right: none; }
.stat-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  color: var(--sand);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.012em;
  margin-bottom: 0.5rem;
  /* Tabular-nums keeps the digits from jittering during count-up animation */
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ═══════════════════════════════
   PAGE 2 — HOTELS
═══════════════════════════════ */
#page-hotels {
  background: var(--sand-light);
  padding-top: 80px;
}
/* Standalone-page hero — left-aligned editorial composition.
   Shared baseline for hotels / attractions / transport / guides so the
   four pages read as one system without becoming identical (each one
   varies the gradient angle + colour pair below). */
.hotels-hero,
.attractions-hero {
  padding: clamp(5.5rem, 8vw, 7.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.hotels-hero {
  background: linear-gradient(125deg, var(--ocean) 0%, var(--dark) 70%);
  position: relative; overflow: hidden;
}
.hotels-hero::before,
.attractions-hero::before {
  /* Tiny eyebrow-style hairline above the headline, matching the home
     hero's eyebrow signature. Built as a pseudo so we don't touch the
     HTML (each standalone-page hero already has h1 + p). margin-inline
     auto centers the 32px hairline under the centered text block. */
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--coral-light);
  opacity: 0.75;
  margin: 0 auto 1.5rem;
}
.hotels-hero h1,
.attractions-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-h1);
  color: var(--white);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  margin: 0 auto 1rem;
  max-width: 18ch;
}
.hotels-hero p,
.attractions-hero p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: rgba(255,255,255,0.72);
  max-width: 46ch;
  margin: 0 auto 2rem;
  font-weight: 300;
  line-height: 1.45;
}

.filter-tabs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.filter-tab {
  padding: 0.6rem 1.5rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.7); background: transparent;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
  cursor: pointer; transition: all 0.3s;
}
.filter-tab:hover, .filter-tab.active {
  background: var(--coral); border-color: var(--coral); color: white;
}

.hotels-grid {
  display: grid;
  /* minmax(min(100%, 360px), 1fr) keeps the 360px ideal min on wide
     screens but lets the card shrink below 360px when the viewport
     itself is narrower — prevents horizontal overflow on phones. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 2rem; padding: 3rem 4rem; max-width: 1400px; margin: 0 auto;
}

.hotel-card {
  background: white; border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.hotel-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.hotel-img-wrap { position: relative; height: 220px; overflow: hidden; }
.hotel-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s;
}
.hotel-card:hover .hotel-img-wrap img { transform: scale(1.05); }
.hotel-badge {
  position: absolute; top: 1rem; left: 1rem;
  padding: 0.3rem 0.8rem; border-radius: 2px;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500;
}
.badge-5 { background: var(--gold); color: white; }
.badge-4 { background: var(--ocean); color: white; }
.badge-3 { background: var(--muted); color: white; }

.hotel-stars { color: var(--gold); font-size: 0.9rem; }
.hotel-info { padding: 1.5rem; }
.hotel-info h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; margin-bottom: 0.3rem;
}
.hotel-location {
  font-size: 0.8rem; color: var(--muted); margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.3rem;
}
.hotel-desc { font-size: 0.87rem; color: #556; line-height: 1.6; margin-bottom: 1rem; }
.hotel-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1rem; border-top: 1px solid #eee;
}
/* ── Unified card price style ──────────────────────────────────
   One look across hotel / attraction / guide / transport cards:
   Playfair italic-bold gold for the amount, DM Sans muted upright
   for the per-unit suffix. Each card renderer wraps the amount in
   <span> and the suffix in <small>. ──────────────────────────── */
.hotel-price,
.attr-price,
.guide-price,
.tc-price {
  font-family: 'Playfair Display', serif;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  line-height: 1;
}
.hotel-price span,
.attr-price span,
.guide-price span,
.tc-price span {
  font-size: 1.4rem;
  color: var(--gold);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}
.hotel-price small,
.attr-price small,
.guide-price small,
.tc-price small {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 400;
  font-style: normal;
}
.btn-book {
  background: var(--ocean); color: white; border: none;
  padding: 0.6rem 1.2rem; border-radius: 3px; font-size: 0.8rem;
  cursor: pointer; transition: background 0.3s; letter-spacing: 0.05em;
}
.btn-book:hover { background: var(--ocean-light); }

/* Rating & Reviews */
.hotel-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.rating-score {
  background: var(--ocean); color: white; padding: 0.2rem 0.5rem;
  border-radius: 3px; font-size: 0.85rem; font-weight: 500;
}
.rating-count { font-size: 0.8rem; color: var(--muted); }

/* Hotel Modal */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center;
  overflow-y: auto;       /* let the overlay itself scroll on small viewports */
  padding: 1.5rem 1rem;
  overscroll-behavior: contain;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* IE / old Edge */
}
.modal-overlay::-webkit-scrollbar { width: 0; height: 0; display: none; }
.modal-overlay.open { display: flex; }
.modal {
  background: white; border-radius: 12px;
  max-height: 85vh; overflow-y: auto;
  margin: auto 0;         /* vertically centred when short; scrolls when tall */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal::-webkit-scrollbar { width: 0; height: 0; display: none; }
.modal-wrapper {
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  margin: auto 0;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal-wrapper::-webkit-scrollbar { width: 0; height: 0; display: none; }
.modal-img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #111; }
.modal-body { padding: 2rem; }
.modal-body h2 { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 0.5rem; }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(0,0,0,0.5); color: white; border: none;
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.modal-wrapper { position: relative; }

/* Review Form */
.review-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #eee; }
.review-section h4 { font-family: 'Playfair Display', serif; margin-bottom: 1rem; font-size: 1.2rem; }
.star-input { display: flex; gap: 0.3rem; margin-bottom: 1rem; }
.star-btn { font-size: 1.5rem; background: none; border: none; cursor: pointer; color: #ddd; transition: color 0.2s; }
.star-btn.active, .star-btn:hover { color: var(--gold); }
.review-textarea {
  width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 4px;
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; resize: vertical;
  min-height: 80px; margin-bottom: 0.8rem;
}
.btn-submit {
  background: var(--coral); color: white; border: none;
  padding: 0.7rem 1.5rem; border-radius: 3px; cursor: pointer;
  font-size: 0.85rem; letter-spacing: 0.05em;
}
.btn-submit:hover { background: var(--coral-light); }

.reviews-list { margin-top: 1.5rem; }
.review-item {
  padding: 1rem; background: var(--sand-light); border-radius: 6px;
  margin-bottom: 0.8rem;
}
.review-header { display: flex; justify-content: space-between; margin-bottom: 0.4rem; }
.reviewer-name { font-weight: 500; font-size: 0.9rem; }
.review-stars { color: var(--gold); font-size: 0.85rem; }
.review-text { font-size: 0.87rem; color: #556; line-height: 1.5; }

/* ═══════════════════════════════
   PAGE 3 — ATTRACTIONS
═══════════════════════════════ */
#page-attractions { padding-top: 80px; background: #f5f0e8; }
.attractions-hero {
  /* Different gradient pair from .hotels-hero so the pages read as
     distinct destinations when you flick between them. */
  background: linear-gradient(150deg, #1a3a2a 0%, var(--ocean) 60%, var(--dark) 100%);
  position: relative; overflow: hidden;
}

.attractions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 2rem; padding: 4rem; max-width: 1400px; margin: 0 auto;
}
.attraction-card {
  background: white; border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07); transition: transform 0.3s;
}
.attraction-card:hover { transform: translateY(-4px); }
.attr-img { width: 100%; height: 200px; object-fit: cover; }
.attr-info { padding: 1.3rem; }
.attr-tag {
  display: inline-block; padding: 0.2rem 0.7rem; border-radius: 100px;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.tag-nature { background: #e6f4e8; color: #2a7a3a; }
.tag-culture { background: #f4e6e0; color: #a03020; }
.tag-adventure { background: #e0eaf4; color: #204080; }
.tag-beach { background: #e0f0f8; color: #0a4f6e; }
.attr-tag-gov { background: #f0ece0; color: #6b5c2e; margin-left: 0.4rem; }
.attr-info h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin-bottom: 0.4rem; }
.attr-info p { font-size: 0.85rem; color: #667; line-height: 1.6; }
.attr-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid #eee; }
/* (.attr-price now uses the unified price block above.) */
.btn-learn {
  background: none; border: 1px solid var(--ocean); color: var(--ocean);
  padding: 0.4rem 1rem; border-radius: 3px; font-size: 0.8rem; cursor: pointer;
  transition: all 0.3s;
}
.btn-learn:hover { background: var(--ocean); color: white; }

/* ═══════════════════════════════
   PAGE 4 — ADMIN / HOTEL OWNER
═══════════════════════════════ */
#page-admin { padding-top: 80px; background: #f0f4f8; min-height: 100vh; }

/* Owner Auth Screen */
.owner-auth-screen {
  min-height: calc(100vh - 80px);
  background: linear-gradient(135deg, var(--ocean) 0%, var(--dark) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
}
.owner-auth-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; max-width: 900px; width: 100%; align-items: center;
}
.owner-auth-brand { color: white; }
.owner-auth-logo { font-size: 3.5rem; margin-bottom: 1rem; }
.owner-auth-brand h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem; color: var(--sand); margin-bottom: 0.8rem;
}
.owner-auth-brand p { color: rgba(255,255,255,0.6); line-height: 1.7; font-size: 0.95rem; }
.owner-auth-card {
  background: white; border-radius: 16px; padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.owner-auth-tabs {
  display: flex; border: 1px solid #e0e8f0; border-radius: 8px;
  overflow: hidden; margin-bottom: 2rem;
}
.owner-auth-tab {
  flex: 1; padding: 0.75rem; background: white; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
  cursor: pointer; transition: all 0.3s; color: var(--muted);
}
.owner-auth-tab.active { background: var(--ocean); color: white; font-weight: 500; }
.owner-auth-btn {
  width: 100%; padding: 0.9rem; background: var(--coral); color: white;
  border: none; border-radius: 6px; font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem; font-weight: 500; cursor: pointer;
  transition: background 0.3s; margin-top: 0.5rem; letter-spacing: 0.03em;
}
.owner-auth-btn:hover { background: var(--coral-light); }
.owner-auth-switch {
  text-align: center; margin-top: 1.2rem; font-size: 0.85rem; color: var(--muted);
}
.owner-auth-switch a {
  color: var(--ocean); cursor: pointer; font-weight: 500; text-decoration: underline;
}
.owner-signout-btn {
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.2); padding: 0.4rem 1rem;
  border-radius: 4px; font-size: 0.82rem; cursor: pointer;
  transition: all 0.3s; font-family: 'DM Sans', sans-serif;
}
.owner-signout-btn:hover { background: rgba(255,255,255,0.2); color: white; }

@media (max-width: 768px) {
  .owner-auth-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .owner-auth-brand { text-align: center; }
}

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  width: 44px;
  height: 44px;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sand);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV DRAWER ── */
.mobile-nav {
  display: flex;
  position: fixed;
  top: 0; right: 0;
  width: 280px; max-width: 85vw;
  height: 100vh; height: 100dvh;
  background: var(--dark);
  z-index: 1002;
  padding: 1.2rem 2rem 2rem;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  visibility: hidden;
  box-shadow: -4px 0 20px rgba(0,0,0,0.4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s linear 0s;
}
.mobile-nav-close {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}
.mobile-nav-close button {
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.7);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav ul { list-style: none; flex: 1; }
.mobile-nav ul li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-nav ul li a {
  display: block;
  padding: 1rem 0;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s;
}
.mobile-nav ul li a:hover { color: var(--sand); }
.mobile-nav-cta {
  margin-top: 2rem;
  width: 100%;
  background: var(--coral);
  color: white;
  border: none;
  padding: 0.9rem;
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}
.mobile-nav-cta:hover { background: var(--coral-light); }
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1001;
}
.mobile-nav-overlay.open { display: block; }

/* ── ADMIN MOBILE TABS ── */
.admin-mobile-tabs {
  display: none;
  background: white;
  border-bottom: 1px solid #e0e8f0;
}
.admin-mtab {
  flex: 1;
  padding: 0.9rem 0.4rem;
  background: white;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}
.admin-mtab.active { color: var(--ocean); border-bottom-color: var(--ocean); }

.admin-header {
  background: var(--dark); padding: 2rem 4rem;
  display: flex; justify-content: space-between; align-items: center;
}
.admin-header h1 { font-family: 'Playfair Display', serif; color: var(--sand); font-size: 1.8rem; }
.admin-user { color: rgba(255,255,255,0.6); font-size: 0.85rem; }

.admin-grid {
  display: grid; grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 160px);
}
.admin-sidebar {
  background: white; padding: 2rem 0;
  border-right: 1px solid #e0e8f0;
}
.sidebar-menu { list-style: none; }
.sidebar-menu li a {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 2rem; text-decoration: none;
  color: var(--muted); font-size: 0.9rem; transition: all 0.2s;
  cursor: pointer;
}
.sidebar-menu li a:hover, .sidebar-menu li a.active {
  background: #f0f8ff; color: var(--ocean); border-left: 3px solid var(--ocean);
}
.sidebar-icon { font-size: 1.1rem; }

.admin-content { padding: 2rem 3rem; }

/* Payment section */
.payment-box {
  background: white; border-radius: 10px; padding: 2rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06); max-width: 600px; margin-bottom: 2rem;
}
.payment-box h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 0.5rem; }
.payment-box p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.payment-plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.plan-card {
  border: 2px solid #e0e8f0; border-radius: 8px; padding: 1.2rem;
  text-align: center; cursor: pointer; transition: all 0.3s;
}
.plan-card:hover, .plan-card.selected { border-color: var(--ocean); background: #f0f8ff; }
.plan-card h4 { font-family: 'Playfair Display', serif; font-size: 1rem; margin-bottom: 0.3rem; }
.plan-card .price { font-size: 1.4rem; color: var(--gold); font-weight: 700; }
.plan-card small { color: var(--muted); font-size: 0.75rem; }

.control-number-box {
  background: var(--sand-light); border: 2px dashed var(--gold);
  border-radius: 8px; padding: 1.5rem; text-align: center; margin-top: 1rem;
  display: none;
}
.control-number-box.show { display: block; }
.control-num {
  font-family: 'Playfair Display', serif; font-size: 2rem;
  color: var(--ocean); letter-spacing: 0.2em; font-weight: 700;
}
.control-number-box p { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }

/* Listing Form */
.listing-form { background: white; border-radius: 10px; padding: 2rem; box-shadow: 0 2px 16px rgba(0,0,0,0.06); max-width: 700px; }
.listing-form h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.4rem; color: var(--text); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.5rem 0.8rem; border: 1px solid #cfd6df; border-radius: 5px;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--text);
  transition: border-color 0.3s; background: #eef2f7;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--ocean);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.img-upload {
  border: 2px dashed #ccd6e0; border-radius: 6px; padding: 2rem;
  text-align: center; cursor: pointer; transition: all 0.3s; background: #f8fafc;
}
.img-upload:hover { border-color: var(--ocean); background: #f0f8ff; }
.img-upload p { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }
.upload-icon { font-size: 2.5rem; }

/* ═══════════════════════════════
   PAGE 5 — SUPER ADMIN
═══════════════════════════════ */
#page-superadmin { padding-top: 80px; background: #0d1f2d; min-height: 100vh; }
#page-transport-portal,
#page-attraction-portal { background: #f0f4f8; padding-top: 80px; min-height: 100vh; min-height: 100dvh; }

/* Dashboard tab strip — readable on any background */
#tp-dashboard .filter-tab,
#ap-dashboard .filter-tab {
  background: rgba(255,255,255,0.92);
  color: var(--text);
  border-color: rgba(13,31,45,0.15);
}
#tp-dashboard .filter-tab:hover,
#ap-dashboard .filter-tab:hover,
#tp-dashboard .filter-tab.active,
#ap-dashboard .filter-tab.active {
  background: var(--coral);
  border-color: var(--coral);
  color: white;
}

/* Add-listing form panels float as light cards on the dark portal bg
   so the dark .form-group labels stay readable. */
#tp-panel-add,
#ap-panel-add {
  background: white;
  border-radius: 10px;
  margin: 0 4rem 4rem;
  padding: 2rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  overflow-x: visible;
}
@media (max-width: 768px) {
  #tp-panel-add,
  #ap-panel-add {
    margin: 0 0 1.5rem;
    padding: 1.25rem;
    border-radius: 8px;
  }
}
#tp-panel-add h3,
#ap-panel-add h3 { color: var(--text); }

/* Transport & Attraction portal sign-in / register card on a white surface */
#tp-auth .super-auth-icon,
#ap-auth .super-auth-icon {
  width: auto; height: auto;
  font-size: 6rem; line-height: 1;
}

#tp-auth .super-auth-card,
#ap-auth .super-auth-card {
  background: white;
  border: 1px solid #e0e6ec;
  backdrop-filter: none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
}
#tp-auth .super-auth-card h3,
#ap-auth .super-auth-card h3 { color: var(--text); }
#tp-auth .super-auth-hint,
#ap-auth .super-auth-hint { color: var(--muted); }
#tp-auth .super-auth-card .form-group label,
#ap-auth .super-auth-card .form-group label { color: var(--text); }
#tp-auth .super-auth-card .form-group input,
#ap-auth .super-auth-card .form-group input,
#tp-auth .super-auth-card .form-group select,
#ap-auth .super-auth-card .form-group select,
#tp-auth .super-auth-card .form-group textarea,
#ap-auth .super-auth-card .form-group textarea {
  background: #f5f7fa;
  border-color: #dde;
  color: var(--text);
}
#tp-auth .super-auth-card .form-group input::placeholder,
#ap-auth .super-auth-card .form-group input::placeholder,
#tp-auth .super-auth-card .form-group textarea::placeholder,
#ap-auth .super-auth-card .form-group textarea::placeholder { color: rgba(0,0,0,0.35); }

/* Super Admin Auth Screen */
.super-auth-screen {
  min-height: calc(100vh - 80px);
  background: linear-gradient(135deg, #0d1f2d 0%, #0a2a1a 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
}
.super-auth-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; max-width: 820px; width: 100%; align-items: center;
}
.super-auth-brand { color: white; text-align: center; }
.super-auth-icon {
  display: block;
  width: 110px; height: 110px;
  object-fit: contain;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
  font-size: 5rem;
  line-height: 110px;
  text-align: center;
  color: var(--sand);
}
.super-auth-brand h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem; color: var(--sand); margin-bottom: 0.8rem;
}
.super-auth-brand p { color: rgba(255,255,255,0.5); line-height: 1.7; font-size: 0.9rem; }
.super-auth-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 2.5rem;
  backdrop-filter: blur(10px);
}
.super-auth-card h3 {
  font-family: 'Playfair Display', serif;
  color: var(--sand); font-size: 1.5rem; margin-bottom: 0.3rem;
}
.super-auth-hint { color: rgba(255,255,255,0.4); font-size: 0.82rem; margin-bottom: 1.5rem; }
.super-auth-card .form-group label { color: rgba(255,255,255,0.7); }
.super-auth-card .form-group input {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: white;
}
.super-auth-card .form-group input::placeholder { color: rgba(255,255,255,0.3); }
.super-auth-card .form-group input:focus { border-color: var(--ocean-light); }
.super-auth-btn {
  width: 100%; padding: 0.9rem; background: var(--ocean); color: white;
  border: none; border-radius: 6px; font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem; font-weight: 500; cursor: pointer;
  transition: background 0.3s; margin-top: 0.5rem;
}
.super-auth-btn:hover { background: var(--ocean-light); }

@media (max-width: 768px) {
  .super-auth-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .super-auth-brand { text-align: center; }
}
.super-header {
  background: rgba(255,255,255,0.05); padding: 2rem 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
}
.super-header h1 { font-family: 'Playfair Display', serif; color: var(--sand); }
.super-badge { background: var(--coral); color: white; font-size: 0.7rem; padding: 0.2rem 0.7rem; border-radius: 100px; letter-spacing: 0.1em; text-transform: uppercase; }

.super-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  padding: 2rem 4rem;
}
.super-stat {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 1.5rem; text-align: center;
}
.super-stat .num { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--sand); }
.super-stat .lbl { font-size: 0.8rem; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.3rem; }

.super-table-wrap { padding: 0 4rem 4rem; overflow-x: auto; }
.super-table-wrap h3 { color: var(--sand); font-family: 'Playfair Display', serif; margin-bottom: 1rem; font-size: 1.3rem; }
table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.04); border-radius: 8px; overflow: hidden; }
th { background: rgba(255,255,255,0.08); padding: 0.8rem 1rem; text-align: left; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
td { padding: 0.9rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.75); font-size: 0.88rem; }
tr:last-child td { border: none; }
.status-pill {
  display: inline-block; padding: 0.2rem 0.7rem; border-radius: 100px;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.status-active { background: rgba(40,180,80,0.2); color: #4fd880; }
.status-pending { background: rgba(220,150,40,0.2); color: #f0b840; }
.status-suspended { background: rgba(220,60,60,0.2); color: #f07070; }
.action-btn {
  padding: 0.3rem 0.7rem; border-radius: 3px; font-size: 0.75rem;
  cursor: pointer; border: none; margin-right: 0.3rem; transition: opacity 0.2s;
}
.action-btn:hover { opacity: 0.8; }
.btn-approve { background: #4fd880; color: #0a2a15; }
.btn-suspend { background: #f07070; color: #2a0a0a; }
.btn-delete  { background: #c0392b; color: white; }

/* ═══════════════════════════════
   TRANSPORT PAGES
═══════════════════════════════ */
#page-transport { padding-top: 80px; background: #f5f7fa; }
.transport-hero {
  background: linear-gradient(120deg, #0a1628 0%, #1a3a5c 80%);
  padding: clamp(5.5rem, 8vw, 7.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  color: white;
  position: relative; overflow: hidden;
}
.transport-hero .section-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--coral-light);
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.transport-hero .section-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--coral-light);
  opacity: 0.75;
}
.transport-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  margin: 0 auto 1rem;
  max-width: 18ch;
}
.transport-hero p {
  color: rgba(255,255,255,0.72);
  max-width: 46ch;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  font-weight: 300;
}

.transport-content { max-width: 1200px; margin: 0 auto; padding: 3rem clamp(1.5rem, 5vw, 4.5rem); }
.transport-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; justify-content: center; }
.transport-filters .filter-tab {
  color: var(--dark);
  border-color: rgba(0,0,0,0.2);
  background: transparent;
}
.transport-filters .filter-tab:hover,
.transport-filters .filter-tab.active {
  background: var(--coral);
  border-color: var(--coral);
  color: white;
}

.transport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
}
.transport-card {
  background: white; border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: transform 0.25s, box-shadow 0.25s;
}
.transport-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.13); }
.transport-card-img { width: 100%; height: 180px; object-fit: cover; background: #e8eef5; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; }
.transport-card-img img { width: 100%; height: 180px; object-fit: cover; }
.transport-card-body { padding: 1.25rem; }
.transport-card-body h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin-bottom: 0.4rem; }
.transport-card-body .tc-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.tc-tag { font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 20px; font-weight: 500; }
.tc-tag-taxi    { background: #fff3e0; color: #e65100; }
.tc-tag-airport { background: #e3f2fd; color: #1565c0; }
.tc-tag-tours   { background: #e8f5e9; color: #2e7d32; }
.transport-card-desc { color: #667; font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.9rem; }
.transport-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.8rem; border-top: 1px solid #eef; }
.tc-price { font-weight: 700; color: var(--ocean); font-size: 1rem; }
.tc-price small { font-weight: 400; color: #889; font-size: 0.78rem; }
.tc-contact { display: flex; gap: 0.4rem; }
.tc-contact a {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem;
  padding: 0.35rem 0.7rem; border-radius: 6px; text-decoration: none; font-weight: 500;
}
.tc-phone { background: #f0f7ff; color: var(--ocean); }
.tc-whatsapp { background: #e8f5e9; color: #2e7d32; }

/* ═══════════════════════════════
   PAGE 6 — ABOUT
═══════════════════════════════ */
#page-about { padding-top: 80px; }
.about-hero {
  background: linear-gradient(135deg, var(--dark) 0%, #1a3a2a 100%);
  padding: 6rem 4rem; text-align: center;
}
.about-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem,5vw,4rem); color: var(--white); margin-bottom: 1rem; }
.about-hero p { color: rgba(255,255,255,0.6); max-width: 600px; margin: 0 auto; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; line-height: 1.7; }

.about-content { max-width: 1000px; margin: 0 auto; padding: 5rem 2rem; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 5rem; }
.about-text h2 { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 1rem; }
.about-text p { color: #556; line-height: 1.8; margin-bottom: 1rem; }
.about-img { border-radius: 8px; overflow: hidden; }
.about-img img { width: 100%; height: 350px; object-fit: cover; }

.team-section { text-align: center; margin-top: 3rem; }
.team-section h2 { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 2.5rem; }
/* Team grid: centered flex so the two team members anchor on the
   page's vertical spine instead of landing in the left two slots of
   a 3-column grid. Wraps to one-per-row below 480px. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 720px;
  margin: 0 auto;
}
.team-card { text-align: center; flex: 0 0 220px; }
.team-avatar {
  width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 1rem;
  background: var(--ocean); display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: white;
}
.team-card h4 { font-family: 'Playfair Display', serif; margin-bottom: 0.3rem; }
.team-card p { color: var(--muted); font-size: 0.85rem; }

/* LOGIN MODAL */
.login-modal {
  display: none; position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.login-modal.open { display: flex; }
.login-box {
  background: white; border-radius: 12px; padding: 3rem;
  width: min(420px, 92vw); position: relative;
}
.login-box h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin-bottom: 0.5rem; }
.login-box p { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; }
.login-tabs { display: flex; gap: 0; margin-bottom: 2rem; border: 1px solid #eee; border-radius: 6px; overflow: hidden; }
.login-tab {
  flex: 1; padding: 0.7rem; background: white; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; transition: all 0.3s;
}
.login-tab.active { background: var(--ocean); color: white; }
.login-close {
  position: absolute; top: 1rem; right: 1rem;
  background: #f0f4f8; border: none; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}

/* TOAST */
.toast {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
  background: var(--dark); color: white; padding: 1rem 1.5rem;
  border-radius: 6px; font-size: 0.9rem;
  transform: translateX(200%); transition: transform 0.4s;
  border-left: 4px solid var(--coral);
}
.toast.show { transform: translateX(0); }

/* FOOTER — refined sign-off: hairline rule on top, tightened typography,
   link contrast bumped to AA against the dark surface. */
footer {
  background: var(--dark);
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid rgba(232,213,163,0.10);
}
.footer-brand .logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--sand);
  margin-bottom: 1.1rem;
  letter-spacing: var(--tracking-tight);
}
.footer-brand p {
  color: rgba(255,255,255,0.62);
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 36ch;
}
.footer-col h4 {
  color: var(--sand);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: 1.3rem;
  opacity: 0.85;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.7rem; }
.footer-col ul li a {
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color var(--dur-fast) var(--ease-out-cubic);
  cursor: pointer;
}
.footer-col ul li a:hover { color: var(--sand); }
.footer-bottom {
  background: #07131d;
  padding: 1.1rem clamp(1.5rem, 5vw, 4.5rem);
  text-align: center;
  color: rgba(255,255,255,0.52);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  /* Nav */
  nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-actions { display: none; }
  .hamburger { display: flex; }

  /* Cards */
  .hotels-grid, .attractions-grid { padding: 2rem 1.5rem; grid-template-columns: 1fr; }
  .hotels-hero { padding: 3rem 1.5rem 2rem; }
  .attractions-hero { padding: 3rem 1.5rem 2rem; }

  /* Stats — 2×2 grid on tablet; hairlines bound by row + first column */
  .stats-row { grid-template-columns: repeat(2,1fr); padding: 2rem 1.5rem; }
  .stats-row .stat-item { border-right: 1px solid rgba(255,255,255,0.10); }
  .stats-row .stat-item:nth-child(2n) { border-right: none; }
  .stats-row .stat-item:nth-child(1),
  .stats-row .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.10); padding-bottom: 1.2rem; }
  .stats-row .stat-item:nth-child(3),
  .stats-row .stat-item:nth-child(4) { padding-top: 1.2rem; }

  /* Admin / Owner portal */
  .admin-mobile-tabs { display: flex; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-header {
    padding: 1rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .admin-header h1 { font-size: 1.35rem; }
  .admin-header > div {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem !important;
  }
  .admin-user {
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }
  .owner-signout-btn { padding: 0.4rem 0.8rem; font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; }
  .admin-content { padding: 1.5rem; }

  /* Super admin */
  .super-stats { grid-template-columns: repeat(2,1fr); padding: 1rem 1.5rem; }
  .super-header { padding: 1.2rem 1.5rem; }
  .super-table-wrap { padding: 0 1rem 2rem; }

  /* Footer */
  footer { grid-template-columns: 1fr 1fr; padding: 2.5rem 1.5rem; gap: 2rem; }
  .footer-bottom { padding: 1rem 1.5rem; }

  /* About */
  .about-hero { padding: 4rem 1.5rem; }
  .about-grid, .team-grid { grid-template-columns: 1fr; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }
  .payment-plans { grid-template-columns: 1fr; }

  /* Login modal */
  .login-box { padding: 2rem 1.5rem; }

  /* Prevent iOS Safari auto-zoom on focus (font-size must be >= 16px) */
  .form-group input,
  .form-group select,
  .form-group textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* Disable hover-lift effects on touch devices so the state doesn't stick after tap */
@media (hover: none) {
  .btn-primary:hover,
  .btn-outline:hover,
  .hotel-card:hover,
  .attraction-card:hover,
  .guide-card:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr 1fr; padding: 1.5rem 1rem; }
  .super-stats { grid-template-columns: 1fr 1fr; }
  footer { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .btn-primary, .btn-outline { width: 100%; max-width: 280px; }
  .super-header h1 { font-size: 1.2rem; }
  /* Tighten subtitle margin so stacked buttons fit without crowding */
  .hero-subtitle { margin-bottom: 1.5rem; }
}

/* Attraction admin form */
.attraction-admin-form {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 1.5rem; margin-bottom: 0.5rem; max-width: 820px;
}
.attraction-admin-form h4 {
  color: var(--sand); font-family: 'Playfair Display', serif;
  font-size: 1.1rem; margin-bottom: 1.2rem;
}
.attraction-admin-form .form-group label { color: rgba(255,255,255,0.6); }
.attraction-admin-form .form-group input,
.attraction-admin-form .form-group select,
.attraction-admin-form .form-group textarea {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); color: white;
}
.attraction-admin-form .form-group input::placeholder,
.attraction-admin-form .form-group textarea::placeholder { color: rgba(255,255,255,0.3); }
.attraction-admin-form .form-group input:focus,
.attraction-admin-form .form-group select:focus,
.attraction-admin-form .form-group textarea:focus { border-color: var(--ocean-light); outline: none; }
.attraction-admin-form select option { background: var(--dark); color: white; }

/* Guide payment gate */
.guide-payment-gate {
  background: white; border-radius: 12px; padding: 3rem 2rem;
  text-align: center; max-width: 480px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.guide-payment-gate h3 {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 0.7rem;
}
.guide-payment-gate p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }

/* ═══════════════════════════════
   PAGE 7 — TOUR GUIDES (public)
═══════════════════════════════ */
#page-guides { padding-top: 80px; background: #f5f7fa; min-height: 100vh; }

.guides-hero {
  background: linear-gradient(140deg, var(--dark) 0%, #0a3d55 55%, #0d3320 100%);
  padding: clamp(5.5rem, 8vw, 7.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  position: relative; overflow: hidden;
}
.guides-hero-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--coral-light);
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.guides-hero-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--coral-light);
  opacity: 0.75;
}
.guides-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-h1);
  color: var(--white);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  margin: 0 auto 1rem;
  max-width: 18ch;
}
.guides-hero p {
  color: rgba(255,255,255,0.72);
  max-width: 46ch;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  font-weight: 300;
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem;
  padding: 2rem 1.5rem;
}

.guides-loading {
  grid-column: 1 / -1; text-align: center; padding: 4rem;
  color: var(--muted); font-size: 0.9rem;
}

.guides-empty-state {
  grid-column: 1 / -1; text-align: center; padding: 4rem 2rem;
}
.guides-empty-state h3 {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 0.5rem;
}
.guides-empty-state p { color: var(--muted); font-size: 0.9rem; }

/* Guide Card */
.guide-card {
  background: white; border-radius: 16px;
  overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.12); }

.guide-card-top {
  background: linear-gradient(135deg, var(--ocean) 0%, var(--ocean-light) 100%);
  padding: 1.4rem; text-align: center;
}
.guide-avatar {
  width: 130px; height: 130px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.4);
  object-fit: cover; margin: 0 auto 0.8rem; display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.guide-card-name {
  font-family: 'Playfair Display', serif; font-size: 1.05rem;
  color: white; margin-bottom: 0.2rem;
}
.guide-card-location { color: rgba(255,255,255,0.7); font-size: 0.78rem; }

.guide-card-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; }

.guide-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; }
.guide-tag {
  background: var(--sand-light); color: var(--ocean);
  padding: 0.22rem 0.55rem; border-radius: 100px;
  font-size: 0.72rem; font-weight: 500;
}
.guide-tag-spec { background: #fff3ec; color: var(--coral); }

.guide-bio {
  color: #556; font-size: 0.85rem; line-height: 1.6; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 0.9rem;
}
.guide-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 0.8rem; border-top: 1px solid #f0f0f0; margin-bottom: 0.8rem;
}
.guide-experience { font-size: 0.75rem; color: var(--muted); }
/* (.guide-price now uses the unified price block at line ~1223.) */

.btn-contact {
  width: 100%; background: var(--ocean); color: white; border: none;
  padding: 0.65rem; border-radius: 6px; font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; cursor: pointer; transition: background 0.3s; letter-spacing: 0.04em;
}
.btn-contact:hover { background: var(--ocean-light); }

.btn-view-guide {
  background: white; color: var(--ocean);
  border: 1.5px solid var(--ocean); padding: 0.55rem 0.8rem;
  border-radius: 6px; font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem; cursor: pointer; transition: all 0.25s;
  white-space: nowrap; font-weight: 500;
}
.btn-view-guide:hover { background: var(--ocean); color: white; }

.btn-edit-profile {
  width: 100%; background: var(--sand-light); color: var(--ocean);
  border: 1px solid var(--sand); padding: 0.7rem; border-radius: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
  cursor: pointer; transition: background 0.3s; letter-spacing: 0.04em;
  font-weight: 500;
}
.btn-edit-profile:hover { background: var(--sand); }

@media (max-width: 768px) {
  .guides-grid {
    padding: 1rem 0.8rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .guides-hero { padding: 5rem 1.5rem 3rem; }
}
@media (max-width: 480px) {
  .guides-grid { grid-template-columns: 1fr; padding: 1rem 0.75rem; }
  .guide-card-body { padding: 1rem; }
}

/* ═══════════════════════════════
   PAGE 8 — GUIDE PORTAL
═══════════════════════════════ */
#page-guide-portal { padding-top: 80px; background: #f0f4f8; min-height: 100vh; }

.guide-dashboard-content {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 2rem; max-width: 1320px; margin: 2rem auto; padding: 0 2rem;
}

.guide-profile-editor {
  background: white; border-radius: 12px; padding: 2.25rem 2.5rem;
  box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}
.guide-profile-editor h3 {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 0.4rem;
}
.guide-editor-hint { color: var(--muted); font-size: 0.87rem; margin-bottom: 1.5rem; line-height: 1.5; }

.guide-profile-preview { position: sticky; top: 100px; }
.guide-profile-preview h3 {
  font-family: 'Playfair Display', serif; font-size: 1.2rem; margin-bottom: 0.3rem;
}
.guide-preview-empty {
  background: white; border-radius: 12px; padding: 2.5rem;
  text-align: center; color: var(--muted); font-size: 0.85rem;
  border: 2px dashed #dde4ec;
}

@media (max-width: 900px) {
  .guide-dashboard-content {
    grid-template-columns: 1fr;
    padding: 0 0.75rem;
    margin: 1rem auto;
    gap: 1rem;
  }
  .guide-profile-editor { padding: 1.25rem 1.1rem; border-radius: 10px; }
  .guide-profile-editor h3 { font-size: 1.3rem; }
  .guide-profile-preview { position: static; }
}

/* Subscription status */
.sub-status {
  border-radius: 8px; padding: 0.9rem 1.1rem;
  font-size: 0.88rem; line-height: 1.5;
}
.sub-active   { background: #e6f4e8; color: #1e5c2a; }
.sub-expired  { background: #f4e6e0; color: #8b2a15; }
.sub-pending  { background: #fef3cd; color: #7a5c00; }

/* Booking Cards */
.booking-card {
  background: white; border-radius: 10px; padding: 1.3rem 1.5rem;
  margin-bottom: 1rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-left: 4px solid var(--ocean);
}
.booking-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 0.7rem;
}
.booking-tourist-name { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.booking-tourist-contact { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.booking-date { font-size: 0.83rem; color: var(--text); margin-bottom: 0.5rem; }
.booking-message {
  font-size: 0.85rem; color: #556; font-style: italic;
  border-left: 3px solid var(--sand); padding-left: 0.8rem;
  margin: 0.5rem 0 0.8rem;
}
.booking-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 0.7rem; border-top: 1px solid #f0f0f0;
}

/* Guide Profile Modal */
.guide-modal-inner { background: white; border-radius: 12px; overflow: hidden; }

.guide-modal-header {
  background: linear-gradient(135deg, var(--ocean) 0%, var(--ocean-light) 100%);
  padding: 2rem; display: flex; align-items: center; gap: 1.5rem;
}
.guide-modal-avatar {
  width: 170px; height: 170px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.45);
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.guide-modal-hero-info { color: white; }
.guide-modal-name {
  font-family: 'Playfair Display', serif; font-size: 1.6rem;
  margin-bottom: 0.3rem;
}
.guide-modal-location { font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-bottom: 0.5rem; }
.guide-modal-price {
  font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--sand);
}

.guide-modal-body { padding: 1.8rem; }
.guide-modal-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }

.guide-modal-section { margin-bottom: 1.2rem; }
.guide-modal-section h4 {
  font-family: 'Playfair Display', serif; font-size: 1rem;
  color: var(--ocean); margin-bottom: 0.4rem;
}
.guide-modal-section p { color: #445; font-size: 0.9rem; line-height: 1.7; }

.guide-modal-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  background: #f8fafc; border-radius: 8px; padding: 1rem 1.2rem;
  margin-bottom: 0.5rem;
}
.guide-modal-meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.gm-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gm-value { font-size: 0.9rem; color: var(--text); font-weight: 500; }

/* Guide photo upload */
.guide-photo-upload {
  width: 100%; min-height: 150px; border: 2px dashed #ccd6e0;
  border-radius: 8px; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, background 0.3s; background: #f8fafc;
  margin-bottom: 0.5rem;
}
.guide-photo-upload:hover { border-color: var(--ocean); background: #f0f8ff; }
.guide-photo-preview { width: 100%; height: 150px; object-fit: cover; display: block; }
.guide-photo-placeholder { text-align: center; color: var(--muted); padding: 1.5rem; pointer-events: none; }
.guide-photo-placeholder p { font-size: 0.88rem; margin: 0.4rem 0 0.2rem; }
.guide-photo-placeholder small { font-size: 0.75rem; }

/* ── Featured Hotels / Attractions Sections ── */
.featured-section {
  padding: 5rem 2rem;
  background: var(--sand-light);
}
.featured-section .section-eyebrow { color: var(--coral); }
.featured-section .section-title   { color: var(--dark); }
.featured-section .section-title span { color: var(--ocean); }
.featured-section-alt {
  padding: 5rem 2rem;
  background: #f0ece2;
}
.featured-section-alt .section-eyebrow { color: var(--coral); }
.featured-section-alt .section-title   { color: var(--dark); }
.featured-section-alt .section-title span { color: var(--ocean); }
/* Featured hotels / attractions on the homepage — reuse the same
   .hotel-card and .attraction-card classes the /hotels and /attractions
   pages render, so card size, image height, badges, typography, and
   footer match identically across pages.
   The grid containers mirror .hotels-grid / .attractions-grid sizing
   exactly (same minmax + gap), capped at 3 cards via slice in JS. */
.featured-hotels-bento {
  display: grid;
  /* minmax(min(100%, X), 1fr) keeps the ideal 360px min on wide
     screens but collapses to 100% when the viewport is narrower —
     prevents horizontal overflow on phones. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 2rem;
  /* Section already adds 2rem horizontal padding; grid adds 2rem more
     so the total (4rem) matches .hotels-grid on the dedicated /hotels
     page. Cards therefore land at identical pixel widths across pages. */
  padding: 0 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
.featured-attractions-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 2rem;
  padding: 0 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
/* Mobile padding override lives in the unified @media block below at
   line ~2552 alongside .featured-section's vertical-only padding. */
.featured-view-btn {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.75rem 2rem;
  border: 2px solid var(--ocean);
  color: var(--ocean);
  background: transparent;
  border-radius: 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}
.featured-view-btn:hover {
  background: var(--ocean);
  color: white;
}

/* ── Amenities Checkboxes ── */
.amenities-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.amenity-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3rem 0;
  color: #445;
}
.amenity-check input[type="checkbox"] { cursor: pointer; }

/* ── Amenities on hotel cards ── */
.hotel-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0;
}
.amenity-tag {
  font-size: 0.72rem;
  background: #f0f4ff;
  color: #446;
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
}

/* ── WhatsApp / phone contact buttons ── */
.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  margin-right: 0.5rem;
}
.btn-whatsapp { background: #25d366; color: white; }
.btn-phone    { background: #0a2540; color: white; }
.btn-whatsapp:hover { background: #1ebe5d; }
.btn-phone:hover    { background: #1a3a60; }

/* ── Attraction location / duration on cards ── */
.attr-meta {
  font-size: 0.78rem;
  color: #889;
  margin-bottom: 0.3rem;
}

/* ── Responsive: featured sections ── */
@media (max-width: 768px) {
  .featured-section, .featured-section-alt {
    padding: 3.5rem 0;
  }
  .featured-section .section-header,
  .featured-section-alt .section-header {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .featured-hotels-bento,
  .featured-attractions-bento {
    padding: 0 1.2rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ── MODERN POLISH LAYER (appended; cascades over base styles) ──
   Tunes radii, shadows, transitions, focus rings, hovers and inputs to feel
   more 2026. Pure visual lift — no structural changes; classes still match
   what the JS expects.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── motion + radius + shadow tokens ── */
  --t-fast:  140ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:  220ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  340ms cubic-bezier(0.4, 0, 0.2, 1);
  --r-sm:    10px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-pill:  9999px;
  --sh-sm:   0 1px 2px rgba(13,31,45,0.05), 0 1px 3px rgba(13,31,45,0.06);
  --sh-md:   0 4px 12px rgba(13,31,45,0.06), 0 2px 4px rgba(13,31,45,0.04);
  --sh-lg:   0 12px 32px rgba(13,31,45,0.10), 0 4px 12px rgba(13,31,45,0.06);
  --sh-xl:   0 24px 60px rgba(13,31,45,0.14), 0 8px 24px rgba(13,31,45,0.08);
  --ring:    0 0 0 3px rgba(26,127,160,0.32);
  --accent:  var(--ocean-light);
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Visible focus rings everywhere keyboard users go ── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* ── Buttons: rounder, softer shadow, lift on hover, press-back on active ── */
.btn-primary, .btn-outline, .nav-cta, .owner-auth-btn, .super-auth-btn,
.btn-submit, .action-btn, .filter-tab {
  border-radius: var(--r-md) !important;
  transition:
    transform var(--t-fast),
    box-shadow var(--t-fast),
    background var(--t-base),
    color var(--t-base),
    border-color var(--t-base) !important;
  letter-spacing: 0.01em;
}
.btn-primary, .nav-cta, .owner-auth-btn, .super-auth-btn, .btn-submit {
  box-shadow: var(--sh-sm);
}
.btn-primary:hover, .nav-cta:hover, .owner-auth-btn:hover,
.super-auth-btn:hover, .btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
.btn-primary:active, .nav-cta:active, .owner-auth-btn:active,
.super-auth-btn:active, .btn-submit:active, .action-btn:active {
  transform: translateY(0);
  box-shadow: var(--sh-sm);
}
.action-btn { padding: 0.5rem 0.95rem; font-weight: 600; }
.action-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }

/* Subtle gradient on the primary CTA */
.btn-primary, .nav-cta {
  background: linear-gradient(135deg, var(--coral), var(--coral-light));
}
.btn-primary:hover, .nav-cta:hover {
  background: linear-gradient(135deg, var(--coral-light), var(--coral));
}

/* ── Inputs: rounder, smoother focus ── */
.form-group input, .form-group select, .form-group textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"],
select, textarea {
  border-radius: var(--r-sm) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
              background var(--t-base) !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}

/* ── Cards: refined radius + lift on hover ── */
.hotel-card, .attraction-card, .guide-card, .transport-card,
.booking-card, .super-stat, .modal, .modal-wrapper {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-md);
  transition:
    transform var(--t-base),
    box-shadow var(--t-base) !important;
}
.hotel-card:hover, .attraction-card:hover, .guide-card:hover,
.transport-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}
.booking-card:hover { box-shadow: var(--sh-md); }
.modal, .modal-wrapper { box-shadow: var(--sh-xl); }

/* ── Status pills: rounder ── */
.status-pill, .pay-pill {
  border-radius: var(--r-pill) !important;
  padding: 0.22rem 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── Section headings: tighter tracking, modern weight ── */
h1, h2, h3, .section-title, .hero-title {
  letter-spacing: -0.012em;
}
.hero-title { letter-spacing: -0.025em; }

/* ── Modern minimal scrollbar (webkit) ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(10,79,110,0.22);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(10,79,110,0.42); background-clip: padding-box; border: 2px solid transparent; }

/* ── Selection colour matches the brand ── */
::selection { background: var(--sand); color: var(--ocean); }

/* ── Modal close button: circular + hoverable ── */
.modal-close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill) !important;
  background: rgba(13,31,45,0.06);
  transition: background var(--t-fast), transform var(--t-fast);
}
.modal-close:hover { background: rgba(13,31,45,0.12); transform: rotate(90deg); }

/* ── Nav link underline grow on hover ── */
.nav-links a {
  position: relative; padding-bottom: 4px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--sand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* ── Filter-tab pills (admin + lists) feel like a segmented control ── */
.filter-tab {
  border-radius: var(--r-pill) !important;
  padding: 0.5rem 1.1rem;
}
.filter-tab.active {
  background: var(--ocean) !important;
  color: #fff !important;
  box-shadow: var(--sh-sm);
}

/* ── Toast: glassier, more elevated ── */
.toast {
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg);
  backdrop-filter: blur(8px);
}

/* ── Booking message bubbles: softer ── */
.booking-message {
  border-radius: var(--r-md) !important;
}

/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Password show/hide toggle ── */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap > input { padding-right: 2.6rem !important; width: 100%; }
.pw-eye {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.3rem;
  color: var(--muted);
  border-radius: var(--r-pill);
  transition: background var(--t-fast), color var(--t-fast);
}
.pw-eye:hover { color: var(--text); background: rgba(13,31,45,0.06); }


/* ════════════════════════════════════════════════════════════════════════════
   ── ADMIN PANEL v2 — boutique / warm / breathable ──
   No sidebar. Top pill-nav. Sand-cream canvas, soft white cards, coral CTA,
   ocean primary text, gold dividers. Generous spacing. Scoped to body.admin.
   ════════════════════════════════════════════════════════════════════════════ */

body.admin {
  /* "Dark light" — a moodier, deeper canvas than cream but still in the
     light family. Soft slate/graphite with subtle ocean + gold glow so the
     white cards pop more. */
  background:
    radial-gradient(1100px 600px at 100% -10%, rgba(201,162,39,0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(10,79,110,0.10), transparent 60%),
    linear-gradient(180deg, #d8dde6 0%, #c4cbd6 100%);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ── Top hero/header ─────────────────────────────────────────────────── */
.admin-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.admin-burger { display: none; }    /* not used in this layout */

.admin-topbar-title {
  display: flex; align-items: center; gap: 0.9rem;
  flex: 1; min-width: 240px;
}
.admin-brand-mark {
  display: inline-block;
  width: 56px; height: 56px;
  object-fit: contain;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 4px 10px rgba(10,79,110,0.18));
}
.admin-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--coral);
  font-weight: 700;
  display: block;
}
.admin-topbar h1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  color: var(--ocean);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.admin-topbar-right {
  display: flex; align-items: center; gap: 0.7rem;
  flex-wrap: wrap; justify-content: flex-end;
}
.admin-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: white;
  border: 1px solid rgba(10,79,110,0.10);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--ocean);
  box-shadow: 0 1px 3px rgba(13,31,45,0.04);
}
.admin-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4fd880;
  box-shadow: 0 0 0 3px rgba(79,216,128,0.22);
}
.admin-signout {
  background: transparent;
  border: 1px solid rgba(10,79,110,0.16);
  color: var(--ocean);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.admin-signout:hover {
  background: var(--ocean); color: white; border-color: var(--ocean);
}

/* The old layout structure isn't used here. Hide leftover sidebar markup
   if it sneaks back in from caching. */
body.admin .admin-sidebar,
body.admin .admin-sidebar-footer,
body.admin .admin-brand { display: none !important; }

/* ── Section nav: pill bar ───────────────────────────────────────────── */
.admin-nav {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-direction: row !important;
  background: white;
  border: 1px solid rgba(10,79,110,0.08);
  border-radius: 999px;
  padding: 0.4rem;
  margin-bottom: 1.8rem;
  box-shadow: 0 6px 20px rgba(10,79,110,0.06);
  overflow-x: auto;
  overflow-y: visible;
  position: static !important;
  height: auto !important;
}
.admin-nav-item {
  display: inline-flex !important; align-items: center; gap: 0.45rem;
  background: transparent;
  border: none;
  color: var(--ocean);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.admin-nav-item:hover {
  background: var(--sand-light);
  color: var(--ocean);
}
.admin-nav-item.active {
  background: linear-gradient(135deg, var(--ocean), var(--ocean-light));
  color: white;
  box-shadow: 0 6px 16px rgba(10,79,110,0.28);
}
.admin-nav-icon { font-size: 1rem; }

/* ── Stat cards ──────────────────────────────────────────────────────── */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2.2rem;
}
.admin-stat {
  background: white;
  border-radius: 18px;
  padding: 1.3rem 1.5rem;
  border: 1px solid rgba(10,79,110,0.06);
  box-shadow: 0 1px 3px rgba(13,31,45,0.04);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.admin-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(13,31,45,0.10);
}
.admin-stat::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--gold));
  opacity: 0; transition: opacity var(--t-base);
}
.admin-stat:hover::before { opacity: 1; }
.admin-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.admin-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ocean);
  letter-spacing: -0.025em;
  line-height: 1;
}
.admin-stat-accent {
  background:
    radial-gradient(180px 120px at 100% 0%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(135deg, var(--ocean), var(--ocean-light));
  border-color: transparent;
  color: white;
}
.admin-stat-accent .admin-stat-label { color: rgba(255,255,255,0.78); }
.admin-stat-accent .admin-stat-num   { color: #fff; }
.admin-stat-accent::before { background: linear-gradient(90deg, var(--sand), var(--coral-light)); }

/* ── Panels ─────────────────────────────────────────────────────────── */
.admin-panel { margin-bottom: 2.4rem; }
.admin-panel-head {
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(201,162,39,0.30);
  position: relative;
}
.admin-panel-head::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 56px; height: 2px;
  background: var(--coral);
}
.admin-panel-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  color: var(--ocean);
  margin: 0 0 0.35rem;
  letter-spacing: -0.012em;
}
.admin-panel-head p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0; max-width: 720px;
  line-height: 1.55;
}

/* ── Card (forms, filters, etc.) ─────────────────────────────────────── */
.admin-card {
  background: white;
  border: 1px solid rgba(10,79,110,0.06);
  border-radius: 18px;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 1px 3px rgba(13,31,45,0.04);
}
.admin-card .form-group { margin-bottom: 1rem; }
.admin-card label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ocean);
  margin-bottom: 0.4rem;
}
.admin-card input, .admin-card select, .admin-card textarea {
  width: 100%;
  background: #fbfaf6;
  border: 1px solid rgba(10,79,110,0.12);
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  font-size: 0.92rem;
  color: var(--text);
  font-family: inherit;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.admin-card input:focus, .admin-card select:focus, .admin-card textarea:focus {
  background: white;
  border-color: var(--coral);
  outline: none;
  box-shadow: 0 0 0 4px rgba(201,95,58,0.14);
}
.form-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.admin-table-wrap {
  background: white;
  border: 1px solid rgba(10,79,110,0.06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(13,31,45,0.04);
  /* horizontal scroll on small screens */
  overflow-x: auto;
}
.admin-table-wrap > table,
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  min-width: 600px;
}
.admin-table thead th {
  text-align: left;
  background: var(--sand-light);
  color: var(--ocean);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid rgba(201,162,39,0.25);
}
.admin-table tbody td {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(10,79,110,0.06);
  vertical-align: middle;
  color: var(--text);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr { transition: background var(--t-fast); }
.admin-table tbody tr:hover { background: #fdfaf2; }

.admin-table .action-btn {
  font-size: 0.78rem !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transform: none !important;
}
.admin-table .action-btn.btn-approve { background: #4fd880 !important; color: #0a2a15 !important; }
.admin-table .action-btn.btn-suspend { background: #f07070 !important; color: #2a0a0a !important; }
.admin-table .action-btn.btn-delete  { background: #c0392b !important; color: white   !important; }
.admin-table td:last-child {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}
.admin-table .status-pill {
  background: var(--sand-light);
  color: var(--ocean);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
}

/* ── Filters row (Activity Logs) ─────────────────────────────────────── */
.admin-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.admin-filters .form-group { margin: 0; }
.admin-filters-actions {
  display: flex; gap: 0.6rem;
  grid-column: 1 / -1;
  justify-content: flex-end;
}
.admin-btn-secondary {
  background: transparent;
  color: var(--ocean);
  border: 1px solid rgba(10,79,110,0.16);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.admin-btn-secondary:hover { background: var(--ocean); color: white; }

/* ── Pagination ──────────────────────────────────────────────────────── */
.admin-pagination {
  display: flex; gap: 0.5rem;
  justify-content: center; align-items: center;
  margin-top: 1.3rem; flex-wrap: wrap;
}

/* ── Edit-user card ──────────────────────────────────────────────────── */
.admin-edit-card {
  background: white;
  border: 1px solid rgba(10,79,110,0.06);
  border-radius: 18px;
  padding: 1.6rem 1.7rem;
  margin-top: 1.4rem;
  max-width: 520px;
  box-shadow: 0 6px 20px rgba(10,79,110,0.08);
}
.admin-edit-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--ocean);
  margin: 0 0 1rem;
}
.admin-edit-actions {
  display: flex; gap: 0.7rem; margin-top: 0.5rem;
}

/* ── Save button styling (matches main-site primary) ─────────────────── */
.admin-panel .btn-submit,
.admin-panel .action-btn.btn-approve {
  background: linear-gradient(135deg, var(--coral), var(--coral-light)) !important;
  color: white !important;
  border: none;
  border-radius: 999px !important;
  padding: 0.7rem 1.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(201,95,58,0.28);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.admin-panel .btn-submit:hover,
.admin-panel .action-btn.btn-approve:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(201,95,58,0.36);
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .admin-shell { padding: 1.5rem 0.9rem 3rem; }
  .admin-topbar h1 { font-size: 1.45rem; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-stat-num { font-size: 1.9rem; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .admin-brand-mark { width: 44px; height: 44px; }
}
@media (max-width: 460px) {
  .admin-stats { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ── MOBILE OVERFLOW GUARDS ──
   Site-wide safety net for horizontal scroll bugs on small screens.
   Caused issues:
     • the Hotel Owner Dashboard would render wider than the viewport because
       inline-styled listing/booking cards used flex without flex-wrap;
     • images, embeds and long unbroken strings (emails, refs, URLs) would
       push their parents past 100vw on phones.
   These rules are appended last so they win the cascade.
   ════════════════════════════════════════════════════════════════════════════ */
html { overflow-x: hidden; }
body { max-width: 100vw; overflow-x: hidden; }

/* Media never exceeds its container on phones. Inline width/height still wins
   because inline styles beat stylesheet rules without !important. */
img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }

/* Long unbroken strings (emails, refs, IDs) shouldn't widen layout. */
.booking-tourist-name,
.booking-tourist-contact,
.booking-message,
.pay-ref { word-break: break-word; overflow-wrap: anywhere; }

/* Owner-portal layout: let grid/flex children actually shrink. */
.admin-grid,
.admin-content,
.admin-header > div,
.admin-topbar-title { min-width: 0; }

/* Booking cards: header row + footer should wrap on narrow screens. */
.booking-card-header { flex-wrap: wrap; gap: 0.5rem; }
.booking-card-header > div:first-child { flex: 1 1 60%; min-width: 0; }
.booking-footer { flex-wrap: wrap; gap: 0.6rem; }
.booking-footer > div { flex-wrap: wrap; }

/* pay.html rows wrap on phones. */
.pay-row { flex-wrap: wrap; gap: 0.4rem 0.8rem; }
.pay-row > * { min-width: 0; }
.pay-row strong { word-break: break-word; }

@media (max-width: 768px) {
  /* The Owner / Tourist Bookings sub-grid (h3 + listings) shouldn't shrink
     below 0, which makes flex items overflow. */
  #ownerListings,
  #tpOwnerListings,
  #apOwnerListings,
  #hotelOwnerBookings,
  #tpOwnerBookings,
  #apOwnerBookings { min-width: 0; }

  /* Listing form padding — was clipped on the right edge before. */
  .listing-form { padding: 1.25rem; }

  /* Make the admin-header user line truncate so the Sign Out chip stays
     fully on-screen with a long email. */
  .admin-user { max-width: 100%; }
}

@media (max-width: 480px) {
  /* Tighter dashboard content padding so cards have room to breathe. */
  .admin-content { padding: 1rem; }
  .admin-header { padding: 0.9rem 1rem; }
  .admin-header h1 { font-size: 1.2rem; }
  .admin-mtab { font-size: 0.72rem; padding: 0.8rem 0.25rem; }

  /* pay.html on tight screens. */
  .pay-wrap { padding: 0 1rem; margin: 2rem auto; }
  .pay-card { padding: 1.3rem; }
}

/* ══════════════════════════════════════════════════════════════
   SECURITY TAB — admin.html
   Severity badges, summary cards, AI explain modal. Inherits the
   admin shell's neutral palette; severity is the only place real
   colour appears.
   ══════════════════════════════════════════════════════════════ */
.sec-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.sec-summary-card {
  background: white;
  border: 1px solid rgba(10,79,110,0.08);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: var(--sh-sm);
}
.sec-summary-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.sec-summary-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
}
.sec-summary-critical { border-left: 3px solid #c0392b; }
.sec-summary-high     { border-left: 3px solid #d35400; }
.sec-summary-new      { border-left: 3px solid var(--ocean); }

.sec-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
  align-items: center;
}
.sec-toolbar select {
  background: white;
  border: 1px solid rgba(10,79,110,0.18);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.sec-table td { vertical-align: top; font-size: 0.86rem; }
.sec-table .sec-rule {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 0.15rem;
}
.sec-table .sec-msg {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.sec-ip {
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.sec-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: nowrap;
}
.sec-actions .action-btn {
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem;
}
.sec-btn-ai {
  background: linear-gradient(135deg, #6b3fa0 0%, #8e44ad 100%) !important;
  color: white !important;
  border: 0 !important;
}
.sec-btn-ai:hover { filter: brightness(1.08); }
.action-btn-danger {
  background: #c0392b !important;
  color: white !important;
  border: 0 !important;
}

/* Severity badges — only place real colour lives. */
.sec-sev {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.sec-sev-info     { background: #e7ebee; color: #4a5a66; }
.sec-sev-low      { background: #fff4d6; color: #8a6b1a; }
.sec-sev-medium   { background: #ffe0b3; color: #a64b00; }
.sec-sev-high     { background: #ffcdb3; color: #b03a0e; }
.sec-sev-critical { background: #c0392b; color: white; }

.sec-status {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sec-status-new       { background: #d6ecf3; color: #0a4f6e; }
.sec-status-reviewed  { background: #d4efdf; color: #1e6b3a; }
.sec-status-dismissed { background: #ecf0f1; color: #7f8c8d; }
.sec-status-escalated { background: #ffe2e2; color: #c0392b; }

/* AI explanation modal */
.sec-explain-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,19,28,0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 1.5rem;
}
.sec-explain-modal {
  background: white;
  border-radius: 14px;
  width: min(640px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  box-shadow: var(--sh-xl);
  padding: 1.6rem 1.8rem 1.4rem;
  position: relative;
}
.sec-explain-modal h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  margin: 0 0 0.6rem;
  color: var(--dark);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.sec-explain-modal h3 i { color: #8e44ad; }
.sec-explain-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: #f0f4f8;
  border: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-explain-meta {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.sec-explain-body {
  background: #f5f7fa;
  border: 1px solid rgba(10,79,110,0.06);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--dark);
  white-space: pre-wrap;
  margin: 0 0 0.9rem;
}
.sec-explain-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.sec-explain-model {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   DIAGNOSTICS TAB — admin.html
   Reuses the same neutral admin shell. Only the roll-up banner
   uses real colour (ok/warning/fatal).
   ══════════════════════════════════════════════════════════════ */
.diag-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.diag-status { font-size: 0.85rem; color: var(--text-muted); }

.diag-roll { margin-bottom: 1.4rem; }
.diag-roll-card {
  padding: 1rem 1.2rem;
  border-radius: 10px;
  border: 1px solid transparent;
}
.diag-roll-ok    { background: #e7f6ec; border-color: #b6dfc1; color: #1e6b3a; }
.diag-roll-warn  { background: #fff7e0; border-color: #f0d68f; color: #8a6b1a; }
.diag-roll-fatal { background: #ffe6e6; border-color: #f4b3b3; color: #a32626; }
.diag-roll-list {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  line-height: 1.55;
}
.diag-fatal-li { color: #a32626; }
.diag-warn-li  { color: #8a6b1a; }

.diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 1.4rem;
}
.diag-group {
  background: white;
  border: 1px solid rgba(10,79,110,0.08);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  box-shadow: var(--sh-sm);
}
.diag-group h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  margin: 0 0 1rem;
  color: var(--dark);
}
.diag-row {
  padding: 0.7rem 0;
  border-top: 1px solid rgba(10,79,110,0.06);
}
.diag-row:first-of-type { border-top: 0; padding-top: 0; }
.diag-row-main {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
}
.diag-row-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--dark);
}
.diag-row-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.diag-row-help {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.diag-preview {
  background: #f5f7fa;
  border: 1px solid rgba(10,79,110,0.06);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--dark);
}
.diag-ok {
  background: #d4efdf;
  color: #1e6b3a;
  padding: 0.12rem 0.5rem;
  border-radius: 5px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.diag-miss {
  background: #ffe2e2;
  color: #a32626;
  padding: 0.12rem 0.5rem;
  border-radius: 5px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.diag-warn-inline { color: #a36400; font-style: italic; }