/* ===================================================================
   ESIMSITE — Storefront Design System (Phase 2)
   Public-facing site only. Do NOT link this from templates/admin/*.
   Built with CSS custom properties so a rebrand is a small diff:
   swap the tokens in :root, nothing else needs to change.
   =================================================================== */

:root{
  /* ---- Brand palette: travel / connectivity (sky + teal) ---- */
  --color-primary:        #0F8AA8;
  --color-primary-dark:   #0B6C84;
  --color-primary-darker: #084F60;
  --color-primary-light:  #E4F5F9;
  --color-primary-tint:   #F0FAFC;
  --color-accent:         #FF7A50;
  --color-accent-dark:    #E85F35;
  --color-accent-light:   #FFF0EA;

  /* ---- Semantic ---- */
  --color-success:      #0E9F6E;
  --color-success-bg:   #E5F9F0;
  --color-warning:      #D97706;
  --color-warning-bg:   #FEF3C7;
  --color-danger:       #DC2626;
  --color-danger-bg:    #FEE2E2;
  --color-info:         #2563EB;
  --color-info-bg:      #E8F0FE;

  /* ---- Neutrals ---- */
  --color-ink:        #0F2430;
  --color-text:       #1C2E36;
  --color-text-muted: #5B7480;
  --color-text-faint: #8CA2AB;
  --color-bg:         #F6FAFB;
  --color-surface:    #FFFFFF;
  --color-border:     #DEEBEF;
  --color-border-soft:#EDF4F6;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radius / shadow ---- */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15,36,48,.06), 0 1px 1px rgba(15,36,48,.04);
  --shadow-md: 0 8px 24px rgba(15,36,48,.09);
  --shadow-lg: 0 20px 48px rgba(15,36,48,.14);

  --container-max: 1180px;
  --transition: 160ms ease;
}

/* ===================================================================
   Reset & base
   =================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--color-primary-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ line-height:1.25; margin:0 0 var(--space-3); color:var(--color-ink); font-weight:800; letter-spacing:-.01em; }
h1{ font-size:clamp(1.6rem, 1.2rem + 2vw, 2.5rem); }
h2{ font-size:clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
h3{ font-size:1.05rem; }
p{ margin:0 0 var(--space-3); }
ul{ margin:0; padding:0; }
button{ font-family:inherit; }

.site-main{ display:block; }
.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--space-4) var(--space-7);
}
.container-narrow{ max-width:680px; }
.section{ padding:var(--space-6) 0; }
.text-center{ text-align:center; }
.text-muted{ color:var(--color-text-muted); }
.text-faint{ color:var(--color-text-faint); }
.mt-0{ margin-top:0 !important; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===================================================================
   Header / Nav
   =================================================================== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--color-border);
}
.nav-bar{
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--space-3) var(--space-4);
  display:flex;
  align-items:center;
  gap:var(--space-4);
}
.brand{
  display:flex; align-items:center; gap:var(--space-2);
  font-weight:800; font-size:1.15rem; color:var(--color-ink);
  margin-right:auto;
  white-space:nowrap;
}
.brand:hover{ text-decoration:none; }
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color:#fff; font-size:1.05rem; box-shadow:var(--shadow-sm);
}
.nav-links{
  display:flex; align-items:center; gap:var(--space-5);
  list-style:none;
}
.nav-links a{
  color:var(--color-text); font-weight:600; font-size:.94rem;
}
.nav-links a:hover{ color:var(--color-primary-dark); text-decoration:none; }
.nav-cta{
  background:var(--color-primary); color:#fff !important; padding:9px 18px;
  border-radius:var(--radius-pill); font-weight:700;
}
.nav-cta:hover{ background:var(--color-primary-dark); }
.nav-toggle{
  display:none; border:1px solid var(--color-border); background:#fff;
  border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center;
  cursor:pointer; margin-left:auto;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content:""; }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after{
  display:block; width:18px; height:2px; background:var(--color-ink); position:relative; border-radius:2px;
}
.nav-toggle-icon::before, .nav-toggle-icon::after{ content:""; position:absolute; left:0; }
.nav-toggle-icon::before{ top:-6px; }
.nav-toggle-icon::after{ top:6px; }

@media (max-width:820px){
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--color-border);
    flex-direction:column; align-items:stretch; gap:0;
    padding:var(--space-2) var(--space-4) var(--space-4);
    display:none;
    box-shadow:var(--shadow-md);
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding:var(--space-3) 0; border-bottom:1px solid var(--color-border-soft); }
  .nav-cta{ text-align:center; margin-top:var(--space-2); }
  .nav-toggle{ display:inline-flex; }
}

/* Breadcrumbs */
.breadcrumbs{
  max-width:var(--container-max); margin:0 auto; padding:var(--space-3) var(--space-4) 0;
  font-size:.85rem; color:var(--color-text-muted);
}
.breadcrumbs a{ color:var(--color-text-muted); }
.breadcrumbs a:hover{ color:var(--color-primary-dark); }
.breadcrumbs .sep{ margin:0 var(--space-1); color:var(--color-text-faint); }
.breadcrumbs .current{ color:var(--color-text); font-weight:600; }

