/* hooks.css: the first-paint half of shop.js's hooks, linked by every theme's
   layout before its own theme.css (see viewsshop/themes/_base/_hooks.md).
   html.js is set in <head> before any CSS, so these rules paint the final
   state at once; shop.js revealing a tab list after the first paint pushed
   the panel under it down (CLS 0.04). */

/* hidden wins over any theme display rule: a theme's own display on a tab
   panel (or any hooked element) must never show one shop.js has hidden. */
[hidden] { display: none !important; }

/* data-js-only: a control that needs JavaScript is hidden without it. */
html:not(.js) [data-js-only] { display: none !important; }

/* data-tabs: until shop.js takes over (html[data-shop-js]), only the panel
   marked data-tab-default shows. Without JS every panel shows. */
html.js:not([data-shop-js]) [data-tabs] [role="tabpanel"]:not([data-tab-default]) { display: none !important; }

/* Flags are 80 wide at their own proportions (Switzerland 80x80, Nepal 80x98); cover fills each theme's 3:2 box, as postcard's .pc-flag already does. */
img[src*="/assets/img/flags/"] { object-fit: cover; }

/* No shadow under a button, in any theme (owner's call, 2026-10-02). Linked
   before every theme.css, so it needs !important to win over the themes' own
   button rules and their :hover lifts. Keyboard focus is drawn with outline
   in every theme, so a focused control keeps its ring; :focus-visible is left
   out anyway, in case a theme ever draws one with box-shadow. */
:is(button, input[type="submit"], input[type="button"], a[class*="btn"], a[class*="button"],
  label[class*="btn"], [role="button"], [class*="-btn"], [class*="btn-"], [class*="iconbtn"],
  [class*="roundbtn"]):not(:focus-visible) {
  box-shadow: none !important;
}

/* data-suggest: the list shop.js opens under a search box as a traveller
   types (2026-10-07). One look for every theme, on white whatever the hero
   behind it, in the theme's own font. It hangs off <body>, placed under the
   form by shop.js, so a hero that clips its overflow cannot cut it off. */
