/* ==========================================================================
   IslandTravelAtlas — Sitewide Contrast & Missing-Component Fix
   --------------------------------------------------------------------------
   Load this file LAST on every page.

   It does two things:

   1) Styles component classes that appear across dozens of live guide/hub
      pages (decision-cta, cluster-hero, numbered-decisions, sticky planners,
      commercial-page heroes, etc.) but currently have NO matching CSS rule
      anywhere in the active stylesheet stack, because the only file that
      defined them (css/cinematic-coastal.css) is linked solely from the
      internal /design-preview.html page and nowhere else.

   2) Forces readable, on-brand text color for every dark-surface container
      on the site (hero bands, footers, CTA/decision blocks, planning
      sections), using real class selectors + !important so it can't be
      silently defeated by load order or by :where()-based rules elsewhere
      (0 specificity) the way the previous attempt
      (assets/css/ita-global-contrast.css) was — that file is also scoped
      only to `body.ita-page-guides` and contains invalid selectors (stray
      parentheses) that make entire rule blocks void in a standards-compliant
      browser. This file replaces its job sitewide.

   Uses the site's existing design tokens from css/style.css:
   --ink (#0A1F44), --primary (#0077B6), --accent (#D4A762), --surface,
   --hairline, --radius-*, --shadow-*
   ========================================================================== */