/* ===================================================================
   Hero
   =================================================================== */
.hero{
  background:
    radial-gradient(1200px 420px at 15% -10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 60%, var(--color-primary-darker) 100%);
  color:#fff;
  padding:var(--space-8) 0 var(--space-7);
}
.hero-inner{ max-width:var(--container-max); margin:0 auto; padding:0 var(--space-4); }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16); padding:6px 14px; border-radius:var(--radius-pill);
  font-size:.8rem; font-weight:700; letter-spacing:.02em; margin-bottom:var(--space-4);
}
.hero h1{ color:#fff; max-width:720px; }
.hero p.lead{ color:rgba(255,255,255,.88); max-width:560px; font-size:1.05rem; }
.hero-stats{ display:flex; gap:var(--space-6); flex-wrap:wrap; margin-top:var(--space-5); }
.hero-stat strong{ display:block; font-size:1.3rem; }
.hero-stat span{ color:rgba(255,255,255,.8); font-size:.85rem; }

.search-card{
  background:var(--color-surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:var(--space-4);
  margin-top:var(--space-6);
  display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:flex-end;
}
.search-card .field{ flex:2; min-width:220px; }
.search-card .field.select-field{ flex:1; min-width:180px; }
.search-card label{ color:var(--color-text-muted); }

/* ===================================================================
   Forms
   =================================================================== */
.form-group{ margin-bottom:var(--space-4); }
label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; color:var(--color-ink); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="url"], input[type="search"], select, textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm); font-size:.95rem; font-family:inherit;
  background:#fff; color:var(--color-text); transition:border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--color-primary);
  box-shadow:0 0 0 4px var(--color-primary-light);
}
::placeholder{ color:var(--color-text-faint); }
.form-row{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.form-row .form-group{ flex:1; min-width:180px; }

/* ===================================================================
   Buttons
   =================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-pill);
  border:1.5px solid var(--color-primary); background:var(--color-primary); color:#fff;
  font-weight:700; font-size:.95rem; text-decoration:none; cursor:pointer;
  transition:background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  line-height:1.2;
}
.btn:hover{ background:var(--color-primary-dark); border-color:var(--color-primary-dark); text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn:active{ transform:translateY(0); }
.btn-block{ width:100%; }
.btn-lg{ padding:15px 28px; font-size:1.02rem; }
.btn-sm{ padding:8px 16px; font-size:.85rem; }
.btn-secondary{ background:#fff; color:var(--color-primary-dark); border-color:var(--color-border); }
.btn-secondary:hover{ background:var(--color-primary-tint); border-color:var(--color-primary); color:var(--color-primary-dark); }
.btn-accent{ background:var(--color-accent); border-color:var(--color-accent); }
.btn-accent:hover{ background:var(--color-accent-dark); border-color:var(--color-accent-dark); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--color-primary-dark); }
.btn-ghost:hover{ background:var(--color-primary-tint); }
.btn-danger{ background:var(--color-danger); border-color:var(--color-danger); }
.btn-danger:hover{ background:#b91c1c; border-color:#b91c1c; }
.btn[disabled], .btn.is-disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

/* ===================================================================
   Cards / surfaces
   =================================================================== */
.card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--space-5); margin-bottom:var(--space-5);
  box-shadow:var(--shadow-sm);
}
.card h2{ margin-bottom:var(--space-4); }
.card-tight{ padding:var(--space-4); }

