/* =====================================================================
   refresh.css — "Neat" look & feel layer (Tailwind-style restraint)
   Loaded AFTER styles.css so it wins on equal specificity.
   Principles: neutral slate palette, generous whitespace, 1px borders +
   soft shadows, consistent radii, crisp Inter type, accent used sparingly.
   Preserves all existing class names / JS hooks. Fully reversible.
   ===================================================================== */

:root {
  /* Neutral slate scale (Tailwind-ish) */
  --rf-ink: #0f172a;         /* slate-900 — headings */
  --rf-body: #334155;        /* slate-700 — body text */
  --rf-muted: #64748b;       /* slate-500 — secondary */
  --rf-line: #e2e8f0;        /* slate-200 — borders */
  --rf-line-2: #f1f5f9;      /* slate-100 */
  --rf-surface: #ffffff;
  --rf-bg: #f8fafc;          /* slate-50 — page */

  /* Accent, used sparingly */
  --rf-accent: #ff6a00;
  --rf-accent-ink: #e65100;
  --rf-accent-soft: #fff4ec;
  --rf-accent-border: #ffd7bf;

  /* Radii */
  --rf-r-lg: 16px;
  --rf-r-md: 12px;
  --rf-r-sm: 10px;

  /* Soft, layered shadows (subtle) */
  --rf-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
  --rf-shadow: 0 1px 3px rgba(15, 23, 42, .05), 0 6px 16px -6px rgba(15, 23, 42, .12);
  --rf-ring: 0 0 0 3px rgba(255, 106, 0, .22);
}

/* ------------------------------------------------------------------ *
 * Foundations & typography
 * ------------------------------------------------------------------ */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--rf-body);
  background-color: var(--rf-bg);
  line-height: 1.6;
}

h1, h2, h3, h4,
.section-title, .hero-title,
.feature-card h3, .step h3, .badge-title {
  font-family: "Inter", "Poppins", sans-serif;
  color: var(--rf-ink);
  letter-spacing: -0.02em;
  font-weight: 700;
}

p { color: var(--rf-body); }

/* Never let a long word clip on narrow screens */
h1, h2, h3, h4, p, a, span,
.hero-title, .section-title, .hero-subtitle {
  overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
.container { width: 100%; min-width: 0; }
.hero .container, .header .container { min-width: 0; }

/* ------------------------------------------------------------------ *
 * Buttons — crisp, consistent, tappable (>=46px)
 * ------------------------------------------------------------------ */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: .75rem 1.35rem;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: .975rem;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: background .16s ease, color .16s ease, border-color .16s ease,
    box-shadow .16s ease, transform .16s ease;
}

.cta-button.primary {
  background: var(--rf-accent);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--rf-shadow-sm);
}
.cta-button.primary:hover {
  background: var(--rf-accent-ink);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--rf-shadow);
}

.cta-button.secondary {
  background: #fff;
  color: var(--rf-ink);
  border: 1px solid var(--rf-line);
  box-shadow: var(--rf-shadow-sm);
}
.cta-button.secondary:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: var(--rf-shadow);
}
.cta-button:active { transform: translateY(0); }

/* Hero CTAs sit on the orange hero */
.hero-buttons .cta-button.primary {
  background: #fff;
  color: var(--rf-accent-ink);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4);
}
.hero-buttons .cta-button.primary:hover { background: #fff7f2; color: var(--rf-accent-ink); }
.hero-buttons .cta-button.secondary {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
}
.hero-buttons .cta-button.secondary:hover { background: rgba(255, 255, 255, .2); }

.feature-cta {
  font-weight: 600;
  border-radius: 999px;
  transition: background .16s ease, transform .16s ease;
}

/* ------------------------------------------------------------------ *
 * Hero — premium: layered depth gradient, fine texture, spotlight glow
 * ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding: clamp(4.5rem, 12vw, 6.5rem) 0 clamp(3rem, 7vw, 4.5rem);
  background:
    radial-gradient(72% 90% at 84% 6%, rgba(255, 216, 168, .55) 0%, rgba(255, 216, 168, 0) 55%),
    radial-gradient(66% 85% at 4% 106%, rgba(184, 44, 4, .5) 0%, rgba(184, 44, 4, 0) 55%),
    linear-gradient(150deg, #ff9a4d 0%, #ff6a00 47%, #ec4a08 100%);
}

/* fine dotted texture, radially masked so it fades toward the edges */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 1;
  background: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(130% 108% at 50% -8%, #000 32%, transparent 78%);
  mask-image: radial-gradient(130% 108% at 50% -8%, #000 32%, transparent 78%);
  animation: none;
}

/* soft white spotlight behind the phone mockup for depth */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 46%;
  right: -4%;
  left: auto;
  bottom: auto;
  width: min(620px, 60%);
  height: min(620px, 60%);
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 62%);
  opacity: 1;
  animation: none;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
  gap: clamp(2rem, 6vw, 3rem);
}

