/* ============================================================
   DataFly — /pricing/ country pages + destination search
   Extends the Skyline system in datafly.css. Tokens only, no new colours.

   The plan ladder is a <ul>, not a <table> — the site's markdown converter
   garbles tables (see pricing/view-country.php). CSS gives it the column
   alignment a table would have, so nothing is lost visually.
   ============================================================ */

/* ---------- hero: the editorial band ----------
   Matches option 1d of the design set. Three things it does that the previous hero did not:

   1. The flag is a plain glyph with a drop shadow beside the title, NOT a bordered tile. At h1
      size an emoji inside the heading set the line height for the whole block and forced the two
      lines apart, which is why it moved out of the <h1>.
   2. The stats are four equal cells under a rule with hairline dividers between them, so they read
      as one row of facts instead of four floating pills.

   NO tint. The reference carried a red gradient because it was drawn for Albania as an example,
   and a reference gives the idea, never the palette. Our header sits on the page background like
   every other header on the site. */
.pr-page{--pr-component-max:1040px}
/* The country header ends with the stats strip, which carries its own padding, so the section
   adds none. The hub has no strip: its search field would otherwise sit flush on the rule. */
.pr-head{padding-bottom:0}
.pr-head-hub{padding-bottom:56px}
.pr-band{padding-bottom:34px}
.pr-hero{display:flex;align-items:center;gap:22px;margin-bottom:18px}
.pr-flag{flex:none;font-size:52px;line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.pr-head h1{margin:0}
.pr-head .lede{margin:0;max-width:52ch}

.pr-facts{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line)}
.pr-facts li{display:flex;flex-direction:column;gap:7px;padding:20px 24px;
  border-inline-end:1px solid rgba(255,255,255,.08)}
.pr-facts li:last-child{border-inline-end:none}
.pr-facts li:first-child{padding-inline-start:0}
.pr-facts b{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1}
html[lang="ar"] .pr-facts b{letter-spacing:0}
.pr-facts li:first-child b{color:var(--green)}
.pr-facts span{font-size:12.5px;color:var(--muted-2);font-weight:500}

@media(max-width:760px){
  .pr-hero{gap:14px;margin-bottom:14px}
  .pr-flag{font-size:36px}
  .pr-band{padding-bottom:24px}
  .pr-facts{grid-template-columns:1fr 1fr}
  .pr-facts li{padding:16px 18px}
  .pr-facts li:nth-child(odd){padding-inline-start:0}
  .pr-facts li:nth-child(2n){border-inline-end:none}
  .pr-facts li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
}

/* ---------- homepage destination list ----------
   Option 1c of the design set: an 11th row where the CTA takes the empty cells and keeps the grid
   rhythm. Ten countries fill 3+3+3+1, so the CTA spans the two cells left over on the last row.
   That span is the whole point of the option and is what makes the grid end square.
   Colours are ours, not the mock's: --green, --line, --muted-2. */
.dest-card{border:1px solid var(--line);border-radius:22px;background:var(--bg-2);
  padding:28px 32px 32px;margin-top:26px}
.dest-card-head{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);padding-bottom:14px;
  border-bottom:1px solid var(--line);margin-bottom:6px}
html[lang="ar"] .dest-card-head{letter-spacing:0;text-transform:none;font-size:14px}

.dest-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.dest-row{display:flex;align-items:center;gap:14px;padding:14px 4px;
  border-bottom:1px solid rgba(255,255,255,.08);transition:background .15s}
