/* ==========================================================================
   polish.css — final presentation layer.

   Loaded LAST (after styles.css → refresh.css → v2.css → mobile-tighten.css)
   so it wins the cascade without editing the four existing sheets. Styling
   only: no markup, copy, JS hooks or behaviour change. Selectors are written
   at ≥ (0,2,0) specificity on purpose, because styles.css scopes several
   homepage rules as `.hero .hero-content { … }` and a bare `.hero-content`
   override would silently lose to them.

   Rollback: `git checkout pre-web-ui-refresh -- public app` (tag d61b27a),
   or delete this file and its <link>.
   ========================================================================== */

:root {
  --pl-ink: #0f172a;
  --pl-body: #3f4b5e;
  --pl-muted: #64748b;
  --pl-line: #e6eaf0;
  --pl-brand: #ff6a00;
  --pl-brand-ink: #e35600;
  --pl-brand-soft: #fff4ec;
  --pl-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   HERO — layout fix + rhythm.

   Bug being fixed: styles.css (≈l.5118) sets `.hero .hero-content { flex: 1 }`
   — a 0-basis item — while `.hero-image` keeps a 47% basis. Free space then
   splits evenly and the text column collapses to ~288px on a 1440px screen:
   the headline wraps to five lines, the two CTAs stack vertically and the
   search box shrinks to 280px. Give the text column a real basis and let the
   phone column yield.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero .container {
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .hero .hero-content {
    flex: 1 1 56%;
    max-width: 640px;
    min-width: 0;
    padding: 0;
  }
  .hero .hero-image {
    flex: 0 1 44%;
    min-width: 0;
  }
  /* Less hollow above the fold: trim the top padding and the phone height a
     touch. The bottom keeps room for the reviews card that overlaps upward. */
  .hero {
    padding-top: clamp(4rem, 2.5rem + 4vw, 5.5rem);
    padding-bottom: clamp(4.75rem, 3rem + 4vw, 6rem);
  }
  .hero .phone-mockup {
    width: 300px;
    height: 600px;
  }
}

.hero .hero-title {
  font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  font-weight: 800;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(120, 28, 0, .12);
}
.hero .hero-subtitle {
  font-size: clamp(1rem, .9rem + .4vw, 1.125rem);
  line-height: 1.65;
  max-width: 33rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: none;
}

/* CTAs side by side on anything wider than a phone. */
.hero .hero-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.hero .hero-buttons .cta-button {
  width: auto;
  min-height: 50px;
  padding: .85rem 1.6rem;
  font-weight: 700;
  letter-spacing: -.005em;
}
.hero .hero-buttons .cta-button.primary {
  box-shadow: 0 10px 24px -10px rgba(40, 8, 0, .45);
}
.hero .hero-buttons .cta-button.secondary {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .6);
  color: #fff;
  box-shadow: none;
}
.hero .hero-buttons .cta-button.secondary:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
}

/* Search: match the CTA width rhythm, not wider than the text column. */
.hero .hero-search {
  max-width: 520px;
}
.hero .search-container {
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 16px 40px -18px rgba(40, 8, 0, .5);
}
.hero .search-input::placeholder {
  color: #94a3b8;
}

/* Eyebrow chip: slightly crisper. */
.hero .hero-eyebrow {
  letter-spacing: .12em;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   HEADER — calmer active nav: keep the soft tint, drop the outlined-pill
   look and any legacy underline pseudo-element so nothing double-marks it.
   -------------------------------------------------------------------------- */
.header .nav-link.active {
  background: var(--pl-brand-soft);
  border-color: transparent;
  color: var(--pl-brand-ink);
  box-shadow: none;
}
.header .nav-link.active::before {
  display: none;
}

/* --------------------------------------------------------------------------
   SECTION TYPOGRAPHY — tighter display tracking reads more like a product
   site than a template.
   -------------------------------------------------------------------------- */
.section-title {
  letter-spacing: -.024em;
}
.section-subtitle {
  color: var(--pl-muted);
}

/* --------------------------------------------------------------------------
   POPULAR DESTINATIONS — rows are links injected by app.js as
   `a.destination-card`. styles.css gives them a lift+scale hover and a
   sweeping ::before "shine"; both read as template effects. Calm it to a
   tint + hairline, no movement.
   -------------------------------------------------------------------------- */
.destinations .destination-card {
  transition: background-color .18s var(--pl-ease), border-color .18s var(--pl-ease);
}
.destinations .destination-card:hover {
  transform: none;
  box-shadow: none;
  background: var(--pl-brand-soft);
  border-color: var(--pl-line);
}
.destinations .destination-card::before {
  display: none;
}

/* --------------------------------------------------------------------------
   AFFILIATE — dark band. Cards are injected by app.js as `.benefit-card`.
   styles.css hovers them with a 12px lift, a 2% scale, a white glow and a
   360° icon spin; the icon tile is a saturated orange gradient block.
   Professional read: hairline glass cards, a 2px lift at most, no spin.
   -------------------------------------------------------------------------- */
.affiliate .benefit-card {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: none;
  transition: background-color .2s var(--pl-ease), border-color .2s var(--pl-ease), transform .2s var(--pl-ease);
}
.affiliate .benefit-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .6);
}
.affiliate .benefit-card::before,
.affiliate .benefit-card .benefit-shine {
  display: none;
}
.affiliate .benefit-card:hover .benefit-icon-wrapper {
  transform: none;
  box-shadow: none;
}
.affiliate .benefit-card .benefit-icon-wrapper {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: none;
}
.affiliate .benefit-card .benefit-icon {
  filter: none;
}
.affiliate .affiliate-cta {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
}