.hero-title { text-shadow: 0 2px 30px rgba(120, 28, 0, .28); }

/* ---- Realistic iPhone (iOS) mockup ---- */
.phone-mockup {
  box-sizing: border-box;
  border: 2px solid #45454c;                 /* titanium rail */
  border-radius: 52px;
  background: linear-gradient(145deg, #27272b 0%, #0c0c0e 46%, #1f1f23 100%);
  overflow: hidden;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .18),  /* top rail sheen */
    inset 0 -2px 4px rgba(0, 0, 0, .55),       /* bottom rail shade */
    0 40px 70px -24px rgba(20, 6, 0, .6),      /* warm ground shadow */
    0 14px 30px -14px rgba(0, 0, 0, .45);
}

/* Screen: thin, even bezel all around */
.phone-mockup .phone-screen {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 0;
  background: #000;
  border-radius: 42px;
  overflow: hidden;
  box-shadow: none;
}

/* Glass sheen across the display */
.phone-mockup .phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}

.phone-mockup .app-interface {
  border-radius: 42px;
  /* realistic iOS safe-area feel: clears the island up top + home indicator
     at the bottom, with comfortable side gutters so content never touches
     the screen edge. */
  padding: 46px 20px 26px;
  box-shadow: none;
}

/* Dynamic Island — floating black pill with a subtle lens dot */
.phone-mockup::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  max-width: 108px;
  min-width: 88px;
  height: 27px;
  background:
    radial-gradient(circle 2.6px at 76% 50%, #24405c 0%, #24405c 58%, transparent 62%),
    #000;
  border-radius: 16px;
  box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, .05);
  z-index: 6;
}

/* Home indicator */
.phone-mockup::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  max-width: 120px;
  height: 5px;
  background: rgba(0, 0, 0, .82);
  border-radius: 3px;
  z-index: 6;
}

/* Mobile: centre the spotlight behind the stacked phone */
@media (max-width: 900px) {
  .hero::after {
    top: auto;
    bottom: 2%;
    right: auto;
    left: 50%;
    width: min(520px, 90%);
    height: min(520px, 90%);
    transform: translateX(-50%);
    opacity: .8;
  }
}

/* ------------------------------------------------------------------ *
 * Hero eyebrow + trust chips + overlapping stats strip
 * (shared by the home page and /index2)
 * ------------------------------------------------------------------ */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: .4rem .9rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin-top: 1.4rem;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .97);
  font-size: .82rem;
  font-weight: 500;
}
.hero-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22);
}