.suggest {
  position: absolute;
  z-index: 1000;
  box-sizing: border-box;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  text-align: left;
  font-size: 15px;
  line-height: 1.3;
}
.suggest a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.suggest [aria-selected="true"] a { background: rgba(15, 23, 42, 0.06); }
.suggest__flag, .suggest__mark {
  flex: none;
  width: 30px;
  height: 22px;
  border-radius: 4px;
}
.suggest__flag { object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); }
.suggest__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.07);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.suggest__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__price { flex: none; color: #64748b; font-size: 13.5px; }
.suggest__empty { padding: 12px; color: #64748b; }
.suggest__all {
  margin-top: 4px;
  padding: 10px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  color: #64748b;
  font-size: 13.5px;
  cursor: pointer;
}
.suggest__all:hover { color: #0f172a; }

/* Library page sections (viewsshop/shared/sections, 2026-10-08): one design
   every theme draws the same way, on the theme's own colours - every theme
   sets --accent, --surface and --ink. A theme may draw its own instead with
   themes/<key>/sections/<key>.html. */
.sx {
  margin: 24px 0;
  padding: 28px;
  border-radius: 18px;
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .12);
}
.sx-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: inherit; }
.sx-body { margin: 0; line-height: 1.6; opacity: .8; }
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 16px; padding: 12px 22px; border-radius: 999px;
  background: var(--accent, #2f5bff); color: #fff; font-weight: 600; text-decoration: none;
}
.sx-btn:hover { filter: brightness(1.08); }
.sx-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: center; }
.sx-split__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.sx-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: color-mix(in srgb, var(--accent, #2f5bff) 10%, var(--surface, #fff));
}
.sx-cta .sx-btn { margin-top: 0; }
.sx-trust__manual { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: inherit; text-decoration: none; }
.sx-trust__stars { color: #00b67a; letter-spacing: 2px; font-size: 1.25rem; }
.sx-trust__manual strong { font-size: 1.25rem; }
.sx-trust__brand { font-weight: 700; }
@media (max-width: 640px) {
  .sx { padding: 20px; }
  .sx-split { grid-template-columns: 1fr; }
}

/* The page editor (assets/js/section-editor.js), only ever on
   /__sections/preview: the outline and toolbar over a section, the line a
   drop lands on, a switched-off section faded, and the placeholder of one
   with nothing to show yet. Its own colours, not the theme's: the editor
   has to read on every theme. */
.sx-ui { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2147483000; font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.sx-outline, .sx-selected { position: absolute; display: none; pointer-events: none; box-sizing: border-box; }
.sx-outline { border: 1.5px dashed #2563eb; }
.sx-selected { border: 2px solid #2563eb; background: rgba(37, 99, 235, .04); }
/* The tab on the outline's corner: name and four small actions. */
.sx-tab { position: absolute; display: none; align-items: center; height: 24px; padding: 0 2px; border-radius: 5px 5px 0 0;
  background: #2563eb; color: #fff; white-space: nowrap; transform: scale(var(--sx-k, 1)); }
.sx-tab--inside { border-radius: 0 0 5px 0; }
.sx-tab--below { border-radius: 0 0 5px 5px; }
.sx-tab__name { cursor: pointer; }
.sx-tab__name { padding: 0 6px 0 4px; letter-spacing: .01em; }
.sx-tab__btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 20px;
  border-radius: 4px; color: rgba(255, 255, 255, .85); cursor: pointer; }
.sx-tab__btn:hover, .sx-tab__btn:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; }
.sx-tab__btn[hidden] { display: none; }
.sx-tab__drag { cursor: grab; }
.sx-tab__danger:hover { background: #dc2626; }
.sx-drop { position: absolute; display: none; height: 3px; border-radius: 2px; background: #2563eb; pointer-events: none; }
/* A switched-off section's pill: one line, the theme's colours aside. */
.sx-pill { all: unset; position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid #d5dbe5;
  border-radius: 999px; background: #fff; color: #475569; font: 500 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap;
  cursor: pointer; transform: scale(var(--sx-k, 1)); transform-origin: left top; }
.sx-pill b { color: #2563eb; font-weight: 600; }
.sx-pill:hover { border-color: #2563eb; }
.sx-is-hidden { opacity: .35; filter: grayscale(1); }
.sx-placeholder { box-sizing: border-box; display: flex; width: 100%; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center;
  max-width: 1120px; margin: 24px auto; padding: 28px 20px; border: 2px dashed #94a3b8; border-radius: 12px; background: rgba(148,163,184,.08);
  color: #475569; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.sx-placeholder strong { color: #0f172a; font-size: 15px; }
.sx-placeholder--inline { display: inline-flex; flex-direction: row; gap: 6px; width: auto; max-width: none; margin: 0; padding: 4px 10px; border-width: 1.5px; font-size: 12px; }
.sx-placeholder--inline strong { font-size: 12px; }
/* custom_html: the merchant's own markup; an embed fits the width. */
.sx-html__body iframe, .sx-html__body img, .sx-html__body video { max-width: 100%; }
.sx-html__body iframe[width][height] { height: auto; aspect-ratio: 16 / 9; }

/* Right to left (Arabic, 2026-11-05). Each theme's own stylesheet is
   mirrored into theme.rtl.css (scripts/gen_rtl.py); these are the shared
   rules on top. An icon that points along the line of reading points the
   other way; one that points up or down is unchanged by a horizontal
   mirror, so chevrons are flipped whole. `scale` and not `transform`, so a
   theme's own hover nudge (transform: translateX) still applies. */
[dir="rtl"] :is(.i-arrow-right, .i-arrow-left, .i-chevron-right, .i-chevron-left,
  .ic-arrow, .ic-arrow-right, .ic-arrowbtn, .ic-chevron-right,
  .hand-arrow, .hero-note-arrow, .cp-note__arrow),
[dir="rtl"] svg:has(use[href*="#arrow"]),
[dir="rtl"] svg:has(use[href*="#chevron"]),
[dir="rtl"] [class*="crumbs"] li + li::before { scale: -1 1; }
[dir="rtl"] .suggest { text-align: right; }
/* Amounts, codes and addresses read left to right inside Arabic text:
   "10 GB" stays "10 GB" rather than becoming "GB 10". */
[dir="rtl"] :is(input[type="email"], input[type="tel"], input[type="url"], code, kbd) { direction: ltr; text-align: right; }

/* The order page's shared eSIM block (viewsshop/shared/esim_extras.html):
   data left, one-tap install. Every theme draws it, so it reads only
   currentColor and --accent-fill/--on-accent, which every theme defines. */
.esx { display: grid; gap: 1rem; margin-top: 1.25rem; }
.esx-usage { display: grid; gap: .4rem; }
.esx-usage__left { margin: 0; font-weight: 600; }
.esx-meter { width: 100%; height: .6rem; appearance: none; border: 0; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, currentColor 14%, transparent); }
.esx-meter::-webkit-progress-bar { background: color-mix(in srgb, currentColor 14%, transparent); }
.esx-meter::-webkit-progress-value { background: var(--accent-fill, currentColor); border-radius: 999px; }
.esx-meter::-moz-progress-bar { background: var(--accent-fill, currentColor); border-radius: 999px; }
.esx-note { opacity: .75; font-size: .85em; line-height: 1.45; }
.esx-install { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.esx-install .esx-note { flex-basis: 100%; }
.esx-btn { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .5rem 1rem; border-radius: .6rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--accent-fill, currentColor); color: var(--on-accent, #fff); border: 1px solid transparent; }
.esx-btn--ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.esx-btn:focus-visible { outline: 2px solid var(--accent-fill, currentColor); outline-offset: 2px; }

/* The traveller's orders on /account (viewsshop/shared/account_orders.html). */
.aox { display: grid; gap: .75rem; margin: 1.5rem 0; text-align: start; }
.aox-h { margin: 0; font-size: 1.15em; }
.aox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.aox-row { display: grid; gap: .25rem; padding: .85rem 1rem; border-radius: .75rem; color: inherit; text-decoration: none;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.aox-row:hover, .aox-row:focus-visible { border-color: var(--accent-fill, currentColor); }
.aox-top { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.aox-top span { opacity: .75; font-size: .9em; }
.aox-line { font-size: .9em; opacity: .85; }
.aox-empty { margin: 0; opacity: .75; }

.esx-topup { display: grid; gap: .6rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.esx-h { margin: 0; font-size: 1.05em; }
.esx-done { margin: 0; font-weight: 600; }
.esx-topup__form { display: grid; gap: .5rem; }
.esx-option { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: .6rem; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.esx-option:has(input:checked) { border-color: var(--accent-fill, currentColor); }
.esx-option span { flex: 1; }
.esx-topup__form .esx-btn { justify-self: start; }
.oix { margin: 1.25rem 0 0; }