/* ==========================================================================
   /esim-for-umrah/  —  page stylesheet
   Loaded only by esim-for-umrah.php. Every class is prefixed u- so nothing can
   collide with mx-, pt-, gs-, ps- or Bootstrap.

   Type: the site's own faces. Plus Jakarta Sans for display, Inter for body,
   both already loaded by header.php, so this file adds no font requests.
   ========================================================================== */

.u{
  --u-ink:#171C42;        /* deep navy, headings and the dark bands */
  --u-body:#4E5D74;       /* body text */
  --u-line:#E9E1E4;
  --u-tint:#FBF8F9;       /* soft band */
  --u-pink:#E0417A;       /* brand accent */
  --u-pink-lt:#FFA8C4;    /* accent on dark grounds */
  --u-green:#0E7C5A;
  --u-green-bg:#E9F6F1;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}

/* ── shell ───────────────────────────────────────────────────────────────── */
.u-sec{padding:88px 0;background:#fff}
.u-sec--tint{background:var(--u-tint);border-top:1px solid var(--u-line)}
.u-sec--dark{background:var(--u-ink);color:#fff}
.u-sec--tight{padding:64px 0}
.u-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:640px){ .u-sec{padding:60px 0} }

/* ── on this page nav ────────────────────────────────────────────────────── */
.u-jump{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--u-line)}
.u-jump ul{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:26px;
  overflow-x:auto;list-style:none;scrollbar-width:none}
.u-jump ul::-webkit-scrollbar{display:none}
.u-jump a{display:block;padding:15px 0;white-space:nowrap;text-decoration:none;
  color:var(--u-pink);font-size:14px;font-weight:600}
.u-jump a:hover{color:var(--u-ink)}

/* ── type ────────────────────────────────────────────────────────────────── */
.u .u-eyebrow{letter-spacing:.16em;text-transform:uppercase;
  color:var(--u-pink);margin:0 0 12px;text-align:center;font-size:11px;font-weight:800}
.u .u-sec--dark .u-eyebrow,.u-sec--dark .u .u-eyebrow,.u-sec--dark .u-eyebrow{color:var(--u-pink-lt)}
.u h2{font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:clamp(22px,2.6vw,29px) !important;font-weight:700;letter-spacing:-.022em;
  line-height:1.32 !important;margin:0 auto 20px;color:var(--u-ink);max-width:26ch;
  text-wrap:balance;
  text-align:center}
.u-sec--dark h2{color:#fff}
.u h3{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:18px !important;
  font-weight:800;line-height:1.4 !important;margin:0 0 9px;color:var(--u-ink);letter-spacing:-.015em}
.u-sec--dark h3{color:#fff}
/* Buzz: headings centred, body text out to the page width. The measure caps were
   leaving a large empty right hand side on every section. */
.u .u-lede{font-size:16px;line-height:1.75;color:var(--u-body);margin:0 auto 8px;
  max-width:none;text-align:center}
.u-sec--dark .u-lede{color:#C7CCE0}
.u p{font-size:16px;line-height:1.8;color:var(--u-body);margin:0 0 16px;max-width:none}
.u-sec--dark p{color:#C7CCE0}
.u p:last-child{margin-bottom:0}
.u strong{color:var(--u-ink);font-weight:700}
.u-sec--dark strong{color:#fff}
.u a{color:var(--u-pink);font-weight:600}

/* ── two column: prose left, cards right ─────────────────────────────────── */
.u-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:stretch;margin-top:8px}
/* a centred lede only reads right as a full width section intro; inside a narrow
   split column it should follow the body copy beneath it. */
.u .u-split .u-lede{text-align:left}
@media (max-width:900px){ .u-split{grid-template-columns:1fr;gap:32px} }

/* ── cards ───────────────────────────────────────────────────────────────── */
/* The card column is the taller of the two, so aligning the last card to the green
   callout means pushing the callout down, not pulling the cards up. The prose column
   becomes a flex column and the callout takes the remaining space. */
.u-cards{display:grid;gap:14px;align-content:space-between}
.u-split>div:first-child{display:flex;flex-direction:column}
.u-split>div:first-child .u-note{margin-top:auto;margin-bottom:0}
.u-card{background:#fff;border:1px solid var(--u-line);border-radius:18px;padding:20px 22px}
.u-card h3{font-size:15px !important;margin:0 0 5px}
.u-card p{font-size:14.5px;line-height:1.65;margin:0}
.u-card--dark{background:var(--u-ink);border-color:var(--u-ink)}
.u-card--dark h3{color:#fff}
.u-card--dark p{color:#C7CCE0}

/* three across, for the mosque WiFi block */
.u-three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.u-three article{background:#fff;border:1px solid var(--u-line);border-radius:20px;padding:28px 26px}
.u-three h3{font-size:17px !important;margin:0 0 10px}
.u-three .u-masjid{margin:0 auto 16px}
.u-three p{font-size:14.5px;line-height:1.7;margin:0}
@media (max-width:900px){ .u-three{grid-template-columns:1fr} }

/* ── the masjid mark. Used only where the subject is the mosque itself:
      the WiFi cards and the closing call to action. Not as generic decoration. ── */
.u-masjid{display:block;width:28px;height:28px;background:var(--u-pink);flex-shrink:0;
  -webkit-mask:url(/assets/img/masjid-icon.png) center/contain no-repeat;
          mask:url(/assets/img/masjid-icon.png) center/contain no-repeat;
  margin:0 0 16px}
.u-masjid--lt{background:var(--u-pink-lt);width:34px;height:34px;margin:0 auto 20px}

/* ── affirmative callout ─────────────────────────────────────────────────── */
.u-note{margin-top:24px;padding:20px 22px;border-radius:16px;
  background:var(--u-green-bg);border:1px solid #CBE7DC}
.u-note b{display:block;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px;font-weight:700;color:#0B3F2E;margin-bottom:5px}
.u-note p{font-size:14.5px;line-height:1.65;color:#356156;margin:0;max-width:none}

/* ── routing chain, four stops ───────────────────────────────────────────── */
.u-chain{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:40px 0 34px}
.u-chain div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:22px 20px}
.u-chain div:nth-child(3){border-color:var(--u-pink-lt);background:rgba(224,65,122,.14)}
.u-chain span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--u-pink-lt);margin-bottom:10px}
.u-chain p{font-size:14.5px;line-height:1.65;color:#C7CCE0;margin:0}
@media (max-width:900px){ .u-chain{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .u-chain{grid-template-columns:1fr} }

.u-pull{border-left:3px solid var(--u-pink-lt);padding-left:22px;max-width:none}
.u-pull p:first-child{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:17px;
  font-weight:700;color:#fff;line-height:1.45;margin-bottom:12px}

/* ── the one real number ─────────────────────────────────────────────────── */
.u-stat{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  margin:32px 0;padding:30px 32px;border-radius:22px;
  border:1px solid var(--u-line);background:var(--u-tint)}
.u .u-stat-n{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;
  font-size:clamp(32px,4vw,44px);line-height:.95;letter-spacing:-.03em;color:var(--u-pink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.u .u-stat-n small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--u-body);margin-top:10px}
.u-stat p{margin:0}
@media (max-width:620px){ .u-stat{grid-template-columns:1fr;gap:18px;padding:24px} }

/* ── tables ──────────────────────────────────────────────────────────────── */
.u-tbl{margin:32px 0;border:1px solid var(--u-line);border-radius:18px;
  overflow-x:auto;background:#fff}
.u-tbl table{width:100%;border-collapse:collapse;font-size:14.5px}
.u-tbl caption{caption-side:top;text-align:left;padding:16px 20px 0;font-size:13px;
  color:var(--u-body)}
.u-tbl th,.u-tbl td{padding:14px 20px;text-align:left;vertical-align:top}
.u-tbl thead th{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--u-body);background:var(--u-tint);border-bottom:1px solid var(--u-line);white-space:nowrap}
.u-tbl tbody tr+tr th,.u-tbl tbody tr+tr td{border-top:1px solid var(--u-line)}
.u-tbl tbody th{font-weight:600;color:var(--u-ink)}
.u-tbl td{color:var(--u-body)}
.u-tbl .u-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.u-tbl .u-us{background:rgba(224,65,122,.045)}
.u-tbl thead .u-us{background:rgba(224,65,122,.09);color:var(--u-pink)}
.u-tbl .u-us small{display:block;font-size:10px;letter-spacing:.06em;font-weight:700;
  color:var(--u-pink);text-transform:uppercase;margin-top:3px}
/* the summary row belongs to the comparison table only; unscoped it made the last
   row of the plan matrix read as a totals row */
.u-tbl--sum tbody tr:last-child th,.u-tbl--sum tbody tr:last-child td{font-weight:700;
  color:var(--u-ink);background:var(--u-tint)}
@media (max-width:640px){ .u-tbl table{min-width:560px} }

/* ── plan matrix tabs ────────────────────────────────────────────────────── */
.u-tabs{display:flex;gap:8px;margin:26px 0 0;flex-wrap:wrap}
.u-tabs button{border:1px solid var(--u-line);background:#fff;border-radius:999px;
  padding:10px 20px;font:inherit;font-size:14px;font-weight:700;color:var(--u-body);cursor:pointer}
.u-tabs button[aria-selected="true"]{background:var(--u-ink);border-color:var(--u-ink);color:#fff}
.u-matrix td{font-variant-numeric:tabular-nums}
.u-matrix .u-na{color:#B6BECD}

/* ── numbered steps on the dark band ─────────────────────────────────────── */
.u-steps{list-style:none;counter-reset:ustep;margin:36px 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.u-steps li{counter-increment:ustep;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px 20px}
.u-steps li::before{content:counter(ustep,decimal-leading-zero);display:block;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13px;font-weight:800;
  color:var(--u-pink-lt);margin-bottom:12px;font-variant-numeric:tabular-nums}
.u-steps h3{font-size:15px !important;margin:0 0 7px;line-height:1.3}
.u-steps p{font-size:14px;line-height:1.65;color:#C7CCE0;margin:0}
@media (max-width:1040px){ .u-steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .u-steps{grid-template-columns:1fr} }

/* ── verdict pair ────────────────────────────────────────────────────────── */
.u-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.u-pair>div{background:#fff;border:1px solid var(--u-line);border-radius:20px;padding:26px}
.u-pair>div:last-child{border-color:var(--u-pink);background:rgba(224,65,122,.04)}
@media (max-width:760px){ .u-pair{grid-template-columns:1fr} }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.u-faq{margin-top:26px;border-top:1px solid var(--u-line)}
.u-faq details{border-bottom:1px solid var(--u-line)}
.u-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;font-weight:700;
  color:var(--u-ink)}
.u-faq summary::-webkit-details-marker{display:none}
.u-faq summary::after{content:'';flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--u-pink);border-bottom:2px solid var(--u-pink);
  transform:rotate(45deg);transition:transform .2s}
.u-faq details[open] summary::after{transform:rotate(-135deg)}
.u-faq p{padding:0 0 22px;margin:0;max-width:none}

/* ── closing call to action ──────────────────────────────────────────────── */
.u-close{background:linear-gradient(135deg,#10142F 0%,#2C1E4F 48%,#B4356A 100%);
  color:#fff;padding:84px 0;text-align:center}
.u-close h2{color:#fff;max-width:22ch;margin:0 auto 18px}
.u-close p{color:#D9CFE4;margin-left:auto;margin-right:auto;max-width:62ch}
.u-close .u-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:28px 0 22px}
.u-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;
  border-radius:999px;text-decoration:none;font-weight:700;font-size:15px}
.u-btn--p{background:#fff;color:#10142F}
.u-btn--g{border:1px solid rgba(255,255,255,.45);color:#fff}
.u-trust{display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;list-style:none;
  padding:0;margin:0 0 22px;font-size:14px;color:#D9CFE4}
.u-trust li::before{content:'✓';color:var(--u-pink-lt);font-weight:800;margin-right:8px}
.u-close .u-onward{font-size:14px;color:#BFB2CC;margin:0}
.u-close .u-onward a{color:#fff}

@media (prefers-reduced-motion:reduce){ .u-faq summary::after{transition:none} }

/* ══ Buzz round 3 ══════════════════════════════════════════════════════════ */

/* jump nav as a centred menu rather than a left aligned strip */
.u-jump--menu ul{justify-content:center;gap:6px}
.u-jump--menu a{padding:14px 14px;border-radius:999px;font-size:14px;
  transition:background .15s,color .15s}
.u-jump--menu a:hover,.u-jump--menu a:focus-visible{background:rgba(224,65,122,.09);color:var(--u-pink)}
@media (max-width:900px){ .u-jump--menu ul{justify-content:flex-start} }

/* the operator column groups the three networks without repeating the name */
.u-tbl tbody tr.u-grp th,.u-tbl tbody tr.u-grp td{border-top:2px solid var(--u-line)}
.u-tbl tbody th:empty{border-top-color:transparent}

/* the one real number, as a two panel card with the figure on green */
.u .u-stat{grid-template-columns:minmax(190px,auto) 1fr;gap:0;padding:0;overflow:hidden;
  background:#fff;align-items:stretch}
.u .u-stat-n{display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:var(--u-green-bg);padding:34px 28px;margin:0;text-align:center;color:var(--u-green)}
.u .u-stat-n b{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;
  font-size:clamp(32px,4vw,44px);line-height:1;letter-spacing:-.03em;color:#0B3F2E;
  font-variant-numeric:tabular-nums}
.u .u-stat-n small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#3D7A66;margin-top:10px}
.u-stat>p:last-child{padding:30px 32px;margin:0}
@media (max-width:620px){
  .u .u-stat{grid-template-columns:1fr}
  .u .u-stat-n{padding:26px}
  .u-stat>p:last-child{padding:24px}
}

/* the three way comparison, borrowed from the product pages, hosted here */
.u-opts{margin:14px 0 26px}
.u-opts .mx-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){ .u-opts .mx-opts{grid-template-columns:1fr} }
.u .u-lede--sub{margin-top:44px}

/* refund cards reuse .u-three, with a circular icon instead of the mosque mark */
.u-three--refund article{padding:26px 24px}
.u-rfic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;background:var(--u-green-bg);color:var(--u-green);margin-bottom:14px;font-size:17px}

/* onward destination pills, centred */
.u-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.u-pills .onward-pill{display:inline-flex;align-items:center;gap:8px}
.u-pills img{width:18px;height:auto;border-radius:2px}

/* the shared reviews renderer sets its own heading size; hold it to the page scale */
.u .gs-reviews-section h2,.u .mx-rvsec h2{font-size:29px !important;font-weight:700;
  letter-spacing:-.022em;line-height:1.32 !important;text-align:center;margin-left:auto;margin-right:auto}

/* product.js renders the info-tab card copy at 12px. That is borderline on a phone,
   so lift it here without touching the shared component other pages use. */
.u #info-features p,.u #info-description p,.u #info-rules p,
.u .mx-feat span,.u .mx-spec p{font-size:14px !important;line-height:1.6}
@media (max-width:640px){
  .u #info-features p,.u #info-description p,.u #info-rules p,
  .u .mx-feat span,.u .mx-spec p{font-size:14.5px !important}
}

/* provenance / caveat line under a table */
.u .u-src{font-size:14px;line-height:1.7;color:var(--u-body);opacity:.85;margin-top:18px}
.u-tbl caption{line-height:1.6;padding-bottom:4px}