/* Definition list (replaces plain <table> for key/value summaries) */
.summary-list{ list-style:none; margin:0; padding:0; }
.summary-list li{
  display:flex; justify-content:space-between; gap:var(--space-4);
  padding:11px 0; border-bottom:1px solid var(--color-border-soft);
  font-size:.94rem;
}
.summary-list li:last-child{ border-bottom:none; }
.summary-list .k{ color:var(--color-text-muted); }
.summary-list .v{ font-weight:700; color:var(--color-ink); text-align:right; }
.summary-list li.total .v{ color:var(--color-primary-dark); font-size:1.1rem; }

/* ===================================================================
   Badges
   =================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:var(--radius-pill);
  font-size:.72rem; font-weight:800; letter-spacing:.01em; text-transform:uppercase;
  background:var(--color-border-soft); color:var(--color-text-muted);
}
.badge-success{ background:var(--color-success-bg); color:var(--color-success); }
.badge-warning{ background:var(--color-warning-bg); color:var(--color-warning); }
.badge-danger { background:var(--color-danger-bg); color:var(--color-danger); }
.badge-info   { background:var(--color-info-bg); color:var(--color-info); }
.badge-accent { background:var(--color-accent-light); color:var(--color-accent-dark); }
.badge-primary{ background:var(--color-primary-light); color:var(--color-primary-dark); }

/* ===================================================================
   Star rating
   =================================================================== */
.stars{ color:#F5A623; letter-spacing:1px; font-size:.95rem; white-space:nowrap; }
.stars .off{ color:var(--color-border); }
.rating-line{ display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--color-text-muted); }

/* ===================================================================
   Package / country cards + grids
   =================================================================== */
.grid{
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.grid-countries{ grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }

.pkg-card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-2);
  box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position:relative;
}
.pkg-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-primary); text-decoration:none; }
.pkg-card-top{ display:flex; align-items:center; gap:10px; }
.pkg-flag{ font-size:1.7rem; line-height:1; }
.pkg-card-title{ font-weight:800; color:var(--color-ink); font-size:.98rem; flex:1; }
.pkg-card-country{ color:var(--color-text-muted); font-size:.83rem; }
.pkg-card-meta{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:2px; }
.pkg-card-footer{
  margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--color-border-soft);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.pkg-price{ font-size:1.15rem; font-weight:800; color:var(--color-ink); }
.pkg-price small{ font-weight:600; color:var(--color-text-muted); font-size:.72rem; }

.country-card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--space-4);
  text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  color:var(--color-text);
}
.country-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-primary); text-decoration:none; }
.country-card .pkg-flag{ font-size:2.1rem; }
.country-card .name{ font-weight:700; color:var(--color-ink); font-size:.92rem; }
.country-card .from{ font-size:.78rem; color:var(--color-text-muted); }

/* ===================================================================
   Filter / toolbar
   =================================================================== */
.filter-bar{
  display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:flex-end;
}
.filter-bar .field{ flex:2; min-width:200px; margin-bottom:0; }
.filter-bar .field.select-field{ flex:1; min-width:160px; margin-bottom:0; }
.filter-bar .submit-field{ margin-bottom:0; }

.section-heading{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);
  flex-wrap:wrap; margin-bottom:var(--space-4);
}
.section-heading h2{ margin:0; }

/* ===================================================================
   Notices
   =================================================================== */
