/* ADONIS TELECOM — server-rendered catalogue pages.
   Additions only: layout glue the homepage sections do not cover (page hero
   under the fixed header, breadcrumbs, toolbar, coverage chips, plan detail).
   Cards, grids, buttons and glass all come from tokens-v2.css + v2-section-*.css. */

.tp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--red-600); color: #FFFFFF; font-weight: 700;
  border-radius: 0 0 12px 0;
}
.tp-skip:focus { left: 0; }

/* the header is fixed; the first section has to clear it */
.tp-hero { padding: 168px 0 44px; }

/* The network mesh from the Business section, on every catalogue hero. It earns
   its place here for the same reason it does there — these pages are about
   where the network reaches — and it gives a country page with two plans the
   same presence as one with forty. Paint and reduced-motion live in
   tokens-v2.css; this only sets up the host. */
.tp-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg), var(--bg-2) 55%, var(--bg)); }
.tp-hero::before { content: ''; }
/* Only the container, never `> *`: .t2-orb is position:absolute at the same
   specificity and loads earlier, so a blanket child rule would win and drop the
   orb into normal flow. */
.tp-hero > .t2-container { position: relative; z-index: 1; }

/* ---- split hero: copy left, art right ----
   Opt-in via .tp-hero--split, so the heroes with nothing to show on the right
   keep their single column instead of reserving an empty one. */
.tp-hero--split > .t2-container { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) {
  .tp-hero--split > .t2-container { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 56px; }
}
/* Wide desktops have 500px of dead space between the copy and the art, so the
   art takes some of it. max-height is what keeps this safe for the tall maps
   (South America is 0.65:1): they letterbox inside the wider column instead of
   growing to 860px and dragging the hero open. */
@media (min-width: 1200px) {
  .tp-hero--split > .t2-container { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
  .tp-hero--split .tp-map-stage { width: min(560px, 100%); }
  .tp-hero--split .tp-map { max-height: 430px; }
}
.tp-hero__art { display: flex; justify-content: center; }
@media (max-width: 999px) {
  /* Below the split it would only add scroll depth above the search field,
     which is what people came to the destinations page to use. */
  .tp-hero__art { display: none; }
}

/* ---- split-flap departure board ----
   Every real board is built from half-tiles that turn on a horizontal axis;
   the hairline through each cell's middle is that axis, and the flip is a
   rotateX on the whole cell with the character swapped at the midpoint.
   Daylight version: the dark ink card sat like a hole in the white page, so
   the board is now paper-white with light tiles and the red kept for the
   lamp and READY pills. */
.tp-flap {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 20px 20px;
  box-shadow: 0 18px 44px rgba(11, 18, 32, .10);
  display: grid; gap: 8px;
}
.tp-flap__head {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.tp-flap__hs { margin-left: auto; }
.tp-flap__lamp {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red-500);
  box-shadow: 0 0 8px rgba(229, 9, 20, .8);
  animation: tp-lamp 2.4s ease-in-out infinite;
}
@keyframes tp-lamp { 50% { opacity: .35; } }
.tp-flap__row { display: flex; gap: 3px; align-items: center; perspective: 420px; }
.tp-flap__c {
  flex: none; width: 27px; height: 40px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #EEF1F7 48%, #E2E7F0 52%);
  color: var(--text); font-size: 18px; font-weight: 800;
  position: relative;
}
.tp-flap__c::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(11, 18, 32, .14);
}
.tp-flap__c.is-flipping { animation: tp-flap-turn .32s ease-in-out; }
@keyframes tp-flap-turn { 50% { transform: rotateX(-86deg); } }
.tp-flap__status {
  margin-left: auto; color: var(--red-600); font-size: 11px; font-weight: 800; letter-spacing: .14em;
  border: 1px solid rgba(229, 9, 20, .35); border-radius: 999px; padding: 4px 10px;
  background: rgba(229, 9, 20, .04);
  animation: tp-ready 3.2s ease-in-out infinite;
}
@keyframes tp-ready { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .tp-flap__c.is-flipping, .tp-flap__lamp, .tp-flap__status { animation: none; }
}

/* ---- country map (country page hero) ----
   The silhouette is generated at build time (_build/make_maps.py); the ping
   anchors inside it are computed there too, because point-in-polygon is not
   something a stylesheet can do. */