.dest-row:hover{background:rgba(255,255,255,.04)}
.dest-rank{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  font-weight:500;color:var(--muted-2)}
.dest-country{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.dest-flag{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1em;height:1em;font-size:16px;line-height:1}
.dest-name{flex:1;min-width:0;font-weight:500;font-size:15px;color:#f0f0f0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dest-price{flex:none;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--green);
  white-space:nowrap}
/* Arabic words have a tighter visual rhythm than the Latin labels at this size. The flag and
   name therefore use a smaller INTERNAL gap, while rank/name/price keep the row's 14px rhythm. */
html[lang="ar"] .dest-country{gap:8px}
/* Screenshot-ink measurements (headless capture, AR vs EN, 2026-08-09): with boxes perfectly
   centred in BOTH languages, the ink inside them is not, because Tajawal/Cairo line boxes seat
   every run differently than the Latin fonts do. Relative to the row's centre the EN page —
   the version that reads right — puts the rank ~1.1px high, the price level with it, the flag
   ~2.5px high and the name on centre. Arabic rendered the flag ~1.5px higher, the rank ~0.8px
   higher and the price ~0.8px lower than those targets; the name already matched and keeps
   only its existing nudge below. The price's offset is gone: it is Latin and now renders in
   Cairo LTR (datafly.css). The two that remain remain because their fonts are the SYSTEM's,
   not ours: the flag is an emoji and the rank is ui-monospace, so the font metric fix in
   datafly.css cannot reach either. */
html[lang="ar"] .dest-country .dest-flag{transform:translateY(.16em)}     /* 16px: 2.6px down */
html[lang="ar"] .dest-rank{position:relative;top:0.07em}                  /* 11px: 0.8px down */
html[lang="ar"] .dest-price{line-height:26px}
/* The -0.05em that used to sit here is gone: this price is Latin, so it renders in
   Cairo LTR (datafly.css) now, same typeface with its own metrics restored.
   line-height stays: see the integer-row-height note below. */
/* line-height 26px: Cairo's natural 15px line box is 25.5px, which makes the row 54.5px tall and
   every grid band lands on a different half-pixel, so identical flags snapped visibly differently
   from one band to the next. 26 makes the row 55px and every band renders in the same phase. */

/* Row 11, spanning the two cells the countries left empty. */
.dest-all{grid-column:span 2;border-bottom-color:rgba(69,234,105,.25)}
.dest-all:hover{background:rgba(69,234,105,.07)}
.dest-all .dest-rank{color:var(--green)}
.dest-all .dest-name{font-weight:600;color:var(--green)}
/* Baseline, not centre. The words are 13px and the arrow 15px, so centring their boxes left the
   glyph riding above the text; aligning the baselines puts them on the same line. */
.dest-more-hint{flex:none;display:inline-flex;align-items:baseline;gap:7px;
  font-size:13px;color:var(--muted-2);white-space:nowrap}
.dest-arrow{font-size:14px;line-height:1}
.dest-all:hover .dest-arrow{color:var(--green)}

@media(max-width:900px){.dest-rows{grid-template-columns:repeat(2,1fr)}.dest-all{grid-column:span 1}}
@media(max-width:620px){
  .dest-card{padding:20px 18px 22px;border-radius:18px}
  .dest-rows{grid-template-columns:1fr}
  /* One column: the hint text has no empty cell to fill, but the ARROW stays. Hiding the whole
     span took the arrow with it and the row ended blank. */
  .dest-hint-text{display:none}
  .dest-more-hint{margin-inline-start:auto;font-size:15px}
}

/* ---------- sections ---------- */
.pr-sec{padding:72px 0}
.pr-sec+.pr-sec{padding-top:0}
.pr-note{margin-top:22px;color:var(--muted-2);font-size:14.5px;max-width:700px;line-height:1.7}

/* ---------- plan catalogue (semantic lists, grouped for faster comparison) ---------- */
.pr-plans-intro{width:100%;max-width:var(--pr-component-max);margin:-22px auto 34px;color:var(--muted);font-size:16.5px;line-height:1.65}
.pr-plans{list-style:none;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--bg-2)}
/* The two lists are identical. The unlimited one used to carry a green border, a green row tint
   and an ink-coloured price, which made the same information look like a different product and
   made the prices harder to compare across the tab switch. Owner's call, 2026-08-09. */

/* ---------- plan tabs ----------
   One list at a time instead of two side by side. The two groups answer the same question in
   different units, so showing both at once asks the reader to compare gigabytes against days.
   A segmented control makes that an explicit choice and gives each list the full width.
   Colours unchanged: --ink, --green, --muted, --line. */
.pr-tablist{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:16px;
  background:var(--bg-2);margin-bottom:22px}
.pr-tab{display:inline-flex;align-items:center;gap:8px;border:none;background:transparent;
  color:var(--muted);font:inherit;font-weight:600;font-size:15px;padding:10px 18px;border-radius:12px;
  cursor:pointer;transition:.18s}
.pr-tab:hover{color:var(--ink)}
.pr-tab.is-on{background:rgba(255,255,255,.07);color:var(--ink)}
.pr-tab b{font-weight:600;font-size:12.5px;color:var(--muted-2)}
.pr-tab.is-on b{color:var(--muted)}
.pr-tab:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.pr-tabs{width:100%;max-width:var(--pr-component-max);margin-inline:auto}
.pr-panel[hidden]{display:none}
.pr-plan{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;
  min-height:79px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.055);transition:background .18s}