:root {
  --ita-dark-bg: var(--ink, #0A1F44);
  --ita-dark-bg-2: #123162;
  --ita-on-dark-heading: #ffffff;
  --ita-on-dark-text: #e9eef7;
  --ita-on-dark-muted: #c3cde2;
  --ita-on-dark-link: #8fd6ff;
  --ita-on-dark-border: rgba(255, 255, 255, 0.18);
  --ita-tool-accent: #0f6e63;
  --ita-tool-accent-light: #e4f5f2;
}

/* --------------------------------------------------------------------
   1. MISSING COMPONENTS
   -------------------------------------------------------------------- */

/* Affiliate / next-step decision cards (used in nearly every guide) */
.decision-cta,
.r-decision-cta,
.greek-decision-cta,
.ocean-decision-cta,
.caribbean-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(135deg, var(--ita-dark-bg), var(--ita-dark-bg-2));
  box-shadow: var(--shadow-md, 0 4px 20px rgba(10,31,68,0.12));
}
.decision-cta > div,
.r-decision-cta > div,
.greek-decision-cta > div,
.ocean-decision-cta > div,
.caribbean-cta > div {
  flex: 1 1 320px;
}
.decision-cta span,
.r-decision-cta span,
.greek-decision-cta span,
.ocean-decision-cta span,
.caribbean-cta span {
  display: inline-block;
  margin-bottom: 0.4rem;
  color: var(--accent, #D4A762) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.decision-cta h3,
.r-decision-cta h3,
.greek-decision-cta h3,
.ocean-decision-cta h3,
.caribbean-cta h3 {
  margin: 0 0 0.35rem;
  color: var(--ita-on-dark-heading) !important;
  font-size:1.15rem !important;
  line-height:1.35 !important;
}
.decision-cta p,
.r-decision-cta p,
.greek-decision-cta p,
.ocean-decision-cta p,
.caribbean-cta p {
  margin: 0;
  color: var(--ita-on-dark-text) !important;
  font-size: 0.92rem;
  line-height: 1.55;
}
.decision-cta > a,
.r-decision-cta > a,
.greek-decision-cta > a,
.ocean-decision-cta > a,
.caribbean-cta > a {
  flex-shrink: 0;
}

/* Internal free-tool CTA: same layout family as decision-cta, but visually
   distinct (teal, not navy) so readers can tell "our tool" from "partner
   offer" at a glance -- important for trust and for affiliate-disclosure
   clarity. */
.calculator-cta {
  background: linear-gradient(135deg, var(--ita-tool-accent), #0a4a42);
}
.calculator-cta span { color: #bdeee6; }

/* Grid of small option cards inside guide bodies */
.decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.decision-grid > article {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline, #E5E8EC);
  border-radius: var(--radius-md, 12px);
  background: #fff;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(10,31,68,0.05));
}
.decision-grid > article span {
  display: inline-block;
  margin-bottom: 0.3rem;
  color: var(--primary, #0077B6);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.decision-grid > article h3 { margin: 0 0 0.3rem; font-size:1rem !important; color: var(--ink); }
.decision-grid > article p { margin: 0; font-size: 0.88rem; color: var(--ink-muted, #3A4A62); }

/* Numbered decision list (Caribbean / comparison guides) */
.numbered-decisions {
  counter-reset: ita-decision;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.numbered-decisions > li {
  counter-increment: ita-decision;
  position: relative;
  margin: 0 0 0.85rem;
  padding: 0.15rem 0 0.15rem 2.6rem;
  min-height: 1.9rem;
  color: var(--ink);
  line-height: 1.55;
}
.numbered-decisions > li::before {
  content: counter(ita-decision);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

/* Day-by-day itinerary blocks */
.day-plan {
  margin: 1.25rem 0;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--accent, #D4A762);
  border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
  background: var(--surface, #F7F8FA);
}

/* Destination cluster / hub hero (Bali, Greek Islands, Caribbean, Maldives & Seychelles index pages) */
.cluster-hero,
.greek-hub-hero,
.caribbean-hub-hero,
.ocean-hub-hero {
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
  background: linear-gradient(135deg, var(--ita-dark-bg), var(--ita-dark-bg-2));
}
.cluster-hero-grid,
.ocean-cluster-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 2rem;
  align-items: center;
}
@media (max-width: 900px) {
  .cluster-hero-grid, .ocean-cluster-hero-grid { grid-template-columns: 1fr; }
}
.cluster-hero .eyebrow,
.greek-hub-hero .eyebrow,
.caribbean-hub-hero .eyebrow,
.ocean-hub-hero .eyebrow {
  color: var(--accent, #D4A762);
}
.cluster-hero h1,
.greek-hub-hero h1,
.caribbean-hub-hero h1,
.ocean-hub-hero h1 { color: var(--ita-on-dark-heading); }
.cluster-hero p,
.greek-hub-hero p,
.caribbean-hub-hero p,
.ocean-hub-hero p { color: var(--ita-on-dark-text); }
.cluster-hero .breadcrumbs a,
.greek-hub-hero .breadcrumbs a,
.caribbean-hub-hero .breadcrumbs a,
.ocean-hub-hero .breadcrumbs a { color: var(--ita-on-dark-muted); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.4rem;
}

/* Per-article hero bands (Greek Islands / Maldives & Seychelles guides) */
.greek-article-hero,
.ocean-article-hero,
.ita-tp-hero,
.rf-library-hero {
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  background: linear-gradient(135deg, var(--ita-dark-bg), var(--ita-dark-bg-2));
}
.greek-article-hero h1,
.ocean-article-hero h1,
.ita-tp-hero h1,
.rf-library-hero h1 { color: var(--ita-on-dark-heading); }
.greek-article-hero p,
.ocean-article-hero p,
.ita-tp-hero p,
.rf-library-hero p,
.greek-hero-intro,
.ocean-hero-intro { color: var(--ita-on-dark-text); }
.greek-article-hero .eyebrow,
.ocean-article-hero .eyebrow { color: var(--accent, #D4A762); }
.greek-article-hero .breadcrumbs a,
.ocean-article-hero .breadcrumbs a,
.ita-tp-hero .breadcrumbs a,
.rf-library-hero .breadcrumbs a { color: var(--ita-on-dark-muted); }
.greek-article-hero-grid,
.ocean-article-hero-grid,
.caribbean-article-hero-grid,
.ita-tp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 2rem;
  align-items: center;
}
@media (max-width: 900px) {
  .greek-article-hero-grid,
  .ocean-article-hero-grid,
  .caribbean-article-hero-grid,
  .ita-tp-hero-grid {
    grid-template-columns: 1fr;
  }
}
.greek-article-hero-grid > img,
.ocean-article-hero-grid > img,
.caribbean-article-hero-grid > img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg, 16px);
}

/* Sidebar sticky planner cards (light card, distinct from dark hero) */
.greek-sticky-planner,
.ocean-sticky-planner,
.planning-panel {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--hairline, #E5E8EC);
  border-radius: var(--radius-lg, 16px);
  background: #fff;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(10,31,68,0.05));
}
.greek-sticky-planner span,
.ocean-sticky-planner span,
.planning-panel span,
.planning-sequence span {
  display: inline-block;
  margin-bottom: 0.6rem;
  color: var(--primary, #0077B6);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.greek-sticky-planner ol,
.ocean-sticky-planner ol,
.planning-sequence ol {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--ink);
}
.greek-sticky-planner li,
.ocean-sticky-planner li,
.planning-sequence li { margin-bottom: 0.4rem; }

/* Commercial pages: eSIMs, Rentals, Tours, Insurance
   (previously depended entirely on the orphaned cinematic-coastal.css) */
.r-commercial-hero {
  padding: clamp(3rem, 6vw, 5rem) 2.5rem;
  text-align: center;
  background: var(--ita-dark-bg);
}
.r-commercial-hero h1 { color: var(--ita-on-dark-heading); margin: 0.75rem auto 0.5rem; max-width: 700px; }
.r-commercial-hero .r-section-label { color: var(--accent, #D4A762); justify-content: center; }
.r-commercial-hero .r-hero-lead,
.r-hero-lead { color: var(--ita-on-dark-text); max-width: 560px; margin: 0 auto 1.5rem; }
.r-commercial-hero .breadcrumbs { justify-content: center; display: flex; }
.r-commercial-hero .breadcrumbs a { color: var(--ita-on-dark-muted); }
.r-hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------
   2. SITEWIDE DARK-SURFACE TEXT CONTRAST (the original request)
   Applies to every known dark container, regardless of page template.
   -------------------------------------------------------------------- */
.decision-cta, .r-decision-cta, .greek-decision-cta, .ocean-decision-cta,
.caribbean-cta, .calculator-cta,
.cluster-hero, .greek-hub-hero, .caribbean-hub-hero, .ocean-hub-hero,
.greek-article-hero, .ocean-article-hero, .caribbean-article-hero, .article-hero,
.ita-tp-hero, .rf-library-hero, .r-commercial-hero,
.rf-planning-section, .rf-flight-dark-section, .rf-final-cta, .rf-route-card,
.rf-connection-strip, .rf-route-method, .rf-footer, .home-v2-dark-section,
.home-v2-final-cta, .home-v2-route-method, .dark-section, .ita-dark-surface,
.theme-dark, [data-theme="dark"] {
  color: var(--ita-on-dark-text) !important;
}
.decision-cta :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.r-decision-cta :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.greek-decision-cta :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.ocean-decision-cta :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.caribbean-cta :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.cluster-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.greek-hub-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.caribbean-hub-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.ocean-hub-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.greek-article-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.ocean-article-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.caribbean-article-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.article-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.ita-tp-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.rf-library-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.r-commercial-hero :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.rf-planning-section :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.rf-flight-dark-section :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.dark-section :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading),
.ita-dark-surface :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading) {
  color: var(--ita-on-dark-heading) !important;
}
.decision-cta a:not(.button):not([class*="button"]),
.r-decision-cta a:not(.button):not([class*="button"]),
.cluster-hero a:not(.button):not([class*="button"]),
.greek-hub-hero a:not(.button):not([class*="button"]),
.caribbean-hub-hero a:not(.button):not([class*="button"]),
.ocean-hub-hero a:not(.button):not([class*="button"]),
.greek-article-hero a:not(.button):not([class*="button"]),
.ocean-article-hero a:not(.button):not([class*="button"]),
.ita-tp-hero a:not(.button):not([class*="button"]),
.rf-library-hero a:not(.button):not([class*="button"]),
.r-commercial-hero a:not(.button):not([class*="button"]),
.rf-planning-section a:not(.button):not([class*="button"]),
.dark-section a:not(.button):not([class*="button"]) {
  color: var(--ita-on-dark-link) !important;
}

/* ==========================================================================
   3. "r-" GUIDE-ARTICLE CONTENT SYSTEM (round 2 fix)
   --------------------------------------------------------------------------
   A second, larger component family used across ~74 live pages (guide
   articles, esim.html, the trip-cost calculator, 404, privacy pages) has
   ZERO matching CSS anywhere in the exported site -- not even in the
   orphaned cinematic-coastal.css. This is the actual article body layout:
   section wrappers, tables, FAQs, checklists, the "quick facts" strip, the
   editorial review bar, the day-by-day itinerary blocks, the trip-cost
   calculator form/results, and the destination cluster nav. Covering both
   the "r-" prefixed and unprefixed class variants, since both appear on
   live pages for the same components.
   ========================================================================== */

/* Article layout shell */
.r-layout, .site-container.r-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 960px) { .r-layout { grid-template-columns: 1fr; } }
.r-layout-content { min-width: 0; }
.r-container { max-width: 720px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; text-align: center; }
.r-section { margin: 2.25rem 0; }

/* Photo-credit cluster headings (Caribbean, Theme sections on image-credits.html):
   the heading sits in a nested `.r-section` div that never had a width/centering
   constraint, so it rendered flush to the browser edge instead of aligned with
   the photo-credit-list grid below it. The outer <section> and inner <div> also
   both apply the plain .r-section margin, stacking to double the intended
   spacing between clusters. */
section[data-photo-credit-cluster] { margin: 0 !important; }
section[data-photo-credit-cluster] > .r-section {
  width: min(calc(100% - 40px), 1260px) !important;
  margin: 1.5rem auto !important;
}
section[data-photo-credit-cluster] .photo-credit-list {
  padding: 0.5rem 0 1rem !important;
}
.r-section-heading { margin-bottom: 1.1rem; }
.r-section-heading .r-section-label,
.r-section-label { display: block; margin-bottom: 0.3rem; color: var(--primary, #0077B6); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.r-section-heading h2 { margin: 0; }

/* Info card grids (eSIM plan types, etc.) */
.r-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.r-guide-card { padding: 1.1rem 1.25rem; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px); background: #fff; box-shadow: var(--shadow-sm, 0 2px 8px rgba(10,31,68,0.05)); }
.r-guide-card h3 { margin: 0 0 0.4rem; font-size:1rem !important; }
.r-guide-card p { margin: 0; font-size: 0.9rem; color: var(--ink-muted, #3A4A62); }
.r-related-guide-grid, .featured-guide-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.r-related-guide-grid a { display: block; padding: 1.1rem 1.25rem; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px); background: #fff; text-decoration: none; color: inherit; transition: box-shadow .15s ease; }
.r-related-guide-grid a:hover { box-shadow: var(--shadow-md, 0 4px 20px rgba(10,31,68,0.1)); }
.r-related-guide-grid a span { display: block; margin-bottom: 0.3rem; color: var(--primary, #0077B6); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.r-related-guide-grid a strong { display: block; margin-bottom: 0.3rem; color: var(--ink); }
.r-related-guide-grid a p { margin: 0; font-size: 0.85rem; color: var(--ink-muted, #3A4A62); }

/* Buttons */
.r-button, .rf-button-secondary, .r-featured-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: var(--radius-sm, 8px);
  font-weight: 700; font-size: 0.9rem; text-decoration: none;
  border: 1px solid transparent;
}
.r-button-primary { background: var(--primary, #0077B6); color: #fff !important; }
.r-button-primary:hover { background: var(--primary-dark, #005a8a); }
.r-button-secondary, .rf-button-secondary { background: #fff; color: var(--ink) !important; border-color: var(--hairline, #E5E8EC); }
.r-button-secondary:hover, .rf-button-secondary:hover { border-color: var(--primary, #0077B6); }
.r-text-link, .text-link { color: var(--primary, #0077B6); text-decoration: underline; }

/* Tables */
.r-table-wrap, .table-wrap { overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px); }
.r-table-wrap table, .table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.r-table-wrap th, .table-wrap th { background: var(--surface, #F7F8FA); color: var(--ink); text-align: left; padding: 0.75rem 1rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.r-table-wrap td, .table-wrap td { padding: 0.75rem 1rem; border-top: 1px solid var(--hairline, #E5E8EC); color: var(--ink-muted, #3A4A62); vertical-align: top; }

/* Editorial status / review bar */
.r-review-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin: 1rem 0 1.5rem; padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--accent, #D4A762);
  background: var(--surface, #F7F8FA);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  font-size: 0.84rem; color: var(--ink-muted, #3A4A62);
}
.r-review-bar strong { color: var(--ink); }
.r-review-bar a { color: var(--primary, #0077B6); }

/* Quick facts strip */
.r-quick-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 1.25rem 0; }
.r-quick-facts > div { padding: 0.85rem 1rem; background: var(--surface, #F7F8FA); border-radius: var(--radius-md, 12px); }
.r-quick-facts span { display: block; margin-bottom: 0.25rem; font-size: 0.72rem; color: var(--ink-soft, #8B97A8); text-transform: uppercase; letter-spacing: 0.04em; }
.r-quick-facts strong { color: var(--ink); }

/* Notice / warning panel */
.r-notice-panel, .pro-tip {
  margin: 1.25rem 0; padding: 1rem 1.25rem;
  background: var(--accent-light, #FEF5E6);
  border: 1px solid var(--accent, #D4A762);
  border-radius: var(--radius-md, 12px);
}
.r-notice-panel strong, .pro-tip strong { display: block; margin-bottom: 0.35rem; color: var(--ink); }
.r-notice-panel p, .pro-tip p { margin: 0; font-size: 0.9rem; color: var(--ink-muted, #3A4A62); }

/* Route strip (day-range overview) */
.r-route-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.25rem 0; padding: 1rem; background: var(--surface, #F7F8FA); border-radius: var(--radius-md, 12px); }
.r-route-strip > div { text-align: center; }
.r-route-strip span { display: block; font-size: 0.7rem; color: var(--ink-soft, #8B97A8); text-transform: uppercase; }
.r-route-strip strong { color: var(--ink); }
.r-route-strip i { color: var(--ink-soft, #8B97A8); font-style: normal; }

/* Day-by-day itinerary */
.r-day-plan, .day-grid, .r-day-grid { margin: 1.25rem 0; padding: 1.1rem 1.35rem; border-left: 3px solid var(--accent, #D4A762); border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0; background: var(--surface, #F7F8FA); }
.r-day-plan article + article { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--hairline, #E5E8EC); }
.r-day-plan span { display: inline-block; margin-bottom: 0.3rem; color: var(--primary, #0077B6); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.r-mini-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.r-mini-actions a { font-size: 0.82rem; color: var(--primary, #0077B6); text-decoration: underline; }

/* Comparison / stat blocks */
.r-comparison-box, .comparison-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.r-comparison-col, .comparison-col { padding: 1.1rem 1.25rem; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px); background: #fff; }
.r-comparison-col.winner, .comparison-col.winner { border-color: var(--accent, #D4A762); box-shadow: 0 0 0 2px var(--accent-light, #FEF5E6) inset; }
.r-comparison-col h4, .comparison-col h4 { margin: 0 0 0.5rem; }
.r-stat, .stat { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--primary-light, #E8F4FD); color: var(--primary-dark, #005a8a); font-weight: 700; font-size: 0.85rem; }
.r-data-box, .data-box { margin: 1rem 0; padding: 1rem 1.25rem; border-radius: var(--radius-md, 12px); background: var(--surface-warm, #FDF8F0); border: 1px solid var(--accent-light, #FEF5E6); }
.r-data-box h4, .data-box h4 { margin: 0 0 0.4rem; font-size:0.78rem !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-dark, #c49650); }

/* Sources */
.r-source-panel, .source-list { margin: 1.5rem 0; }
.r-source-panel h2 { margin-bottom: 0.5rem; }
.r-source-panel ul, .source-list { padding-left: 1.1rem; }
.r-source-panel li, .source-list li { margin-bottom: 0.4rem; }

/* Hero intro paragraph (used with dark hero classes above -- inherits color there) */
.r-hero-intro, .greek-hero-intro, .ocean-hero-intro { font-size: 1.05rem; line-height: 1.6; margin: 0.5rem 0 1.25rem; }

/* FAQ accordion */
.r-faq details { margin-bottom: 0.75rem; padding: 0.9rem 1.1rem; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px); }
.r-faq summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.r-faq details p { margin: 0.6rem 0 0; color: var(--ink-muted, #3A4A62); }

/* Checklists */
.r-checklist, .check-list, .checklist-panel {
  list-style: none; margin: 1.25rem 0; padding: 0;
}
.r-checklist li, .check-list li, .checklist-panel label {
  position: relative; margin-bottom: 0.6rem; padding-left: 1.6rem; color: var(--ink);
}
.r-checklist li::before, .check-list li::before {
  content: "✓"; position: absolute; left: 0; color: var(--primary, #0077B6); font-weight: 700;
}
.checklist-panel { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.25rem 0; }
.checklist-panel label {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.95rem; line-height: 1.5; color: var(--ink); cursor: pointer;
}
.checklist-panel input[type="checkbox"] {
  flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem;
  accent-color: var(--primary, #0077B6);
}

/* Guide-end CTA strip + table of contents + inline link rows */
.r-guide-end, .guide-end { margin: 2.5rem 0 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline, #E5E8EC); }
.r-inline-links, .inline-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; margin-top: 0.75rem; }
.r-inline-links a, .inline-links a { color: var(--primary, #0077B6); text-decoration: underline; font-size: 0.9rem; }
.r-toc, .toc { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--surface, #F7F8FA); border-radius: var(--radius-md, 12px); }
.r-toc h4, .toc h4 { margin: 0 0 0.5rem; font-size:0.78rem !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft, #8B97A8); }
.r-toc ol, .toc ol { margin: 0; padding-left: 1.1rem; }
.r-toc li, .toc li { margin-bottom: 0.3rem; font-size: 0.9rem; }

/* Destination cluster sidebar nav */
.r-cluster-nav, .greek-cluster-nav, .ocean-cluster-nav, .phase2-nav {
  margin: 1.5rem 0; padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px);
  background: #fff;
}
.r-cluster-nav strong, .greek-cluster-nav strong, .ocean-cluster-nav strong { display: block; margin-bottom: 0.6rem; color: var(--ink); }
.r-cluster-nav a, .greek-cluster-nav a, .ocean-cluster-nav a, .phase2-nav a { display: block; padding: 0.3rem 0; color: var(--primary, #0077B6); text-decoration: none; font-size: 0.9rem; }
.r-cluster-nav a:hover, .greek-cluster-nav a:hover, .ocean-cluster-nav a:hover { text-decoration: underline; }

/* Compliance / planning-notice card */
.r-compliance-section, .compliance-section { width: min(calc(100% - 40px), 1120px); margin-inline: auto; padding: 2rem 0; }
.r-compliance-card, .r-compliance-notice, .compliance-card, .compliance-notice {
  padding: 1.25rem 1.5rem; border-radius: var(--radius-md, 12px);
  background: var(--surface, #F7F8FA); border: 1px solid var(--hairline, #E5E8EC);
}
.r-compliance-card h2, .compliance-card h2 { margin: 0 0 0.5rem; font-size:1rem !important; }
.r-compliance-card p, .compliance-card p { margin: 0 0 0.75rem; font-size: 0.88rem; color: var(--ink-muted, #3A4A62); }
.compliance-notice.affiliate-notice { margin: 2rem 0; }

/* ==========================================================================
   10. REMAINING UNSTYLED GRID COMPONENTS (found via the display:grid audit)
   --------------------------------------------------------------------------
   These only ever appeared in a mobile media-query override
   (grid-template-columns: minmax(0,1fr) !important) with no base rule
   anywhere -- meaning the override had nothing to override. Genuinely
   unstyled at the base/desktop level across several guide pages.
   ========================================================================== */

/* Day-by-day itinerary card grid */
.greek-day-grid, .ocean-day-grid, .caribbean-day-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.greek-day-grid > article, .ocean-day-grid > article, .caribbean-day-grid > article {
  padding: 1.1rem 1.25rem; border-left: 3px solid var(--accent, #D4A762);
  border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
  background: var(--surface, #F7F8FA);
}
.greek-day-grid span, .ocean-day-grid span, .caribbean-day-grid span {
  display: inline-block; margin-bottom: 0.3rem; color: var(--primary, #0077B6);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.greek-day-grid h3, .ocean-day-grid h3, .caribbean-day-grid h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.greek-day-grid p, .ocean-day-grid p, .caribbean-day-grid p { margin: 0; font-size: 0.9rem; color: var(--ink-muted, #3A4A62); }

/* Affiliate provider comparison grid */
.greek-provider-grid, .ocean-provider-grid, .caribbean-provider-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.greek-provider-grid > article, .ocean-provider-grid > article, .caribbean-provider-grid > article {
  padding: 1.1rem 1.25rem; border: 1px solid var(--hairline, #E5E8EC);
  border-radius: var(--radius-md, 12px); background: #fff;
}
.greek-provider-grid h3, .ocean-provider-grid h3, .caribbean-provider-grid h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.greek-provider-grid p, .ocean-provider-grid p, .caribbean-provider-grid p { margin: 0 0 0.75rem; font-size: 0.88rem; color: var(--ink-muted, #3A4A62); }
.greek-provider-grid a, .ocean-provider-grid a, .caribbean-provider-grid a { color: var(--primary, #0077B6); font-weight: 700; font-size: 0.88rem; }

/* Numbered recommendation cards */
.recommendation-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.recommendation-grid > article { padding: 1.1rem 1.25rem; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px); background: #fff; }
.recommendation-grid span {
  display: inline-block;
  padding: 0.25rem 0.65rem; margin-bottom: 0.6rem; border-radius: 999px;
  background: var(--primary-light, #E8F4FD); color: var(--primary-dark, #005a8a);
  font-size: 0.75rem; font-weight: 700;
}
.recommendation-grid h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.recommendation-grid p { margin: 0; font-size: 0.9rem; color: var(--ink-muted, #3A4A62); }

/* Direct link partner-choice cards */
.partner-choice-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem; margin: 1.5rem 0;
}
.partner-choice-grid a {
  display: block; padding: 0.9rem 1.1rem; border: 1px solid var(--hairline, #E5E8EC);
  border-radius: var(--radius-md, 12px); text-decoration: none; color: inherit;
}
.partner-choice-grid a span { display: block; font-size: 0.7rem; color: var(--ink-soft, #8B97A8); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.partner-choice-grid a strong { display: block; color: var(--primary, #0077B6); margin-bottom: 0.2rem; }
.partner-choice-grid a small { color: var(--ink-muted, #3A4A62); font-size: 0.82rem; }

/* Budget-scenario comparison cards */
.scenario-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.scenario-grid > article { padding: 1.1rem 1.25rem; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px); background: #fff; }
.scenario-grid > article.featured { border-color: var(--accent, #D4A762); box-shadow: 0 0 0 2px var(--accent-light, #FEF5E6) inset; }
.scenario-grid span { display: inline-block; margin-bottom: 0.3rem; color: var(--primary, #0077B6); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.scenario-grid h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.scenario-grid p { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--ink-muted, #3A4A62); }
.scenario-grid a { color: var(--primary, #0077B6); font-weight: 700; font-size: 0.85rem; }

/* Planning-horizon strip (months/weeks/days before travel) */
.season-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.season-strip > div { padding: 1rem 1.1rem; background: var(--surface, #F7F8FA); border-radius: var(--radius-md, 12px); }
.season-strip span { display: block; margin-bottom: 0.3rem; font-size: 0.7rem; color: var(--ink-soft, #8B97A8); text-transform: uppercase; letter-spacing: 0.04em; }
.season-strip strong { display: block; margin-bottom: 0.3rem; color: var(--ink); font-size: 0.95rem; }
.season-strip small { color: var(--ink-muted, #3A4A62); font-size: 0.84rem; line-height: 1.45; }

/* Bali trip-cost calculator (and its duplicate-path copies) */
.calculator-layout, .r-calculator-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .calculator-layout, .r-calculator-layout { grid-template-columns: 1fr; } }
.calculator-form, .r-calculator-form { display: flex; flex-direction: column; gap: 1.25rem; }
.calculator-section, .r-calculator-section {
  padding: 1.1rem 1.25rem; border: 1px solid var(--hairline, #E5E8EC);
  border-radius: var(--radius-md, 12px); background: #fff;
}
.calculator-section > div:first-child, .r-calculator-section > div:first-child { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }
.calculator-section span:first-child, .r-calculator-section span:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--primary-light, #E8F4FD); color: var(--primary-dark, #005a8a);
  font-size: 0.75rem; font-weight: 700;
}
.calculator-section h2, .r-calculator-section h2 { margin: 0; font-size:1rem !important; }
.field-grid, .r-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.85rem; }
.field-grid label, .r-field-grid label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--ink-muted, #3A4A62); }
.field-grid input, .field-grid select, .r-field-grid input, .r-field-grid select {
  padding: 0.6rem 0.75rem; border: 1px solid var(--hairline, #E5E8EC);
  border-radius: var(--radius-sm, 8px); font-size: 0.95rem; color: var(--ink);
}
.calculator-note { margin: 0; font-size: 0.78rem; color: var(--ink-soft, #8B97A8); }
.calculator-results, .r-calculator-results {
  position: sticky; top: 1.5rem; padding: 1.5rem;
  border-radius: var(--radius-lg, 16px); background: var(--ink); color: #fff !important;
}
.calculator-results *, .r-calculator-results * { color: inherit; }
.calculator-results .eyebrow, .r-calculator-results .eyebrow { color: var(--accent, #D4A762) !important; }
.result-total, .r-result-total { margin: 0.75rem 0 1.25rem; }
.result-total span, .r-result-total span { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.65) !important; text-transform: uppercase; }
.result-total strong, .r-result-total strong { display: block; font-size: 1.9rem; margin: 0.15rem 0; color: #fff !important; }
.result-total small, .r-result-total small { color: rgba(255,255,255,0.7) !important; }
.result-breakdown, .r-result-breakdown { margin-bottom: 1rem; }
.result-breakdown > div, .r-result-breakdown > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 0.85rem;
}
.result-breakdown > div span, .r-result-breakdown > div span { color: rgba(255,255,255,0.75) !important; }
.result-breakdown > div strong, .r-result-breakdown > div strong { color: #fff !important; font-weight: 700; white-space: nowrap; }
.result-assumptions, .r-result-assumptions { margin-bottom: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.18); }
.result-assumptions h3, .r-result-assumptions h3 { margin: 0 0 0.5rem; font-size:0.85rem !important; color: #fff !important; }
.result-assumptions li, .r-result-assumptions li { font-size: 0.8rem; color: rgba(255,255,255,0.75) !important; margin-bottom: 0.3rem; }
.result-actions, .r-result-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.result-actions a, .r-result-actions a { color: #fff !important; font-size: 0.85rem; text-decoration: underline; }
.calculator-partners, .r-calculator-partners, .compact-partners {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin: 1.25rem 0;
}
.calculator-partners a, .r-calculator-partners a, .compact-partners a {
  display: block; padding: 0.85rem 1rem; border: 1px solid var(--hairline, #E5E8EC);
  border-radius: var(--radius-md, 12px); text-decoration: none; color: inherit;
}
.calculator-partners a span, .r-calculator-partners a span { display: block; font-size: 0.72rem; color: var(--ink-soft, #8B97A8); text-transform: uppercase; }
.calculator-partners a strong, .r-calculator-partners a strong { color: var(--primary, #0077B6); }

/* Misc small elements */
.photo-credit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
  width: min(calc(100% - 40px), 1260px);
  margin-inline: auto;
  padding: 2rem 0 4rem;
  list-style: none;
}
.photo-credit-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  border: 1px solid var(--hairline, #E5E8EC);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  background: #fff;
}
.photo-credit-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; display: block; }
.photo-credit-card > div { padding: 1.1rem 1.25rem 1.3rem; }
.photo-credit-card h2, .photo-credit-card h3 { font-size:1.05rem !important; line-height:1.3 !important; margin: 0 0 0.35rem; }
.photo-credit-card p { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--ink-muted, #3A4A62); }
.photo-credit-card a { color: var(--primary, #0077B6); font-size: 0.84rem; }

/* ==========================================================================
   6. OPAQUE STICKY HEADER (sitewide, by request)
   --------------------------------------------------------------------------
   .pm-header (css/premium-experience.css) was translucent + blurred
   (rgba(255,255,255,.94) + backdrop-filter: blur(18px)), so any heading or
   content scrolling underneath it showed through faded/blurred rather than
   being cleanly hidden -- most visible on pages with less scroll padding
   above a heading, e.g. tools/island-flight-search.html. Made fully opaque
   sitewide per request, rather than patching individual pages.
   ========================================================================== */
.pm-header {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   7. #tpwl-tickets ON THE FLIGHT SEARCH PAGE
   --------------------------------------------------------------------------
   css/flight-white-label-v1.css only scopes #tpwl-tickets styling to
   body.ita-wl-results-page (the separate results page). The search page
   (tools/island-flight-search.html, body.ita-wl-flight-page) now also has
   a #tpwl-tickets mount point so search results can display inline on the
   same page the user searches from -- true meta-search, results shown on
   islandtravelatlas.com itself before any click-through to a partner.
   Extending the same styling/placeholder treatment to that page.
   ========================================================================== */
body.ita-wl-flight-page #tpwl-tickets {
  position: relative;
  min-height: 520px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--wl-border, #d9e6e0);
}
body.ita-wl-flight-page #tpwl-tickets:empty::before {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 22px;
  border: 1px dashed #bad1c8;
  border-radius: 14px;
  background: var(--wl-soft, #f4f8f6);
  color: var(--wl-muted, #5a7078);
  font-size: 0.9rem;
  text-align: center;
  content: "Searching live flight options. Results will appear here.";
}
@media (max-width: 760px) {
  body.ita-wl-flight-page #tpwl-tickets { min-height: 420px; }
}

/* ==========================================================================
   8. ACTIVITY-FINDER HERO (island-activities-search.html)
   --------------------------------------------------------------------------
   css/activity-discovery.css defines .ad-hero with a correct dark gradient
   background and correctly-paired light text (!important on the text,
   valid :root custom properties) -- on paper this should already render
   fine, and no other stylesheet in the linked chain overrides it. Since
   the previous round's caching issue showed the live server can drift from
   what's in a given export, forcing this here guarantees correct
   rendering regardless of which version of activity-discovery.css is
   actually being served.
   ========================================================================== */
.ad-hero {
  background-color: #062b3a !important;
  background-image: linear-gradient(135deg, #062b3a, #0d4a5e) !important;
  color: #f4f9fa !important;
}
.ad-hero h1 { color: #ffffff !important; }
.ad-hero .ad-eyebrow { color: #c5f6ef !important; }
.ad-hero .ad-hero-copy { color: #d0e1e4 !important; }
.ad-flow {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.17) !important;
}
.ad-flow > strong { color: #ffffff !important; }
.ad-flow-step { color: #d0e1e4 !important; background: rgba(255, 255, 255, 0.06) !important; }
.ad-flow-step b { color: #062b3a !important; background: #c5f6ef !important; }
.ad-faq {
  background: #062b3a !important;
  color: #f4f9fa !important;
}
.ad-faq h2 { color: #ffffff !important; }
.ad-faq details { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
.ad-faq summary { color: #ffffff !important; }
.ad-faq details p { color: #d0e1e4 !important; }
.policy-table-wrap { overflow-x: auto; margin: 1.25rem 0; }
.policy-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.policy-table th { background: var(--surface, #F7F8FA); text-align: left; padding: 0.7rem 0.9rem; }
.policy-table td { padding: 0.7rem 0.9rem; border-top: 1px solid var(--hairline, #E5E8EC); }
.privacy-button { padding: 0.7rem 1.25rem; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-sm, 8px); background: #fff; font-weight: 600; cursor: pointer; margin: 0.3rem 0.5rem 0.3rem 0; }
.privacy-button-primary { background: var(--primary, #0077B6); color: #fff; border-color: var(--primary, #0077B6); }
.privacy-choice-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.privacy-choice-panel { padding: 1.25rem; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px); margin: 1rem 0; }

/* Small inline badges / lead text used across comparison cards and headers */
.price { display: inline-block; margin-top: 0.3rem; color: var(--primary-dark, #005a8a); font-weight: 700; font-size: 0.82rem; }
.sub, .r-sub { color: var(--ink-muted, #3A4A62); font-size: 1.02rem; line-height: 1.6; }
.caribbean-lead { font-size: 1.05rem; line-height: 1.6; color: var(--ink-muted, #3A4A62); margin: 0.5rem 0 1rem; }

/* Numbered strategy/step lists (distinct from checklists -- no checkbox, a step number) */
.numbered-steps, .r-numbered-steps {
  counter-reset: ita-step; margin: 1.5rem 0; padding: 0; list-style: none;
}
.numbered-steps > li, .r-numbered-steps > li {
  counter-increment: ita-step; position: relative;
  margin: 0 0 0.85rem; padding: 0.1rem 0 0.1rem 2.6rem; min-height: 1.9rem;
  color: var(--ink); line-height: 1.55;
}
.numbered-steps > li::before, .r-numbered-steps > li::before {
  content: counter(ita-step); position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--primary, #0077B6); color: #fff; font-size: 0.82rem; font-weight: 700;
}

/* Aliases for variant naming of already-covered patterns */
.r-check-list { list-style: none; margin: 1.25rem 0; padding: 0; }
.r-check-list li { position: relative; margin-bottom: 0.6rem; padding-left: 1.6rem; color: var(--ink); }
.r-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--primary, #0077B6); font-weight: 700; }
.r-pro-tip {
  margin: 1.25rem 0; padding: 1rem 1.25rem;
  background: var(--accent-light, #FEF5E6); border: 1px solid var(--accent, #D4A762);
  border-radius: var(--radius-md, 12px);
}
.r-pro-tip strong { display: block; margin-bottom: 0.35rem; color: var(--ink); }
.r-source-list { margin: 1.5rem 0; padding-left: 1.1rem; }
.r-source-list li { margin-bottom: 0.4rem; }

/* go.html transition/redirect page */
.redirect-page { display: flex; align-items: center; justify-content: center; min-height: 70vh; background: var(--surface, #F7F8FA); }
.redirect-card {
  max-width: 420px; margin: 2rem; padding: 2.25rem 2rem; text-align: center;
  background: #fff; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg, 0 8px 32px rgba(10,31,68,0.08));
}
.redirect-card h1 { font-size:1.3rem !important; margin: 1rem 0 0.5rem; }
.redirect-card p { color: var(--ink-muted, #3A4A62); }
.redirect-card a { color: var(--primary, #0077B6); }

/* Guide-library search widget (used on the guides_index.html duplicate path --
   see the audit notes on duplicate guide URLs for the long-term fix) */
.coastal-library-search {
  position: relative; display: flex; align-items: center; max-width: 480px;
  margin: 1.25rem auto 0; padding: 0.85rem 1.25rem;
  border: 1px solid var(--hairline, #E5E8EC); border-radius: 999px; background: #fff;
}
.coastal-library-search input { flex: 1; border: none; outline: none; font-size: 0.95rem; color: var(--ink); background: transparent; }
.coastal-library-search b { margin-left: 0.5rem; color: var(--ink-soft, #8B97A8); font-style: normal; }
.coastal-search-status { text-align: center; margin: 0.5rem 0 1.5rem; font-size: 0.82rem; color: var(--ink-soft, #8B97A8); }
.coastal-library-groups { margin: 1.5rem 0; }
.coastal-library-group { margin-bottom: 2rem; }
.coastal-library-group-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--hairline, #E5E8EC); }
.coastal-library-group-heading span { color: var(--ink-soft, #8B97A8); font-size: 0.82rem; }
.coastal-library-row {
  display: block; padding: 0.85rem 1rem; margin-bottom: 0.5rem;
  border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px);
  text-decoration: none; color: var(--ink); font-size: 0.92rem;
}
.coastal-library-row:hover { border-color: var(--primary, #0077B6); }

/* Caribbean cost-formula box (same visual family as .data-box) */
.caribbean-formula {
  margin: 1rem 0; padding: 1rem 1.25rem; border-radius: var(--radius-md, 12px);
  background: var(--surface-warm, #FDF8F0); border: 1px solid var(--accent-light, #FEF5E6);
}
.caribbean-formula strong { display: block; margin-bottom: 0.4rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-dark, #c49650); }
.caribbean-formula span { color: var(--ink-muted, #3A4A62); font-size: 0.92rem; }

/* ==========================================================================
   4. ARTICLE-HERO / LAYOUT / SIDEBAR SHELL (round 3 fix)
   --------------------------------------------------------------------------
   Found via a corrected audit: earlier checks treated a class as "covered"
   if it appeared ANYWHERE in the css folder, including files that are
   never linked from live pages (css/cinematic-coastal.css,
   css/editorial-atlas.css -- both linked only from the internal
   design-preview.html). Re-checking against only the stylesheets actually
   linked per page shows .r-article-hero, .r-article-layout,
   .r-article-body, .r-breadcrumbs, .r-sidebar/.r-sidebar-card are missing
   on ~90+ live pages -- nearly every guide article, plus about.html,
   contact.html, image-credits.html, affiliate-disclosure.html,
   editorial-policy.html, cookie-policy.html, disclaimer.html. This is the
   outer shell those pages are built on, so its absence affects far more of
   the page than any single component. Values below are taken from
   cinematic-coastal.css's own (correct, just never-shipped) definitions,
   translated onto this site's live design tokens.
   ========================================================================== */

.r-article-hero {
  position: relative; min-height: 320px; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--ink);
  padding: 2.5rem 1.5rem 2.75rem;
}
.r-article-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.r-article-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,31,68,0.95) 0%, rgba(10,31,68,0.4) 100%);
}
.r-article-hero-content {
  position: relative; z-index: 1; padding: 0;
  width: min(calc(100% - 40px), 1100px); margin-inline: auto;
}
.r-article-hero > h1, .r-article-hero > p, .r-article-hero > .r-section-label, .r-article-hero > .r-breadcrumbs {
  width: 100%; max-width: 1100px; margin-inline: auto;
}
.r-article-hero .r-section-label { color: #f5d999 !important; max-width: 700px; }
.r-article-hero h1 { color: #fff !important; max-width: 700px; margin: 0 0 0.5rem; }
.r-article-hero p { color: rgba(255,255,255,0.75) !important; max-width: 560px; margin-inline: 0; }
.r-breadcrumbs { font-size: 0.78rem; margin-bottom: 0.75rem; }
.r-breadcrumbs a { color: var(--primary, #0077B6); text-decoration: none; }
.r-breadcrumbs a:hover { text-decoration: underline; }
.r-breadcrumbs span, .r-breadcrumbs .sep { color: var(--ink-soft, #8B97A8); margin: 0 0.4rem; }
.r-article-hero .r-breadcrumbs { width: min(calc(100% - 40px), 1100px); margin-inline: auto; }
.r-article-hero .r-breadcrumbs a { color: rgba(255,255,255,0.6) !important; }
.r-article-hero .r-breadcrumbs a:hover { color: rgba(255,255,255,0.85) !important; }
.r-article-hero .r-breadcrumbs span, .r-article-hero .r-breadcrumbs .sep { color: rgba(255,255,255,0.35) !important; }

.r-article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem;
  width: min(calc(100% - 40px), 1100px); margin-inline: auto; padding: 2.5rem 0 4rem;
}
@media (max-width: 960px) { .r-article-layout { grid-template-columns: 1fr; } }
.r-article-body { font-size: 1.05rem; line-height: 1.78; }
.r-article-body section { margin-bottom: 2.25rem; }
.r-article-body h2 { font-size:1.5rem !important; margin-top: 2.25rem; margin-bottom: 0.6rem; }
.r-article-body h3 { font-size:1.15rem !important; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.r-article-body p { margin-bottom: 1rem; }
.r-article-body ul, .r-article-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.r-article-body li { margin-bottom: 0.4rem; color: var(--ink-muted, #3A4A62); }
.r-article-body blockquote {
  border-left: 3px solid var(--accent, #D4A762); border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  background: var(--surface-warm, #FDF8F0); padding: 1.1rem 1.4rem; margin: 1.5rem 0;
}
.r-article-body blockquote p { margin: 0; color: var(--ink); }

.r-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.r-sidebar-card { padding: 1.4rem; border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-md, 12px); background: #fff; }
.r-sidebar-card h2, .r-sidebar-card h4 { font-size:0.9rem !important; font-weight: 700; margin-bottom: 0.6rem; color: var(--ink); }
.r-sidebar-card p { font-size: 0.85rem; line-height: 1.55; margin-bottom: 0.75rem; color: var(--ink-muted, #3A4A62); }
.r-sidebar-card a { display: block; padding: 0.25rem 0; color: var(--primary, #0077B6); text-decoration: none; font-size: 0.88rem; }
.r-sidebar-card a:hover { text-decoration: underline; }
.r-sidebar span { display: block; margin-bottom: 0.6rem; font-weight: 700; color: var(--ink); font-size: 0.88rem; }
.r-sidebar ol { padding-left: 1.2rem; color: var(--ink-muted, #3A4A62); font-size: 0.88rem; }
.r-sidebar ol li { margin-bottom: 0.4rem; }

/* Destination hub index pages (Bali/Caribbean/Greek/Maldives-Seychelles landing grids) */
.r-hub-grid, .caribbean-hub-grid, .greek-hub-grid, .ocean-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 1.5rem 0;
}
.r-hub-card, .caribbean-hub-card, .greek-hub-card, .ocean-hub-card {
  display: block; border-radius: var(--radius-md, 12px); overflow: hidden;
  border: 1px solid var(--hairline, #E5E8EC); background: #fff;
  text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease;
  padding: 1.25rem 1.5rem;
}
.r-hub-card:hover, .caribbean-hub-card:hover, .greek-hub-card:hover, .ocean-hub-card:hover {
  box-shadow: var(--shadow-md, 0 4px 20px rgba(10,31,68,0.1)); transform: translateY(-2px); color: inherit;
}
.r-hub-card-img { height: 180px; background-size: cover; background-position: center; margin: -1.25rem -1.5rem 1rem; }
.r-hub-card-body h3, .caribbean-hub-card h3, .greek-hub-card h3, .ocean-hub-card h3 { font-size:1.1rem !important; margin-bottom: 0.3rem; }
.r-hub-card-body p, .caribbean-hub-card p, .greek-hub-card p, .ocean-hub-card p { font-size: 0.88rem; line-height: 1.55; color: var(--ink-muted, #3A4A62); }
.caribbean-hub-card span, .greek-hub-card span, .ocean-hub-card span {
  display: inline-block; margin-bottom: 0.3rem; color: var(--primary, #0077B6);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.caribbean-hub-card strong, .greek-hub-card strong, .ocean-hub-card strong { display: block; margin-top: 0.5rem; color: var(--primary, #0077B6); font-size: 0.85rem; }
.caribbean-pattern-grid, .caribbean-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.caribbean-hub-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 2rem;
  align-items: center;
}
@media (max-width: 900px) {
  .caribbean-hub-hero-grid { grid-template-columns: 1fr; }
}
.caribbean-hub-hero-grid img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg, 16px);
}

/* Section background helpers (both prefixed and unprefixed variants) */
.r-section-warm, .section-tint, .r-section-tint { background: var(--surface-warm, #FDF8F0); }
.r-section-alt { background: var(--surface, #F7F8FA); }
.section-heading { margin-bottom: 1.25rem; }

/* Tool-selection cards (esim.html step cards) */
.r-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.r-tool-card {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--hairline, #E5E8EC); border-radius: var(--radius-sm, 8px);
  background: #fff; text-decoration: none; color: inherit;
}
.r-tool-card span { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--primary-light, #E8F4FD); color: var(--primary-dark, #005a8a); font-size: 0.78rem; font-weight: 700; }
.r-tool-card h2 { font-size:0.98rem !important; margin: 0 0 0.3rem; }
.r-tool-card p { margin: 0; font-size: 0.85rem; color: var(--ink-muted, #3A4A62); }
.r-hero-content { text-align: center; padding: 2.5rem 1.5rem; max-width: 700px; margin-inline: auto; }
.r-hero-media { border-radius: var(--radius-lg, 16px); overflow: hidden; }
.r-section-related, .r-section-compliance { margin: 2rem 0; }

/* Small remaining aliases */
.r-price { display: inline-block; margin-top: 0.3rem; color: var(--primary-dark, #005a8a); font-weight: 700; font-size: 0.82rem; }
.r-article-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 2rem; align-items: center; }
@media (max-width: 900px) { .r-article-hero-grid { grid-template-columns: 1fr; } }
.r-calculator-note { margin: 0; font-size: 0.78rem; color: rgba(255,255,255,0.65); }

/* ==========================================================================
   5. "ita-tool-section" HEADING CONTRAST BUG (round 4 fix)
   --------------------------------------------------------------------------
   Root cause, found from an actual screenshot rather than static analysis:
   css/ita-readability-widgets-v1.css contains a rule that assumes
   .ita-tool-section > .ita-tool-shell > .ita-section-heading sits on a dark
   background and force-applies near-white text color to its heading,
   eyebrow, and description paragraph:

     html body.ita-site .ita-tool-section > .ita-tool-shell
       > .ita-section-heading :is(h1, h2, h3, p, .ita-tool-eyebrow) {
       color: var(--ita-rw-on-dark) !important;   // #edf7f3 -- near white
     }

   But .ita-tool-section actually has a pale mint background
   (var(--ita-tool-mist): #eef7f5, from css/planning-workspace.css), not a
   dark one. Near-white text (#edf7f3) on a near-white background (#eef7f5)
   is essentially invisible -- this is the giant pale "ghost text" visible
   on tools/island-flight-search.html, guides/index.html, and 6 other pages
   that use this shared component (affiliate-disclosure.html, privacy.html,
   tools/island-disruption-help.html, tools/island-ticket-search.html,
   tools/island-transfer-search.html, tools/island-transport-search.html).

   This selector has real classes at every level (specificity 0,5,2), so
   the override below matches it exactly and wins on source order since
   this file loads last.
   ========================================================================== */
html body.ita-site
.ita-tool-section
> .ita-tool-shell
> .ita-section-heading
:is(h1, h2, h3, .ita-tool-eyebrow) {
  color: var(--ita-tool-ink, #17313a) !important;
  opacity: 1 !important;
}
html body.ita-site
.ita-tool-section
> .ita-tool-shell
> .ita-section-heading
p {
  color: var(--ita-tool-muted, #5a7078) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   9. PRIVACY CONSENT BANNER + MODAL
   --------------------------------------------------------------------------
   js/privacy-consent.js builds the cookie banner and the full "Choose
   optional technologies" settings modal entirely via JS-generated markup
   (.privacy-banner, .privacy-modal, .privacy-category, etc.) -- none of it
   has ever had a matching CSS rule anywhere in the site. It was rendering
   as unstyled, non-modal, in-page content (no overlay, no positioning, raw
   default checkboxes) on every single page, since this component is
   injected sitewide. This also matters beyond appearance: several widgets
   sitewide gate on privacyAllowed() requiring the "marketing"/"partner_tools"
   consent category, so a confusing consent UI can look like "the widget is
   broken" when it's actually just never being granted permission to load.
   ========================================================================== */

/* Bottom cookie banner */
.privacy-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: #fff;
  border-top: 1px solid var(--hairline, #E5E8EC);
  box-shadow: 0 -8px 32px rgba(10,31,68,0.12);
  padding: 1.25rem clamp(1rem, 4vw, 2rem);
}
.privacy-banner-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  width: min(1260px, 100%);
  margin-inline: auto;
}
.privacy-banner-inner > div:first-child { flex: 1 1 420px; }
.privacy-banner strong { display: block; margin-bottom: 0.35rem; color: var(--ink); }
.privacy-banner p { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--ink-muted, #3A4A62); line-height: 1.5; }
.privacy-banner-links a { color: var(--primary, #0077B6); }
.privacy-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex-shrink: 0;
}
.privacy-gpc-note {
  padding: 0.5rem 0.75rem;
  background: var(--surface-warm, #FDF8F0);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.82rem !important;
}

/* Settings modal */
.privacy-modal { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.privacy-modal[hidden] { display: none; }
.privacy-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 31, 68, 0.55);
}
.privacy-modal-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(85vh, 720px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(10,31,68,0.25));
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.privacy-modal-panel .eyebrow.dark {
  display: block; margin-bottom: 0.4rem;
  color: var(--primary, #0077B6);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.privacy-modal-panel h2 { margin: 0 0 0.75rem; font-size: 1.4rem; }
.privacy-modal-panel > p { color: var(--ink-muted, #3A4A62); font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.25rem; }
.privacy-modal-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--surface, #F7F8FA);
  color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.privacy-preference-form { display: flex; flex-direction: column; }
.privacy-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline, #E5E8EC);
  cursor: pointer;
}
.privacy-category:first-of-type { border-top: none; }
.privacy-category span { flex: 1; }
.privacy-category strong { display: block; margin-bottom: 0.2rem; color: var(--ink); font-size: 0.95rem; }
.privacy-category small { color: var(--ink-muted, #3A4A62); font-size: 0.84rem; line-height: 1.45; }
.privacy-category input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--primary, #0077B6);
}
.privacy-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline, #E5E8EC);
}
.privacy-modal-links { margin-top: 1.25rem; font-size: 0.82rem; color: var(--ink-soft, #8B97A8); }
.privacy-modal-links a { color: var(--primary, #0077B6); }
.privacy-button-link { background: none; border: none; color: var(--primary, #0077B6); text-decoration: underline; padding: 0.7rem 0.5rem; }

/* ==========================================================================
   11. rf-flight-hero AND ita-dock-panel MIS-TARGETED BY THE BLANKET
   DARK-SURFACE RULE (css/affiliate-contrast-images.css)
   --------------------------------------------------------------------------
   That file has a ~30-class :where() list that force-applies near-white
   text (#f2f8f9 body, #ffffff headings, #c6fff7 links) to everything it
   assumes is a dark surface. Checked every class in that list against its
   actual background: all but two are genuinely dark and correct. The two
   wrong entries:
     - .rf-flight-hero (css/flight-planning.css) has a LIGHT gradient
       background (mint -> white -> cream), not dark.
     - .ita-dock-panel (the "Build this route" popup, JS-generated by
       planning-workspace.js) has a plain white background with its own
       correctly-designed dark ink / teal link colors -- which the blanket
       rule's `a:not(...)` selector still beats on specificity despite
       :where() itself contributing zero, because each :not() argument adds
       the specificity of a class selector.
   Overriding both back to their correct, already-designed colors here,
   with real class selectors (not :where()) so this can't lose the same way.
   ========================================================================== */
.rf-flight-hero.rf-flight-hero, .rf-flight-hero.rf-flight-hero p { color: var(--ink, #0A1F44) !important; }
.rf-flight-hero.rf-flight-hero h1 { color: var(--ink, #0A1F44) !important; }
.rf-flight-hero.rf-flight-hero .breadcrumbs a, .rf-flight-hero.rf-flight-hero a:not(.button):not([class*="button"]):not([hidden]) {
  color: var(--primary, #0077B6) !important;
  text-decoration-color: currentColor !important;
}
.rf-flight-hero.rf-flight-hero .breadcrumbs span { color: var(--ink-soft, #8B97A8) !important; }

.ita-dock-panel { color: var(--ita-tool-ink, #17313a) !important; }
.ita-dock-panel h2 { color: var(--ita-tool-ink, #17313a) !important; }
.ita-dock-panel > p { color: var(--ita-tool-muted, #5a7078) !important; }
.ita-dock-panel.ita-dock-panel a.ita-dock-link:not(.is-current):not([hidden]) { color: var(--ita-tool-ocean, #0f6e63) !important; text-decoration-color: currentColor !important; }
.ita-dock-panel.ita-dock-panel a.ita-dock-link.is-current:not([hidden]) { color: #ffffff !important; }