.tp-map-stage { position: relative; width: min(430px, 100%); }
.tp-map { width: 100%; height: auto; overflow: visible; }
.tp-map__land {
  fill: var(--red-50); stroke: var(--red-200); stroke-width: 1.6;
  stroke-linejoin: round;
}
.tp-map__dot { fill: var(--red-600); }
.tp-map__ping {
  fill: none; stroke: var(--red-600); stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  animation: tp-map-ping 3.3s cubic-bezier(.16, 1, .3, 1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes tp-map-ping {
  0%        { transform: scale(.5); opacity: 0; }
  12%       { opacity: .9; }
  60%, 100% { transform: scale(3.2); opacity: 0; }
}

/* the e-SIM card itself — the branded card artwork floating over the map's
   corner. drop-shadow (not box-shadow) so the shadow follows the card's
   rounded silhouette in the PNG alpha. */
.tp-map-card {
  position: absolute; right: 6px; bottom: 10px;
  display: block; line-height: 0;
  filter: drop-shadow(0 14px 24px rgba(11, 18, 32, .20));
  animation: tp-map-card-float 5.2s ease-in-out infinite;
}
.tp-map-card img { width: 109px; height: auto; display: block; }
@keyframes tp-map-card-float { 50% { transform: translateY(-7px); } }
html[dir="rtl"] .tp-map-card { right: auto; left: 6px; }
@media (prefers-reduced-motion: reduce) {
  .tp-map__ping { animation: none; opacity: .35; }
  .tp-map-card { animation: none; }
}

/* ---- Country | Region | Global segmented switcher --------------------- */
.tp-seg {
  display: inline-flex; gap: 4px; margin-bottom: 22px;
  padding: 5px; border-radius: 999px;
  background: #ECEEF3; border: 1px solid var(--line);
}
.tp-seg__opt {
  padding: 10px 26px; border-radius: 999px;
  font-weight: 700; font-size: 15px; color: var(--text-3);
}
a.tp-seg__opt:hover { color: var(--red-600); }
.tp-seg__opt.is-on {
  background: var(--surface); color: var(--text);
  box-shadow: 0 2px 8px rgba(11, 18, 32, .10);
}

/* ---- faint country-map watermark on destination cards ------------------
   The map SVGs carry no fill of their own, so they are applied as a CSS
   mask over a brand-red wash. pages.js sets --map-url lazily (IO) — 236
   maps at once would be ~1.4 MB nobody scrolled to. */
.t22-dest { position: relative; overflow: hidden; }
.t22-dest__map {
  position: absolute; top: 50%; right: -14%; transform: translateY(-50%);
  width: 62%; aspect-ratio: 4 / 3; pointer-events: none;
  background-color: rgba(229, 9, 20, .17);
  -webkit-mask: var(--map-url, none) center / contain no-repeat;
  mask: var(--map-url, none) center / contain no-repeat;
  transition: background-color .25s ease;
}
.t22-dest:hover .t22-dest__map { background-color: rgba(229, 9, 20, .30); }
html[dir="rtl"] .t22-dest__map { right: auto; left: -14%; }

/* ---- compatibility one-liner + install guide -------------------------- */
.tp-compat {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0 0; padding: 12px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--red-600);
  border-radius: 0 12px 12px 0; background: var(--surface-2);
  color: var(--text-2); font-size: 14.5px;
}
.tp-compat a { color: var(--red-600); font-weight: 700; white-space: nowrap; }
html[dir="rtl"] .tp-compat { border-left-width: 1px; border-left-color: var(--line); border-right: 3px solid var(--red-600); border-radius: 12px 0 0 12px; }

.tp-guide { max-width: 760px; }
.tp-os-radio { position: absolute; opacity: 0; pointer-events: none; }
.tp-os-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tp-os-tab {
  padding: 10px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 700; font-size: 15px; color: var(--text-2);
}
#tp-os-ios:checked ~ .tp-os-tabs .tp-os-tab--ios,
#tp-os-android:checked ~ .tp-os-tabs .tp-os-tab--android {
  background: var(--red-600); border-color: var(--red-600); color: #FFFFFF;
}
#tp-os-ios:checked ~ .tp-guide-steps--android,
#tp-os-android:checked ~ .tp-guide-steps--ios { display: none; }

.tp-guide__note { color: var(--text-3); font-size: 15px; margin-bottom: 22px; }
.tp-guide-steps { counter-reset: step; list-style: none; display: grid; gap: 14px; padding: 0; }
.tp-guide-steps li {
  counter-increment: step; position: relative;
  padding: 16px 18px 16px 62px; font-size: 16px; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.tp-guide-steps li::before {
  content: counter(step); position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: var(--red-600);
  border: 1px solid var(--line-gold); background: rgba(229, 9, 20, .05);
}
html[dir="rtl"] .tp-guide-steps li { padding: 16px 62px 16px 18px; }
html[dir="rtl"] .tp-guide-steps li::before { left: auto; right: 18px; }
.tp-guide__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* filtered-out cards and the everything-filtered note */
.t22-plan[hidden] { display: none; }
.tp-empty-note { margin-top: 18px; color: var(--text-3); font-size: 15px; }
.tp-empty-note[hidden] { display: none; }

.tp-section { padding: 44px 0 96px; }
.tp-h1 { font-size: clamp(34px, 5.4vw, 60px); }
.tp-h3 { font-size: 22px; margin-bottom: 16px; }
.tp-orb-a { width: 520px; height: 520px; top: -160px; right: -120px; }
.tp-orb-b { width: 420px; height: 420px; top: 220px; left: -180px; }

/* flags not yet in flags.css render as a neutral chip, never as a broken box */
.fl { background-color: rgba(255, 255, 255, .07); }

/* breadcrumbs */
.tp-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--text-3); margin-bottom: 20px; }
.tp-crumbs a { color: var(--text-2); }
.tp-crumbs a:hover { color: var(--gold); }

