:root{
  --brand:#0360ff;         /* primary electric blue (from logo) */
  --brand-2:#009aff;        /* azure highlight (from logo globe) */
  --brand-deep:#0349cc;     /* the brand blue darkened enough to read on a light tint */
  --ink:#0a1430;           /* deep navy-black text (from logo wordmark) */
  --muted:#64748b;
  --bg:#f6f8fc;
  --card:#ffffff;
  --line:#e7ecf5;
  --radius:16px;
  --shadow:0 10px 30px rgba(13,27,62,.08);
}
*{box-sizing:border-box}
body{
  font-family:'Plus Jakarta Sans',system-ui,Segoe UI,Tahoma,sans-serif;
  color:var(--ink); background:var(--bg); margin:0;
}
body.rtl{font-family:'Cairo','Segoe UI',Tahoma,sans-serif}
a{text-decoration:none;color:inherit}
.muted-2{color:var(--muted)}

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .container{min-height:68px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:8px}
.header-actions{flex-wrap:wrap;justify-content:flex-end}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
.brand-logo{height:40px;width:auto;display:block}
.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.brand-mark.sm{width:30px;height:30px;font-size:15px}
.brand-name span{color:var(--brand)}
.main-nav{display:flex;gap:26px}
.main-nav a{color:#33405f;font-weight:600;font-size:15px}
.main-nav a:hover{color:var(--brand)}
.lang-form{margin:0}
.lang-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 13px;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink)}
.lang-btn:hover{border-color:var(--brand);color:var(--brand)}
.btn-login{background:var(--brand);color:#fff;padding:9px 18px;border-radius:10px;font-weight:700;font-size:14px}
.btn-login:hover{background:#0040dd;color:#fff}

/* Hero */
.hero{background:linear-gradient(135deg,#031a63,#0360ff 55%,#009aff);color:#fff;padding:64px 0 120px;position:relative;overflow:hidden}
.hero h1{font-size:46px;font-weight:800;line-height:1.12;margin:0 0 14px;max-width:680px}
.hero p{font-size:19px;opacity:.92;max-width:560px;margin:0 0 26px}
.hero-cta{display:inline-block;background:#fff;color:var(--brand);font-weight:800;padding:14px 26px;border-radius:12px;font-size:15.5px}
.hero-cta:hover{transform:translateY(-1px);color:var(--brand)}

/* Hero carousel */
.hero-carousel{position:relative}
.hero-slide{min-height:500px;display:flex;align-items:center;background-size:cover;
  background-position:center;color:#fff;padding:60px 0 116px;position:relative}
/* The scrim is its own layer so it can be mirrored. Baked into the inline background as a
   fixed 90deg gradient it always darkened the left, which in Arabic put the copy over the
   bright half of the photo and made it unreadable. */
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(to right,rgba(6,14,36,.9),rgba(6,14,36,.62) 42%,rgba(6,14,36,.18))}
body.rtl .hero-scrim{
  background:linear-gradient(to left,rgba(6,14,36,.9),rgba(6,14,36,.62) 42%,rgba(6,14,36,.18))}
.hero-slide>.container{position:relative;z-index:1}
.hero-slide h1,.hero-slide .hero-h{font-size:46px;font-weight:800;line-height:1.12;margin:0 0 16px;max-width:660px;
  letter-spacing:-.8px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-slide p{font-size:19px;max-width:540px;margin:0 0 28px;line-height:1.55;color:#dce6f8;
  text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-cta{display:inline-flex;align-items:center;gap:8px}
.hero-arrow{width:16px;height:16px;transition:transform .15s}
.hero-cta:hover .hero-arrow{transform:translateX(3px)}
body.rtl .hero-arrow{transform:scaleX(-1)}
body.rtl .hero-cta:hover .hero-arrow{transform:scaleX(-1) translateX(3px)}
/* Secondary action: outlined, so it reads as the quieter of the two. */
.hero-cta2{display:inline-block;border:1.5px solid rgba(255,255,255,.55);color:#fff;
  font-weight:700;padding:13px 24px;border-radius:12px;font-size:15px;transition:.15s}
.hero-cta2:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
/* Three proof points. Not a promise — each one restates a claim made further down the page. */
.hero-trust{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin:26px 0 0;padding:0}
.hero-trust li{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#c9d8f2}
.hero-trust svg{width:15px;height:15px;color:#6fb4ff;flex-shrink:0}
/* Indicators: the active one stretches into a bar, so the position in the set is readable
   at a glance instead of having to compare four dots by brightness. */
.hero-carousel .carousel-indicators{margin-bottom:84px;gap:8px}
.hero-carousel .carousel-indicators [data-bs-target]{width:9px;height:9px;border-radius:999px;
  border:none;margin:0;opacity:.45;background:#fff;transition:width .2s,opacity .2s}
.hero-carousel .carousel-indicators .active{width:28px;opacity:1}
/* Round buttons with drawn arrows, kept clear of the copy. */
.hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next{
  width:76px;opacity:1;align-items:center}
.hero-nav{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(10,20,48,.4);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);transition:.15s}
.hero-nav svg{width:20px;height:20px;display:block}
/* Bootstrap's RTL stylesheet swaps which side prev and next sit on, but not the glyph inside
   them — so in Arabic the button on the left pointed right. Mirror both. */
body.rtl .hero-nav svg{transform:scaleX(-1)}
.carousel-control-prev:hover .hero-nav,.carousel-control-next:hover .hero-nav{
  background:rgba(10,20,48,.72);border-color:#fff}
@media(max-width:680px){
  .hero-slide{min-height:430px;padding:44px 0 104px}
  .hero-slide h1,.hero-slide .hero-h{font-size:30px;letter-spacing:-.4px}
  .hero-slide p{font-size:16.5px;margin-bottom:22px}
  .hero-cta,.hero-cta2{padding:12px 20px;font-size:14.5px}
  .hero-trust{gap:8px 18px;margin-top:20px}
  .hero-trust li{font-size:12.5px}
}

/* Search box overlapping hero */
/* The card is a column: the field row, then — where the page has them — the filter row under
   a hairline. Searching and narrowing belong to each other, so they share one card rather than
   sitting as two blocks with page background between them. */
.search-card{max-width:720px;margin:-70px auto 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;position:relative;z-index:5;display:flex;flex-direction:column}
.search-card.has-tools{max-width:860px}
.search-main{display:flex;gap:10px;align-items:center}
.search-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.search-tools-gap{flex:1 1 auto}
.search-tools-count{font-size:13px;color:var(--muted);white-space:nowrap}
.search-card input{flex:1;border:1px solid var(--line);border-radius:11px;padding:14px 16px;font-size:16px;outline:none}
.search-card input:focus{border-color:var(--brand)}
.search-card button{background:var(--brand);color:#fff;border:none;border-radius:11px;padding:14px 26px;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}

/* Sections */
section.block{padding:46px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.section-head h2{font-size:27px;font-weight:800;margin:0}
.section-head .count{color:var(--muted);font-size:14px}
/* "View all" button at the end of a section heading. A pill rather than a bare link: the old
   grey text read as a caption and nobody would have taken it for something to press. The count
   lives in its own chip so the number is legible on its own. */
.see-all{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;padding-inline-start:8px;
  font-size:13.5px;font-weight:700;color:var(--ink);transition:.15s;white-space:nowrap}
.see-all:hover{border-color:#cfe0ff;box-shadow:0 3px 12px rgba(13,27,62,.07);color:var(--brand-deep)}
.see-all-n{background:#eef4ff;color:var(--brand-deep);border-radius:999px;padding:3px 10px;
  font-size:12.5px;font-weight:800;line-height:1.35}
.see-all-a{width:15px;height:15px;color:var(--muted);flex-shrink:0;transition:transform .15s}
.see-all:hover .see-all-a{color:var(--brand-deep);transform:translateX(2px)}
/* The padding is logical, so the chip keeps its tighter side in both directions. Only the
   chevron has to be told: in Arabic "onward" points the other way. */
body.rtl .see-all-a{transform:scaleX(-1)}
body.rtl .see-all:hover .see-all-a{transform:scaleX(-1) translateX(2px)}

/* Destination cards */
/* Destination card — a boarding pass. The price is torn off into its own stub behind a
   perforation, so the one number a traveller is looking for never has to be found inside a
   sentence. Everything is logical-direction (padding-inline, border-inline) so the stub
   lands on the correct side in Arabic without a second rule. */
/* Row gap is deliberately larger than the column gap. Rows of tickets read as a stack, and
   an equal gap made four rows of them look like one dense block. */
.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px 18px}
.dest-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:stretch;overflow:hidden;transition:.15s;box-shadow:0 2px 8px rgba(13,27,62,.05)}
.dest-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfe0ff}
.dest-main{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0;
  padding:16px;padding-inline-start:18px;padding-inline-end:14px}
/* Flags are rectangles between 1.5:1 and 2.5:1. A `cover` crop cuts the hoist side off —
   Jordan's star sits inside the first 22% of the width and vanished completely once.
   Always show the whole flag inside the box. */
.dest-flag{width:54px;height:36px;border-radius:6px;object-fit:contain;border:1px solid var(--line);background:#fff;flex-shrink:0}
/* A region with no count in its name: a drawn globe on the same tint as the count badge,
   so the two badge kinds read as one family and the column stays aligned. */
.dest-flag.ph{width:62px;height:46px;border:none;border-radius:10px;background:#eaf1ff;
  color:var(--brand-deep);display:grid;place-items:center}
.dest-flag.ph svg{width:24px;height:24px;display:block}
/* The coverage badge. The number is the point, so it is set large; the unit sits under it
   letter-spaced and dark enough to read against the tint rather than fade into it. */
.dest-cover{width:62px;height:46px;border-radius:10px;background:#eaf1ff;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.dest-cover-n{font-size:20px;font-weight:800;color:var(--brand-deep);letter-spacing:-.4px}
.dest-cover-u{font-size:10.5px;font-weight:800;letter-spacing:1px;color:#33456b;margin-top:4px}
.flag-lg{width:64px;height:44px;border-radius:7px;object-fit:contain;border:1px solid var(--line);background:#fff;flex-shrink:0}
.dest-text{display:flex;flex-direction:column;min-width:0}
/* Two lines at most. One supplier region is 53 characters long, and letting it run to a
   third line dragged every other card in its row 44% taller than the rows around it. The
   full name is on the destination's own page. */
.dest-name{font-weight:800;font-size:16.5px;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dest-sub{display:flex;align-items:center;gap:7px;margin-top:6px;color:var(--muted);font-size:12.5px;font-weight:600}
.dest-code{font-size:11px;font-weight:800;letter-spacing:1.2px}
.dest-dot{width:3px;height:3px;border-radius:50%;background:#cbd5e1;flex-shrink:0}
.dest-perf{width:0;border-inline-start:2px dashed #e2e8f0;margin:12px 0;flex-shrink:0}
.dest-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 18px;background:#fafbfe;min-width:104px;flex-shrink:0}
.dest-from{font-size:10.5px;font-weight:800;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.dest-price{font-size:22px;font-weight:800;color:var(--brand);line-height:1.1;margin-top:2px;white-space:nowrap}

/* Why cards. The icons are stroke SVG set in the badge's text colour, so one rule
   recolours all four and they stay one drawing on every platform. */
/* Explicit column counts, not auto-fit: with four cards, any width that fits three
   leaves the fourth stranded alone on a second row. 4, then 2, then 1 always pairs up. */
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1199.98px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.why-grid{grid-template-columns:1fr}}
.why-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;gap:18px;box-shadow:0 3px 14px rgba(13,27,62,.055);transition:.15s}
.why-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cfe0ff}
.why-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:#eaf1ff;color:var(--brand-deep)}
.why-ico svg{width:26px;height:26px;display:block}
.why-card h3{font-size:17.5px;font-weight:800;margin:0 0 8px;letter-spacing:-.2px}
.why-card p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
@media (max-width:480px){
  .why-grid{gap:14px}
  .why-card{padding:22px;gap:15px}
  .why-ico{width:48px;height:48px;border-radius:14px}
  .why-ico svg{width:23px;height:23px}
}

/* Plan cards */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.plan-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(13,27,62,.04)}
.plan-card:hover{box-shadow:var(--shadow);border-color:#cfe0ff}
.plan-data{font-size:30px;font-weight:800;color:var(--ink)}
.plan-sub{color:var(--muted);font-size:14px;margin-bottom:14px}
.plan-row{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-top:1px dashed var(--line)}
.plan-row span:first-child{color:var(--muted)}
.plan-price{font-size:26px;font-weight:800;color:var(--brand);margin:14px 0}
.plan-price small{font-size:14px;color:var(--muted);font-weight:600}
.chip{display:inline-block;font-size:12px;background:#eef4ff;color:var(--brand);border-radius:999px;padding:3px 10px;margin:2px 3px 0 0;font-weight:600}
.btn-buy{margin-top:auto;background:var(--brand);color:#fff;text-align:center;padding:12px;border-radius:11px;font-weight:800;display:block}
.btn-buy:hover{background:#0040dd;color:#fff}

/* Page header */
.page-head{background:linear-gradient(135deg,#031a63,#0360ff);color:#fff;padding:40px 0}
.page-head h1{font-size:34px;font-weight:800;margin:0;display:flex;align-items:center;gap:14px}
.back-link{color:#fff;opacity:.85;font-weight:600;font-size:14px;display:inline-block;margin-bottom:10px}
.back-link:hover{color:#fff;opacity:1}

.cart-link{position:relative;font-size:22px;padding:4px 6px}
.cart-badge{position:absolute;top:-4px;inset-inline-end:-6px;background:#ff4757;color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;padding:0 4px}
.nav-pill{border:1px solid var(--line);border-radius:9px;padding:8px 14px;font-weight:700;font-size:13px;color:var(--ink)}
.nav-pill:hover{border-color:var(--brand);color:var(--brand)}

/* Auth + generic panels */
.auth-wrap{max-width:440px;margin:50px auto;padding:0 16px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.panel h1{font-size:26px;font-weight:800;margin:0 0 20px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field input{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;outline:none}
.field input:focus{border-color:var(--brand)}
.btn-primary-full{width:100%;background:var(--brand);color:#fff;border:none;border-radius:11px;padding:13px;font-weight:800;font-size:15px;cursor:pointer}
.btn-primary-full:hover{background:#0040dd}
.auth-alt{text-align:center;margin-top:16px;font-size:14px}
.validation-summary-errors,.field-validation-error{color:#e11d48;font-size:13.5px;margin-top:6px}
.text-danger{color:#e11d48}

/* Cart & order tables */
.cart-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cart-table th,.cart-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:start;font-size:14.5px}
.cart-table th{background:#f1f5fc;font-weight:700;font-size:12.5px;text-transform:uppercase;color:#5b6b8c}
.cart-summary{display:flex;justify-content:space-between;align-items:center;margin-top:18px;flex-wrap:wrap;gap:12px}
.grand{font-size:24px;font-weight:800;color:var(--brand)}

/* eSIM result */
.esim-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;text-align:center}
.esim-card .qr{width:200px;height:200px;margin:14px auto;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.mono{font-family:ui-monospace,Consolas,monospace;background:#f1f5fc;border-radius:8px;padding:8px 12px;font-size:13px;word-break:break-all}
.status-badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
.s-completed{background:#dcfce7;color:#15803d}.s-pending{background:#fef9c3;color:#a16207}.s-failed{background:#fee2e2;color:#b91c1c}
/* Paid and Provisioning were unstyled, so those orders showed a badge with no colour. */
.s-paid{background:#dbeafe;color:#1d4ed8}.s-provisioning{background:#e0e7ff;color:#4338ca}.s-cancelled{background:#f1f5f9;color:#64748b}.s-refunded{background:#fae8ff;color:#a21caf}

.usage-box{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.usage-bar{height:10px;border-radius:999px;background:#eef2f9;overflow:hidden;margin:8px 0}
.usage-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.topup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.topup-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.topup-card .add{font-size:26px;font-weight:800}
.topup-card .price{font-size:22px;font-weight:800;color:var(--brand);margin:10px 0}

.site-footer{background:#fff;border-top:1px solid var(--line);margin-top:40px}
.site-footer .container{min-height:74px}

@media(max-width:680px){.hero h1{font-size:33px}.search-card{margin-left:14px;margin-right:14px}}

/* ============================================================
   Responsive fixes — added 2026-08-30
   Pure-CSS: the Razor views are compiled into the app DLL,
   so every fix below works without markup changes.
   ============================================================ */

/* 1. Cart/order tables no longer drag the whole page sideways.
      The table is a direct child of .container with no wrapper,
      so it has to do the scrolling itself. Keeps every column —
      including the Remove button — reachable on phones. */
@media (max-width:680px){
  .cart-table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .cart-table th,.cart-table td{padding:11px 12px;font-size:13.5px;white-space:nowrap}
  /* the package description is the long column: let it wrap
     instead of stretching the table out */
  .cart-table th:first-child,.cart-table td:first-child{white-space:normal;min-width:128px}
}

/* 2. Primary nav was `d-none d-lg-flex` with no hamburger anywhere,
      so Packages / Regional were unreachable below 992px — on every
      phone AND tablet. Show it as its own compact row instead. */
@media (max-width:991.98px){
  .site-header .main-nav.d-none{
    display:flex !important;      /* beats Bootstrap's .d-none */
    order:3;
    flex:1 0 100%;
    gap:8px;
    margin-top:2px;
    padding-top:9px;
    border-top:1px solid var(--line);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .site-header .main-nav::-webkit-scrollbar{display:none}
  .site-header .main-nav a{
    white-space:nowrap;
    font-size:13.5px;
    padding:7px 13px;
    border-radius:9px;
    background:#eef4ff;
    color:var(--ink);
  }
  .site-header .main-nav a:hover{background:var(--brand);color:#fff}

  /* tighten the header so adding the nav row doesn't cost height */
  .site-header .container{gap:8px 10px;min-height:0}
  .brand-logo{height:34px}
  .nav-pill{font-size:12px;padding:7px 10px}
  .btn-login{padding:8px 15px;font-size:13.5px}
  .lang-btn{padding:6px 11px;font-size:12.5px}
  .cart-link{font-size:20px}
}

/* 3. Below ~360px the search input's intrinsic min-width refused to
      shrink and pushed the 🔍 button past the viewport edge. */
.search-card input{min-width:0}
@media (max-width:420px){
  .search-card{padding:14px;gap:8px}
  .search-card button{padding:14px 17px}
}

/* 4. Section title sat flush against the "197+ →" link (zero gap). */
.section-head{flex-wrap:wrap;gap:6px 14px}

/* 5. iOS Safari force-zooms when a focused field is under 16px. */
@media (max-width:991.98px){
  .field input,.auth-wrap input,.panel input[type=text],
  .panel input[type=email],.panel input[type=password]{font-size:16px}
}

/* 6. Tap targets that were under the 44px guideline. */
.panel input[type=checkbox]{width:18px;height:18px;vertical-align:middle}
.site-footer a{display:inline-block;padding:4px 0}

/* 7. On phones the carousel chevrons sat on top of the hero text.
      Dots + native swipe cover navigation there. */
@media (max-width:680px){
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next{display:none}
  /* Bigger dots for a thumb, but the active one keeps its bar shape. */
  .hero-carousel .carousel-indicators [data-bs-target]{width:10px;height:10px;margin:0 4px}
  .hero-carousel .carousel-indicators .active{width:30px}
}

/* 7b. Between 681–991px the arrows are kept, but they bled onto the first
       characters of the hero copy. Narrow the controls to just enough for
       the 44px button and give the text column matching clearance. */
@media (min-width:681px) and (max-width:991.98px){
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next{width:60px}
  .hero-slide>.container{padding-left:58px;padding-right:58px}
}

/* 8. On the narrowest phones the header actions spilled onto a 4th row
      (196px of a 568px screen). Tighten one more step so they fit on
      one row, bringing the header back in line with larger phones. */
@media (max-width:400px){
  .site-header .container{gap:7px 8px}
  .brand-logo{height:30px}
  .nav-pill{font-size:11px;padding:6px 9px}
  .btn-login{font-size:12.5px;padding:7px 12px}
  .lang-btn{font-size:11.5px;padding:6px 9px}
  .cart-link{font-size:19px;padding:2px 4px}
  .site-header .main-nav a{font-size:12.5px;padding:6px 11px}
}

/* Account summary tiles — the customer's "my eSIMs" overview. Matches the admin
   kpi block in shape but uses the public palette and the site's card radius. */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.kpi .label{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#5b6b8c}
.kpi .value{font-size:28px;font-weight:800;margin-top:4px;line-height:1.15}
.kpi .value.brand{color:var(--brand)}

/* ============================================================
   Search box — replaced the 🔍 emoji submit button.
   An emoji renders as a different glyph on every platform and
   could not be sized or coloured; these are inline SVGs that
   inherit currentColor, so they stay crisp at any zoom.
   ============================================================ */
.search-field{position:relative;flex:1;display:flex;align-items:center;min-width:0}
/* Leading icon marks the field as a search box. inset-inline-start, not left,
   so it moves to the right side when the page flips to Arabic. */
.search-field .search-ico{
  position:absolute;inset-inline-start:15px;width:19px;height:19px;
  color:#94a3b8;pointer-events:none;flex-shrink:0
}
.search-card input[type=search],
.search-card input[type=text]{
  flex:1;width:100%;padding:14px 16px;padding-inline-start:46px;
  border:1px solid var(--line);border-radius:12px;font-size:16px;outline:none;
  transition:border-color .15s, box-shadow .15s;-webkit-appearance:none;appearance:none
}
.search-card input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(3,96,255,.16)}
/* The icon sits BEFORE the input, so this has to be :focus-within on the wrapper —
   a sibling combinator from the input could never reach back to it. */
.search-field:focus-within .search-ico{color:var(--brand)}
/* Clear the browser's own search cross so it cannot fight our icon. */
.search-card input[type=search]::-webkit-search-decoration,
.search-card input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

/* Square, icon-only button: 52px keeps it above the 44px tap-target guideline
   and matches the field height instead of the old oversized padded block. */
.search-card button{
  display:inline-grid;place-items:center;flex-shrink:0;
  /* align-self:stretch rather than a fixed height: the field's height comes from its
     own padding and font size, so a hardcoded number drifts out of line with it. */
  align-self:stretch;width:52px;min-height:48px;padding:0;
  border:none;border-radius:12px;
  background:var(--brand);color:#fff;cursor:pointer;
  transition:background .15s, transform .05s, box-shadow .15s
}
.search-card button svg{width:20px;height:20px;display:block}
.search-card button:hover{background:#0040dd}
.search-card button:active{transform:translateY(1px)}
.search-card button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(3,96,255,.35)}

@media (max-width:420px){
  .search-card{padding:14px;gap:8px}
  .search-card button{width:48px}
  .search-field .search-ico{inset-inline-start:13px;width:18px;height:18px}
  .search-card input[type=search],
  .search-card input[type=text]{padding-inline-start:42px}
}

/* ============================================================
   Checkout payment block.
   The PayPal SDK renders its own buttons inside #paypal-buttons;
   everything here is the frame around them.
   ============================================================ */
#paypal-buttons{min-height:52px}
.pay-error{
  background:#fff1f2;border:1px solid #fecaca;color:#b91c1c;
  border-radius:11px;padding:11px 14px;font-size:14px;font-weight:600;margin-bottom:14px
}
.pay-busy{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:14px;color:var(--muted);font-size:14px;font-weight:600
}
.pay-spinner{
  width:17px;height:17px;border-radius:50%;flex-shrink:0;
  border:2.5px solid #dbe3f2;border-top-color:var(--brand);
  animation:pay-spin .7s linear infinite
}
@keyframes pay-spin{to{transform:rotate(360deg)}}
/* Reassurance under the buttons: the second line is the one that tells a buyer
   with no PayPal account that they can still pay. */
.pay-assure{
  display:flex;flex-direction:column;gap:5px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;line-height:1.5
}
@media (prefers-reduced-motion:reduce){ .pay-spinner{animation-duration:2.4s} }

/* PayPal's inline card form (the "Debit or Credit Card" flow) renders as an absolutely
   positioned iframe at z-index 100. The sticky header sat at 50, so as soon as the page
   scrolled the card fields painted straight over the logo and the nav. The header has to
   win. 1000 clears PayPal's inline frame while staying far below the ~2^31 that its 3-D
   Secure challenge overlay uses, which must stay on top of everything. */
.site-header{z-index:1000}

/* With a 106px sticky header, a field scrolled into view can land underneath it. This
   reserves the header's height for every scroll-into-view, including the ones the card
   form triggers as the buyer tabs between fields. */
html{scroll-padding-top:120px}

/* ---- Super Admin announcement strip (above the header) ----------------------
   Colours come from the settings, so only layout lives here. Sits in normal flow
   above the sticky header: it shows on arrival and scrolls away afterwards. */
.promo-bar{font-weight:600;font-size:15px;line-height:1.35}
.promo-inner{display:flex;align-items:center;justify-content:center;gap:16px;
  padding:11px 16px;text-align:center;flex-wrap:wrap}
.promo-text strong{font-weight:800}
.promo-cta{background:#fff;border-radius:999px;padding:9px 22px;font-weight:800;
  font-size:14.5px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.13);
  transition:transform .12s ease}
.promo-cta:hover{transform:translateY(-1px);text-decoration:none}
@media (max-width:640px){
  .promo-bar{font-size:13.5px}
  .promo-inner{gap:9px;padding:9px 12px}
  .promo-cta{padding:7px 17px;font-size:13px}
}

/* Boarding-pass destination card on a phone. One card per row below 380px of usable
   width, so the stub keeps its number on one line instead of wrapping under the dollar
   sign. Everything shrinks a step; nothing is dropped. */
@media (max-width:480px){
  .dest-grid{grid-template-columns:1fr;gap:16px}
  .dest-main{gap:11px;padding:13px;padding-inline-start:14px;padding-inline-end:11px}
  .dest-flag{width:46px;height:31px}
  .dest-flag.ph{width:54px;height:42px}
  .dest-cover{width:54px;height:42px}
  .dest-cover-n{font-size:18px}
  .dest-cover-u{font-size:10px}
  .dest-name{font-size:15.5px}
  .dest-sub{font-size:12px;margin-top:5px}
  .dest-stub{min-width:92px;padding:12px 14px}
  /* 38px is fine under a mouse but under the 44px touch guideline on a phone. */
  .see-all{padding-block:10px}
  .dest-price{font-size:20px}
  .dest-from{font-size:10px}
}

/* ---- Search suggestions -----------------------------------------------------
   The dropdown under the search box. The card is the positioning context, so the
   panel lines up with the whole card rather than with the text field, and it sits
   above the sticky header's stacking context. */
.search-card{position:relative}
.search-suggest{position:absolute;top:calc(100% - 6px);inset-inline:0;z-index:1200;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(13,27,62,.16);overflow:hidden;max-height:60vh;overflow-y:auto}
.search-suggest[hidden]{display:none}
.sg-item{display:flex;align-items:center;gap:13px;padding:11px 16px;cursor:pointer;
  border-bottom:1px solid #f4f7fc;text-align:start}
.sg-item:last-child{border-bottom:none}
/* One highlight class for both hover and keyboard, so the two can never disagree
   about which row is about to be opened. */
.sg-item:hover,.sg-item.is-active{background:#f2f7ff}
.sg-flag{width:38px;height:26px;border-radius:5px;object-fit:contain;border:1px solid var(--line);
  background:#fff;flex-shrink:0}
.sg-badge{width:38px;height:28px;border-radius:7px;background:#eaf1ff;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  color:var(--brand-deep)}
.sg-badge b{font-size:13px;font-weight:800}
.sg-badge i{font-style:normal;font-size:7px;font-weight:800;letter-spacing:.6px;color:#33456b;margin-top:2px}
.sg-badge svg{width:17px;height:17px}
/* The rows are spans inside an anchor-like div, so each part has to be told to be a block —
   left inline, the name and the plan count ran together as "United Arab Emirates13 plans". */
.sg-text{flex:1;min-width:0}
.sg-name,.sg-meta{display:block}
.sg-name{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-name mark{background:transparent;color:var(--brand-deep);font-weight:800;padding:0}
.sg-meta{font-size:12px;color:var(--muted);margin-top:2px}
.sg-price{font-size:14.5px;font-weight:800;color:var(--brand);white-space:nowrap}
.sg-all{display:block;padding:12px 16px;font-size:13.5px;font-weight:700;color:var(--brand-deep);
  background:#fafbff;cursor:pointer;text-align:start;border-top:1px solid var(--line)}
.sg-all:hover,.sg-all.is-active{background:#eef4ff}
.sg-empty{padding:18px 16px;text-align:center}
.sg-empty b{display:block;font-size:14.5px;color:var(--ink)}
.sg-empty span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
/* The clear button only appears once there is something to clear. Scoped under .search-card so
   it beats the blue submit-button rule, which otherwise painted it as a second search button. */
/* min-height:0 matters: the submit button's rule sets min-height:48px on every button in the
   card, and a min-height beats a smaller height, which stretched this into a 28x48 oval. */
.search-card .search-clear{position:absolute;inset-inline-end:8px;width:28px;height:28px;
  min-height:0;min-width:0;align-self:center;
  border-radius:50%;border:none;background:#eef2f8;color:var(--muted);display:grid;
  place-items:center;cursor:pointer;padding:0;flex:none}
.search-card .search-clear svg{width:14px;height:14px}
.search-card .search-clear:hover{background:#e2e8f2;color:var(--ink)}
.search-card .search-clear[hidden]{display:none}
.search-field input[type=search]{padding-inline-end:44px}
@media(max-width:480px){
  .sg-item{padding:10px 13px;gap:11px}
  .sg-name{font-size:14px}
}

/* ---- Catalogue filters ------------------------------------------------------
   Native <details> menus, so opening and closing needs no script. Plain links inside,
   so filtering survives a reload, a shared URL and the back button. */
.fdd{position:relative}
.fdd>summary{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:13.5px;
  font-weight:700;color:var(--ink);cursor:pointer;list-style:none;white-space:nowrap;transition:.15s}
.fdd>summary::-webkit-details-marker{display:none}
.fdd>summary:hover{border-color:#cfe0ff;color:var(--brand-deep)}
.fdd[open]>summary{border-color:var(--brand);color:var(--brand-deep);
  box-shadow:0 0 0 3px rgba(3,96,255,.13)}
.fdd-c{width:14px;height:14px;color:var(--muted);transition:transform .15s}
.fdd[open] .fdd-c{transform:rotate(180deg)}
.fdd-n{background:var(--brand);color:#fff;border-radius:999px;min-width:19px;height:19px;
  display:grid;place-items:center;font-size:11px;font-weight:800;padding:0 5px}
.fdd-menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:1200;min-width:230px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 16px 40px rgba(13,27,62,.16)}
.fdd-item{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 11px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.fdd-item:hover{background:#f2f7ff}
.fdd-item.on{background:#eef4ff;color:var(--brand-deep);font-weight:800}
.fdd-count{font-size:12px;font-weight:700;color:var(--muted)}
.fdd-item.on .fdd-count{color:var(--brand-deep)}
/* A choice that would return nothing stays clickable but says so, rather than quietly
   leading to an empty page. */
.fdd-item.off{opacity:.4}
/* What is switched on, and one click to take it off. */
.active-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.pill-on{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;
  border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pill-on svg{width:12px;height:12px;opacity:.85}
.pill-on:hover{background:#0040dd;color:#fff}
.pill-clear{font-size:12.5px;font-weight:700;color:var(--muted);padding:6px 8px}
.pill-clear:hover{color:#b91c1c}
@media(max-width:680px){
  .search-card.has-tools{max-width:none}
  .search-tools{gap:7px;margin-top:13px;padding-top:13px}
  .fdd{flex:1 1 auto}
  .fdd>summary{width:100%;justify-content:center;padding:10px 11px;font-size:12.5px}
  /* Pinned to the card's edges rather than the button's, so a menu never hangs off screen. */
  .fdd-menu{inset-inline:0;min-width:0}
  .search-tools-gap{display:none}
  .search-tools-count{flex:1 0 100%;text-align:center;margin-top:2px}
}

/* ---- Plan chooser -----------------------------------------------------------
   Two questions above the plan grid. Plain links, so a chosen combination can be
   shared and the back button undoes it. */
.chooser{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  margin-bottom:22px;box-shadow:0 2px 10px rgba(13,27,62,.05)}
.chooser-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.chooser-head svg{width:17px;height:17px;color:var(--brand);flex-shrink:0}
.chooser-title{font-size:15px;font-weight:800;color:var(--ink)}
.chooser-hint{font-size:12.5px;color:var(--muted)}
.chooser-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chooser-row+.chooser-row{margin-top:11px}
.chooser-q{font-size:13px;font-weight:700;color:var(--muted);min-width:86px}
.chip-c{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;transition:.15s}
.chip-c:hover{border-color:#cfe0ff;color:var(--brand-deep)}
.chip-c.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* Shown but not offered: nothing here matches it alongside the other row's choice. */
.chip-c.off{opacity:.34;cursor:not-allowed}
.chooser-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted)}
.chip-reset{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--muted);padding:4px 8px;border-radius:999px}
.chip-reset svg{width:12px;height:12px}
.chip-reset:hover{color:var(--brand-deep)}
/* The cheapest gigabyte on screen, and the number that explains why one card costs more. */
.plan-card{position:relative}
.plan-card.is-best{border-color:var(--brand);box-shadow:0 4px 18px rgba(3,96,255,.14)}
.plan-best{position:absolute;top:-10px;inset-inline-start:18px;background:var(--brand);color:#fff;
  border-radius:999px;padding:3px 11px;font-size:11px;font-weight:800;letter-spacing:.2px}
.plan-pergb{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:3px}
@media(max-width:680px){
  .chooser{padding:13px}
  .chooser-q{min-width:0;flex:1 0 100%;margin-bottom:-3px}
  .chip-c{font-size:12.5px;padding:6px 12px}
}

/* ---- Device compatibility ---------------------------------------------------
   The EID test is the page's answer; the model list is the convenience under it. */
.page-lede{max-width:640px;margin:10px 0 0;font-size:16px;line-height:1.6;color:#cfe0ff}
.eid-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;
  box-shadow:0 4px 18px rgba(13,27,62,.06);max-width:760px}
.eid-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.eid-head svg{width:22px;height:22px;color:#15803d;flex-shrink:0}
.eid-head h2{margin:0;font-size:19px;font-weight:800}
.eid-step{margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.eid-code{background:var(--ink);color:#fff;border-radius:10px;padding:9px 18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:700;
  letter-spacing:1px;direction:ltr;display:inline-block}
.eid-result{margin:0 0 18px;font-size:15px;font-weight:700;color:var(--ink)}
.eid-paths{display:flex;gap:26px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.eid-os{display:block;font-size:12px;font-weight:800;letter-spacing:.6px;color:var(--muted);
  text-transform:uppercase;margin-bottom:4px}
.eid-path{font-size:14px;font-weight:600;color:var(--ink)}
.dev-search{position:relative;max-width:420px;margin-bottom:20px}
.dev-search input{width:100%;border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;padding-inline-start:44px;font-size:15px;outline:none;background:#fff}
.dev-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(3,96,255,.14)}
.dev-search .search-ico{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted);pointer-events:none}
.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.dev-brand{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.dev-brand[hidden]{display:none}
.dev-brand h3{margin:0 0 11px;font-size:15px;font-weight:800;color:var(--brand-deep)}
.dev-brand ul{list-style:none;margin:0;padding:0}
.dev-brand li{padding:5px 0;font-size:13.5px;color:var(--ink);border-bottom:1px solid #f4f7fc}
.dev-brand li:last-child{border-bottom:none}
.dev-brand li[hidden]{display:none}
.dev-note{display:block;font-size:11.5px;color:#9a3412;margin-top:2px}
.dev-empty{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;text-align:center}
.dev-empty[hidden]{display:none}
.dev-empty b{display:block;font-size:16px;color:var(--ink)}
.dev-empty span{display:block;font-size:14px;color:var(--muted);margin-top:6px}
@media(max-width:680px){
  .eid-card{padding:20px}
  .eid-code{font-size:17px;padding:8px 15px}
  .eid-paths{gap:16px}
  .dev-grid{grid-template-columns:1fr}
}

/* The *#06# screen, drawn. Barcodes are a repeating-gradient rather than an image, so the
   sample weighs nothing and stays crisp at any size. */
.eid-sample{margin:22px 0 0}
.eid-sample figcaption{font-size:12.5px;font-weight:800;letter-spacing:.5px;color:var(--muted);
  text-transform:uppercase;margin-bottom:10px}
.eid-screen{background:#2b2b2e;border-radius:16px;padding:20px;max-width:430px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#c9cace}
.eid-scr-title{color:#fff;font-size:16px;font-weight:700;margin-bottom:14px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.eid-scr-label{font-size:12px;color:#9a9ba0;margin-top:12px}
.eid-scr-value{font-size:13.5px;color:#d8d9dd;letter-spacing:.4px;word-break:break-all}
.eid-scr-label.on{color:#6fb4ff}
.eid-scr-value.on{color:#fff;font-weight:700}
.eid-scr-bars{height:34px;margin-top:6px;border-radius:3px;background:#fff;
  background-image:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 5px,#111 5px 8px,transparent 8px 11px,#111 11px 12px,transparent 12px 16px)}
.eid-scr-bars.on{box-shadow:0 0 0 2px #0360ff}
.eid-scr-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.eid-scr-row.is-eid{background:rgba(3,96,255,.16);border-radius:10px;padding:8px 10px;margin-top:10px}
.eid-scr-row.is-eid .eid-scr-label{margin-top:0}
.eid-scr-flag{background:#0360ff;color:#fff;border-radius:999px;padding:4px 12px;font-size:11.5px;
  font-weight:800;white-space:nowrap;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
body.rtl .eid-screen{direction:ltr;text-align:left}
/* What to do when that screen shows no EID at all, which is common and is not a no. */
.eid-fallback{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.eid-fb-title{margin:0 0 6px;font-size:15px;font-weight:800;color:var(--ink)}
.eid-fb-body{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--muted)}

/* How it works: four stops on one dashed route. The line runs between the first and last dot
   centres (12.5% in from each side of a four-column grid), so it is symmetric and needs no RTL
   flip. Below 680px the route turns vertical and runs down the inline-start side. */
.how-head{justify-content:center}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.how-steps::before{content:"";position:absolute;top:28px;inset-inline:12.5%;border-top:2px dashed #b5d0ff}
.how-step{text-align:center;padding:0 10px;position:relative}
.how-dot{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--brand);color:var(--brand);
    display:grid;place-items:center;margin:0 auto 14px;position:relative;transition:background .2s,color .2s}
.how-dot svg{width:24px;height:24px;display:block}
.how-step:first-child .how-dot,.how-step:hover .how-dot{background:var(--brand);color:#fff}
.how-num{position:absolute;top:-6px;inset-inline-end:-6px;width:23px;height:23px;border-radius:50%;
    background:var(--brand-deep);color:#fff;border:2px solid #fff;font-size:12px;font-weight:800;
    display:grid;place-items:center;line-height:1}
.how-step h3{font-size:16.5px;font-weight:800;margin:0 0 4px}
.how-step p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}
@media(max-width:680px){
    .how-head{justify-content:flex-start}
    .how-steps{grid-template-columns:1fr;gap:22px}
    .how-steps::before{top:28px;bottom:28px;inset-inline:27px auto;border-top:0;border-inline-start:2px dashed #b5d0ff}
    .how-step{display:flex;align-items:center;gap:16px;text-align:start;padding:0}
    .how-dot{flex:none;margin:0}
    .how-step h3{font-size:16px}
}

/* FAQ: native <details>. The marker is hidden and replaced by one chevron that turns on open. */
/* The home FAQ spans the full container, level with the sections above it (the owner asked). */
.faq-page{max-width:860px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;transition:border-color .15s,box-shadow .15s}
.faq-item:hover{border-color:#cfe0ff}
.faq-item[open]{border-color:#cfe0ff;box-shadow:0 4px 16px rgba(13,27,62,.06)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:17px 20px;font-size:16px;font-weight:700;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:14px}
.faq-chev{width:20px;height:20px;flex:none;color:var(--muted);transition:transform .2s,color .2s}
.faq-item[open] .faq-chev{transform:rotate(180deg);color:var(--brand)}
.faq-a{padding:0 20px 18px;color:var(--muted);font-size:15px;line-height:1.7}
.faq-a p{margin:0}
.faq-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:700;font-size:14.5px;color:var(--brand-deep);text-decoration:none}
.faq-link svg{width:14px;height:14px}
.faq-link:hover{text-decoration:underline}
body.rtl .faq-link svg{transform:scaleX(-1)}
@media(max-width:680px){
    .faq-item summary{padding:15px 16px;font-size:15px}
    .faq-a{padding:0 16px 16px;font-size:14.5px}
}

/* Country page header: breadcrumb, flag + headline, then the quick facts as glass chips. */
.country-head{padding:26px 0 30px}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:13.5px;color:#b5d0ff;margin-bottom:16px}
.crumbs a{color:#b5d0ff;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{color:#fff;font-weight:700}
.crumbs svg{width:13px;height:13px;opacity:.8}
body.rtl .crumbs svg{transform:scaleX(-1)}
.ch-main{display:flex;align-items:center;gap:16px}
.ch-flag{width:84px;height:56px;border-radius:12px;object-fit:cover;border:2px solid rgba(255,255,255,.92);background:#fff;flex-shrink:0}
.ch-globe{display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff}
.ch-globe svg{width:30px;height:30px}
.country-head h1{font-size:32px;line-height:1.25;margin:0}
.ch-sub{margin:4px 0 0;color:#cfe0ff;font-size:15px}
.ch-facts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ch-facts li{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
    border-radius:12px;padding:8px 13px;font-size:13.5px;color:#e6f0ff}
.ch-facts li b{color:#fff;font-size:15.5px;font-weight:800}
.ch-facts svg{width:17px;height:17px;color:#b5d0ff;flex-shrink:0}
@media(max-width:680px){
    .country-head{padding:20px 0 24px}
    .ch-flag{width:64px;height:43px;border-radius:9px}
    .country-head h1{font-size:24px}
    .ch-sub{font-size:13.5px}
    .ch-facts{gap:8px;margin-top:16px}
    .ch-facts li{padding:7px 11px;font-size:12.5px}
    .ch-facts li b{font-size:14px}
}

/* Smart search (level 3): plan rows in the dropdown, the understood-terms bar, the notice. */
.sg-plan{display:inline-block;font-weight:700;color:var(--ink)}
.sg-near,.dest-near{display:inline-block;margin-inline-start:6px;background:#fff7e6;color:#9a5b00;border-radius:6px;
    padding:1px 7px;font-size:11px;font-weight:700}
.sg-item-plan{background:#f8fbff}
.sg-note{cursor:pointer;background:#fffbeb}
.sg-note .sg-name{color:#854d0e}
.smart-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-8px 0 16px}
.smart-hint{font-size:13.5px;color:var(--muted)}
.smart-note{background:#fffbeb;border:1px solid #fde68a;color:#854d0e;border-radius:12px;padding:11px 15px;
    font-size:14px;margin:0 0 18px}
.smart-note b{font-weight:800}

/* Arabic under a region badge's number: letter-spacing pulls Arabic letters apart and breaks
   their joins, and the 7px dropdown size is unreadable in Arabic script. */
body.rtl .dest-cover-u{letter-spacing:0;font-size:11.5px;font-weight:700;margin-top:1px}
body.rtl .sg-badge i{letter-spacing:0;font-size:9px;font-weight:700}

/* Header, design A: language, cart and one account menu. */
.hdr-ic{width:40px;height:40px;padding:0;display:inline-grid;place-items:center;border:1px solid var(--line);
    border-radius:11px;background:#fff;color:var(--ink);font-weight:800;font-size:13px;transition:border-color .15s,color .15s}
.hdr-ic:hover{border-color:var(--brand);color:var(--brand)}
.cart-link.hdr-ic{font-size:0}
.cart-link.hdr-ic svg{width:21px;height:21px}
.hdr-ic .cart-badge{top:-6px;inset-inline-end:-6px;background:var(--brand);border:2px solid #fff;font-size:10.5px;min-width:20px;height:20px}
.main-nav a.on{color:var(--brand);position:relative}
.main-nav a.on::after{content:"";position:absolute;inset-inline:0;bottom:-8px;height:2px;border-radius:2px;background:var(--brand)}
.acct{position:relative}
.acct-btn{list-style:none;display:flex;align-items:center;gap:8px;height:40px;border:1px solid var(--line);border-radius:999px;
    padding-inline:4px 12px;cursor:pointer;background:#fff;user-select:none;transition:border-color .15s}
.acct-btn::-webkit-details-marker{display:none}
.acct-btn:hover,.acct[open] .acct-btn{border-color:var(--brand)}
.acct-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.acct-av{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;flex:none}
.acct-name{font-weight:700;font-size:14px;color:var(--ink);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-chev{width:15px;height:15px;color:var(--muted);transition:transform .2s;flex:none}
.acct[open] .acct-chev{transform:rotate(180deg)}
.acct-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:240px;background:#fff;border:1px solid var(--line);
    border-radius:14px;box-shadow:0 14px 34px rgba(13,27,62,.15);padding:6px;z-index:1100}
.acct-head{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.acct-head b{display:block;font-size:14.5px;color:var(--ink)}
.acct-head span{display:block;font-size:12.5px;color:var(--muted);word-break:break-all;margin-top:2px}
body.rtl .acct-head span{text-align:right}
.acct-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:9px;font-weight:600;font-size:14px;
    color:var(--ink);background:none;border:0;cursor:pointer;text-align:start;text-decoration:none;font-family:inherit}
.acct-item:hover{background:#f2f7ff;color:var(--brand-deep)}
.acct-item svg{width:18px;height:18px;color:var(--muted);flex:none}
.acct-item:hover svg{color:var(--brand-deep)}
.acct-menu form{margin:0}
.acct-out,.acct-out svg{color:#dc2626}
.acct-out:hover{background:#fff1f2;color:#b91c1c}
.acct-out:hover svg{color:#b91c1c}
body.rtl .acct-out svg{transform:scaleX(-1)}
.acct-sep{border-top:1px solid var(--line);margin:4px 0}
@media(max-width:991px){
    .main-nav a.on::after{display:none}
    .site-header .main-nav a.on{background:var(--brand);color:#fff}
}
@media(max-width:680px){
    .hdr-ic{width:36px;height:36px;border-radius:10px}
    .acct-btn{height:36px;padding-inline:3px 8px;gap:5px}
    .acct-av{width:28px;height:28px;font-size:13px}
    .acct-name{display:none}
    .acct-menu{min-width:220px}
}

/* Become-a-reseller: two columns of fields, one on a phone. */
.rs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:600px){.rs-grid{grid-template-columns:1fr}}
/* Error page */
.err-ico{width:58px;height:58px;border-radius:50%;background:#fff1f2;color:#dc2626;display:grid;place-items:center;margin:0 auto 14px}
.err-ico svg{width:28px;height:28px}
.err-ref{display:inline-block;background:#f1f5f9;border-radius:8px;padding:4px 10px;font-size:12.5px;color:#334155;word-break:break-all}

/* Privacy policy: readable legal prose. .pp-todo marks a blank only the owner can fill. */
.pp{max-width:820px;font-size:15.5px;line-height:1.85;color:#334155}
.pp h2{font-size:19px;font-weight:800;color:var(--ink);margin:30px 0 10px}
.pp p{margin:0 0 12px}
.pp ul{margin:0 0 12px;padding-inline-start:22px}
.pp li{margin-bottom:7px}
.pp b{color:var(--ink)}
.pp-todo{background:#fef08a;color:#713f12;border-radius:5px;padding:1px 6px;font-weight:700}

/* Mobile-app banner (home). Store badges follow the stores' own look: black, logo, two lines. */
.app-block{padding-top:12px}
.app-banner{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:center;
    background:linear-gradient(135deg,#031a63 0%,#0349cc 55%,#0360ff 100%);border-radius:28px;padding:48px 52px;color:#fff;
    box-shadow:0 24px 60px rgba(3,26,99,.22)}
.app-banner::before,.app-banner::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.app-banner::before{width:440px;height:440px;background:rgba(255,255,255,.06);inset-inline-end:-130px;top:-170px}
.app-banner::after{width:280px;height:280px;background:rgba(255,255,255,.05);inset-inline-start:-100px;bottom:-150px}
.app-copy,.app-visual{position:relative;z-index:1}
.app-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
    border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;color:#e6f0ff}
.app-eyebrow svg{width:16px;height:16px}
.app-copy h2{font-size:36px;font-weight:800;line-height:1.2;margin:16px 0 10px;color:#fff}
.app-lede{color:#cfe0ff;font-size:16.5px;line-height:1.7;margin:0 0 18px;max-width:480px}
.app-points{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.app-points li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:#fff}
.app-points li::before{content:"";width:22px;height:22px;border-radius:50%;flex:none;
    background:rgba(126,226,184,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ee2b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.app-badges{display:flex;gap:12px;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:11px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px;
    padding-block:9px;padding-inline:14px 20px;min-width:180px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3);color:#fff}
.store-ico{width:26px;height:26px;flex:none}
.store-txt{display:flex;flex-direction:column;line-height:1.15;text-align:start}
.store-txt small{font-size:11px;font-weight:600;opacity:.85}
.store-txt b{font-size:19px;font-weight:700;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.store-badge.soon{cursor:default}
.store-badge.soon:hover{transform:none;box-shadow:none}
.store-badge.soon small{color:#fde68a;opacity:1}
.app-visual{display:flex;justify-content:center;align-items:center;min-height:390px}
.app-visual::before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 70%)}
.app-phone{position:relative;width:216px;height:436px;border-radius:38px;background:#0b1020;padding:10px;transform:rotate(-4deg);
    box-shadow:0 30px 60px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.12)}
body.rtl .app-phone{transform:rotate(4deg)}
.app-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:72px;height:20px;border-radius:12px;background:#0b1020;z-index:2}
.app-screen{width:100%;height:100%;border-radius:30px;background:#f4f7ff;padding:42px 14px 14px;display:flex;flex-direction:column;gap:12px;color:#0a1430;overflow:hidden}
.as-top{display:flex;justify-content:space-between;align-items:center}
.as-logo{font-weight:800;font-size:15px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;direction:ltr}
.as-logo b{color:var(--brand)}
.as-dot{width:26px;height:26px;border-radius:50%;background:#dbe7ff}
.as-card{background:#fff;border-radius:18px;padding:14px;box-shadow:0 6px 18px rgba(13,27,62,.08);display:flex;flex-direction:column;gap:12px}
.as-dest{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.as-dest img{width:26px;height:18px;border-radius:4px;object-fit:cover}
.as-dest em{margin-inline-start:auto;font-style:normal;font-size:11px;background:#dcfce7;color:#15803d;border-radius:999px;padding:2px 8px;font-weight:700}
.as-ring{width:118px;height:118px;border-radius:50%;margin:0 auto;background:conic-gradient(var(--brand) calc(var(--p) * 1%),#e7ecf5 0);display:grid;place-items:center}
.as-ring>div{width:92px;height:92px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.as-ring b{font-size:18px;font-weight:800}
.as-ring small{font-size:11px;color:var(--muted)}
.as-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600}
.as-btn{margin-top:auto;background:var(--brand);color:#fff;text-align:center;border-radius:12px;padding:10px;font-weight:700;font-size:13px}
.app-chip{position:absolute;background:#fff;color:#0a1430;border-radius:12px;padding:8px 12px;font-weight:700;font-size:13px;
    box-shadow:0 12px 28px rgba(0,0,0,.18);display:flex;align-items:center;gap:7px;z-index:2}
.app-chip.c1{top:20%;inset-inline-start:0}
.app-chip.c2{bottom:16%;inset-inline-end:4%;color:var(--brand)}
.app-chip .ok{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
@media(max-width:991px){
    .app-banner{grid-template-columns:1fr;padding:38px 30px;text-align:center}
    .app-lede{margin-inline:auto}
    .app-points{justify-items:center}
    .app-badges{justify-content:center}
    .app-copy h2{font-size:30px}
    .app-visual{min-height:350px}
}
@media(max-width:600px){
    .app-banner{padding:30px 18px;border-radius:22px;gap:18px}
    .app-copy h2{font-size:25px}
    .app-lede{font-size:15px}
    .app-points li{font-size:14px}
    .store-badge{min-width:0;flex:1 1 150px;justify-content:center;padding-inline:12px 14px}
    .store-txt b{font-size:17px}
    .app-visual{min-height:310px}
    .app-phone{width:180px;height:364px;border-radius:32px}
    .app-screen{border-radius:24px;padding-top:36px;gap:10px}
    .as-ring{width:96px;height:96px}
    .as-ring>div{width:74px;height:74px}
    .as-ring b{font-size:15px}
    .app-chip{font-size:12px;padding:6px 10px}
}
/* Store names never break inside a badge; on a phone the two badges share one row. */
.store-txt b,.store-txt small{white-space:nowrap}
@media(max-width:600px){
    .app-badges{gap:10px;flex-wrap:nowrap}
    .store-badge{gap:8px;padding-inline:10px 12px;flex:1 1 0}
    .store-ico{width:22px;height:22px}
    .store-txt b{font-size:15px}
    .store-txt small{font-size:10px}
}

/* The phone and its chips as one box: the chips are placed against the phone, not the column,
   so they stay on it at any width. */
.app-device{position:relative;display:inline-block}
.app-device .app-chip.c1{top:18%;inset-inline-start:-58px;inset-inline-end:auto}
.app-device .app-chip.c2{top:auto;bottom:20%;inset-inline-end:-26px;inset-inline-start:auto}

/* First hero slide: the app. Brand gradient instead of a photo; the drawn phone is the picture.
   The visual keeps a fixed height and the phone is scaled inside it, so this slide is exactly as
   tall as the photo slides and the carousel does not jump between them. */
.hero-app{background:linear-gradient(135deg,#031a63 0%,#0349cc 55%,#0360ff 100%);overflow:hidden}
.hero-app::before,.hero-app::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero-app::before{width:520px;height:520px;background:rgba(255,255,255,.06);inset-inline-end:-160px;top:-200px}
.hero-app::after{width:320px;height:320px;background:rgba(255,255,255,.05);inset-inline-start:-110px;bottom:-170px}
.hero-app .container{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:24px}
.hero-app h1{margin-top:14px}
.hero-app .app-badges{margin-top:2px}
.hero-app .hero-trust{margin-top:22px}
.hero-app-visual{position:relative;height:324px;display:flex;align-items:center;justify-content:center}
.hero-app-visual::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 70%)}
.hero-app-visual .app-device{transform:scale(.78)}
.hero-app-visual .app-chip{font-size:15px;padding:9px 14px}
@media(max-width:991px){
    .hero-app .container{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
    .hero-app-visual .app-device{transform:scale(.64)}
}
@media(max-width:767px){
    .hero-app .container{grid-template-columns:1fr}
    .hero-app-visual{display:none}
}

/* App slide, second pass: midnight from the logo's own navy (#0a1430) instead of electric blue.
   It sits with the photo slides, which are all under a dark navy scrim, and lets the white phone,
   the black badges and the blue accents stand out. An electric-blue glow sits behind the phone
   (left in Arabic, right in English), with a faint dot grid fading out from it. */
.hero-app{background:
    radial-gradient(circle at 76% 52%,rgba(3,96,255,.42),rgba(3,96,255,0) 42%),
    radial-gradient(circle at 12% 0%,rgba(0,154,255,.16),rgba(0,154,255,0) 38%),
    linear-gradient(135deg,#050b1f 0%,#0a1430 48%,#0d1c45 100%)}
body.rtl .hero-app{background:
    radial-gradient(circle at 24% 52%,rgba(3,96,255,.42),rgba(3,96,255,0) 42%),
    radial-gradient(circle at 88% 0%,rgba(0,154,255,.16),rgba(0,154,255,0) 38%),
    linear-gradient(225deg,#050b1f 0%,#0a1430 48%,#0d1c45 100%)}
.hero-app::before{width:auto;height:auto;inset:0;border-radius:0;top:0;
    background:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.3px) 0 0/22px 22px;
    -webkit-mask-image:radial-gradient(circle at 76% 50%,#000 0,transparent 55%);mask-image:radial-gradient(circle at 76% 50%,#000 0,transparent 55%)}
body.rtl .hero-app::before{-webkit-mask-image:radial-gradient(circle at 24% 50%,#000 0,transparent 55%);mask-image:radial-gradient(circle at 24% 50%,#000 0,transparent 55%)}
.hero-app::after{width:420px;height:420px;background:none;border:1px solid rgba(255,255,255,.07);
    inset-inline-start:auto;inset-inline-end:8%;bottom:auto;top:50%;transform:translateY(-50%)}
.hero-app-visual::before{background:radial-gradient(circle,rgba(3,96,255,.35),rgba(3,96,255,0) 70%)}
.hero-app .app-eyebrow{background:rgba(3,96,255,.18);border-color:rgba(77,166,255,.35)}
.hero-app .hero-trust svg{color:#4da6ff}
@media(max-width:767px){
    .hero-app::before{-webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0,transparent 60%);mask-image:radial-gradient(circle at 50% 30%,#000 0,transparent 60%)}
    .hero-app::after{display:none}
}

/* App slide on small screens.
   1. Store badges keep the stores' own compact size instead of stretching across the row.
   The phone is hidden there; the slide is copy and badges only. */
@media(max-width:767px){
    .hero-app .app-badges{flex-wrap:wrap}
    .hero-app .store-badge{flex:0 0 auto;min-width:0}
}
@media(max-width:600px){
    .hero-app .app-badges{flex-wrap:wrap}
    .hero-app .store-badge{flex:0 0 auto}
}

/* The app in the inner pages' blue header. On a wide screen a glass card sits in the empty end of
   the header, vertically centred, and the page's own title and text are kept clear of it; below
   1100px it becomes a compact bar at the top of the header, above the page title. */
.as2-phone{flex:none;width:46px;height:82px;border-radius:12px;background:#0b1020;padding:4px;transform:rotate(-8deg);
    box-shadow:0 10px 22px rgba(0,0,0,.35),inset 0 0 0 1.5px rgba(255,255,255,.16)}
body.rtl .as2-phone{transform:rotate(8deg)}
.as2-screen{width:100%;height:100%;border-radius:9px;background:#f4f7ff;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 5px 5px}
.as2-ring{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--brand) 62%,#e7ecf5 0);display:grid;place-items:center}
.as2-ring span{width:14px;height:14px;border-radius:50%;background:#fff}
.as2-line{width:80%;height:3px;border-radius:2px;background:#dbe3f1}
.as2-line.short{width:55%}
.as2-btn{margin-top:auto;width:100%;height:8px;border-radius:3px;background:var(--brand)}

.page-head .container{position:relative}
.ph-app{display:flex;align-items:center;gap:16px;color:#fff;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:14px 18px;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 14px 34px rgba(3,26,99,.25)}
.ph-app-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.ph-app-eyebrow{font-size:12px;font-weight:700;color:#cfe0ff}
.ph-app-title{font-size:16px;font-weight:800;line-height:1.3;margin-bottom:6px}
.ph-app .app-badges{flex-wrap:nowrap;gap:8px}
.ph-app .store-badge{min-width:0;flex:0 0 auto;padding-block:5px;padding-inline:9px 12px;border-radius:9px;gap:7px;border-color:rgba(255,255,255,.3)}
.ph-app .store-ico{width:18px;height:18px}
.ph-app .store-txt small{font-size:9px}
.ph-app .store-txt b{font-size:13.5px}
@media(min-width:1100px){
    .ph-app{position:absolute;top:50%;inset-inline-end:12px;transform:translateY(-50%);max-width:380px}
    /* Keep the header's own content clear of the card. */
    .page-head .container:has(> .ph-app) > :not(.ph-app){max-width:calc(100% - 420px)}
}
@media(max-width:1099px){
    .ph-app{display:inline-flex;margin-bottom:16px;padding:9px 12px;gap:12px;border-radius:14px}
    .ph-app .as2-phone{width:30px;height:52px;border-radius:8px;padding:3px}
    .ph-app .as2-screen{border-radius:6px;padding:6px 3px 3px;gap:3px}
    .ph-app .as2-ring{width:14px;height:14px}
    .ph-app .as2-ring span{width:9px;height:9px}
    .ph-app .as2-line{height:2px}
    .ph-app .as2-btn{height:5px}
    .ph-app-title{display:none}
    .ph-app-copy{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
    .ph-app-eyebrow{font-size:12.5px;color:#fff}
    .ph-app-title{margin:0}
}
@media(max-width:420px){
    .ph-app{display:flex}
    .ph-app .store-txt b{font-size:12.5px}
}
/* Second pass: on wide screens the card is one horizontal row (phone | title | badges, ~70px tall)
   so it fits even the shortest header, the catalogue's, where the search box overlaps the bottom. */
@media(min-width:1200px){
    .ph-app{padding:10px 16px;gap:14px;border-radius:16px;max-width:none}
    .ph-app .as2-phone{width:30px;height:52px;border-radius:8px;padding:3px}
    .ph-app .as2-screen{border-radius:6px;padding:6px 3px 3px;gap:3px}
    .ph-app .as2-ring{width:14px;height:14px}
    .ph-app .as2-ring span{width:9px;height:9px}
    .ph-app .as2-line{height:2px}
    .ph-app .as2-btn{height:5px}
    .ph-app-copy{display:grid;grid-template-columns:auto auto;column-gap:18px;row-gap:1px;align-items:center}
    .ph-app-eyebrow{grid-column:1;grid-row:1;font-size:11.5px}
    .ph-app-title{grid-column:1;grid-row:2;margin:0;font-size:15px;white-space:nowrap}
    .ph-app .app-badges{grid-column:2;grid-row:1 / span 2}
    .page-head .container:has(> .ph-app) > :not(.ph-app){max-width:calc(100% - 560px)}
}
/* 1100-1199px: not enough room beside the title, so the compact bar above the title is used. */
@media(min-width:1100px) and (max-width:1199px){
    .ph-app{position:static;transform:none;display:inline-flex;margin-bottom:16px;padding:9px 12px;gap:12px;border-radius:14px;max-width:none}
    .page-head .container:has(> .ph-app) > :not(.ph-app){max-width:none}
    .ph-app .as2-phone{width:30px;height:52px;border-radius:8px;padding:3px}
    .ph-app-title{display:none}
    .ph-app-copy{flex-direction:row;align-items:center;gap:10px}
    .ph-app-eyebrow{font-size:12.5px;color:#fff}
}
/* Pinned near the top of the header rather than centred: on the catalogue the header is only the
   title tall and the search box overlaps its lower part, so a centred card touched the search box. */
@media(min-width:1200px){
    .ph-app{top:-18px;transform:none}
}
/* A little slimmer and higher, so it clears the catalogue's search box with room to spare. */
@media(min-width:1200px){
    .ph-app{top:-24px;padding:8px 14px}
    .ph-app .as2-phone{width:26px;height:46px}
}
/* Third pass on placement: centred in the header, level with the title and facts, on every page
   except the catalogue, whose header is only the title tall with the search box over its lower
   part; there it stays pinned high so it clears the search box. */
@media(min-width:1200px){
    .ph-app{top:50%;transform:translateY(-50%)}
    .page-head:has(+ .container .search-card) .ph-app{top:-24px;transform:none}
}
/* Destination pages: the card sits on the same line as the facts row (price, plans, days,
   network), which is the header's last line. The card is 63px and a fact chip 40px, so its
   bottom goes 12px below the chips' to put both centres on one line. */
@media(min-width:1200px){
    .country-head .ph-app{top:auto;bottom:-12px;transform:none}
}

/* Catalogue header (design A): title, a line of what the listing is, three facts; the app card
   stacked (phone and name, badges under) and centred beside them. The bottom padding leaves room
   for the search card, which overlaps the header by 34px, under the facts. */
.cat-head{padding:36px 0 62px}
.cat-head h1 svg{width:32px;height:32px;flex-shrink:0}
.cat-head .ch-facts{margin-top:16px}
/* Every inner page takes the same stacked, centred card (the owner asked, destination pages first,
   then the rest), in place of the slim row. */
@media(min-width:1200px){
    .page-head:has(+ .container .search-card) .ph-app,
    .page-head .ph-app,
    .page-head.country-head .ph-app{top:50%;bottom:auto;transform:translateY(-50%);
        display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:12px;padding:14px 16px;border-radius:18px}
    .page-head .ph-app-copy{display:contents}
    .page-head .ph-app .as2-phone{grid-column:1;grid-row:1 / span 2;width:26px;height:46px}
    .page-head .ph-app-eyebrow{grid-column:2;grid-row:1;align-self:end}
    .page-head .ph-app-title{grid-column:2;grid-row:2;align-self:start;margin:0}
    .page-head .ph-app .app-badges{grid-column:1 / -1;grid-row:3}
    .page-head .container:has(> .ph-app) > :not(.ph-app){max-width:calc(100% - 400px)}
    /* The other inner headers are only a title (and a line) tall, shorter than the 120px card, so
       they grow to hold it, with their content centred beside it. Items keep their own width, so
       the invoice button does not stretch across. */
    .page-head:not(.cat-head,.country-head):has(> .container > .ph-app){padding:24px 0}
    .page-head:not(.cat-head,.country-head) > .container:has(> .ph-app){min-height:124px;
        display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
    /* Centred on the title and facts, below the breadcrumbs (21px + 16px margin). */
    .page-head.country-head .ph-app{top:calc(50% + 18px)}
}
@media(max-width:680px){
    .cat-head{padding:24px 0 54px}
    .cat-head h1{font-size:25px;gap:10px}
    .cat-head h1 svg{width:26px;height:26px}
    .cat-head .ch-facts{margin-top:14px}
}

/* Regional destinations: the countries covered, under the header. */
.cov-block{padding-bottom:0}
.cov-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:0 8px 24px rgba(13,27,62,.05)}
.cov-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.cov-head h2{font-size:21px;font-weight:800;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.cov-n{background:#eef4ff;color:var(--brand-deep);border-radius:999px;padding:2px 11px;font-size:14px;font-weight:800}
.cov-head p{margin:0;color:var(--muted);font-size:14px}
.cov-search{position:relative;width:260px;max-width:100%}
.cov-search svg{position:absolute;top:50%;inset-inline-start:12px;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.cov-search input{width:100%;height:42px;border:1px solid var(--line);border-radius:12px;padding-inline:38px 12px;font:inherit;font-size:14px;outline:none}
.cov-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(3,96,255,.12)}
.cov-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cov-grid li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:#fbfcff}
.cov-grid li[hidden]{display:none}
.cov-grid img{width:28px;height:19px;border-radius:4px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.cov-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cov-txt b{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cov-txt small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.cov-empty{margin:12px 0 0;color:var(--muted);font-size:14px}
.cov-more{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font:inherit;font-weight:700;font-size:14px;color:var(--brand-deep);cursor:pointer}
.cov-more:hover{border-color:var(--brand)}
.ch-link a{display:flex;align-items:center;gap:7px;color:inherit;text-decoration:none}
.ch-link:hover{background:rgba(255,255,255,.2)}
@media(max-width:600px){
    .cov-card{padding:18px 16px}
    .cov-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .cov-grid li{padding:8px 10px;gap:8px}
    .cov-search{width:100%}
}

/* Cart: each plan a boarding pass, the summary beside them (sticky on a wide screen). */
.cart-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:20px;align-items:start}
.cart-passes{display:flex;flex-direction:column;gap:12px;min-width:0}
.pass{display:grid;grid-template-columns:minmax(0,1fr) auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 18px rgba(13,27,62,.04)}
.pass-main{padding:16px 18px;min-width:0}
.pass-route{display:flex;align-items:center;gap:10px}
.pass-flag{width:40px;height:28px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--line)}
.pass-globe{display:grid;place-items:center;background:#eaf1ff;color:var(--brand);border-color:#d6e3ff}
.pass-globe svg{width:17px;height:17px}
.pass-name{font-size:16.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pass-qty{flex:none;font-size:12.5px;font-weight:700;color:var(--brand-deep);background:#eaf1ff;border:1px solid #cfdfff;border-radius:8px;padding:2px 8px}
.pass-dash{flex:1;min-width:24px;border-top:2px dashed #d5ddeb}
.pass-plane{width:20px;height:20px;color:var(--brand);flex:none}
body.rtl .pass-plane{transform:scaleX(-1)}
.pass-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px;font-size:14px}
.pass-meta small{color:var(--muted);font-size:12px;margin-inline-end:4px}
.pass-meta b{color:var(--ink);font-weight:800}
.pass-stub{border-inline-start:2px dashed #d5ddeb;padding:14px 18px;min-width:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
.pass-price{font-size:21px;font-weight:800;color:var(--brand)}
.pass-stub small{font-size:12px;color:var(--muted)}
.pass-remove{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:2px 4px;color:var(--muted);font-size:12.5px;cursor:pointer}
.pass-remove svg{width:14px;height:14px}
.pass-remove:hover{color:#dc2626}
.cart-sum{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:0 6px 18px rgba(13,27,62,.04);position:sticky;top:16px}
.cart-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding-bottom:10px}
.cart-off{color:#15803d}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px}
.cart-total span{font-size:15px;font-weight:700;color:var(--ink)}
.cart-total b{font-size:28px;font-weight:800;color:var(--brand)}
.cart-go{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.cart-go svg{width:18px;height:18px}
body.rtl .cart-go svg{transform:scaleX(-1)}
.cart-trust{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px;color:#475569}
.cart-trust li{display:flex;align-items:center;gap:8px}
.cart-trust svg{width:16px;height:16px;color:var(--muted);flex:none}
.cart-promo{margin-top:12px}
.cart-promo summary{cursor:pointer;color:var(--brand);font-size:13.5px;font-weight:700;list-style:none}
.cart-promo summary::-webkit-details-marker{display:none}
.cart-promo form{display:flex;gap:8px;margin-top:10px}
.cart-promo input{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.cart-promo-on{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px}
@media(max-width:991px){
    .cart-grid{grid-template-columns:1fr}
    .cart-sum{position:static}
}
@media(max-width:560px){
    .pass-main{padding:13px 14px}
    .pass-stub{padding:12px;min-width:92px}
    .pass-price{font-size:18px}
    .pass-name{font-size:15px}
    .pass-flag{width:34px;height:24px}
    .pass-meta{gap:4px 14px;font-size:13px}
}

/* Checkout: the whole order as one boarding pass, a leg per plan and the total past a tear line. */
.trip{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(13,27,62,.04)}
.trip-top{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#eaf1ff;padding:12px 18px;color:var(--brand-deep);font-size:14px}
.trip-top b{font-weight:800}
.trip-edit{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--brand)}
.trip-edit svg{width:14px;height:14px}
.trip-leg{display:flex;align-items:center;gap:12px;padding:14px 18px}
.trip-leg + .trip-leg{border-top:1px dashed #d5ddeb}
.trip-nm{min-width:0;flex:1}
.trip-nm b{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:800;color:var(--ink)}
.trip-nm small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.trip-pr{font-size:15.5px;font-weight:800;color:var(--ink);flex:none}
.trip-off{justify-content:space-between;color:#15803d;font-size:14px}
.trip-off .trip-pr{color:#15803d}
.trip-tear{position:relative;border-top:2px dashed #d5ddeb;margin:0 18px}
.trip-tear::before,.trip-tear::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.trip-tear::before{inset-inline-start:-29px}
.trip-tear::after{inset-inline-end:-29px}
.trip-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.trip-foot span{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink)}
.trip-foot b{font-size:24px;font-weight:800;color:var(--brand)}
.pay-where{font-weight:800;font-size:14.5px;display:block;margin-bottom:7px;color:var(--ink)}
.pay-where-hint{display:block;margin-top:5px;font-size:12px;color:var(--muted)}
@media(max-width:560px){
    .trip-top,.trip-leg,.trip-foot{padding-inline:14px}
    .trip-tear{margin:0 14px}
    .trip-tear::before{inset-inline-start:-25px}
    .trip-tear::after{inset-inline-end:-25px}
}
.pay-due{border-top:0;padding-top:0;margin-bottom:14px}

/* Home FAQ as a conversation: a blue header, the thread on a dotted "chat wallpaper" that holds
   only the last question and its answer, and the questions as icon cards; the chosen one turns solid. */
.faqc{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 18px 40px rgba(13,27,62,.08)}
.faqc-hd{display:flex;align-items:center;gap:14px;padding:18px 22px;color:#fff;background:linear-gradient(135deg,#031a63,#0360ff)}
.faqc-av{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;flex:none}
.faqc-av svg{width:22px;height:22px}
.faqc-ttl{min-width:0}
.faqc-ttl h2{font-size:22px;font-weight:800;margin:0;color:#fff}
.faqc-ttl small{display:block;font-size:13.5px;color:#cfe0ff;margin-top:2px}
.faqc-all{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--brand-deep);background:#fff;border-radius:999px;padding:8px 14px;white-space:nowrap;text-decoration:none;transition:transform .15s}
.faqc-all span{background:#eaf1ff;border-radius:999px;padding:1px 8px;font-size:12.5px}
.faqc-all svg{width:14px;height:14px}
body.rtl .faqc-all svg{transform:scaleX(-1)}
.faqc-all:hover{transform:translateY(-1px);color:var(--brand-deep)}
.faqc-log{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:26px 24px;min-height:230px;
    background:#f4f7fd radial-gradient(#d9e3f5 1.2px,transparent 1.2px) 0 0/18px 18px}
.faqc-me{align-self:flex-start;max-width:70%;color:#fff;background:linear-gradient(135deg,#0360ff,#0349cc);border-radius:20px 20px 20px 6px;
    padding:11px 17px;font-size:15.5px;font-weight:700;box-shadow:0 8px 20px rgba(3,96,255,.22);animation:faqc-in .25s ease-out}
body.rtl .faqc-me{border-radius:20px 20px 6px 20px}
.faqc-bot{align-self:flex-end;display:flex;align-items:flex-end;gap:10px;max-width:84%;animation:faqc-in .3s ease-out}
.faqc-bot .faqc-av{width:34px;height:34px;background:var(--brand);border:0}
.faqc-bot .faqc-av svg{width:16px;height:16px}
.faqc-msg{background:#fff;border:1px solid #e3e9f4;border-radius:20px 20px 6px 20px;padding:12px 18px 14px;font-size:15.5px;line-height:1.8;color:#334155;box-shadow:0 8px 22px rgba(13,27,62,.07)}
body.rtl .faqc-msg{border-radius:20px 20px 20px 6px}
.faqc-from{display:block;font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.2px;margin-bottom:2px}
.faqc-msg p{margin:0}
.faqc-msg .faq-link{margin-top:8px}
.faqc-typing{display:flex;gap:5px;padding:16px 20px}
.faqc-typing i{width:8px;height:8px;border-radius:50%;background:#9fb3d9;animation:faqc-dot 1s infinite ease-in-out}
.faqc-typing i:nth-child(2){animation-delay:.15s}
.faqc-typing i:nth-child(3){animation-delay:.3s}
@keyframes faqc-dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes faqc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.faqc-me,.faqc-bot,.faqc-typing i{animation:none}}
.faqc-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px 22px 22px;border-top:1px solid var(--line)}
.faqc-chip{font:inherit;display:flex;align-items:center;gap:10px;text-align:start;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:10px 12px;cursor:pointer;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s,background .15s}
.faqc-ic{width:36px;height:36px;border-radius:11px;background:#eaf1ff;color:var(--brand);display:grid;place-items:center;flex:none;transition:background .15s,color .15s}
.faqc-ic svg{width:18px;height:18px}
.faqc-q{font-size:14px;font-weight:700;line-height:1.45}
.faqc-chip:hover{border-color:#b9d0ff;box-shadow:0 6px 16px rgba(3,96,255,.1);transform:translateY(-1px)}
.faqc-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.faqc-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(3,96,255,.25)}
.faqc-chip.on .faqc-ic{background:rgba(255,255,255,.18);color:#fff}
@media(max-width:991px){.faqc-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
    .faqc{border-radius:18px}
    .faqc-hd{flex-wrap:wrap;padding:16px}
    .faqc-ttl h2{font-size:19px}
    .faqc-ttl small{font-size:12.5px}
    .faqc-all{margin-inline-start:60px;padding:6px 12px;font-size:13px}
    .faqc-log{padding:20px 14px;min-height:210px}
    .faqc-me,.faqc-msg{font-size:14.5px}
    .faqc-me{max-width:88%}
    .faqc-bot{max-width:100%}
    .faqc-chips{gap:8px;padding:14px}
    .faqc-chip{padding:9px 10px;gap:8px}
    .faqc-ic{width:30px;height:30px;border-radius:9px}
    .faqc-ic svg{width:16px;height:16px}
    .faqc-q{font-size:13px}
}
@media(min-width:561px){.faqc-bot{max-width:min(84%,820px)}}

/* App banner, shorter (the owner asked). Wide screens: tighter spacing and the phone scaled to 70%
   inside a fixed 300px box, so the copy sets the height. Stacked layouts: the phone rises from the
   banner's bottom edge and is cut by it, showing its top (logo, plan card, ring) instead of a whole
   phone under the copy. */
@media(min-width:992px){
    .app-banner{padding:36px 48px;gap:24px}
    .app-copy h2{font-size:32px;margin:12px 0 8px}
    .app-lede{font-size:16px;margin-bottom:14px}
    .app-points{gap:8px;margin-bottom:20px}
    .app-visual{min-height:0;height:300px}
    .app-visual::before{width:270px;height:270px}
    .app-visual .app-device{transform:scale(.7)}
}
@media(max-width:991px){
    .app-banner{padding-bottom:0}
    .app-visual{min-height:0;height:220px;align-items:flex-start;margin-top:4px}
    .app-visual::before{top:10px}
    .app-visual .app-device{transform:scale(.8);transform-origin:top center}
}
@media(max-width:600px){
    .app-banner{gap:14px}
    .app-points{margin-bottom:18px}
    .app-visual{height:190px;margin-top:12px}
    .app-visual .app-device{transform:scale(.86)}
}

/* FAQ header light (the owner's pick), so it no longer reads as one blue block with the app banner
   above it; the blue stays on the question bubble and the chosen card. */
.faqc-hd{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.faqc-hd > .faqc-av{background:#eaf1ff;border-color:#d6e3ff;color:var(--brand)}
.faqc-ttl h2{color:var(--ink)}
.faqc-ttl small{color:var(--muted)}
.faqc-all{background:#eaf1ff;border:1px solid #d6e3ff}
.faqc-all span{background:#fff}
.faqc-all:hover{background:#dde9ff}

/* The owner asked for a 1px light-grey outline round the whole FAQ card. */
.faqc{border:1px solid #d4d4d4}

/* Inner page headers (the owner's pick, option A): the same brand gradient, now slightly see-through
   over a greyed travel map, so the map reads as a faint texture. The image is 57KB; with it missing
   the solid brand blue underneath still carries the white text. */
.page-head{background:linear-gradient(135deg,rgba(3,26,99,.92),rgba(3,73,204,.86) 55%,rgba(3,96,255,.8)),#0349cc url(/img/head-map.jpg) center/cover no-repeat}

/* App slide, third pass (the owner's pick, option A): the same faint greyed travel map as the inner
   page headers, under the midnight navy made slightly see-through, with the blue glow behind the
   phone kept. The dot grid is dropped: over the map it only added noise. */
.hero-app{background:
    radial-gradient(circle at 76% 52%,rgba(3,96,255,.45),rgba(3,96,255,0) 42%),
    linear-gradient(135deg,rgba(5,11,31,.93) 0%,rgba(8,24,74,.9) 55%,rgba(3,40,140,.86) 100%),
    #0a1430 url(/img/head-map.jpg) center/cover no-repeat}
body.rtl .hero-app{background:
    radial-gradient(circle at 24% 52%,rgba(3,96,255,.45),rgba(3,96,255,0) 42%),
    linear-gradient(225deg,rgba(5,11,31,.93) 0%,rgba(8,24,74,.9) 55%,rgba(3,40,140,.86) 100%),
    #0a1430 url(/img/head-map.jpg) center/cover no-repeat}
.hero-app::before{background:none}

/* Home app banner (the owner asked for option A here too): its brand gradient made slightly
   see-through over the same faint travel map as the hero's app slide and the inner headers. */
.app-banner{background:linear-gradient(135deg,rgba(3,26,99,.92) 0%,rgba(3,73,204,.86) 55%,rgba(3,96,255,.8) 100%),#0349cc url(/img/head-map.jpg) center/cover no-repeat}

/* Checkout while sales are paused (live provisioning off): a calm notice in place of the PayPal buttons. */
.pay-paused{background:#fff8e6;border:1px solid #f5d38a;color:#7a5200;border-radius:12px;padding:14px 16px;font-weight:700;font-size:14.5px;line-height:1.7}

/* Order state on the customer's order/track pages, and an eSIM still being issued. */
.ord-state{border-radius:12px;padding:14px 16px;font-weight:700;font-size:14.5px;line-height:1.7;margin-bottom:16px;border:1px solid}
.ord-state-info{background:#eaf1ff;border-color:#cfdfff;color:#0b3a8c}
.ord-state-warn{background:#fff8e6;border-color:#f5d38a;color:#7a5200}
.esim-preparing{margin-top:14px;background:#f4f7fd;border:1px dashed #cfd9ea;border-radius:12px;padding:18px 14px;color:#475569;font-weight:600;text-align:center}

/* One-time notice under the header (account confirmed, ...) */
.site-notice{margin:16px 0 0;background:#ecfdf3;border:1px solid #abefc6;color:#05603a;border-radius:12px;padding:12px 16px;font-weight:700;font-size:14.5px;line-height:1.7}

/* Plan card: when the validity starts, and a link to the plan's details */
.plan-start{font-size:12.5px;color:#64748b;margin:-2px 0 6px;text-align:end}
.plan-start.is-install{color:#b45309;font-weight:700}
.plan-start a{color:#1063f6;text-decoration:none;font-weight:600}
.plan-start a:hover{text-decoration:underline}
/* Plan page: facts from the supplier's data */
.plan-facts-title{font-size:18px;font-weight:800;margin:0 0 10px}
.plan-facts ul{list-style:none;padding:0;margin:0}
.plan-facts li{padding:8px 0;border-top:1px dashed #e2e8f0;line-height:1.7;font-size:14.5px}
.plan-facts li:first-child{border-top:0}
.plan-notes{margin-top:12px;padding:12px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;font-size:13.5px;line-height:1.7}
.plan-notes p{margin:0 0 6px}

/* eSIM panel on the order pages: live usage, dates, adding data */
.use-note{margin-top:10px;font-size:13.5px;line-height:1.7;background:#f1f6ff;border:1px solid #dbe7ff;color:#1e3a8a;border-radius:10px;padding:8px 12px}
.use-note.is-warn{background:#fff8e6;border-color:#f5d38a;color:#7a5200}
.use-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.use-refresh{background:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;color:#1063f6;cursor:pointer}
.use-refresh:hover{background:#f1f6ff}
.btn-topup{display:block;text-align:center;margin-top:12px;background:#1063f6;color:#fff;border-radius:10px;padding:10px 14px;font-weight:700;text-decoration:none}
.btn-topup:hover{background:#0b4fd0;color:#fff}
.topup-history{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.topup-st{font-weight:700}
.topup-st.st-applied{color:#15803d}
.topup-st.st-paid,.topup-st.st-failed,.topup-st.st-review{color:#b45309}

/* Refund request, at the foot of the eSIM panel: a quiet link that opens a short form */
.refund-box{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.refund-box>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;flex-wrap:wrap}
.refund-box>summary::-webkit-details-marker{display:none}
.refund-open{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;color:#334155;background:#fff}
.refund-box>summary:hover .refund-open{background:#f8fafc}
.refund-box[open] .refund-open{background:#f1f5f9}
.refund-form{margin-top:10px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.refund-title{font-weight:800}
.refund-opt{display:flex;align-items:center;gap:8px;cursor:pointer}
.refund-opt:has(input:disabled){color:#94a3b8;cursor:not-allowed}
.refund-form textarea{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:13.5px;resize:vertical;min-height:56px}
.refund-warn{background:#fff8e6;border:1px solid #f5d38a;color:#7a5200;border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.6}
.refund-submit{background:var(--brand,#0360ff);color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.refund-submit:hover{background:#0040dd}
.refund-state{margin-top:12px;font-size:13.5px;line-height:1.7;border-radius:10px;padding:8px 12px;border:1px solid}
.refund-state.is-pending{background:#f1f6ff;border-color:#dbe7ff;color:#1e3a8a}
.refund-state.is-no{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.refund-state.is-done{background:#f0fdf4;border-color:#bbf7d0;color:#166534}

/* Toast: one-time notice after an action (account confirmed, password changed). Floats in the
   corner (the end side: left in Arabic, right in English) over the content. */
.toast-stack{position:fixed;top:20px;inset-inline-end:20px;z-index:990;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 24px))}
.toast-card{position:relative;display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px 14px 16px;box-shadow:0 12px 32px rgba(11,42,111,.14),0 2px 6px rgba(11,42,111,.06);overflow:hidden;animation:toast-in .32s cubic-bezier(.2,.9,.3,1.2) both}
.toast-card.is-leaving{animation:toast-out .26s ease-in forwards}
.toast-ico{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center}
.toast-ico svg{width:18px;height:18px}
.toast-card.is-success .toast-ico{background:#dcfce7;color:#15803d}
.toast-card.is-warn .toast-ico{background:#fef3c7;color:#b45309}
.toast-card.is-info .toast-ico{background:#e0ecff;color:#1d4ed8}
.toast-card.is-info .toast-text{color:#1e293b;font-weight:600;margin-top:6px}
.toast-body{flex:1;min-width:0}
.toast-title{font-weight:800;color:#0f172a;font-size:14.5px;line-height:1.4}
.toast-text{color:#64748b;font-size:13px;line-height:1.65;margin-top:2px}
.toast-card.is-warn .toast-text{color:#7a5200;font-weight:600;margin-top:6px}
.toast-x{flex:none;background:none;border:0;color:#94a3b8;font-size:22px;line-height:1;min-width:32px;min-height:32px;margin-block-start:-6px;margin-inline-end:-6px;cursor:pointer;border-radius:8px}
.toast-x:hover{color:#0f172a;background:#f1f5f9}
.toast-bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:100%;background:#16a34a}
@keyframes toast-in{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(-10px) scale(.97)}}
@media (max-width:575px){.toast-stack{top:12px;inset-inline:12px;width:auto}}
@media (prefers-reduced-motion:reduce){.toast-card,.toast-card.is-leaving{animation:none}}

/* Home page on a phone (design B): each destination section is one swipe row of upright cards
   instead of a column of 12, so the page is three short rows rather than 34 cards. Home only
   (.home-rail); the catalogue keeps its grid. The third card peeks in to show the row scrolls. */
@media (max-width:575.98px){
  .home-rail{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-12px;padding:4px 12px 10px;scroll-padding-inline:12px}
  .home-rail::-webkit-scrollbar{display:none}
  .home-rail .dest-card{flex:0 0 138px;flex-direction:column;scroll-snap-align:start;border-radius:16px}
  .home-rail .dest-card:hover{transform:none}
  .home-rail .dest-main{flex:1 1 auto;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 10px 6px}
  .home-rail .dest-flag{width:46px;height:31px}
  .home-rail .dest-flag.ph,.home-rail .dest-cover{width:54px;height:40px}
  .home-rail .dest-cover-n{font-size:17px}
  .home-rail .dest-text{align-items:center;width:100%}
  .home-rail .dest-name{font-size:14px;line-height:1.25}
  .home-rail .dest-sub{justify-content:center;margin-top:3px;font-size:11.5px}
  .home-rail .dest-code,.home-rail .dest-dot{display:none}
  .home-rail .dest-perf{width:auto;border-inline-start:0;border-top:2px dashed #e2e8f0;margin:4px 12px 0}
  .home-rail .dest-stub{min-width:0;background:transparent;flex-direction:row;align-items:baseline;justify-content:center;gap:5px;padding:8px 10px 12px}
  .home-rail .dest-from{font-size:10px}
  .home-rail .dest-price{font-size:17px;margin:0}
}

/* Text cut to its box (a line clamp or a one-line ellipsis) also lost what hangs below the line:
   in Cairo the dots under ي and ج sit ~5px under it, so "عالمي" read "عالمى" and "أوروغواي"
   "أوروغواى". Room above and below inside the box, taken back outside, shows them whole without
   moving anything. */
.dest-name,.sg-name,.cov-txt b,.cov-txt small,.pass-name,.acct-name{padding-block:.3em;margin-block:-.3em}

/* My eSIMs (/Orders): table on wider screens, one card per order on phones, and checkouts that
   were never paid folded at the foot of the page. */
.ord-kpis{margin-bottom:22px}
.ord-portal-note{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f1f6ff;border:1px solid #dbe7ff;color:#1e3a8a;border-radius:12px;padding:10px 14px;margin-bottom:16px;font-weight:700;font-size:14px;text-decoration:none}
.ord-portal-note:hover{background:#e6efff;color:#1e3a8a}
/* a long region name wraps; only its size is kept on one line */
.ord-dest{overflow-wrap:break-word}
.ord-dest>[dir=ltr]{white-space:nowrap}
.s-review{background:#fff8e6;color:#7a5200}
.ord-row-alert{color:#b91c1c;font-size:12px;margin-top:4px;max-width:220px}
.ord-row-alert.is-review{color:#7a5200}
.ord-row-alert.is-info{color:#475569}
.ord-actions{white-space:nowrap}
.ord-actions .nav-pill{display:inline-block;margin:2px 0}
.ord-cards{display:none}
.ord-empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center;margin-bottom:18px}
.ord-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px}
.ord-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ord-card-no{font-weight:800;font-size:15px;color:var(--ink)}
.ord-card-date{font-size:12.5px;margin-top:1px}
.ord-card-dests{margin-top:10px;font-weight:700;color:var(--ink);line-height:1.7}
.ord-card-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:13.5px;color:#334155}
.ord-card-note{font-size:12px;margin-top:2px}
.ord-card-alert{margin-top:8px;font-size:12.5px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:6px 10px}
.ord-card-alert.is-review{color:#7a5200;background:#fff8e6;border-color:#f5d38a}
.ord-card-alert.is-info{color:#334155;background:#f1f5f9;border-color:#e2e8f0}
.ord-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);flex-wrap:wrap}
.ord-card-total{font-size:18px;font-weight:800;color:var(--ink)}
.ord-unpaid{margin-top:22px;background:#fff;border:1px dashed #cbd5e1;border-radius:14px}
.ord-unpaid>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;padding:12px 16px;font-weight:700;color:#475569}
.ord-unpaid>summary::-webkit-details-marker{display:none}
.ord-unpaid-n{display:inline-block;min-width:22px;text-align:center;background:#f1f5f9;border-radius:999px;padding:0 7px;margin-inline-start:6px;font-size:12.5px}
.ord-unpaid-chev{transition:transform .2s}
.ord-unpaid[open] .ord-unpaid-chev{transform:rotate(180deg)}
.ord-unpaid-hint{margin:0 16px 8px;font-size:13px}
.ord-unpaid-list{list-style:none;margin:0;padding:0 16px 8px}
.ord-unpaid-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.ord-unpaid-main{min-width:0;font-size:14px}
.ord-unpaid-dests{font-size:13px;color:#475569;margin-top:2px}
.ord-unpaid-side{display:flex;align-items:center;gap:10px}
/* The table needs ~940px: below 1024px (tablets as well as phones) it is cards, two across
   where they fit, so nothing is ever scrolled sideways. */
@media (max-width:1023.98px){
  .ord-table{display:none}
  .ord-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
  /* the four totals in one row, not three and an orphan */
  .ord-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* about 123px each at 768-991px: a five-figure total such as $12,345.67 must still fit */
  .ord-kpis .kpi .value{font-size:20px;white-space:nowrap}
}
@media (max-width:767.98px){
  /* the four totals as a 2x2 block instead of four full-width rows */
  .ord-kpis{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .ord-kpis .kpi{padding:12px 14px;box-shadow:none}
  .ord-kpis .kpi .label{font-size:11px;letter-spacing:0}
  .ord-kpis .kpi .value{font-size:clamp(17px,5.4vw,22px)}
}

/* Slides written in the admin's editor (category "slider"): the same look as the built-in ones.
   The body is free HTML, so the rules target plain tags inside .hero-body. */
.hero-body h1,.hero-body h2,.hero-body h3{font-size:46px;font-weight:800;line-height:1.12;margin:0 0 16px;max-width:660px;
  letter-spacing:-.8px;text-shadow:0 2px 18px rgba(0,0,0,.35);color:#fff}
.hero-body h3{font-size:30px}
.hero-body p.hero-actions{max-width:none;margin:0;text-shadow:none}
.hero-body a:not(.hero-cta):not(.hero-cta2){color:#9cc6ff}
.hero-body a.hero-cta::after{content:"";width:16px;height:16px;flex-shrink:0;background:currentColor;transition:transform .15s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-body a.hero-cta:hover::after{transform:translateX(3px)}
body.rtl .hero-body a.hero-cta::after{transform:scaleX(-1)}
body.rtl .hero-body a.hero-cta:hover::after{transform:scaleX(-1) translateX(3px)}
.hero-body ul.hero-trust li::before{content:"";width:15px;height:15px;flex-shrink:0;background:#6fb4ff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-body img{max-width:100%;height:auto}
.hero-slide.no-photo{background:linear-gradient(135deg,#031a63,#0360ff 55%,#009aff)}
@media(max-width:680px){
  .hero-body h1,.hero-body h2{font-size:30px;letter-spacing:-.4px}
  .hero-body h3{font-size:22px}
}

/* Content pages (/pages/...): rich text from the admin's editor. */
.cms-hero{background:linear-gradient(135deg,#031a63,#0360ff 60%,#009aff);color:#fff;padding:44px 0 38px}
.cms-hero h1{font-size:36px;font-weight:800;margin:0 0 8px;line-height:1.2}
.cms-hero p{color:#dce6f8;margin:0;max-width:720px;font-size:17px}
.cms-crumbs{font-size:13.5px;margin-bottom:10px;opacity:.9}
.cms-crumbs a{color:#cfe0ff}
.cms-cover{width:100%;max-height:420px;object-fit:cover;border-radius:16px;margin:0 0 24px;display:block}
.cms-body{font-size:16.5px;line-height:1.8;color:#1c2540;max-width:820px}
.cms-body h2,.cms-body h3,.cms-body h4{font-weight:800;line-height:1.3;margin:1.4em 0 .5em;color:#0a1430}
.cms-body h2{font-size:26px}.cms-body h3{font-size:21px}
.cms-body img{max-width:100%;height:auto;border-radius:12px}
.cms-body figure{margin:1.2em 0}.cms-body figcaption{font-size:13.5px;color:var(--muted);margin-top:6px}
.cms-body table{border-collapse:collapse;width:100%;margin:1em 0;display:block;overflow-x:auto}
.cms-body td,.cms-body th{border:1px solid #dbe3f0;padding:9px 12px}
.cms-body th{background:#f5f8ff}
.cms-body blockquote{border-inline-start:4px solid var(--brand);margin:1.2em 0;padding:.5em 1.1em;color:#334155;background:#f5f8ff;border-radius:0 10px 10px 0}
.cms-body p.lead{font-size:19px;color:#334155}
.cms-body .cms-note{background:#f5f8ff;border:1px solid #dbe6ff;border-radius:12px;padding:14px 18px;margin:1em 0}
.cms-body a.hero-cta{background:var(--brand);color:#fff;text-decoration:none}
.cms-body a.hero-cta:hover{color:#fff}
.cms-body a.hero-cta2{border-color:var(--brand);color:var(--brand);text-decoration:none}
.cms-body a.hero-cta2:hover{background:#eef4ff;color:var(--brand)}
.cms-body p.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.cms-body ul.hero-trust li{color:#334155}
.cms-body ul.hero-trust li::before{content:"✓";color:var(--brand);font-weight:800}
.cms-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.cms-card{display:block;background:#fff;border:1px solid #e7ecf5;border-radius:16px;overflow:hidden;color:inherit;transition:.15s}
.cms-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(10,20,48,.08);color:inherit}
.cms-card img{width:100%;height:160px;object-fit:cover;display:block;background:#eef3fb}
.cms-card .cms-card-b{padding:14px 16px}
.cms-card h3{font-size:17px;font-weight:800;margin:0 0 6px}
.cms-card p{font-size:14px;color:var(--muted);margin:0}
@media(max-width:680px){.cms-hero h1{font-size:27px}.cms-body{font-size:16px}}

/* "Why choose" cards from the admin: rich text and an uploaded icon image. */
.why-intro{color:var(--muted);max-width:760px;margin:-6px 0 22px;font-size:16px}
.why-intro p{margin:0}
.why-ico img{width:30px;height:30px;object-fit:contain;display:block}
.why-body p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
.why-body p+p,.why-body ul,.why-body ol{margin-top:6px}
.why-body ul,.why-body ol{color:var(--muted);font-size:14.5px;padding-inline-start:18px;margin-bottom:0}
.why-body a{color:var(--brand);font-weight:600}

/* FAQ answers from the admin's editor (accordion and home chat). */
.cms-answer p{margin:0}
.cms-answer p+p,.cms-answer ul,.cms-answer ol{margin-top:8px}
.cms-answer ul,.cms-answer ol{padding-inline-start:20px;margin-bottom:0}
.cms-answer a:not(.faq-link){color:var(--brand-deep);font-weight:600}
.cms-answer a.faq-link::after{content:"";width:14px;height:14px;flex-shrink:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
body.rtl .cms-answer a.faq-link::after{transform:scaleX(-1)}
.page-lede p{margin:0}

/* Footer columns from the admin (category "footer"): heading = page title, links = its content. */
.foot-grid{display:flex;flex-wrap:wrap;gap:28px 40px;padding:44px 12px 30px}
.foot-brand{flex:1.4 1 220px}
.foot-col{flex:1 1 150px}
.foot-brand p{color:var(--muted);font-size:14px;margin:12px 0 0;max-width:260px}
.foot-col h3{font-size:13.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;color:var(--ink,#0a1430)}
body.rtl .foot-col h3{letter-spacing:0;font-size:15px}
.foot-links ul,.foot-links ol{list-style:none;margin:0;padding:0}
.foot-links li{margin:0 0 10px}
.foot-links p{margin:0 0 10px;color:var(--muted);font-size:14.5px}
.site-footer .foot-links a{color:var(--muted);font-size:14.5px;text-decoration:none;padding:0;transition:color .15s}
.site-footer .foot-links a:hover{color:var(--brand)}
.foot-links img{max-width:120px;height:auto}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);
  padding:16px 12px;color:var(--muted);font-size:13px;min-height:0}
.site-footer .container.foot-bottom{min-height:56px}
@media(max-width:767.98px){
  .foot-grid{padding-top:32px;gap:24px}
  .foot-brand{flex-basis:100%}
  .foot-col{flex:1 1 40%}
}

/* Contact form inside a content page */
.cms-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin:22px 0;max-width:760px}
.cms-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cms-form label{display:block;margin:0}
.cms-form label span{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px;color:#1c2540}
.cms-form .form-control{width:100%;border-radius:10px;padding:10px 12px}
.cms-form-full{margin-top:14px !important}
.cms-form-send{margin-top:16px;min-width:140px}
/* Hidden from people without moving it off-screen: a -9999px offset made Arabic pages scroll sideways. */
.cf-trap{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:575.98px){.cms-form-grid{grid-template-columns:1fr}}

/* Links inside page text look like links (the editor shows them so; the site had no style). */
.cms-body a:not(.hero-cta):not(.hero-cta2):not(.faq-link):not(.wa-btn){color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.cms-body a:not(.hero-cta):not(.hero-cta2):not(.faq-link):not(.wa-btn):hover{color:var(--brand-deep)}

/* ---- Device compatibility: the brand explorer (design A) ---- */
.dx{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start}
.dx-brands{display:flex;flex-direction:column;gap:8px;position:sticky;top:96px}
.dx-tab{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);
  color:var(--ink);font-weight:700;font-size:14.5px;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.dx-tab:hover{border-color:#cfe0ff;color:var(--brand-deep)}
.dx-tab.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(3,96,255,.22)}
.dx-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#eef4ff;color:var(--brand);flex:none}
.dx-ico svg{width:17px;height:17px}
.dx-tab.on .dx-ico{background:rgba(255,255,255,.18);color:#fff}
.dx-tname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-count{font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;background:#f1f5fc;color:var(--muted)}
.dx-tab.on .dx-count{background:rgba(255,255,255,.2);color:#fff}
.dx-panels{display:flex;flex-direction:column;gap:22px;min-width:0}
.dx-panel{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;scroll-margin-top:100px}
.dx-js:not(.dx-searching) .dx-panel{display:none}
.dx-js:not(.dx-searching) .dx-panel.on{display:block}
.dx-panel[hidden]{display:none !important}
.dx-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;min-height:132px;
  background:linear-gradient(120deg,#031a63,#0360ff 62%,#36a3ff);color:#fff;position:relative;overflow:hidden}
.dx-head h3{font-size:26px;font-weight:800;margin:0 0 6px;color:#fff;letter-spacing:-.3px}
.dx-head p{margin:0;color:#d6e4ff;font-size:14.5px}
/* Drawn devices, not product photos: no one's trademark imagery on the page. */
.dx-art{display:flex;align-items:flex-end;gap:10px;flex:none;transform:rotate(-8deg);margin-inline-end:6px}
body.rtl .dx-art{transform:rotate(8deg)}
.dx-art i{display:block;border:3px solid rgba(255,255,255,.9);border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.06));
  box-shadow:0 10px 26px rgba(0,0,0,.25);position:relative}
.dx-art i::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:34%;height:5px;border-radius:9px;background:rgba(255,255,255,.75)}
.dx-art.phone i:first-child{width:52px;height:98px}
.dx-art.phone i:last-child{width:44px;height:82px;opacity:.75}
.dx-art.tablet i:first-child{width:86px;height:112px;border-radius:14px}
.dx-art.tablet i:last-child{width:40px;height:74px;opacity:.75}
.dx-art.tablet i::after{width:14%;height:5px}
.dx-body{padding:20px 26px 24px}
.dx-note{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.6}
.dx-note svg{width:17px;height:17px;flex:none;margin-top:2px}
.dx-note.lock{background:#eef4ff;color:#16326e}
.dx-note.warn{background:#fff7e8;color:#8a4b04}
.dx-group{margin-top:18px}
.dx-group[hidden]{display:none}
.dx-series{font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px}
.dx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dx-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line);border-radius:11px;background:#fbfcff;
  font-size:14px;font-weight:600;color:var(--ink);transition:border-color .15s,background .15s}
.dx-chip:hover{border-color:#cfe0ff;background:#fff}
.dx-chip[hidden]{display:none}
.dx-chip .dev-name{direction:ltr;unicode-bidi:isolate}
.dx-chip svg{width:15px;height:15px;flex:none}
.dx-ok{color:#16a34a}
.dx-chip.warn{background:#fff8ec;border-color:#f6d9a8}
.dx-chip.warn .dx-warn{color:#c2410c}
.dx-chip .dev-note{display:inline;margin:0;font-size:12px;font-weight:600;color:#9a3412}
.dx-chip .dev-note::before{content:"· "}
@media (max-width:991.98px){
  .dx{grid-template-columns:1fr;gap:14px}
  /* The brands become a row to swipe through, kept in view while the models scroll. */
  .dx-brands{flex-direction:row;overflow-x:auto;position:sticky;top:64px;z-index:5;margin:0 -12px;padding:8px 12px;
    background:var(--bg,#f4f7fc);scrollbar-width:none}
  .dx-brands::-webkit-scrollbar{display:none}
  .dx-tab{flex:none;padding:8px 12px}
  .dx-tname{overflow:visible}
  .dx-head{padding:18px 18px;min-height:110px}
  .dx-head h3{font-size:21px}
  .dx-body{padding:16px 16px 20px}
  .dx-art.phone i:first-child{width:40px;height:76px}
  .dx-art.phone i:last-child{width:34px;height:64px}
  .dx-art.tablet i:first-child{width:64px;height:84px}
  .dx-art.tablet i:last-child{width:32px;height:58px}
}
@media (max-width:420px){ .dx-art{display:none} }

/* The explorer's panel and chips win over the old list styles they share a class with. */
.dx .dx-panel.dev-brand{padding:0;border-radius:18px}
.dx .dx-panel .dx-chip{padding:8px 13px;border:1px solid var(--line);font-size:14px}
.dx .dx-panel .dx-chip.warn{border-color:#f6d9a8}
.dx .dx-panel .dx-head h3{color:#fff;font-size:26px;margin:0 0 6px}
@media (max-width:991.98px){ .dx .dx-panel .dx-head h3{font-size:21px} }
.eid-more{margin-top:14px}
.eid-more>summary{cursor:pointer;font-weight:700;color:var(--brand-deep);font-size:14.5px;list-style:none;display:inline-flex;align-items:center;gap:6px}
.eid-more>summary::-webkit-details-marker{display:none}
.eid-more>summary::after{content:"";width:9px;height:9px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.eid-more[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.eid-more[open]>summary{margin-bottom:12px}

/* The brand header's picture, faded under the brand colour (Admin > Devices sets one per brand). */
.dx .dx-panel .dx-head{background:
    linear-gradient(120deg,rgba(3,26,99,.93) 0%,rgba(3,70,210,.84) 55%,rgba(30,140,255,.72) 100%),
    var(--dx-img) center/cover no-repeat, #0360ff;min-height:150px}
.dx .dx-panel .dx-head::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 15% 50%,rgba(255,255,255,.10),transparent 60%)}
.dx-head>*{position:relative;z-index:1}

/* ---- Installing an eSIM (order page and guest tracking) ---- */
.ins{display:flex;flex-direction:column;gap:14px;margin-top:14px;text-align:start}
.ins-qr{text-align:center}
.ins-qr p{color:var(--muted);font-size:13px;margin:6px auto 0;max-width:300px}
.ins-onphone .ins-qr{order:5;padding-top:6px;border-top:1px dashed var(--line)}
.ins-tabs{display:none;gap:6px;background:#f1f5fc;border-radius:12px;padding:4px}
.ins-js .ins-tabs{display:flex}
.ins-tab{flex:1;border:0;background:transparent;border-radius:9px;padding:9px 10px;font-weight:700;font-size:14px;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.ins-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(13,27,62,.08)}
.ins-js .ins-panel{display:none}
.ins-js .ins-panel.on{display:block}
.ins-apple{display:flex;align-items:center;justify-content:center;gap:8px;background:#0a0a0a;color:#fff;border-radius:12px;padding:13px 16px;
  font-weight:800;font-size:15px;text-decoration:none}
.ins-apple:hover{background:#222;color:#fff}
.ins-small{color:var(--muted);font-size:12.5px;margin:6px 0 12px;text-align:center}
.ins-field{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;background:#f8fafd;border:1px solid var(--line);
  border-radius:12px;padding:9px 12px;margin-bottom:8px}
.ins-field span{grid-column:1/-1;font-size:12px;font-weight:700;color:var(--muted)}
.ins-field code{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--ink);word-break:break-all;background:none;padding:0}
.ins-copy{border:1px solid #cfe0ff;background:#fff;color:var(--brand);font-weight:800;font-size:13px;border-radius:9px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.ins-copy.done{background:#16a34a;border-color:#16a34a;color:#fff}
.ins-steps{margin:10px 0 0;padding-inline-start:20px;font-size:14px;line-height:1.75;color:#1c2540}
.ins-steps li{margin-bottom:4px}
.ins-tip{background:#fff8ec;border:1px solid #f6d9a8;color:#8a4b04;border-radius:12px;padding:10px 12px;font-size:13.5px;margin:0}
.ins-iccid{font-size:12px;color:var(--muted)}
.ins-iccid code{font-size:12px;color:var(--muted);background:none}

/* ---- A ready eSIM, full width: install on one side, QR on the other ---- */
.esim-card.esim-wide{text-align:start;padding:26px 28px}
.esim-wide .esim-head{padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.esim-wide .esim-head h3{margin:0 0 4px;font-size:22px}
.esim-wide>.mt-3{margin-top:18px !important}
.ins{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-areas:"main side";gap:28px;align-items:start;margin-top:18px}
.ins-main{grid-area:main;min-width:0}
.ins-side{grid-area:side;position:sticky;top:96px;background:#f8fafd;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center}
.ins-side .qr{margin:0 auto 10px !important;width:190px !important;height:190px !important}
.ins-side .ins-iccid{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.ins-title{font-size:16px;font-weight:800;margin:0 0 12px;color:var(--ink)}
.ins-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.ins-fields .ins-field{margin:0}
.ins-panel{padding-top:14px}
.ins-apple{max-width:360px}
.ins-small{text-align:start !important;margin:6px 0 14px !important}
/* Steps as numbered rows, not a plain list */
.ins-steps{list-style:none;counter-reset:ins;padding:0 !important;margin:14px 0 0 !important;display:grid;gap:10px}
.ins-steps li{counter-increment:ins;position:relative;padding-inline-start:44px;min-height:30px;margin:0 !important;line-height:1.65}
.ins-steps li::before{content:counter(ins);position:absolute;inset-inline-start:0;top:0;width:30px;height:30px;border-radius:50%;
  background:#eaf2ff;color:var(--brand);font-weight:800;font-size:14px;display:grid;place-items:center}
.ins-tip{margin-top:16px !important}
@media (max-width:991.98px){
  .ins{grid-template-columns:1fr;grid-template-areas:"main" "side";gap:18px}
  .ins-side{position:static}
  .ins-fields{grid-template-columns:1fr}
  .ins-apple{max-width:none}
}
/* On the phone itself, before the script runs too: QR last (it already is, by the grid areas). */
.ins-onphone .ins-qr{order:0;padding-top:0;border-top:0}

/* Checkout: the confirmation box above the PayPal buttons */
.pay-agree{display:flex;gap:10px;align-items:flex-start;background:#f5f8ff;border:1.5px solid #dbe6ff;border-radius:12px;
  padding:12px 14px;margin:0 0 14px;font-size:14px;line-height:1.65;color:#1c2540;cursor:pointer;transition:border-color .15s,background .15s}
.pay-agree input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--brand);cursor:pointer}
.pay-agree a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pay-agree:has(input:checked){border-color:#86efac;background:#f0fdf4}
.pay-agree.need{border-color:#f59e0b;background:#fffbeb;animation:agree-shake .35s}
@keyframes agree-shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Buying closed (CheckoutCore.StorefrontOpen): one line above the header on every page, and the
   plan buttons say so instead of leading to a checkout that refuses at the last step. */
.sales-paused-strip{background:#fffbeb;color:#92400e;border-bottom:1px solid #fde68a;text-align:center;font-weight:700;font-size:14px;padding:9px 16px}
.btn-buy.is-paused,.btn-buy.is-paused:hover{background:#cbd5e1;color:#334155;cursor:not-allowed}
/* The cart's minus / plus: how many eSIMs of a plan, up to the limit. */
.pass-step{display:inline-flex;align-items:center;gap:2px;margin:4px 0}
.pass-step form{display:inline}
.pass-step button{width:28px;height:28px;border:1px solid #cfdfff;background:#fff;color:var(--brand-deep);border-radius:8px;font-weight:800;font-size:16px;line-height:1;cursor:pointer}
.pass-step button:disabled{opacity:.4;cursor:not-allowed}
.pass-step b{min-width:26px;text-align:center;font-size:14px}
/* A likely typo in the guest's email ("gmail.con"): offered as a one-tap fix. */
.pay-typo{display:block;margin-top:6px;font-size:13px;color:#92400e}
.pay-typo button{border:0;background:none;padding:0;color:var(--brand);font-weight:700;text-decoration:underline;cursor:pointer}
/* The order number in the tracking page's title fits a phone instead of running off it. */
.page-head h1.track-h1{font-size:clamp(22px,7vw,34px);flex-wrap:wrap;gap:6px 12px;overflow-wrap:anywhere}

/* Account page (/Account/Profile): the details, then the password and closing the account folded away */
.prof-wrap{max-width:520px}
.prof-wrap .panel+.panel{margin-top:16px}
.prof-select{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-size:15px}
.prof-box{padding:20px 30px}
.prof-box summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.prof-box summary::-webkit-details-marker{display:none}
.prof-box summary::after{content:"▾";color:var(--muted);font-size:14px}
.prof-box[open] summary::after{content:"▴"}
.prof-h{font-weight:800;font-size:17px}
.prof-danger .prof-h{color:#b91c1c}
.prof-tick{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:0 0 14px;line-height:1.6}
.prof-tick input{margin-top:5px}
.prof-del-btn{background:#b91c1c}
.prof-del-btn:hover{background:#991b1b}
@media (max-width:575px){.prof-box{padding:18px 20px}}

/* A guest's order page: keep it under an account */
.track-save{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#f4f7ff;border:1px solid #dbe5ff;border-radius:14px;padding:14px 18px;margin:0 0 18px}
.track-save p{margin:0;font-size:14.5px;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.track-save a{white-space:nowrap;font-weight:700;color:var(--brand)}

/* A regional plan's countries, on its plan page */
.plan-cov summary{cursor:pointer;font-weight:700;color:var(--brand)}
.plan-cov ul{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px}
.plan-cov li{display:flex;gap:8px;align-items:center;font-size:14px;min-width:0}
.plan-cov li img{width:20px;height:14px;object-fit:cover;border-radius:2px;flex:none}
.plan-cov li span{overflow-wrap:anywhere}

/* ---------------------------------------------------------------------------
   WhatsApp support (Admin > WhatsApp). Drawn only when the owner switched it on.
   The floating button takes the bottom-left corner in both languages: the chat widget
   (chatbot.es.jo) sits bottom-right whatever the page direction, and if it is ever moved left the
   layout's script adds .wa-right. The green is WhatsApp's, darkened so the white glyph keeps a
   3:1 contrast.
   --------------------------------------------------------------------------- */
.wa-ic{width:1.15em;height:1.15em;flex:none}
.wa-float{position:fixed;bottom:20px;left:20px;z-index:2147483645;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#1a9e4b;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2);
  transition:transform .15s,background-color .15s}
.wa-float.wa-right{left:auto;right:20px}
.wa-float .wa-ic{width:30px;height:30px}
.wa-float:hover{background:#168a41;color:#fff;transform:scale(1.06)}
.wa-float:focus-visible{outline:3px solid #0b2a6f;outline-offset:3px}
@media print{.wa-float{display:none}}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}
/* The footer's support column, under its links. */
.site-footer a.foot-wa{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:14.5px;font-weight:600;text-decoration:none;padding:0}
.site-footer a.foot-wa .wa-ic{color:#1a9e4b}
.site-footer a.foot-wa:hover{color:#168a41}
/* An order page's "ask on WhatsApp", beside the invoice button in the dark page head. */
.wa-cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:#fff;color:#0b6b33;font-weight:800;
  padding:8px 18px;border-radius:12px;font-size:14px;text-decoration:none}
.wa-cta .wa-ic{color:#1a9e4b}
.wa-cta:hover{color:#075226;background:#f0fdf4}
.page-head .hero-cta + .wa-cta{margin-inline-start:8px}
/* Above the contact form. */
.wa-contact{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:14px;padding:14px 16px;margin:0 0 18px}
.wa-contact .wa-contact-txt{flex:1 1 220px;min-width:0}
.wa-contact b{display:block;color:#0b6b33;font-size:15.5px}
.wa-contact p{margin:2px 0 0;color:var(--muted);font-size:14px}
.wa-contact a.wa-btn{display:inline-flex;align-items:center;gap:8px;background:#15803d;color:#fff;font-weight:800;border-radius:11px;padding:9px 16px;text-decoration:none;flex-wrap:wrap;justify-content:center}
/* White text needs the deeper green (about 5:1, WCAG AA); the icon-only floating button keeps #1a9e4b. */
.wa-contact a.wa-btn:hover{background:#116a32;color:#fff}
.wa-contact a.wa-btn bdi{font-weight:700}