/* ==========================================================================
   COMPACT SECTION RHYTHM — mobile-first.

   Measured on a real 360×800 viewport before this block: ~100px between the
   phone mockup and the CTAs, ~220px between the promo card and the
   compatibility card, ~100px from a section title to its first content,
   and ~95px per destination row. Each section had been padded for desktop
   and then only mildly reduced for phones. One scale below, driven by
   clamp() so it grows with the viewport instead of jumping at breakpoints.

   `html body .x` = (0,1,2): outranks the (0,1,0) section rules in refresh/
   v2 and the mobile media-query rules in styles.css without !important.
   ========================================================================== */
:root {
  --pl-sec: clamp(2rem, 1.25rem + 3vw, 3.5rem);       /* 32px phone → 56px desktop */
  --pl-gap: clamp(1rem, .75rem + 1vw, 1.5rem);        /* 16px → 24px */
  --pl-title-gap: clamp(.75rem, .5rem + 1vw, 1.25rem);/* 12px → 20px */
}

html body .destinations,
html body .features,
html body .how-it-works,
html body .trust,
html body .faq,
html body .affiliate {
  padding-block: var(--pl-sec);
}
/* The compatibility card sits between the reviews row and Destinations;
   its section only needs a hairline of air above and none below. */
html body .esim-check { padding-block: .5rem 0; }
html body .esim-check + .destinations { padding-top: var(--pl-sec); }
html body .v-photo-band { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
html body .footer { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* Titles keep the accent bar; content pulls up underneath it. */
html body .section-title { margin-bottom: var(--pl-title-gap); }
html body .section-subtitle { margin-bottom: var(--pl-gap); }
html body .destinations-search { margin-bottom: var(--pl-gap); }
html body .destinations-more { margin-top: var(--pl-gap); }
html body .features-layout,
html body .hiw-layout { gap: clamp(1.5rem, 1rem + 3vw, 3rem); }
html body #affiliate-benefits { margin-bottom: var(--pl-gap); }
html body .affiliate-header { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }

/* The reviews/promo row pokes 2.75rem up into the hero; it doesn't need
   its own bottom margin as well — the next section's padding handles it. */
html body .hero-stats-row { margin-bottom: 0; }

/* Hero on phones: eyebrow → title → copy → search → phone → CTAs should
   read as one column, not five islands. Bottom padding stays ≥ 3.5rem so
   the reviews card (offset −2.75rem) never lands on the CTAs. */
@media (max-width: 899px) {
  html body .hero {
    padding-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 4.5rem);
  }
  html body .hero .container { gap: 1.25rem; }
  html body .hero .hero-content { gap: .9rem; }
  html body .hero .hero-image { margin: 0; }
  html body .hero .hero-buttons { margin-top: 0; gap: .6rem; }
  html body .hero .hero-buttons .cta-button { min-height: 48px; padding: .75rem 1.4rem; }
  /* styles.css flattens .hero-content on phones (display: contents), so
     .hero-search's own top margin stacks on the column gap — drop it. */
  html body .hero .hero-search { margin-top: 0; }

  /* Feature list + steps: the items carry base-layer card padding that v2
     made invisible (borderless) but never removed, so they float apart. */
  html body .features-list { gap: 1.25rem; }
  html body .feature-item { padding: 0; }
  html body .how-it-works .steps { gap: 1.25rem; }
}

/* Destination rows: v2 already pads the <a> at .85rem; the extra height
   comes from the inner blocks' base-layer padding. Same (1,1,0)+!important
   as v2 so this wins by source order. */
#destinations-grid .destination-card { padding: .65rem .5rem !important; }
#destinations-grid .destination-content { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
#destinations-grid .destination-info { padding: 0 !important; margin: 0 !important; }
#destinations-grid .destination-flag { margin: 0 !important; }

/* Compatibility card on phones */
@media (max-width: 767px) {
  html body .esim-check-card { padding: 20px 18px; gap: 14px; }
  html body .esim-check-main { gap: 12px; }
}

/* ==========================================================================
   INNER PAGES — shared (layout/app.php + layout.php now load this file).
   ========================================================================== */

/* Page hero: the photo hero was ~400px tall on a phone for one heading and a
   sub-line. A banner, not a billboard. */
html body .page-hero {
  min-height: 0;
  padding-top: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  padding-bottom: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
}
html body .page-hero .hero-title {
  letter-spacing: -.028em;
  line-height: 1.08;
  margin-bottom: .5rem;
}
html body .page-hero .hero-subtitle { line-height: 1.55; }

/* Breadcrumb: a quiet line, not a link bar. */
html body .breadcrumb {
  margin-bottom: .875rem;
  font-size: .85rem;
  gap: .5rem;
}
html body .breadcrumb a { color: var(--pl-muted); font-weight: 500; }
html body .breadcrumb a:hover { color: var(--pl-brand-ink); text-decoration: none; }
html body .breadcrumb span { color: #b6c0cd; }

/* ==========================================================================
   COUNTRY PAGE (country.php) — the purchase flow.
   Rules are (0,2,0)+ to outrank the page's own inline <style>.
   ========================================================================== */
/* Side gutter stays on the section: below 768px styles.css strips
   .container's horizontal padding with !important. */
html body .country-plans-section { padding: 1.25rem 16px 2.25rem; }
@media (min-width: 900px) {
  html body .country-plans-section { padding: 1.75rem 20px 3.5rem; }
}

/* Toolbar card: flag · name · region. The country-switcher input inside it
   simply repeats the country name, so it reads as a second, redundant box;
   it stays (functional) but drops to a quiet field. */
html body .plans-toolbar {
  padding: 14px 16px;
  margin-bottom: 1rem;
  border-color: var(--pl-line);
  box-shadow: none;
  gap: 12px 16px;
}
html body .ptb-name { font-size: 1.15rem; letter-spacing: -.02em; }
html body .ptb-sub { font-size: .8rem; }
html body .ptb-flag { box-shadow: none; border: 1px solid var(--pl-line); }
html body .plans-toolbar .country-switcher-input {
  background: #f8fafc;
  border-color: var(--pl-line);
  font-weight: 500;
  color: var(--pl-body);
}

/* "9 plans found (…) • Page 1 of 1" is metadata — one small muted line. */
html body .filter-results {
  margin-bottom: .75rem;
  font-size: .8rem;
  color: var(--pl-muted);
}

/* Plan-type tabs: pill pair, outlined resting state, solid active. */
html body .plan-tabs { margin-bottom: .875rem; }
html body .plan-tab {
  border-color: var(--pl-line);
  font-weight: 600;
}
html body .plan-tab.is-active { box-shadow: none; }

/* Plan cards: outline + tint, no lift. */
html body .standard-select-card {
  border-color: var(--pl-line);
  box-shadow: none;
}
html body .standard-select-card:hover {
  transform: none;
  border-color: #ffc9a3;
  box-shadow: none;
  background: #fffaf6;
}
html body .standard-select-card.is-selected {
  box-shadow: 0 0 0 1.5px var(--pl-brand);
}
html body .standard-cards-grid { gap: 10px; }
@media (max-width: 560px) {
  html body .standard-cards-grid { gap: 8px; }
}

/* Stepper + totals block under the grid. */
html body .std-footer { margin-top: 1rem; padding-top: 1rem; border-top-color: var(--pl-line); }
html body .buy-row { gap: 12px; }
html body .ud-field-label { margin-bottom: 6px; }
html body .ud-field-label strong { font-size: .95rem; font-weight: 700; }
html body .ud-field-label span { font-size: .8rem; }
html body .ud-stepper { height: 48px; border-color: var(--pl-line); border-radius: 12px; }
html body .ud-step { width: 38px; height: 38px; font-size: 20px; background: #f3f5f8; }
html body .ud-stepper input { font-size: 1rem; font-weight: 700; }
html body .ud-total-row,
html body .buy-row .ud-total-row { margin-top: 10px; padding-top: 10px; border-top-color: var(--pl-line); }
html body .ud-total-label { font-size: .95rem; font-weight: 700; }
html body .ud-total-amount { font-size: 1.25rem; }

/* Discount rows. Were two full-width tinted pills (mint / peach), each with
   a solid coloured chip — the same template look removed from the mobile
   app. Now receipt rows: label left, saving right, colour only on the
   figure. `.ud-discount-tag` holds the label copy so it becomes plain text. */
html body .ud-discount-row {
  margin-top: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--pl-line);
  border-radius: 0;
  background: transparent;
  gap: 8px;
  justify-content: space-between;
}
html body .ud-discount-row:first-of-type { margin-top: 6px; }
html body .ud-discount-tag {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pl-body);
  font-size: .875rem;
  font-weight: 500;
}
html body .ud-discount-save {
  font-size: .875rem;
  font-weight: 600;
  color: #12b76a;
  font-variant-numeric: tabular-nums;
}
html body .ud-affiliate-row { background: transparent; border-color: var(--pl-line); }
html body .ud-affiliate-row .ud-discount-tag { background: transparent; color: var(--pl-body); }
html body .ud-affiliate-row .ud-discount-save { color: #12b76a; }

/* Buttons: same height family as the rest of the site, calmer shadow. */
html body .ud-actions { gap: 8px; margin-top: 12px; }
html body .ud-btn { height: 48px; border-radius: 12px; font-size: .95rem; font-weight: 700; }
html body .ud-btn-primary { box-shadow: 0 8px 20px -10px rgba(255, 106, 0, .55); }
html body .ud-btn-primary:hover { transform: none; }
html body .ud-wallet { margin-top: 6px; }
html body .ud-wallet-note { font-size: .75rem; margin-top: 6px; }
html body .ud-trust { margin-top: 10px; font-size: .78rem; gap: 14px; }

/* Network & coverage: a flat list, not a raised card. */
html body .net-panel {
  margin-top: 1rem;
  padding: 14px 16px;
  border-color: var(--pl-line);
  background: #fff;
}
html body .net-title { font-size: .9rem; margin-bottom: 4px; text-align: left; }
html body .net-row { padding: 8px 0; font-size: .85rem; border-top-color: var(--pl-line); }
html body .net-rows { gap: 0 20px; }

/* "Your selection" empty state: it is a placeholder — a dashed 40px box is
   heavier than the thing it stands in for. */
html body .shop-layout { gap: 1rem; }
html body .checkout-panel { margin-top: 1rem; }
html body .checkout-panel.is-empty { margin-top: .5rem; }
html body .checkout-empty { padding: 22px 18px; border-radius: 14px; border-color: var(--pl-line); }
html body .checkout-empty-icon { width: 34px; height: 34px; margin-bottom: 8px; }
html body .checkout-empty h3 { font-size: .95rem; }
html body .checkout-empty p { font-size: .82rem; }
@media (min-width: 1241px) {
  html body .shop-layout { gap: 1.75rem; }
}

/* Selected/loaded sections */
html body .plans-two-sections { gap: 1.5rem; }

/* ==========================================================================
   DESTINATIONS PAGE (pages/destinations.php). Its inline rules are written
   as `.destinations-page .x` (0,2,0), so these carry `html body` to win.
   ========================================================================== */
html body .destinations-page .page-hero.plans-hero {
  padding: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) 20px;
  margin-bottom: 1rem;
}
html body .destinations-page .plans-hero .hero-title { margin-bottom: .5rem; }

html body .destinations-page .popular-destinations-section { padding: 0 16px 1.25rem; background: none; }
html body .destinations-page .plans-by-country-section { padding: .25rem 16px 2.5rem; background: none; }
@media (min-width: 769px) {
  html body .destinations-page .popular-destinations-section { padding: 0 20px 1.5rem; }
  html body .destinations-page .plans-by-country-section { padding: .5rem 20px 3.5rem; }
}

/* Currency switcher: the header already has one, so this is a secondary
   control, not a feature card. Hairline, compact, no orange frame. */
html body .destinations-page .destinations-currency-converter {
  padding: 10px 12px;
  margin-bottom: 1rem;
  gap: 8px 12px;
  border: 1px solid var(--pl-line);
  border-radius: 12px;
  box-shadow: none;
}
html body .destinations-page .destinations-currency-title { font-size: .9rem; }
html body .destinations-page .destinations-currency-subtitle { font-size: .75rem; color: var(--pl-muted); }
html body .destinations-page .destinations-currency-btn {
  padding: 6px 12px;
  border-color: var(--pl-line);
  color: var(--pl-body);
}
html body .destinations-page .destinations-currency-btn.is-active {
  background: var(--pl-brand);
  border-color: var(--pl-brand);
}

html body .destinations-page .popular-header { margin-bottom: 10px; gap: 2px; }
html body .destinations-page .popular-header h2 { font-size: 1.15rem; letter-spacing: -.02em; }
html body .destinations-page .popular-header p { font-size: .85rem; color: var(--pl-muted); }
html body .destinations-page .country-toolbar { margin-bottom: 12px; gap: 8px; }
html body .destinations-page .country-search { height: 44px; border-color: var(--pl-line); border-radius: 12px; }
html body .destinations-page .country-summary { font-size: .8rem; color: var(--pl-muted); }

/* Country rows: a directory, not a card deck. */
html body .destinations-page .countries-list { gap: 8px; }
html body .destinations-page .country-item {
  padding: 10px 12px;
  border-radius: 12px;
  border-color: var(--pl-line);
  box-shadow: none;
  transition: background-color .18s var(--pl-ease), border-color .18s var(--pl-ease);
}
html body .destinations-page .country-item:hover {
  transform: none;
  box-shadow: none;
  background: var(--pl-brand-soft);
  border-color: #ffd7bf;
}
html body .destinations-page .country-flag {
  width: 36px; height: 36px;
  border-color: var(--pl-line);
  background: #f8fafc;
}
html body .destinations-page .country-text { gap: 2px; }
/* The name is an <h2>; mobile-tighten.css sizes every h2 with !important
   on phones, so this needs the same weight to read as a row label. */
html body .destinations-page .country-name {
  font-size: .95rem !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  letter-spacing: -.01em;
}
html body .destinations-page .country-code { font-size: .75rem; color: var(--pl-muted); }
html body .destinations-page .country-extra { font-size: .75rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
/* Chevron: plain glyph, no circled button. */
html body .destinations-page .country-next {
  width: 24px; height: 24px;
  border: 0;
  background: transparent;
  color: #b6c0cd;
}
html body .destinations-page .country-item:hover .country-next {
  background: transparent;
  color: var(--pl-brand);
  transform: none;
}
@media (max-width: 768px) {
  html body .destinations-page .country-item { padding: 10px 12px; }
  html body .destinations-page .country-name { font-size: .95rem; }
}

/* ==========================================================================
   PLANS PAGE (pages/plans.php, `.pd` namespace, inline rules at (0,1,0)).
   ========================================================================== */
html body .pd-hero {
  padding-top: clamp(2rem, 1.25rem + 3vw, 3.5rem);
  /* the toolbar overlaps upward by 2.2–3rem; keep at least that below the copy */
  padding-bottom: clamp(3.25rem, 2.25rem + 4vw, 4.75rem);
}
html body .pd-eyebrow { margin-bottom: .75rem; }
html body .pd-hero .pd-hero-title { margin-bottom: .5rem; }
html body .pd-hero-chips { margin-top: 1rem; gap: .4rem .5rem; }
html body .pd-hero-chip { padding: .3rem .7rem; font-size: .8rem; }

html body .pd-toolbar-inner { padding: 10px; }
html body .pd-search-field { height: 48px; }
html body .pd-chips { margin-top: 8px; }
html body .pd-chip { height: 34px; }

html body .pd-body { padding-bottom: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
html body .pd-section { margin-top: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }
html body .pd-section-head { margin-bottom: 10px; }
html body .pd-section-sub { font-size: .85rem; margin-top: 2px; }

/* Featured rails: `align-items: start` stops every card stretching to the
   tallest sibling — that stretch, plus `margin-top: auto` on the footer,
   is what left a hollow band between the name and the price. */
html body .pd-rail { align-items: start; gap: 10px; }
html body .pd-feat-card {
  gap: 8px;
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color .18s var(--pl-ease), background-color .18s var(--pl-ease);
}
html body .pd-feat-card:hover { transform: none; box-shadow: none; background: var(--pl-brand-soft); }
html body .pd-feat-foot { margin-top: 2px; }
/* The rail is one grid row, so its height is the tallest card even when that
   card is scrolled out of view — a three-line name like "China (mainland &
   HK)" left a ~90px dead band under every visible card. Cap names at two
   lines so the track stays the height of a normal card. */
html body .pd-feat-top { align-items: flex-start; }
html body .pd-feat-top > span:last-child { min-width: 0; }
html body .pd-feat-name {
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The name is now block-level, so the markup's <br> would add a blank line
   between it and the region — drop the break and stack the region instead. */
html body .pd-feat-name + br { display: none; }
html body .pd-feat-region { display: block; margin-top: 2px; }

html body .pd-region-grid { gap: 10px; }
html body .pd-region-card { padding: 14px; gap: 4px; box-shadow: none; }
html body .pd-region-card:hover { transform: none; box-shadow: none; background: var(--pl-brand-soft); }
html body .pd-region-foot { margin-top: 8px; }

html body .pd-grid { gap: 8px; }
html body .pd-card {
  padding: 10px 12px;
  box-shadow: none;
  transition: border-color .18s var(--pl-ease), background-color .18s var(--pl-ease);
}
html body .pd-card:hover { transform: none; box-shadow: none; background: var(--pl-brand-soft); }
html body .pd-card:hover .pd-go { transform: none; }
html body .pd-flag { width: 38px; height: 38px; }
html body .pd-go { width: 28px; height: 28px; }

/* ==========================================================================
   FINAL CLEAN-UP PASS (homepage-led, applies site-wide where the same
   components appear). One primary action per area; outlines instead of
   shadows; no decorative extras. CSS only.
   ========================================================================== */

/* -- Header: one orange button, not three ---------------------------------
   Before: search circle (orange gradient), Cart (orange), Affiliate
   Programme (orange) and View My eSIM (white) all competed. The customer's
   own action — View My eSIM — becomes the single primary; Cart and Affiliate
   Programme are quiet outlines; search is a neutral icon button. */
html body .header .header-search-icon {
  background: #fff;
  border: 1px solid var(--pl-line);
  color: var(--pl-body);
  box-shadow: none;
  transform: none;
}
html body .header .header-search-icon:hover { background: #f8fafc; color: var(--pl-ink); transform: none; box-shadow: none; }
html body .header .header-cta::before { display: none; }
html body .header .header-right a.header-cta {
  border-radius: 999px;
  font-weight: 600;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html body .header .header-right a.header-cta[href*="checkout"],
html body .header .header-right a.header-cta[href*="affiliate-programme"] {
  background: #fff;
  color: var(--pl-ink);
  border: 1px solid var(--pl-line);
}
html body .header .header-right a.header-cta[href*="checkout"]:hover,
html body .header .header-right a.header-cta[href*="affiliate-programme"]:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--pl-ink);
}
html body .header .header-right a.header-cta[href*="manage-esim"] {
  background: var(--pl-brand);
  color: #fff;
  border: 1px solid var(--pl-brand);
}
html body .header .header-right a.header-cta[href*="manage-esim"]:hover { background: var(--pl-brand-ink); border-color: var(--pl-brand-ink); color: #fff; }
/* The cart count stays orange so it still reads as a badge on a white pill. */
html body .header .header-cart-count { background: var(--pl-brand); color: #fff; }
html body .header .header-currency-icon { box-shadow: none; }

/* -- Cards: hairline + soft lift, matching the rest of the site --------------
   The reviews card, the affiliate promo card and the compatibility card
   carried the heaviest shadows on the page. They keep a little lift (the
   first two overlap the hero) but no more than a real card would. */
html body .hero-stats-inner,
html body .aff-promo-panel,
html body .esim-check-card {
  border: 1px solid var(--pl-line);
  box-shadow: 0 6px 20px -14px rgba(15, 23, 42, .25);
}
html body .esim-check-card { background: #fff; }
html body .esim-check-card:hover { transform: none; box-shadow: 0 6px 20px -14px rgba(15, 23, 42, .25); }
html body .esim-check-card { animation: none; }
/* The "+" pip on the promo icon was decoration. */
html body .aff-promo-panel-plus { display: none; }
html body .aff-promo-panel-btn { box-shadow: none; }
html body .aff-promo-panel-btn:hover { transform: none; box-shadow: none; }

/* -- Section backgrounds alternate cleanly ------------------------------------
   How It Works had its own peach gradient; it now uses the same off-white as
   the other quiet sections, so the page alternates white / off-white. */
html body .how-it-works { background: #f7f9fc; }

/* -- Popular Destinations: search sits closer to the title ------------------ */
html body .destinations .destinations-search { margin: 0 auto .9rem; }

/* -- Hero: chips are plain now (icons already removed); keep them light ----- */
html body .hero-float { box-shadow: 0 6px 18px -10px rgba(30, 8, 0, .35); border: 1px solid rgba(255, 255, 255, .8); }
html body .hero .search-container { box-shadow: 0 10px 30px -18px rgba(40, 8, 0, .45); }
html body .hero .hero-buttons .cta-button.primary { box-shadow: none; }

/* -- Affiliate section: the CTA panel doesn't need a glow ------------------- */
html body .affiliate-cta-glow { display: none; }
html body .affiliate .cta-button.primary { box-shadow: none; }

/* -- Trust band: badges as plain rows, icons quieter ------------------------ */
html body .trust .badge-icon { box-shadow: none; }

/* -- Phones ------------------------------------------------------------------ */
@media (max-width: 899px) {
  /* styles.css flattens .hero-content (display: contents) on phones, which
     turns the eyebrow chip into a stretched flex item — keep it a chip. */
  html body .hero .hero-eyebrow { align-self: center; width: auto; }
  /* Stacked CTAs: same width, not two different pills. */
  html body .hero .hero-buttons { flex-direction: column; align-items: center; }
  html body .hero .hero-buttons .cta-button { width: min(100%, 300px); }
}
@media (max-width: 768px) {
  /* Mobile cart: same neutral icon-button as search, count stays a badge. */
  html body .header .header-top-mobile-cart {
    background: #fff;
    color: var(--pl-body);
    border: 1px solid var(--pl-line);
    box-shadow: none;
    border-radius: 999px;
  }
  html body .header .header-top-mobile-cart .header-cart-count { background: var(--pl-brand); color: #fff; }
}

/* -- Cookie panel: compact on phones (it covered ~70% of the viewport) ----- */
@media (max-width: 640px) {
  html body .ck-panel { padding: 14px 16px 12px; border-radius: 16px; }
  html body .ck-title { font-size: 1rem; margin-bottom: 4px; }
  html body .ck-copy { font-size: .8rem; line-height: 1.45; margin-bottom: 10px; }
  html body .ck-actions { display: flex; gap: 8px; }
  html body .ck-actions .ck-btn { flex: 1 1 0; min-height: 40px; padding: 0 8px; font-size: .82rem; border-radius: 10px; }
}

/* ==========================================================================
   APP BAR — one slim line above the header on every page. Dark so it reads
   as chrome, not content; the two badges are the same shape as the footer
   ones at half the size. Every link opens the coming-soon panel.
   ========================================================================== */
html body .app-bar {
  background: #0f172a;
  color: #cbd5e1;
  font-size: .82rem;
  line-height: 1.3;
}
html body .app-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
}
html body .app-bar-text {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  color: #cbd5e1;
  text-decoration: none;
}
html body .app-bar-text:hover { color: #fff; }
html body .app-bar-text svg { flex: 0 0 auto; color: #ff8a3d; }
html body .app-bar-text strong { color: #fff; font-weight: 600; }
html body .app-bar-mobile-cta { display: none; color: #ff8a3d; font-weight: 600; white-space: nowrap; }
html body .app-bar-badges { display: flex; gap: .4rem; flex: 0 0 auto; }
html body .app-bar-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 28px; padding: 0 .7rem 0 .55rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
html body .app-bar-badge:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); color: #fff; }
html body .app-bar-badge svg { width: 14px; height: 14px; flex: 0 0 auto; }
@media (max-width: 767px) {
  /* styles.css strips .container padding below 768px — put a gutter back. */
  html body .app-bar-inner { padding-left: 16px !important; padding-right: 16px !important; }
  html body .app-bar-desktop-only,
  html body .app-bar-badges { display: none; }
  html body .app-bar-text { flex: 1; justify-content: space-between; }
  html body .app-bar-mobile-cta { display: inline; }
}

/* ==========================================================================
   GET THE APP — strip above the footer columns (every page) + coming-soon
   panel. Store badges are drawn, not the official artwork: those come with
   usage rules that don't allow "coming soon" placeholders.
   ========================================================================== */
html body .app-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
}
html body .app-strip-copy { display: flex; align-items: center; gap: 1rem; min-width: 0; }
html body .app-strip-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255, 106, 0, .16);
  color: #ff8a3d;
}
html body .app-strip h3 { margin: 0 0 .2rem; color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
html body .app-strip p { margin: 0; color: #93a1b5; font-size: .9rem; line-height: 1.5; }
html body .app-strip-badges { display: flex; gap: .6rem; flex-wrap: wrap; }
html body .app-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .45rem 1rem .45rem .8rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: #0b0f17;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
html body .app-badge:hover { border-color: rgba(255, 255, 255, .5); background: #121826; transform: translateY(-1px); }
html body .app-badge:focus-visible { outline: 2px solid #ff8a3d; outline-offset: 2px; }
html body .app-badge-glyph { width: 24px; height: 24px; flex: 0 0 auto; }
html body .app-badge-text { display: flex; flex-direction: column; line-height: 1.1; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
html body .app-badge-text small { font-size: .62rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; opacity: .75; margin-bottom: 2px; }
@media (max-width: 640px) {
  html body .app-strip { padding: 1.1rem 1rem; gap: 1rem; }
  html body .app-strip-badges { width: 100%; }
  html body .app-badge { flex: 1 1 0; justify-content: center; }
}

html body .app-dialog {
  border: 0; padding: 0; margin: auto;
  width: min(92vw, 440px);
  border-radius: 22px;
  background: transparent;
  color: #0f172a;
}
html body .app-dialog::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
html body .app-dialog-card {
  position: relative;
  margin: 0;
  padding: 2rem 1.75rem 1.5rem;
  background: #fff;
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 30px 80px -30px rgba(15, 23, 42, .5);
}
html body .app-dialog-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border: 0; border-radius: 999px;
  background: #f1f5f9; color: #475569; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
html body .app-dialog-close:hover { background: #e2e8f0; color: #0f172a; }
html body .app-dialog-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; margin: 0 auto .9rem; display: block; }
html body .app-dialog-tag {
  display: inline-block; padding: .25rem .7rem; border-radius: 999px;
  background: #fff4ec; color: #c2410c; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
html body .app-dialog h2 { margin: .8rem 0 .5rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; color: #0f172a; }
html body .app-dialog p { margin: 0 0 1.25rem; color: #475569; font-size: .95rem; line-height: 1.6; }
html body .app-dialog-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
html body .app-dialog-primary,
html body .app-dialog-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.3rem; border-radius: 999px;
  font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
html body .app-dialog-primary { background: #ff6a00; color: #fff; border: 0; }
html body .app-dialog-primary:hover { background: #e35600; color: #fff; }
html body .app-dialog-secondary { background: #fff; color: #0f172a; border: 1px solid #e6eaf0; }
html body .app-dialog-secondary:hover { border-color: #cbd5e1; }

/* ==========================================================================
   DE-TEMPLATE PASS — the handful of visual habits that read as "generated":
   underlined section titles, dotted overlay patterns, bobbing emoji chips,
   emoji-in-a-box icons. All removed by CSS; no copy touched except the one
   emoji badge in index.php.
   ========================================================================== */
html body .section-title::after { display: none; }
html body .page-hero::before,
html body .pd-hero::before { display: none; }
html body .hero-float { animation: none !important; }
html body .hero-float-ic { display: none; }
html body .affiliate .benefit-icon-wrapper { display: none !important; }
html body .affiliate-badge { font-weight: 600; letter-spacing: .02em; }
html body .affiliate .benefit-card h3 { margin-top: 0; }

/* ==========================================================================
   FOOTER — on phones every column stacked full-width and centred, so five
   groups of ~6 links ran to three screens. Brand block on top, then the
   link columns two-up, left-aligned like any real footer.
   ========================================================================== */
html body .footer { padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0 1.25rem; }
html body .footer-content { gap: 1.5rem 1.25rem; margin-bottom: 1.5rem; }
html body .footer-column h4 { margin-bottom: .6rem; font-size: .9rem; }
html body .footer-column li { margin-bottom: .45rem; }
html body .footer-column a { font-size: .9rem; }
html body .footer-bottom { padding-top: 1rem; font-size: .8rem; }
@media (max-width: 767px) {
  html body .footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
    text-align: left;
  }
  html body .footer-column.footer-brand { grid-column: 1 / -1; align-items: flex-start; }
  html body .footer-column h3,
  html body .footer-column h4 { text-align: left; }
  html body .footer-column ul { display: block; padding-left: 0; margin: 0; }
  html body .footer .social-links { justify-content: flex-start; }
  html body .footer .contact-info { align-items: flex-start; }
  html body .footer .social-media { margin-top: .75rem; }
}

/* ==========================================================================
   CUSTOMER DASHBOARD (manage-esim.php). Its inline <style> sits after this
   file in the DOM, so every rule here carries `html body … .manage-esim-section`
   to outrank it on specificity rather than source order.

   On a 360px phone before this block: the marketing app bar ran ~130px tall
   above an app screen; .container had zero side padding (styles.css strips
   it with !important below 768px) so the greeting touched the glass; the
   three stat tiles stacked full-width at ~170px each (500px for three
   numbers); the referral card was a glowing orange gradient with seven
   rainbow share bubbles. Now: app chrome only, a 16px gutter, one stats
   strip, and a white referral card with neutral share buttons.
   ========================================================================== */

/* The dashboard already hides the header/footer; the app bar is the same
   marketing chrome. */
html body:has(.manage-esim-section) .app-bar { display: none; }

/* -- Stats: one quiet strip, numbers left-aligned ------------------------- */
html body .manage-esim-section .dash-stats { gap: 12px; margin-bottom: 20px; }
html body .manage-esim-section .dash-stat {
  align-items: flex-start;
  gap: 2px;
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: none;
  border-color: var(--pl-line);
}
html body .manage-esim-section .dash-stat-ic { display: none; }
html body .manage-esim-section .dash-stat b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
html body .manage-esim-section .dash-stat > span:not(.dash-stat-ic) {
  order: -1;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pl-muted);
  text-transform: none;
  letter-spacing: 0;
}
html body .manage-esim-section .dash-stat-hint { font-size: 11px; font-weight: 500; color: var(--pl-muted); }

/* -- Referral card: white card, brand colour only on the actions ---------- */
html body .manage-esim-section .dash-affiliate {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid var(--pl-line);
  border-radius: 16px;
  background: #fff;
  color: var(--pl-ink);
  box-shadow: none;
}
html body .manage-esim-section .dash-affiliate-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--pl-brand-soft); color: var(--pl-brand); }
html body .manage-esim-section .dash-affiliate-ic svg { width: 20px; height: 20px; }
html body .manage-esim-section .dash-affiliate-body strong { font-size: 15px; font-weight: 700; color: var(--pl-ink); }
html body .manage-esim-section .dash-affiliate-body span { color: var(--pl-muted); }
html body .manage-esim-section .dash-affiliate-portal {
  padding: 8px 12px;
  border: 1px solid var(--pl-line);
  background: #fff;
  color: var(--pl-ink);
  font-weight: 600;
}
html body .manage-esim-section .dash-affiliate-portal:hover { background: #f8fafc; border-color: #cbd5e1; color: var(--pl-ink); }
html body .manage-esim-section .dash-affiliate-linkrow { margin-top: 14px; }
html body .manage-esim-section .dash-affiliate-url {
  border: 1px solid var(--pl-line);
  background: #f8fafc;
  color: var(--pl-body);
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
html body .manage-esim-section .dash-affiliate-url:focus { outline: 2px solid #ffc9a3; }
html body .manage-esim-section .dash-affiliate-copy { background: var(--pl-brand); color: #fff; font-weight: 700; }
html body .manage-esim-section .dash-affiliate-copy:hover { background: var(--pl-brand-ink); transform: none; }
html body .manage-esim-section .dash-affiliate-copy.is-copied { background: #ecfdf5; color: #047857; }

/* Share targets: neutral buttons, the brand shows only in the glyph. */
html body .manage-esim-section .dash-share-fabs { gap: 8px; margin-top: 12px; }
html body .manage-esim-section .dash-share-fab {
  width: 40px; height: 40px;
  border: 1px solid var(--pl-line);
  background: #fff;
  box-shadow: none;
  transition: background-color .15s var(--pl-ease), border-color .15s var(--pl-ease);
}
html body .manage-esim-section .dash-share-fab:hover { transform: none; background: #f8fafc; border-color: #cbd5e1; }
html body .manage-esim-section .dash-share-fab .fab-icon { width: 19px; height: 19px; }
html body .manage-esim-section .dash-share-fab.whatsapp { color: #1faa53; background: #fff; }
html body .manage-esim-section .dash-share-fab.telegram { color: #229ED9; background: #fff; }
html body .manage-esim-section .dash-share-fab.facebook { color: #1877F2; background: #fff; }
html body .manage-esim-section .dash-share-fab.x        { color: #111; background: #fff; }
html body .manage-esim-section .dash-share-fab.email    { color: #EA4335; background: #fff; }
html body .manage-esim-section .dash-share-fab.sms      { color: #7C3AED; background: #fff; }
html body .manage-esim-section .dash-share-fab.native   { color: var(--pl-body); background: #fff; }
html body .manage-esim-section .dash-share-fab:hover    { background: #f8fafc; }

html body .manage-esim-section .dash-affiliate-stats { border-top-color: var(--pl-line); }
html body .manage-esim-section .dash-aff-stat b { font-size: 18px; font-weight: 700; color: var(--pl-ink); font-variant-numeric: tabular-nums; }
html body .manage-esim-section .dash-aff-stat span { font-size: 12.5px; font-weight: 600; color: var(--pl-body); }
html body .manage-esim-section .dash-aff-stat em { color: var(--pl-muted); }

/* -- eSIM cards: hairline, no lift; never wider than a small phone ------- */
html body .manage-esim-section .dash-esim-cards { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
/* mobile-tighten.css pads anything named *card* by 16px !important — that
   includes this grid wrapper, which inset every card and opened a gap. Its
   :not() chain scores (0,4,1), hence the IDs. */
#dash-esim-cards.dash-esim-cards,
#dash-esims-cards.dash-esim-cards { padding: 0 !important; border-radius: 0 !important; }
html body .manage-esim-section .dash-ec { border-radius: 14px; padding: 16px; box-shadow: none; border-color: var(--pl-line); }
html body .manage-esim-section .dash-ec:hover { transform: none; box-shadow: none; border-color: #ffc9a3; }
html body .manage-esim-section .dash-ec-name { font-weight: 700; }
html body .manage-esim-section .dash-ec-data { font-weight: 700; }
html body .manage-esim-section .dash-sec-head h2 { font-weight: 700; letter-spacing: -.01em; }

/* -- Phones --------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Nav bar: sticky, 56px, logo left, icon buttons right. */
  html body.dash-authed .manage-esim-section .dash-sidebar {
    position: sticky; top: 0; z-index: 40;
    gap: 2px;
    min-height: 56px;
    padding: 6px 10px 6px 14px;
    border-bottom-color: var(--pl-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.4) blur(8px);
  }
  html body .manage-esim-section .dash-sb-brand { padding: 0 6px 0 0; margin-right: auto; }
  html body .manage-esim-section .dash-sb-brand img { height: 24px; }
  html body .manage-esim-section .dash-nav { gap: 2px; }
  html body .manage-esim-section .dash-sb-foot { margin: 0; gap: 2px; }
  html body .manage-esim-section .dash-nav-item {
    width: 40px; height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
    color: var(--pl-muted);
  }
  html body .manage-esim-section .dash-nav-item.is-active { background: var(--pl-brand-soft); color: var(--pl-brand); }
  /* "Back to website" and "Sign out" are secondary: a hairline divides them. */
  html body .manage-esim-section .dash-sb-foot { padding-left: 4px; border-left: 1px solid var(--pl-line); }

  /* Side gutter back (styles.css zeroes .container padding with !important). */
  html body.dash-authed .manage-esim-section .container {
    padding: 18px 16px 48px !important;
  }

  /* Three numbers fit one row on a phone. */
  html body .manage-esim-section .dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  html body .manage-esim-section .dash-stat { padding: 12px; border-radius: 12px; }
  html body .manage-esim-section .dash-stat b { font-size: 22px; }
  html body .manage-esim-section .dash-stat > span:not(.dash-stat-ic) { font-size: 12px; margin-bottom: 2px; white-space: nowrap; }
  html body .manage-esim-section .dash-stat-hint { display: none; }
}

@media (max-width: 640px) {
  html body .manage-esim-section .dash-greeting { align-items: center; gap: 12px; margin-bottom: 16px; }
  html body .manage-esim-section .dash-greeting h1 { font-size: 22px !important; line-height: 1.2 !important; font-weight: 700; }
  html body .manage-esim-section .dash-greeting p { font-size: 13.5px; margin-top: 2px; }
  html body .manage-esim-section .dash-refresh { width: 38px; height: 38px; }

  html body .manage-esim-section .dash-affiliate { padding: 16px; margin-bottom: 18px; }
  html body .manage-esim-section .dash-affiliate-head { align-items: flex-start; gap: 12px; }
  html body .manage-esim-section .dash-affiliate-ic { width: 36px; height: 36px; }
  html body .manage-esim-section .dash-affiliate-body { flex: 1 1 0; }
  html body .manage-esim-section .dash-affiliate-body strong { font-size: 14.5px; }
  html body .manage-esim-section .dash-affiliate-body span { font-size: 12.5px; }
  /* Portal: a text link under the copy, not a second full-width button. */
  html body .manage-esim-section .dash-affiliate-portal {
    flex: 1 0 100%;
    width: auto;
    justify-content: flex-start;
    margin: -4px 0 0 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pl-brand-ink);
    font-size: 13px;
  }
  html body .manage-esim-section .dash-affiliate-portal:hover { background: none; color: var(--pl-brand); }
  html body .manage-esim-section .dash-share-fabs { flex-wrap: nowrap; justify-content: space-between; gap: 4px; }
  html body .manage-esim-section .dash-share-fab { flex: 0 0 36px; width: 36px; height: 36px; }
  html body .manage-esim-section .dash-share-fab .fab-icon { width: 17px; height: 17px; }
  html body .manage-esim-section .dash-aff-stat b { font-size: 16px; }
  html body .manage-esim-section .dash-aff-stat span { font-size: 12px; line-height: 1.3; }
  html body .manage-esim-section .dash-aff-stat em { display: none; }

  html body .manage-esim-section .dash-sec-head { margin-bottom: 10px; }
  html body .manage-esim-section .dash-sec-head h2 { font-size: 17px !important; }
  html body .manage-esim-section .dash-search input { padding-block: 11px; font-size: 14px; }
  html body .manage-esim-section .dash-ec { padding: 14px; }
}