.pr-plan:last-child{border-bottom:none}
.pr-plan:hover{background:rgba(255,255,255,.028)}
.pr-plan-main,.pr-plan-cost{display:flex;flex-direction:column;gap:4px;min-width:0}
.pr-plan-cost{align-items:flex-end;text-align:end}
.pr-plan-data{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em}
html[lang="ar"] .pr-plan-data{letter-spacing:0}
.pr-plan-days{color:var(--muted);font-size:15px}
.pr-plan-price{font-family:var(--disp);font-weight:700;font-size:21px;color:var(--green)}
.pr-plan-unit{color:var(--muted-2);font-size:12.5px;white-space:nowrap}

/* Arabic optical centring is NOT done here any more. It is done once, in the font itself,
   at the top of datafly.css (ascent-override / descent-override on Cairo and Tajawal).
   Everything that used to live here was a per-element offset, and most of it never worked:
   `position:relative;top:.11em` on a control moves the control AND its text together, so the
   text stays exactly as off-centre inside it as before. Measured 2026-08-16: deleting that
   whole rule moved .pr-tab from -1.89px to -2.24px, i.e. it was buying 0.35px.
   Do not add a nudge here. Fix the metrics, or mark a Latin-only run with .lat / .lat-body. */

/* ---------- usage estimator ---------- */
.pr-calc-intro{width:100%;max-width:var(--pr-component-max);color:var(--muted);font-size:17px;line-height:1.7;margin:-22px auto 30px}
.pr-calc{display:block;width:100%;max-width:var(--pr-component-max);margin-inline:auto;border:1px solid var(--line);
  border-radius:28px;background:var(--bg-2);overflow:hidden;min-height:720px;box-shadow:0 30px 80px rgba(0,0,0,.18)}
.pr-calc [hidden]{display:none!important}
.pr-calc-stage{padding:0;display:flex;min-height:720px;flex-direction:column;min-width:0}
.pr-calc-head{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:112px;
  padding:26px 40px;border-bottom:1px solid var(--line)}
.pr-calc-mobile-stat{position:relative;display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.pr-calc-live{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.pr-odometer{direction:ltr;display:inline-flex;align-items:flex-end;color:inherit;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;line-height:1;white-space:nowrap}
.pr-odometer-digit{display:block;width:.61em;height:1em;overflow:hidden}
.pr-odometer-track{display:block;will-change:transform;transition:transform .62s cubic-bezier(.16,.9,.2,1)}
.pr-odometer-track>span{display:block;width:100%;height:1em;line-height:1;text-align:center}
.pr-odometer-dot{display:block;width:.3em;height:1em;line-height:.86;text-align:center}
.pr-odometer-delta{position:absolute;z-index:1;display:block;opacity:0;pointer-events:none;white-space:nowrap;
  direction:ltr;unicode-bidi:isolate;
  border-radius:100px;background:rgba(69,234,105,.14);color:var(--green);font-family:var(--disp);font-size:11px;
  font-style:normal;font-weight:700;line-height:1;padding:4px 8px}
.pr-odometer-delta.is-visible{animation:prOdometerDelta 1.25s ease forwards}
.pr-calc-mobile-stat>span:first-child{color:var(--muted-2);font-size:11px;font-weight:700;letter-spacing:.18em}
.pr-calc-mobile-stat .pr-odometer{color:var(--green);font-family:var(--disp);font-size:52px;font-weight:700;letter-spacing:-.04em}
.pr-calc-mobile-stat b{color:var(--green);font-family:var(--disp);font-size:14px}
.pr-calc-mobile-stat .pr-odometer-delta{inset-inline-end:0;top:-10px}
html[lang="ar"] .pr-calc-mobile-stat>span:first-child{letter-spacing:0}
html[lang="ar"] .pr-calc-mobile-stat .pr-odometer{letter-spacing:0}
.pr-calc-count{font-weight:700;font-size:17px;color:var(--muted);letter-spacing:0}
html[lang="ar"] .pr-calc-count{letter-spacing:0;font-size:17px}
.pr-calc-reset{border:0;background:transparent;color:var(--muted-2);font-size:13.5px;font-weight:600;cursor:pointer;
  display:none!important;padding:5px 0;border-bottom:1px solid transparent;transition:.2s}
.pr-calc-reset:hover{color:var(--ink);border-color:var(--line-2)}
.pr-calc-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin:28px 40px 42px}
.pr-calc-steps span{height:4px;border-radius:4px;background:rgba(255,255,255,.1);transition:background .25s,transform .25s}
.pr-calc-steps span.is-done{background:rgba(69,234,105,.45)}
.pr-calc-steps span.is-current{background:var(--green)}
.pr-calc-body{flex:1;display:flex;align-items:flex-start;min-height:400px;padding:0 40px}
.pr-calc-question{width:100%;animation:prCalcIn .28s cubic-bezier(.16,1,.3,1)}
.pr-calc-question h3,.pr-calc-result h3,.pr-calc-error h3{font-family:var(--disp);font-weight:700;
  font-size:clamp(32px,4vw,42px);letter-spacing:-.025em;line-height:1.12;max-width:720px;outline:none;text-wrap:balance;
  scroll-margin-top:calc(var(--nav-h) + 18px)}
html[lang="ar"] .pr-calc-question h3,html[lang="ar"] .pr-calc-result h3,
html[lang="ar"] .pr-calc-error h3{letter-spacing:0;line-height:1.35}
.pr-calc-question h3:focus-visible,.pr-calc-result h3:focus-visible{outline:none;box-shadow:none}
.pr-calc-question>p,.pr-calc-error p{font-size:18px;color:var(--muted-2);margin-top:14px;line-height:1.6;max-width:620px}
.pr-calc-options{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px}
.pr-calc-option{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;
  min-height:88px;padding:16px 22px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.018);
  color:var(--ink);cursor:pointer;text-align:start;transition:border-color .2s,background .2s,transform .2s}