/* search / sort toolbar */
.tp-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.tp-field { display: flex; flex-direction: column; gap: 7px; min-width: 240px; }
.tp-field__label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.tp-field input, .tp-field select {
  font-family: inherit; font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 18px; min-width: 240px;
}
.tp-field select option { background: var(--bg-2); color: var(--text); }
.tp-field input:focus, .tp-field select:focus { outline: none; border-color: var(--gold); }
.t2-btn.tp-btn--sm { padding: 11px 24px; font-size: 14px; }
.tp-count { margin-inline-start: auto; font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* facet chips — one active at a time, ANDed with the text search */
.tp-fchips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-fchip {
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--text-2); background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tp-fchip:hover { border-color: var(--red-200); color: var(--red-700); }
.tp-fchip.is-on { background: var(--red-600); border-color: var(--red-600); color: #FFFFFF; }

/* empty states */
.tp-empty { color: var(--text-2); }
.tp-empty--page { padding: 46px 32px; text-align: center; display: grid; gap: 22px; justify-items: center; }
.tp-actions { margin-top: 26px; }

/* coverage / country chips */
/* scroll-margin clears the sticky header when the hero's jump link lands here. */
.tp-coverage { margin-top: 64px; scroll-margin-top: 96px; }
.tp-jump { margin-top: 20px; }
.tp-jump a { color: var(--red-600); font-weight: 700; text-decoration: none; }
.tp-jump a:hover { text-decoration: underline; }
.tp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.tp-chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  font-size: 14px; color: var(--text-2); background: var(--surface);
}
.tp-chip a { color: inherit; display: inline-flex; align-items: center; gap: 8px; }
.tp-chip:hover { border-color: var(--line-gold); }
.tp-chip:hover a { color: var(--gold); }


/* ---- compatible devices ---- */
.tp-devices { display: grid; gap: 40px; }
.tp-devices__name { font-size: 19px; margin-bottom: 14px; }
.tp-devices__grid {
  list-style: none; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.tp-device {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  padding: 11px 14px; font-size: 14.5px; font-weight: 600; color: var(--text-2);
}
.tp-device__mark { color: var(--red-600); font-weight: 800; }
.tp-devices__note { margin-top: 40px; padding: 20px 24px; font-size: 14.5px; color: var(--text-2); }

/* plan detail */
.tp-plan-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.tp-plan-card { padding: 38px 34px; display: grid; gap: 26px; justify-items: start; }
.tp-specs { display: flex; flex-wrap: wrap; gap: 40px; }
.tp-specs dt { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin-bottom: 6px; }
.tp-specs dd { font-size: 30px; font-weight: 800; color: var(--text); }
.tp-plan-side { padding-top: 8px; }

@media (max-width: 860px) {
  .tp-hero { padding: 140px 0 32px; }
  .tp-plan-detail { grid-template-columns: 1fr; }
  .tp-count { margin-inline-start: 0; }
}

/* ---- accessory store (preview) ----
   Cards carry no photography yet: a tinted tile is honest about the page
   being a preview, where a stock photo of a product we may not stock is not. */
.ts-preview {
  border: 1px solid var(--line); border-left: 3px solid var(--red-600);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 44px;
  font-size: 14.5px; color: var(--text-2); background: var(--bg);
}
.ts-preview strong { color: var(--text); margin-inline-end: 8px; }
.ts-cat { margin-bottom: 56px; scroll-margin-top: 96px; }
.ts-cat__blurb { margin: 8px 0 22px; color: var(--text-2); max-width: 62ch; }
.ts-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ts-card { padding: 20px; display: grid; gap: 10px; justify-items: start; align-content: start; }
.ts-card__art {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 12px;
  background: linear-gradient(135deg, rgba(214, 40, 40, .10), rgba(11, 18, 32, .06));
}
.ts-card__name { font-size: 16.5px; font-weight: 800; color: var(--text); margin: 4px 0 0; }
.ts-card__note { font-size: 14px; color: var(--text-3); }
.ts-card__price { font-size: 14px; color: var(--text-2); }
.ts-card__price strong { font-size: 19px; color: var(--text); margin-inline-start: 6px; }
/* Not a link yet — a button that navigates nowhere teaches people to distrust
   the next one. */
.ts-card__cta { opacity: .55; cursor: default; }