.hero-stats {
  position: relative;
  z-index: 3;
  padding: 0 20px;
  background: var(--rf-surface, #fff);   /* full-width white plate, no grey gutters */
}
.hero-stats-inner {
  position: relative;
  top: -2.75rem;                 /* card pokes up over the hero (no margin collapse) */
  margin: 0 auto -1.5rem;        /* close the gap to the next section */
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 18px;
  background: var(--rf-surface, #fff);
  border: 1px solid var(--rf-line, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 20px 44px -22px rgba(15, 23, 42, .32), 0 1px 3px rgba(15, 23, 42, .06);
}
.hero-stats .stat-item {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 10px 6px;
  text-align: center;
}
.hero-stats .stat-number { font-size: clamp(1.35rem, 3.4vw, 1.7rem); }
.hero-stats .stat-label { font-size: .82rem; }
@media (max-width: 700px) {
  .hero-stats-inner { grid-template-columns: repeat(2, 1fr); }
}

.hero-title {
  color: #fff;
  font-size: clamp(2rem, 7vw, 3.35rem);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.hero-subtitle {
  font-size: clamp(1rem, 3.4vw, 1.14rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .94);
  opacity: 1;
}
.hero-buttons { gap: .75rem; margin-top: 1.75rem; }

.hero-search { width: 100%; max-width: 640px; margin-inline: auto; }
.search-container {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: #fff;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
}
.search-input { min-height: 52px; font-size: 1rem; color: var(--rf-ink); }
.search-button { background: var(--rf-accent); color: #fff; border-radius: 999px; min-width: 46px; min-height: 46px; }
.search-button:hover { background: var(--rf-accent-ink); }

/* ------------------------------------------------------------------ *
 * Section rhythm + titles (restrained)
 * ------------------------------------------------------------------ */
.features, .destinations, .how-it-works,
.testimonials, .trust, .faq, .affiliate {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.section-title {
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--rf-ink);
}
.section-subtitle {
  font-size: clamp(.98rem, 3vw, 1.1rem);
  color: var(--rf-muted);
}
/* thin, quiet accent under centered titles */
.features .section-title,
.destinations .section-title,
.how-it-works .section-title {
  position: relative;
  padding-bottom: .8rem;
}
.features .section-title::after,
.destinations .section-title::after,
.how-it-works .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: var(--rf-accent);
}

/* neutralize loud tinted section backgrounds for a cleaner canvas */
.destinations { background: var(--rf-bg); }
.features { background: var(--rf-surface); }

/* ------------------------------------------------------------------ *
 * Cards — the core of the "neat" look: 1px border + soft shadow
 * ------------------------------------------------------------------ */
.feature-card {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-lg);
  box-shadow: var(--rf-shadow-sm);
  padding: 1.75rem 1.5rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rf-shadow);
  border-color: #cbd5e1;
}
.feature-card .feature-icon,
.feature-card .feature-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 1.5rem;
  border-radius: 14px;
  background: var(--rf-accent-soft);
  border: 1px solid var(--rf-accent-border);
  margin-inline: auto;
}
.feature-card h3 { font-size: 1.12rem; margin-top: 1rem; font-weight: 700; }
.feature-card p { color: var(--rf-muted); font-size: .95rem; }

.features-video video {
  width: 100%;
  border-radius: var(--rf-r-lg);
  border: 1px solid var(--rf-line);
  box-shadow: var(--rf-shadow-sm);
  background: var(--rf-line-2);
}

/* ------------------------------------------------------------------ *
 * Destinations
 * ------------------------------------------------------------------ */
.home-currency-converter {
  border-radius: var(--rf-r-lg);
  border: 1px solid var(--rf-line);
  box-shadow: var(--rf-shadow-sm);
  background: var(--rf-surface);
}
.home-currency-option-btn {
  min-height: 38px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--rf-line);
  background: #fff;
  color: var(--rf-body);
}
.home-currency-option-btn.is-active {
  background: var(--rf-accent);
  color: #fff;
  border-color: transparent;
}

.destinations-search-input {
  min-height: 52px;
  border-radius: 999px;
  border: 1px solid var(--rf-line);
  color: var(--rf-ink);
}
.destinations-search-button { border-radius: 999px; background: var(--rf-accent); color: #fff; }
.destinations-search-button:hover { background: var(--rf-accent-ink); }

#destinations-grid .destination-card,
.destinations-grid .destination-card {
  border-radius: var(--rf-r-lg) !important;
  border: 1px solid var(--rf-line) !important;
  box-shadow: var(--rf-shadow-sm) !important;
  background: #fff !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#destinations-grid .destination-card:hover,
.destinations-grid .destination-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rf-shadow) !important;
  border-color: #cbd5e1 !important;
}

/* ------------------------------------------------------------------ *
 * How it works — steps
 * ------------------------------------------------------------------ */
.step {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-lg);
  box-shadow: var(--rf-shadow-sm);
  padding: 1.6rem 1.4rem;
}
.step-icon {
  width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  border-radius: 14px;
  background: var(--rf-accent-soft);
  border: 1px solid var(--rf-accent-border);
}