.pr-calc-option:hover{border-color:var(--line-2);background:rgba(255,255,255,.035);transform:translateY(-1px)}
.pr-calc-option:active{transform:scale(.985)}
.pr-calc-option.is-selected{border-color:var(--green);background:var(--green-soft);box-shadow:inset 0 0 0 1px rgba(69,234,105,.12)}
.pr-option-mark{width:24px;height:24px;border:2px solid var(--line-2);border-radius:50%;display:grid;place-items:center}
.pr-calc-option.is-selected .pr-option-mark{border:6px solid var(--green);background:var(--green-deep)}
.pr-calc-option strong{display:block;font-size:17px;font-weight:700;line-height:1.3}
.pr-calc-option small{display:block;color:var(--muted-2);font-size:14px;line-height:1.45;margin-top:3px}
.pr-calc-option em{color:var(--muted-2);direction:ltr;unicode-bidi:isolate;font-family:var(--disp);font-size:13px;font-style:normal;font-weight:700}
.pr-calc-option.is-selected em{color:var(--green)}
.pr-calc-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding:0 40px 30px}
.pr-calc-back,.pr-calc-next,.pr-result-actions button,.pr-result-actions a{min-height:46px;border-radius:100px;padding:11px 22px;
  font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.pr-calc-back{border:1px solid var(--line);background:transparent;color:var(--muted)}
.pr-calc-back:hover{border-color:var(--line-2);color:var(--ink)}
.pr-calc-back:disabled{cursor:not-allowed;color:var(--muted-2);border-color:var(--line);opacity:.5}
.pr-calc-back:disabled:hover{color:var(--muted-2);border-color:var(--line)}
.pr-calc-next{margin-inline-start:auto;border:0;background:var(--green);color:var(--green-deep);min-width:150px}
.pr-calc-next:hover{background:var(--green);transform:translateY(-1px)}
.pr-calc-next:active,.pr-calc-back:active,.pr-result-actions button:active,.pr-result-actions a:active{transform:scale(.98)}
.pr-calc-next:disabled{cursor:not-allowed;opacity:.34;transform:none}

.pr-calc-estimate{position:relative;padding:38px 34px;display:none;flex-direction:column;border-inline-start:1px solid var(--green-line);
  background:linear-gradient(155deg,rgba(69,234,105,.13),rgba(69,234,105,.025) 58%,transparent);overflow:hidden}
.pr-calc-estimate::after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(69,234,105,.13);
  border-radius:50%;inset-inline-end:-110px;bottom:-110px;box-shadow:0 0 0 34px rgba(69,234,105,.025),0 0 0 68px rgba(69,234,105,.018);pointer-events:none}
