/* ============================================================
   Wyra /esim — conversion layout: slim hero + ONE dominant purchase
   panel (8 region tiles + country search + global → real plans) + trust
   strip + carrier marquee. Palette inlined; namespaces .etrust- .esim-panel
   .esim-rtile .ecarrier-. The panel REPLACES the old plain picker (no dup).
   ============================================================ */

/* La trust-strip se sacó (16-jul, acercar a mockup v6). Su altura se reservaba acá en 36px y el
   nav se posicionaba DEBAJO (inset-block-start: ribbon-h + ts-h). Al sacar la strip pero dejar
   ts-h=36, el nav quedaba flotando 36px más abajo de lo debido y TAPABA el eyebrow del hero
   ("Wyra Mobile · Viaje", medido: nav 81-153 cubría el eyebrow 121-150). En 0 el nav sube a ras
   del ribbon y el eyebrow queda limpio. */
:root { --ts-h: 0px; }

/* ---------- top trust strip (honest signals; fixed height so the nav can offset under it) ---------- */
.etrust-strip{background:#0A1A2E;color:#fff;height:var(--ts-h);position:relative;z-index:90}
.etrust-inner{max-width:1200px;margin:0 auto;height:100%;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:20px;font-size:12px;font-weight:500;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.etrust-inner::-webkit-scrollbar{display:none}
.etrust-item{display:inline-flex;align-items:center;gap:7px;color:#cfe0ec;flex:none}
.etrust-ico{color:#4DDDF0;font-size:13px;line-height:1}
.etrust-sep{width:4px;height:4px;border-radius:50%;background:rgba(207,224,236,.4);flex:none}

/* ---------- hero AT&T-style: split editorial (copy izq + foto der) ----------
   Reemplaza el hero slim centrado por un split de 2 columnas: texto+checklist a la
   izquierda, foto lifestyle con card flotante a la derecha. TODO el CSS del hero vive
   ACÁ (esim-hero.css es exclusivo de /esim) — las reglas .esim-hero-* que estaban en el
   <style> inline se BORRARON para no dejar viejo peleando con nuevo. */
.hero.esim-hero-att{max-width:1120px;margin:0 auto;padding-block-start:72px;padding-block-end:24px;padding-inline:clamp(16px,5vw,24px)}
.esim-hero-att .esim-hero{max-inline-size:none;margin:0}
.esim-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,48px);align-items:center}
.esim-hero-copy{text-align:left;min-width:0}
.esim-hero-att .esim-hero-eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--wyra-cyan-mist);color:var(--wyra-cyan-deep);border:1px solid var(--wyra-cyan);border-radius:999px;padding:6px 14px;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px}
.esim-hero-att .esim-hero-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.12;letter-spacing:-.02em;color:#0d1117;max-inline-size:none;margin:0 0 20px}
.esim-hero-check{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:11px}
.esim-hero-check li{display:flex;gap:11px;align-items:flex-start;font-family:var(--font-body);font-size:15.5px;line-height:1.4;color:var(--text-primary);font-weight:500}
.esim-hero-check li svg{flex:none;width:20px;height:20px;color:var(--wyra-cyan-deep);margin-top:1px}
.esim-hero-att .esim-hero-trust{font-family:var(--font-body);font-size:13px;line-height:1.6;color:var(--text-secondary);margin:0;max-inline-size:none}
.esim-hero-media{position:relative}
.esim-hero-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 70px -30px rgba(10,40,70,.4)}
.esim-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:46% 26%;display:block}
.esim-hero-floatcard{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:15px;padding:13px 15px;box-shadow:0 16px 36px -12px rgba(10,40,70,.5);max-width:252px}
.esim-hero-fc-top{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:12.5px;font-weight:700;color:#0d1117}
.esim-hero-fc-dot{width:9px;height:9px;border-radius:50%;background:#16b364;box-shadow:0 0 0 4px rgba(22,179,100,.15);flex:none}
.esim-hero-fc-num{font-family:var(--font-display);font-size:18px;font-weight:700;color:#0d1117;letter-spacing:-.01em;margin:7px 0 2px}
.esim-hero-fc-meta{font-family:var(--font-body);font-size:12px;color:#5a7286;font-weight:500}
@media(max-width:860px){
  .hero.esim-hero-att{padding-block-start:56px;padding-block-end:8px}
  .esim-hero-grid{grid-template-columns:1fr;gap:22px}
  .esim-hero-copy{text-align:center}
  .esim-hero-att .esim-hero-eyebrow{margin-inline:auto}
  .esim-hero-check{max-width:390px;margin-inline:auto;margin-bottom:18px}
  .esim-hero-check li{text-align:left}
  .esim-hero-photo{aspect-ratio:16/10;max-height:330px}
  .esim-hero-att .esim-hero-title{font-size:clamp(1.5rem,6vw,2rem)}
}
[dir="rtl"] .esim-hero-copy{text-align:right}
[dir="rtl"] .esim-hero-floatcard{left:auto;right:16px}

/* ---------- the dominant purchase panel ---------- */
.esim-panel{position:relative;max-width:640px;margin:0 auto;background:#fff;border:1px solid #E6F9FB;border-radius:22px;padding:22px;box-shadow:0 30px 70px -34px rgba(10,40,70,.4)}
.esim-panel-ribbon{position:absolute;top:-12px;right:22px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff;background:#00A3B5;padding:7px 13px;border-radius:999px;box-shadow:0 8px 20px -6px rgba(0,163,181,.55)}
.esim-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.esim-panel-title{font-family:'Syne',sans-serif;font-weight:700;font-size:20px;color:#0d1117;margin:0}
.esim-panel-step{font-size:12px;color:#8a9bb0;flex:none}
.esim-panel-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;font-size:12px;color:#8a9bb0}
.esim-panel-or::before,.esim-panel-or::after{content:"";flex:1;height:1px;background:#E6F9FB}
.esim-panel-compat{text-align:center;margin:14px 0 0}

/* move the panel up — kill the big section gap under the slim hero */
.hero.esim-hero-att + .esim-picker{padding-block-start:4px}

/* country search — make it read as a real input on the white panel (was white-on-white = invisible) */
.esim-panel .esim-picker-search{
  max-inline-size:none;margin:0 0 2px;min-block-size:46px;
  border:1.5px solid #d7e6ea;border-radius:12px;background:#FAFEFE;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9bb0' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:15px center;background-size:18px;
  padding-inline-start:44px;color:#0A1A2E;
}
.esim-panel .esim-picker-search:focus,.esim-panel .esim-picker-search:focus-visible{outline:none;border-color:#00C4D8;box-shadow:0 0 0 4px rgba(0,196,216,.13)}
[dir="rtl"] .esim-panel .esim-picker-search{background-position:right 15px center;padding-inline-start:14px;padding-inline-end:44px}

/* collapse "show more (N)" for long region/country plan lists */
.esim-plan-more{display:block;margin:12px auto 0;background:none;border:1px solid #d7e6ea;border-radius:999px;padding:9px 20px;font-family:inherit;font-size:13px;font-weight:600;color:#00A3B5;cursor:pointer;transition:background .15s,border-color .15s}
.esim-plan-more:hover{background:#F0FCFD;border-color:#00C4D8}
/* per-row coverage tag (multi-bundle regions: Europe vs Europe + US) */
.esim-plan-cov{display:inline-block;font-size:10.5px;font-weight:700;color:#0A1A2E;background:#EAF6F8;border:1px solid #d7e6ea;border-radius:999px;padding:2px 9px;line-height:1.3}
/* checkout: flag that the coupon drops the total at payment (the summary shows pre-discount) */
.osum-promo-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:600;color:#009668;background:#E8FAF2;border-radius:10px;padding:8px 12px;margin:0 0 14px;text-align:center}
/* fallback if the regional fetch is slow/fails — never a blank panel */
.esim-rtiles-fallback{grid-column:1/-1;text-align:center;font-size:13px;color:#5a7286;padding:16px 4px;margin:0}
/* detail header row (← Back + Step 2 of 2) */
.esim-detail-head{margin-bottom:8px}

/* ---------- region tiles (primary entry) ---------- */
.esim-region-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.esim-rtile{position:relative;overflow:hidden;cursor:pointer;font-family:inherit;border:none;padding:9px 10px;height:74px;border-radius:13px;display:flex;align-items:flex-end;box-shadow:0 0 0 1px #E6F9FB;transition:transform .15s,box-shadow .15s}
.esim-rtile:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px #00C4D8,0 10px 22px -12px rgba(0,196,216,.5)}
.esim-rtile:focus-visible{outline:2px solid #00C4D8;outline-offset:2px}
.esim-rtile-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.esim-rtile-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,46,.04),rgba(10,26,46,.84))}
.esim-rtile-txt{position:relative;z-index:2;text-align:left;line-height:1.1}
.esim-rtile-name{display:block;font-family:'Syne',sans-serif;font-weight:700;font-size:12.5px;color:#fff}
.esim-rtile-from{display:block;font-size:10px;color:rgba(255,255,255,.88);margin-top:3px}
@media(max-width:560px){.esim-region-tiles{grid-template-columns:1fr 1fr}.esim-rtile{height:70px}}

/* ---------- carrier marquee ---------- */
.ecarrier{padding:26px 0 30px;border-top:1px solid #E6F9FB;border-bottom:1px solid #E6F9FB;overflow:hidden;background:#fff;margin-top:26px}
.ecarrier-label{text-align:center;font-size:12px;letter-spacing:.13em;font-weight:600;color:#5a7286;margin:0 0 16px;text-transform:uppercase}
.ecarrier-track{display:flex;width:max-content;gap:50px;align-items:center;opacity:.72;animation:ecarriermarq 34s linear infinite}
.ecarrier-track img{height:25px;width:auto;object-fit:contain;flex:none}
@keyframes ecarriermarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ecarrier-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:24px 36px}}

[dir="rtl"] .esim-panel-ribbon{right:auto;left:22px}
[dir="rtl"] .esim-rtile-txt{text-align:right}