.notice{
  padding:13px 16px; border-radius:var(--radius-sm); margin-bottom:var(--space-4);
  font-size:.9rem; border:1px solid transparent;
}
.notice-error  { background:var(--color-danger-bg); color:#7f1d1d; border-color:#fecaca; }
.notice-success{ background:var(--color-success-bg); color:#065f46; border-color:#bbf3dc; }
.notice-info   { background:var(--color-info-bg); color:#1e3a8a; border-color:#c7d9fb; }
.notice-warning{ background:var(--color-warning-bg); color:#78350f; border-color:#fde3ac; }

/* ===================================================================
   Pagination
   =================================================================== */
.pagination{ display:flex; align-items:center; justify-content:center; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; }
.pagination a, .pagination span.current{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px; border-radius:var(--radius-pill);
  border:1px solid var(--color-border); font-weight:700; font-size:.86rem; color:var(--color-text);
}
.pagination a:hover{ border-color:var(--color-primary); color:var(--color-primary-dark); text-decoration:none; }
.pagination span.current{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

/* ===================================================================
   Trust strip / badges row
   =================================================================== */
.trust-strip{
  display:flex; gap:var(--space-6); flex-wrap:wrap; justify-content:center;
  padding:var(--space-5) 0; color:var(--color-text-muted); font-size:.85rem;
}
.trust-strip .item{ display:flex; align-items:center; gap:8px; font-weight:600; }
.trust-strip .item .ico{ font-size:1.2rem; }

/* ===================================================================
   Activation / QR block (order-result) — function over form
   =================================================================== */
.activation-card{
  background:linear-gradient(180deg, var(--color-primary-tint), #fff 55%);
  border:1.5px solid var(--color-primary-light);
  border-radius:var(--radius-lg); padding:var(--space-5);
}
.activation-grid{ display:flex; gap:var(--space-6); flex-wrap:wrap; align-items:flex-start; }
.activation-qr{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-3); box-shadow:var(--shadow-sm); flex:0 0 auto;
}
.activation-qr img{ width:220px; height:220px; border-radius:var(--radius-sm); }
.activation-details{ flex:1; min-width:260px; }
.code-field{ margin-bottom:var(--space-3); }
.code-field .k{
  display:block; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--color-text-muted); margin-bottom:4px;
}
.code-value{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  padding:11px 13px; font-family:var(--font-mono); font-size:.92rem; color:var(--color-ink);
  word-break:break-all; user-select:all;
}
.copy-btn{
  border:1px solid var(--color-border); background:#fff; border-radius:8px;
  padding:6px 10px; font-size:.78rem; font-weight:700; cursor:pointer; color:var(--color-primary-dark);
  flex:0 0 auto;
}
.copy-btn:hover{ background:var(--color-primary-tint); }

/* ===================================================================
   Sticky mobile buy bar (package detail)
   =================================================================== */
.buy-bar{ display:none; }
@media (max-width:720px){
  .buy-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:#fff; border-top:1px solid var(--color-border);
    padding:var(--space-3) var(--space-4); align-items:center; gap:var(--space-3);
    box-shadow:0 -8px 24px rgba(15,36,48,.10);
    padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom));
  }
  .buy-bar .price{ font-weight:800; color:var(--color-ink); flex:0 0 auto; }
  .buy-bar .price small{ display:block; color:var(--color-text-muted); font-weight:600; font-size:.7rem; }
  .buy-bar .btn{ flex:1; }
  /* keep room at the bottom of the page so the bar never covers content */
  body{ padding-bottom:76px; }
}

/* ===================================================================
   Footer
   =================================================================== */
.site-footer{
  background:var(--color-primary-darker); color:rgba(255,255,255,.82);
  margin-top:var(--space-7);
}
.footer-inner{
  max-width:var(--container-max); margin:0 auto; padding:var(--space-7) var(--space-4) var(--space-5);
  display:grid; gap:var(--space-6);
  grid-template-columns:1.4fr 1fr 1fr;
}
.footer-brand{ display:flex; align-items:center; gap:10px; font-weight:800; color:#fff; font-size:1.1rem; margin-bottom:var(--space-3); }
.footer-col h4{ color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--space-3); }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:rgba(255,255,255,.78); font-size:.9rem; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding:var(--space-4);
  text-align:center; font-size:.8rem; color:rgba(255,255,255,.6);
}
@media (max-width:820px){
  .footer-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-inner{ grid-template-columns:1fr; }
}