.pr-calc-estimate-label{position:relative;font-size:12px;font-weight:700;color:var(--green);letter-spacing:.08em;text-transform:uppercase}
html[lang="ar"] .pr-calc-estimate-label{letter-spacing:0;text-transform:none;font-size:14px}
.pr-calc-total{position:relative;display:flex;align-items:baseline;gap:9px;margin:24px 0 15px;font-family:var(--disp)}
.pr-calc-total .pr-odometer{font-size:clamp(54px,6vw,76px);font-weight:700;letter-spacing:-.055em}
.pr-calc-total>span:last-of-type{font-weight:700;font-size:17px;color:var(--green)}
.pr-calc-total .pr-odometer-delta{inset-inline-end:0;top:-15px}
html[lang="ar"] .pr-calc-total .pr-odometer{letter-spacing:0}
.pr-calc-estimate>p{position:relative;color:var(--muted);font-size:14px;line-height:1.6;max-width:32ch;min-height:68px}
.pr-calc-facts{position:relative;margin-top:24px;display:grid;gap:10px}
.pr-calc-facts div{display:flex;justify-content:space-between;gap:15px;padding-top:10px;border-top:1px solid var(--line)}
.pr-calc-facts dt{color:var(--muted-2);font-size:12.5px}
.pr-calc-facts dd{font-family:var(--disp);font-size:13.5px;font-weight:700;color:var(--ink)}

.pr-calc-loading{width:100%;display:grid;gap:14px;padding-top:8px}
.pr-calc-loading span{display:block;height:17px;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.09),rgba(255,255,255,.035));
  background-size:220% 100%;animation:prCalcShimmer 1.2s linear infinite}
.pr-calc-loading span:first-child{height:38px;width:70%}.pr-calc-loading span:nth-child(2){width:50%}.pr-calc-loading span:last-child{height:150px;margin-top:14px}
.pr-calc-result{width:100%;max-width:760px;margin-inline:auto;animation:prCalcIn .35s cubic-bezier(.16,1,.3,1)}
.pr-result-label{display:block;color:var(--green);font-size:12.5px;font-weight:700;margin-bottom:10px}
.pr-result-plan{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--green-line);
  background:var(--green-soft);border-radius:16px;padding:21px 22px;margin-top:24px}
.pr-result-plan>div{display:flex;flex-direction:column;gap:3px}.pr-result-plan strong{font-family:var(--disp);font-size:27px;line-height:1.1}
.pr-result-plan span{color:var(--muted);font-size:13px}.pr-result-plan>b{font-family:var(--disp);font-size:30px;color:var(--green)}
.pr-result-plan.is-unlimited strong{color:var(--green)}
.pr-result-reason{color:var(--muted);font-size:14.5px;line-height:1.65;margin-top:18px;max-width:610px}
.pr-result-reason.is-warning{color:var(--warn);background:var(--warn-soft);border-radius:12px;padding:12px 14px}
.pr-result-alternative{margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.022)}
.pr-result-alt-label{display:block;color:var(--muted-2);font-size:12px;font-weight:700}
.pr-result-alt-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-top:5px}
.pr-result-alt-head strong{font-family:var(--disp);font-size:17px;line-height:1.3}
.pr-result-alt-head b{flex:none;color:var(--green);font-family:var(--disp);font-size:17px}
.pr-result-alternative p{max-width:650px;margin-top:7px;color:var(--muted-2);font-size:13.5px;line-height:1.55}
.pr-result-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.pr-result-actions button{border:1px solid var(--line);background:transparent;color:var(--ink)}
.pr-result-actions button:hover{border-color:var(--line-2);background:rgba(255,255,255,.035)}
.pr-result-actions a{display:inline-flex;align-items:center;border:0;background:var(--ink);color:#0B0E0C}
.pr-result-actions a:hover{background:var(--green)}
.pr-calc-error{padding-top:8px}.pr-calc-error p{margin-top:12px}
@keyframes prCalcIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes prCalcShimmer{to{background-position:-220% 0}}
@keyframes prOdometerDelta{
  0%{opacity:0;transform:translateY(7px) scale(.88)}
  16%{opacity:1;transform:translateY(0) scale(1)}
  72%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-13px) scale(.96)}
}

/* On desktop the calculator and catalogue share one deliberate content measure.
   Wide screens add breathing room around them instead of stretching each row. */