/* ------------------------------------------------------------------ *
 * Trust stats + badges
 * ------------------------------------------------------------------ */
.stat-item {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-lg);
  box-shadow: var(--rf-shadow-sm);
  padding: 1.4rem 1.1rem;
}
.stat-number {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: var(--rf-accent);
  -webkit-text-fill-color: initial;
}
.stat-label { color: var(--rf-muted); }
.badge {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-lg);
  box-shadow: var(--rf-shadow-sm);
}
.badge-title { color: var(--rf-ink); }
.badge-description { color: var(--rf-muted); }

/* ------------------------------------------------------------------ *
 * FAQ accordion
 * ------------------------------------------------------------------ */
.accordion details {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-md);
  box-shadow: var(--rf-shadow-sm);
  margin-bottom: .7rem;
  overflow: hidden;
}
.accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--rf-ink);
  padding: 1.05rem 1.15rem;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion details[open] { border-color: var(--rf-accent-border); }
.accordion details p { padding: 0 1.15rem 1.15rem; color: var(--rf-muted); }

/* ------------------------------------------------------------------ *
 * Destinations mega menu — deterministic click-to-open (desktop)
 * The original hover trigger was flaky (menu only appeared once the
 * pointer/focus left the link). We disable hover-open and drive the
 * menu solely via the .mega-open class toggled on click.
 * ------------------------------------------------------------------ */
@media (min-width: 769px) {
  /* Closed by default AND hover must never open it. We target `.mega-menu`
     (the element styles.css actually animates) and neutralise every hover
     rule so moving the pointer over the trigger/menu can't flip opacity —
     that flip against `transition: all .3s` was the source of the blinking. */
  .nav-item-with-mega .mega-menu,
  .nav-item-with-mega:hover .mega-menu,
  .nav-item-with-mega:hover .mega-menu:not(.mega-menu-active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* Open ONLY when explicitly toggled via click. !important makes the open
     state authoritative even while the cursor is still on the trigger, so the
     menu appears immediately (not only after the cursor leaves). */
  .nav-item-with-mega.mega-open .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* Drop the invisible hover "bridge" — it only mattered for hover-open. */
  .nav-item-with-mega:hover::after { display: none; }
}
.nav-item-with-mega.mega-open .dropdown-chevron { transform: rotate(180deg); }
.dropdown-chevron { transition: transform .2s ease; }

/* ------------------------------------------------------------------ *
 * Header — cleaner bar, calmer nav, single primary CTA (desktop)
 * ------------------------------------------------------------------ */
@media (min-width: 769px) {
  .header {
    background: #fff;
    border-bottom: 1px solid var(--rf-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }
  /* calmer nav links: text with subtle hover, quiet active pill */
  .nav a,
  .nav-link {
    background: transparent;
    border: 1px solid transparent;
    color: var(--rf-body);
    border-radius: 10px;
    font-weight: 600;
  }
  .nav a::before,
  .nav-link::before { display: none; }
  .nav a:hover,
  .nav-link:hover {
    background: var(--rf-line-2);
    color: var(--rf-ink);
  }
  .nav-link.active {
    background: var(--rf-accent-soft);
    border-color: var(--rf-accent-border);
    color: var(--rf-accent-ink);
    box-shadow: none;
  }
  /* tidier header CTAs */
  .header-right .header-cta {
    min-height: 40px;
    padding: .5rem 1.05rem;
    font-size: .9rem;
  }
  /* reduce orange overload — utility buttons become clean outlines,
     leaving Affiliate Programme as the single primary CTA */
  .header-right a.header-cta[href*="manage-esim"],
  .header-right a.header-cta[href*="checkout"] {
    background: #fff;
    color: var(--rf-ink);
    border: 1px solid var(--rf-line);
    box-shadow: var(--rf-shadow-sm);
  }
  .header-right a.header-cta[href*="manage-esim"]:hover,
  .header-right a.header-cta[href*="checkout"]:hover {
    border-color: #cbd5e1;
    color: var(--rf-ink);
    background: #fff;
  }
  /* search toggle as a neat outlined icon button */
  .header-search-icon {
    border: 1px solid var(--rf-line);
    background: #fff;
    color: var(--rf-body);
  }
  .header-search-icon:hover {
    background: var(--rf-line-2);
    color: var(--rf-ink);
  }
}

/* ------------------------------------------------------------------ *
 * Header — keep everything on one row on mobile
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem 1rem;
    flex-wrap: nowrap;
  }
  .header-left { flex: 0 1 auto; min-width: 0; }
  .header-left img { width: auto; height: 34px; }
  .header-right { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
  .header-search-wrapper { flex: 0 0 auto; }
}

/* ------------------------------------------------------------------ *
 * Responsive layout upgrades (mobile-first → up)
 * ------------------------------------------------------------------ */
@media (min-width: 600px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 900px) {
  .hero .container { flex-direction: row; align-items: center; text-align: left; }
  .hero-content { flex: 1 1 52%; }
  .hero-image { flex: 1 1 48%; }
  .hero-subtitle { margin-left: 0; }
  .hero-search { margin-left: 0; }
}

/* ------------------------------------------------------------------ *
 * Inner-page hero system (mobile-first) — country, checkout, affiliate,
 * faq, help, terms, privacy, region, install, destinations, etc.
 * Replaces: fixed 400px height, `background-attachment: fixed` (janky on
 * mobile), the muddy dark overlay, and the stretched image.jpg background —
 * with one clean, textured orange gradient that scales fluidly.
 * ------------------------------------------------------------------ */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: clamp(2.75rem, 8vw, 4.75rem) 20px clamp(3rem, 8vw, 4.25rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
  background:
    radial-gradient(120% 130% at 88% -20%, rgba(255, 208, 156, .5) 0%, rgba(255, 208, 156, 0) 46%),
    radial-gradient(100% 120% at 0% 120%, rgba(203, 55, 8, .42) 0%, rgba(203, 55, 8, 0) 52%),
    linear-gradient(135deg, #ff9248 0%, #ff6a00 52%, #ef4e0b 100%);
}

/* Replace the dark overlay with a subtle dotted texture that fades out.
   !important defeats page-level inline <style> overlays (e.g. country). */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1.4px) !important;
  background-size: 22px 22px !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), transparent 72%);
  opacity: .55;
}