/* ===================================================================
   Misc utilities used across pages
   =================================================================== */
.columns-2{ columns:2; }
@media (max-width:600px){ .columns-2{ columns:1; } }
.divider{ height:1px; background:var(--color-border-soft); margin:var(--space-4) 0; border:none; }
.empty-state{ text-align:center; padding:var(--space-7) var(--space-4); }
.empty-state .ico{ font-size:2.4rem; margin-bottom:var(--space-3); }

@media (max-width:600px){
  .container{ padding:0 var(--space-3) var(--space-6); }
  .hero{ padding:var(--space-6) 0 var(--space-6); }
  .footer-inner{ padding:var(--space-6) var(--space-3) var(--space-4); }
}


/* Premium geography visuals */
.flag-shell{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#fff,#eef6f8);border:1px solid rgba(18,123,148,.12);box-shadow:0 10px 24px rgba(15,36,48,.10);display:inline-flex!important;align-items:center;justify-content:center;overflow:hidden;flex:0 0 48px}
.flag-shell img{width:100%;height:100%;object-fit:cover;display:block}
.country-card{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.country-card:after{content:"";position:absolute;inset:auto -30px -45px auto;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(34,166,196,.15),transparent 70%)}
.country-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,36,48,.12);border-color:rgba(34,166,196,.4)}
.pkg-card{transition:transform .2s ease,box-shadow .2s ease}
.pkg-card:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(15,36,48,.14)}


/* Rich multilingual eSIM destination content */
.esim-rich-content,.rich-seo-card{font-size:16px;line-height:1.75}
.esim-rich-content p,.esim-rich-content li,.rich-seo-card p,.rich-seo-card li{font-size:16px;line-height:1.75}
.esim-rich-content h2{margin-top:1.75rem;margin-bottom:.75rem}
.esim-rich-content .lead{font-size:1.08rem;color:var(--color-ink)}
.rich-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 1.25rem;padding-left:1.25rem}
.rich-specs{padding:1rem;border:1px solid var(--color-border-soft);border-radius:var(--radius-sm);background:var(--color-surface-soft)}
.faq-list details{border-bottom:1px solid var(--color-border-soft);padding:.8rem 0}
.faq-list summary{cursor:pointer;font-weight:750;color:var(--color-ink)}
.faq-list details p{margin:.65rem 0 0}
.seo-related a,.esim-rich-content a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.rich-benefits{grid-template-columns:1fr}.esim-rich-content,.rich-seo-card,.esim-rich-content p,.esim-rich-content li{font-size:16px}}


/* Flagpedia / FlagCDN country flag integration */
.country-flag{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 1px 3px rgba(15,23,42,.16);background:#f8fafc;vertical-align:middle}
.country-flag img{display:block;width:100%;height:100%;object-fit:cover}
.country-flag--xs{width:20px;height:15px;border-radius:3px}
.country-flag--sm{width:40px;height:30px}
.country-flag--md{width:56px;height:42px}
.country-flag--lg{width:80px;height:60px}
.country-flag--xl{width:160px;height:120px}
.country-flag--fallback{font-size:1.4rem;background:transparent;box-shadow:none}
.pkg-flag:has(.country-flag), .pkg-flag.country-flag{font-size:0}
.pkg-card-top .country-flag{margin-right:2px}
.country-card .country-flag{width:64px;height:48px;border-radius:7px}
@media (max-width:640px){.country-flag--md{width:48px;height:36px}.country-card .country-flag{width:56px;height:42px}}