@media(min-width:1024px){
  .pr-calc{min-height:0}
  .pr-calc-stage{min-height:650px}
  .pr-calc-head{min-height:104px;padding-inline:48px}
  .pr-calc-steps{margin:28px 48px 36px}
  .pr-calc-body{min-height:340px;padding-inline:48px}
  .pr-calc-question h3,.pr-calc-result h3,.pr-calc-error h3{font-size:clamp(32px,3vw,40px)}
  .pr-calc-question>p,.pr-calc-error p{margin-top:10px}
  .pr-calc-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:26px}
  .pr-calc-option{min-height:92px}
  .pr-calc-nav{margin-top:26px;padding:0 48px 34px}
}
@media(min-width:1180px){
  .pr-calc-options:has(>.pr-calc-option:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- operators ---------- */
.pr-network-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  width:100%;max-width:var(--pr-component-max);margin-inline:auto}
.pr-network-tracks.is-single{grid-template-columns:minmax(0,510px);justify-content:start}
.pr-network-track{min-width:0}
.pr-ops{display:grid;grid-template-columns:1fr;gap:10px}
.pr-op{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:16px;
  padding:17px 20px;background:rgba(255,255,255,.02);min-width:0}
.pr-op b{font-family:var(--disp);font-weight:700;font-size:18px}
.pr-op span{font-size:12.5px;color:var(--green);font-weight:600;letter-spacing:.06em}
html[lang="ar"] .pr-op span{letter-spacing:0}
.pr-network-note{width:100%;max-width:var(--pr-component-max);margin-inline:auto}

/* ---------- editorial ---------- */
.pr-prose p{color:var(--read);font-size:17px;line-height:1.8;max-width:720px;margin-bottom:18px}
.pr-prose h3{font-family:var(--disp);font-weight:700;font-size:23px;margin:34px 0 14px}

/* ---------- related ---------- */
/* Every country card is ONE height, everywhere.
   Five names of 195 wrap to two lines (Bosnia and Herzegovina, Democratic Republic of the Congo,
   Saint Vincent and the Grenadines, Central African Republic, Turks and Caicos Islands). Fitting
   the longest on one line would need a 304px column, which empties the grid out; truncating a
   country name is worse. So the card is sized for two lines and the short names centre inside it.
   grid-auto-rows:1fr keeps the rows equal; min-height carries that across regions too, so the
   Europe grid no longer stands taller than the others.
   min-height = 2 x 23.25px line-height + 32px padding + 2px border, rounded up. */
.pr-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;grid-auto-rows:1fr}
.pr-rel{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;background:rgba(255,255,255,.02);transition:.2s;min-height:81px}
.pr-rel:hover{border-color:var(--green-line);background:var(--green-soft);transform:translateY(-2px)}
.pr-rel-flag{font-size:24px;line-height:1;flex:none}
.pr-rel-name{font-weight:600;font-size:15px;min-width:0}

/* ---------- CTA ---------- */
.pr-cta{padding:80px 0 96px;border-top:1px solid var(--line);text-align:center}
.pr-cta h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4.4vw,46px);letter-spacing:-.028em}
html[lang="ar"] .pr-cta h2{letter-spacing:0;line-height:1.25}
.pr-cta p{color:var(--muted);margin-top:14px;font-size:17px}
.pr-stores{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}


/* ============================================================
   Destination search — homepage and /pricing/ hub
   ============================================================ */
/* The destination-search dropdown has to hang below the page header, and .page-head carries
   overflow:hidden to clip its decorative .glow (600px wide, offset 160px past the inline edge).
   That clip cut the results list in half at the header's bottom edge: the first result showed,
   the rest did not.
   overflow-x:clip with overflow-y:visible is the one combination that separates the two needs.
   Plain `visible` was measured first and reintroduced sideways scrolling, 389px viewport against
   a 549px scroll width, which is the exact iOS defect .crumb already carries a comment about. */
.pr-head{overflow-x:clip;overflow-y:visible}
.ds{position:relative;max-width:560px}
.ds-field{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:100px;
  padding:15px 24px;background:rgba(255,255,255,.04);transition:.2s}
.ds-field:focus-within{border-color:var(--green);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px var(--green-soft)}
.ds-field svg{width:19px;height:19px;flex:none;color:var(--muted-2)}
.ds-input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-family:var(--body);
  font-size:16px;font-weight:500;min-width:0}
.ds-input::placeholder{color:var(--muted-2)}
/* The wrapper already shows focus (green border + 4px ring), and datafly.css:667 gives
   every input a 2px green :focus-visible outline of its own — so the field drew TWO green
   rings, one inside the other. Suppress the inner one only. Keyboard focus stays visible,
   and more prominently than the outline it replaces; this de-duplicates the indicator, it
   does not remove it. */