/* Neutralise the translucent "content box" some pages draw (country page). */
.page-hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 4px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ==========================================================================
   Cursor visibility fix (global)
   In Chromium/Windows the hardware cursor can vanish while hovering over
   GPU-composited areas (elements using backdrop-filter / blur), making it
   unclear which button is under the pointer — notably inside dialogs.
   Forcing an explicit cursor on interactive elements keeps it rendered.
   ========================================================================== */
html,
body {
  cursor: auto;
}

a[href], button, label, select, summary,
[role="button"], [onclick], [data-plan-action], [data-remove-id],
[data-step], [data-sstep],
.cta-button, .btn, .btn-back, .filter-btn, .plan-tab, .plan-tab-panel,
.ud-btn, .ud-step, .ud-details-link, .pd-chip, .pd-card, .plan-card,
.standard-select-card, .daily-tier-card, .pd-region-card, .pd-feat-card,
.header-currency-icon, .header-currency-option, .header-search-icon,
.swal2-confirm, .swal2-cancel, .swal2-deny, .swal2-close, .swal2-styled {
  cursor: pointer !important;
}

input[type="text"], input[type="email"], input[type="number"], input[type="tel"],
input[type="search"], input[type="password"], input[type="url"], input:not([type]),
textarea, .swal2-input {
  cursor: text !important;
}

input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"] {
  cursor: pointer !important;
}

button[disabled], .cta-button:disabled, .ud-btn:disabled, .swal2-styled:disabled {
  cursor: not-allowed !important;
}

/* Backdrop-filter elements are the usual trigger — pin an explicit cursor so
   Chromium keeps drawing it over the header and any dialog surface. */
.header,
.swal2-container,
.swal2-popup {
  cursor: auto;
}

/* ROOT CAUSE FIX: a sticky element with backdrop-filter makes Chromium drop the
   hardware cursor across the whole page (it only reappears on click). It's a
   decorative blur only — disabling it site-wide keeps every background intact
   and permanently restores the cursor. */