.ds-input:focus,
.ds-input:focus-visible{outline:none;box-shadow:none;border:none}
.ds-list{position:absolute;inset-inline:0;top:calc(100% + 10px);background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:18px;padding:8px;z-index:40;
  max-height:340px;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.ds-opt{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  font-family:var(--body);font-size:15px;text-align:start;transition:background .15s}
.ds-opt:hover,.ds-opt.is-active{background:rgba(255,255,255,.06)}
.ds-opt .f{font-size:20px;line-height:1;flex:none}
.ds-opt .n{flex:1;min-width:0;font-weight:500}
.ds-empty{padding:16px;color:var(--muted-2);font-size:14.5px;text-align:center}

/* the crawlable path: real links, always rendered, never behind the search */
.ds-top{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.ds-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;
  padding:9px 16px;font-size:14px;font-weight:500;background:rgba(255,255,255,.02);transition:.2s}
.ds-chip:hover{border-color:var(--green-line);background:var(--green-soft)}
.ds-chip .f{font-size:16px;line-height:1}
.ds-chip.all{color:var(--green);font-weight:600}

/* ---------- hub ----------
   Regions read as two columns of plain rows rather than a wall of cards. The card grid gave 195
   bordered boxes equal visual weight and made scanning for one country slow; a row list has the
   name on one alignment line and the code on another, so the eye follows a single column of text.
   Colours are unchanged: --ink, --muted-2 and --line, exactly as before. */
/* Multi-column, not grid. A grid puts the regions in ROWS, so every row is as tall as its tallest
   region: Asia's 30 countries left Oceania and MENA beside it with a column of dead space, and the
   next row started below Asia's bottom edge. Columns let each region start immediately under the
   one above it and flow to the next column when full, which is what the eye expects of a list. */
/* Real columns, filled by PHP. See df_hub_columns(): the browser's own column balancing cannot
   handle indivisible blocks this tall, and left the last column three quarters empty. */
.hub-regions{display:flex;flex-wrap:wrap;gap:0 56px;align-items:flex-start}
.hub-col{flex:1 1 300px;min-width:0}
.hub-region{margin:0 0 40px}
.hub-region h2{display:flex;align-items:baseline;gap:16px;font-family:var(--disp);font-weight:700;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
html[lang="ar"] .hub-region h2{letter-spacing:0;text-transform:none;font-size:19px}
.hub-region-name{flex:1;min-width:0}
.hub-region-count{color:var(--muted-2);font-weight:600;font-size:14px;letter-spacing:0}

.hub-list{display:flex;flex-direction:column}
.hub-row{display:flex;align-items:center;gap:16px;padding:13px 8px;border-radius:12px;
  transition:background .15s,color .15s}
.hub-row:hover{background:rgba(255,255,255,.04)}
.hub-row-flag{font-size:21px;line-height:1;flex:none}
.hub-row-name{flex:1;min-width:0;font-weight:500;font-size:16.5px}
.hub-row:hover .hub-row-name{color:var(--green)}
/* The code is decoration for scanning, so it is aria-hidden and never carries the link's meaning. */
.hub-row-code{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  letter-spacing:.08em;color:var(--muted-2)}

@media(max-width:760px){
  .pr-sec{padding:52px 0}
            .pr-plans-intro{margin-top:-14px;margin-bottom:28px;font-size:15px}
            .pr-plan{min-height:74px;gap:14px;padding:14px 16px}
  .pr-plan-data{font-size:18px}.pr-plan-days{font-size:13px}
  .pr-plan-price{font-size:19px}.pr-plan-unit{font-size:11.5px}
  .pr-network-tracks,.pr-network-tracks.is-single{grid-template-columns:1fr;gap:24px}
  .pr-calc-intro{font-size:15.5px;margin-top:-14px}
  .pr-calc{min-height:0;border-radius:20px;overflow:visible;box-shadow:none}
  .pr-calc-stage{min-height:0;border-radius:20px;background:var(--bg-2)}
  /* NOT sticky. It was, and on a phone the bar detached and rode down the page over the question
     it belongs to: the screenshot shows "السؤال 1 من 7" sitting on top of "كم يوماً ستبقى في وجهتك؟".
     The bar names the step and shows the running estimate, so it is only meaningful beside the
     question it heads. It stays at the top of the card and scrolls with it. */
  .pr-calc-head{position:static;display:flex;
    align-items:center;gap:10px;min-height:72px;padding:11px 16px;border-bottom:1px solid var(--line);
    border-radius:19px 19px 0 0;background:rgba(17,21,15,.97)}
  .pr-calc-count{overflow:hidden;color:var(--muted);font-size:12.5px;white-space:nowrap;text-overflow:ellipsis}
  html[lang="ar"] .pr-calc-count{font-size:13px}
  .pr-calc-mobile-stat{margin-inline-start:auto;gap:5px}
  .pr-calc-mobile-stat>span:first-child{font-size:9px}
  .pr-calc-mobile-stat .pr-odometer{font-size:29px}
  .pr-calc-mobile-stat b{font-size:9px}
  .pr-calc-mobile-stat .pr-odometer-delta{inset-inline-end:0;top:-8px;font-size:9px;padding:3px 6px}
  .pr-calc-steps{margin:18px 16px 26px;gap:6px}
  .pr-calc-steps span{height:3px}
  .pr-calc-body{min-height:0;padding:0 16px}
  .pr-calc.is-result{overflow:hidden}
  .pr-calc.is-result .pr-calc-stage{min-height:var(--pr-calc-result-min-height,0)}
  .pr-calc.is-result .pr-calc-body{align-items:stretch;padding-bottom:16px}
  .pr-calc.is-result .pr-calc-result{display:flex;align-self:stretch;flex-direction:column}
  .pr-calc-question h3,.pr-calc-result h3,.pr-calc-error h3{font-size:26px}
  .pr-calc-question>p,.pr-calc-error p{font-size:13.5px;line-height:1.6}
  .pr-calc-options{gap:9px;margin-top:20px}
  .pr-calc-option{grid-template-columns:auto minmax(0,1fr) auto;gap:13px;min-height:82px;padding:14px 15px;
    border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.018)}
  .pr-calc-options .pr-calc-option.is-selected{border-color:var(--green);background:var(--green-soft);box-shadow:inset 0 0 0 1px rgba(69,234,105,.12)}
  .pr-option-mark{width:20px;height:20px}.pr-calc-option.is-selected .pr-option-mark{border-width:5px}
  .pr-calc-option strong{font-size:14.5px}.pr-calc-option small{font-size:12px}.pr-calc-option em{font-size:11px}
  .pr-calc-nav{margin-top:22px;padding:0 16px 20px}
  .pr-calc-back,.pr-calc-next{min-height:48px;padding-inline:18px}
  .pr-calc-next{background:var(--green);color:var(--green-deep)}
  .pr-result-plan{padding:18px;align-items:flex-end}.pr-result-plan strong{font-size:24px}.pr-result-plan>b{font-size:27px}
  .pr-result-alternative{margin-top:16px;padding:13px 14px}
  .pr-result-alt-head{gap:10px}.pr-result-alt-head strong,.pr-result-alt-head b{font-size:14.5px}
  .pr-result-alternative p{font-size:12px;line-height:1.5}
  .pr-result-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:4px;
    margin-top:auto;padding:4px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
  .pr-result-actions button,.pr-result-actions a{justify-content:center;width:auto;min-width:0;min-height:48px;
    padding:10px 12px;border-radius:12px;font-size:13.5px}
  .pr-result-actions button{border:0;background:transparent;color:var(--muted)}
  .pr-result-actions button:hover{border:0;background:rgba(255,255,255,.04);color:var(--ink)}
  .pr-result-actions a{background:var(--green);color:var(--green-deep)}
  .pr-result-actions a:hover{background:var(--green)}
}
@media(max-width:340px){
  .pr-calc-mobile-stat>span:first-child{display:none}
}
@media(max-width:960px){
  .pr-calc-estimate{border-inline-start:0;border-top:1px solid var(--green-line)}
}
@media(prefers-reduced-motion:reduce){
  .pr-calc-question,.pr-calc-result,.pr-calc-loading span{animation:none}
  .pr-calc-option,.pr-calc-next,.pr-calc-back,.pr-odometer-track{transition:none}
  .pr-odometer-delta{display:none}
}
.pr-track-h{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--muted-2);
  margin:22px 0 12px;letter-spacing:.04em;text-transform:uppercase}
html[lang="ar"] .pr-track-h{letter-spacing:0;text-transform:none;font-size:16px}
.pr-track-h:first-of-type{margin-top:0}