*,
*::before,
*::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.page-hero .hero-title {
  font-family: "Inter", "Poppins", sans-serif;
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 .6rem;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(120, 30, 0, .25);
}

.page-hero .hero-subtitle {
  font-size: clamp(.98rem, 3vw, 1.16rem);
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255, 255, 255, .95);
  max-width: 620px;
  margin: 0 auto;
  text-shadow: none;
}

/* Kill the fixed-attachment jank everywhere (kept for older mobile too) */
@media (max-width: 768px) {
  .page-hero {
    background-attachment: scroll;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ------------------------------------------------------------------ *
 * Page loader — premium redesign (CSS-only, scoped to .page-loader so
 * inline "Loading…" spinners elsewhere are unaffected). Built entirely
 * from the .loader-spinner element + pseudo-elements, so it renders the
 * same whether or not the markup includes .spinner-ring children.
 * ------------------------------------------------------------------ */
.page-loader {
  background:
    radial-gradient(80% 95% at 82% 6%, rgba(255, 216, 168, .5) 0%, rgba(255, 216, 168, 0) 55%),
    radial-gradient(70% 90% at 4% 104%, rgba(184, 44, 4, .42) 0%, rgba(184, 44, 4, 0) 55%),
    linear-gradient(150deg, #ff9a4d 0%, #ff6a00 47%, #ec4a08 100%);
}

/* the arc-sweep ring */
.page-loader .loader-spinner {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
}
.page-loader .loader-spinner .spinner-ring { display: none; }  /* retire old rings */

.page-loader .loader-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, .12) 130deg,
      rgba(255, 255, 255, .85) 300deg,
      #ffffff 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: rf-loader-spin .9s linear infinite;
}

/* soft pulsing core */
.page-loader .loader-spinner::after {
  content: "";
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .16), 0 0 18px rgba(255, 255, 255, .5);
  animation: rf-loader-pulse 1.2s ease-in-out infinite;
}

.page-loader .loader-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .95);
  animation: rf-loader-textpulse 1.6s ease-in-out infinite;
}

.page-loader .loader-logo-img {
  filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(120, 30, 0, .3));
}

@keyframes rf-loader-spin { to { transform: rotate(360deg); } }
@keyframes rf-loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.68); opacity: .6; }
}
@keyframes rf-loader-textpulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

/* ------------------------------------------------------------------ *
 * Lightweight type scale — the site over-used bold everywhere. This
 * normalises weight one step lighter for a calmer, more premium feel:
 * display 700 (was 800) · headings 600 (was 700) · labels 500 (was
 * 600/700) · body 400. Placed last so it wins by source order.
 * ------------------------------------------------------------------ */

/* Display / page + section titles */
h1,
.hero-title,
.page-hero .hero-title,
.plans-hero .hero-title,
.section-title {
  font-weight: 700;
}

/* Sub-headings, card titles, numbers that still need presence */
h2, h3, h4, h5, h6,
.feature-card h3, .step h3, .badge-title,
.plan-name, .country-name, #country-title, #region-title,
.mega-menu-column h4, .footer-column h4, .footer h4,
.stat-number, .price, .plan-price-amount, .order-summary h2, .order-summary h3 {
  font-weight: 600;
}

/* Body copy and supporting text — regular */
p, li,
.hero-subtitle, .section-subtitle,
.feature-card p, .badge-description, .stat-label,
.country-code, .country-summary, .plan-region, .caption-text {
  font-weight: 400;
}

/* Interactive elements + small labels — medium, not bold */
.nav a, .nav-link,
.cta-button, .header-cta, .btn, .btn-back,
.filter-btn, .plan-detail-label, .plan-detail-value,
.platform-badge, .network-badge, .plans-chip, .plans-eyebrow,
.mega-menu-link, .region-link, .country-next,
.home-currency-option-btn, .search-button, .destinations-search-button {
  font-weight: 500;
}

/* Accessible focus states */
a:focus-visible, button:focus-visible, input:focus-visible, .cta-button:focus-visible {
  outline: none;
  box-shadow: var(--rf-ring);
}