/* Maktoob — shared components added in the realism round (05-realism-build-plan.md §2.4, Batch 0a).
   site.css, shop.css and tokens.css are frozen; new shared pieces live here. */

/* ---------- disabled buttons (every variant) ---------- */
.btn:disabled, .btn[aria-disabled="true"] {
  --bg: color-mix(in srgb, var(--ink) 10%, transparent);
  --fg: color-mix(in srgb, var(--ink-2) 70%, transparent);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn:disabled::after, .btn[aria-disabled="true"]::after { display: none; }
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, transparent); }
.btn--on-dark:disabled, .btn--on-dark[aria-disabled="true"],
[data-dark] .btn:disabled, [data-dark] .btn[aria-disabled="true"] {
  --bg: color-mix(in srgb, var(--stone) 14%, transparent);
  --fg: color-mix(in srgb, var(--stone) 60%, transparent);
}
/* a button that is loading keeps its own look */
.btn.is-loading:disabled { --bg: var(--red-act); cursor: progress; }

/* ---------- toast tones and an action ---------- */
.toast--ok, .toast--warn, .toast--err, .toast--info { border-inline-start: 3px solid transparent; }
.toast--ok { border-inline-start-color: #6FB58C; }
.toast--ok .toast__ico { color: #8FD0A9; }
.toast--warn { border-inline-start-color: #E8B04A; }
.toast--warn .toast__ico { color: #F1C46E; }
.toast--err { border-inline-start-color: var(--red); }
.toast--err .toast__ico { color: #F08A8D; }
.toast--info { border-inline-start-color: var(--sky); }
.toast--info .toast__ico { color: var(--sky); }
.toast__act {
  margin-inline-start: auto;
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill);
  font: 700 14px/1 var(--f-ui); color: var(--sky); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  background: transparent; cursor: pointer;
}
.toast__act:hover { background: color-mix(in srgb, var(--stone) 12%, transparent); }
.toast__act:focus-visible { outline-color: var(--sky); }
@media (max-width: 720px) {
  .toast__act { min-height: 44px; }
  body:has(.buybar.is-on) .toast { bottom: 84px; }
}

/* ---------- notes and pills ---------- */
.note--ok { background: color-mix(in srgb, #6FB58C 18%, transparent); }
.note--ok svg { color: #2E7A51; }
.note--err { background: color-mix(in srgb, var(--red) 14%, transparent); }
.note--err svg { color: var(--red-act); }
.pill--ok { background: color-mix(in srgb, #6FB58C 24%, transparent); color: var(--ink); }
.pill--info { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--ink); }

/* ---------- OTP error ---------- */
.otp input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--red-act); background: color-mix(in srgb, var(--red) 6%, var(--white)); }
.otp input[aria-invalid="true"] { animation: otp-shake 360ms var(--ease-out); }
@keyframes otp-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .otp input[aria-invalid="true"] { animation: none; } }

/* ---------- payment marks: neutral text badges (no real logos; open point 9) in one fixed 38 × 24 tile, one case and weight ---------- */
.pmark {
  display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 38px; height: 24px; min-width: 0; padding: 0 2px;
  border-radius: 4px; background: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  font: 800 8.5px/1 var(--f-ui); letter-spacing: .03em; font-style: normal; text-transform: uppercase; text-align: center; color: var(--ink);
  white-space: pre; overflow: hidden; direction: ltr; unicode-bidi: isolate;
}
.pmark::before { content: attr(data-m); }
.pmark[data-m="visa"]::before { content: 'VISA'; font-size: 10.5px; letter-spacing: .06em; }
.pmark[data-m="mc"]::before { content: 'MASTER\A CARD'; font-size: 7.5px; line-height: 1.1; }
.pmark[data-m="meeza"]::before { content: 'MEEZA'; }
.pmark[data-m="mada"]::before { content: 'MADA'; font-size: 9.5px; }
.pmark[data-m="amex"]::before { content: 'AMEX'; font-size: 9.5px; }
.pmark[data-m="applepay"]::before { content: 'APPLE\A PAY'; font-size: 7.5px; line-height: 1.1; }
.pmark[data-m="stcpay"]::before { content: 'STC\A PAY'; font-size: 7.5px; line-height: 1.1; }
.pmark[data-m="fawry"]::before { content: 'FAWRY'; }
.pmark[data-m="instapay"]::before { content: 'INSTA\A PAY'; font-size: 7.5px; line-height: 1.1; }
.pmark[data-m="valu"]::before { content: 'VALU'; font-size: 9.5px; }
.pmark[data-m="sympl"]::before { content: 'SYMPL'; }
.pmark[data-m="wallet"]::before { content: 'WALLET'; font-size: 7.5px; }
.pmark:not(:empty)::before { content: none; }
.pmark[hidden] { display: none; }
.card-field { position: relative; }
.card-field > .input, .card-field > input { padding-inline-end: 64px; }
.card-field > .pmark { position: absolute; inset-inline-end: 12px; bottom: 15px; pointer-events: none; }

/* ---------- banner: a full-width strip under the header (offline, session ending, Plus renewal) ---------- */
.banner {
  position: relative; z-index: 40; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 10px var(--side); background: color-mix(in srgb, var(--sky) 38%, var(--stone-50)); color: var(--ink);
  font-size: 14px; line-height: 1.45; text-align: center;
}
.banner svg { width: 18px; height: 18px; flex: none; color: var(--blue); }
.banner a, .banner .link--btn { color: var(--ink); }
.banner--warn { background: color-mix(in srgb, #E8B04A 26%, var(--stone-50)); }
.banner--warn svg { color: #9A6512; }
@media (max-width: 720px) { .banner { justify-content: flex-start; text-align: start; } .banner a, .banner button { min-height: 44px; display: inline-flex; align-items: center; } }

/* ---------- locked switch ---------- */
.switch[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.switch[aria-disabled="true"][aria-checked="true"] { background: color-mix(in srgb, var(--blue) 70%, var(--stone)); opacity: .7; }

/* ---------- the Demo control (English-only tooling) ---------- */
.demo-pill {
  position: fixed; z-index: 90; right: 16px; bottom: 16px; height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--stone-50); color: var(--ink); font: 700 12.5px/1 var(--f-ui); letter-spacing: .04em;
  box-shadow: var(--e2), inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); opacity: .86;
  transition: opacity var(--t-micro), box-shadow var(--t-micro);
}
.demo-pill:hover, .demo-pill[aria-expanded="true"] { opacity: 1; box-shadow: var(--e2), inset 0 0 0 1.5px var(--ink); }
.demo-pill[hidden] { display: none; }
dialog .demo-pill { position: fixed; }
.demo-panel {
  position: fixed; z-index: 91; right: 16px; bottom: 56px; width: 360px; max-height: min(78vh, 760px); overflow: auto; overscroll-behavior: contain;
  border-radius: var(--r-lg); background: var(--white); color: var(--ink); box-shadow: var(--e3), 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  font: 400 14px/1.5 var(--f-ui); text-align: left;
}
.demo-panel[hidden] { display: none; }
/* Arabic pages: the pill and its panel sit bottom-left, at the end edge, clear of the right-aligned text (the phone sheet rule below still wins) */
:where([dir="rtl"]) .demo-pill, :where([dir="rtl"]) .demo-panel { right: auto; left: 16px; }
.demo-panel__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 20px; background: var(--white); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.demo-panel__t { font: 700 16px/1.2 var(--f-ui); }
.demo-panel__x { width: 40px; height: 40px; }
.demo-panel__body { padding: 4px 20px 20px; }
.demo-panel__s { padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.demo-panel__s:last-child { border-bottom: 0; }
.demo-panel__h { font: 700 12.5px/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.demo-panel__p { color: var(--ink-2); font-size: 13px; margin-bottom: 8px; }
.demo-panel__lead { font-weight: 600; }
.demo-panel .link { font-size: 14px; }
.demo-tests { display: grid; gap: 4px; font-size: 13px; }
.demo-tests dt { font-weight: 700; margin-top: 6px; }
.demo-tests dd { color: var(--ink-2); margin: 0; }
.demo-tests code, .demo-grp code, .demo-cards code { font: 600 12.5px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink); }
.demo-cards { width: 100%; margin-top: 6px; border-collapse: collapse; }
.demo-cards td { padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); vertical-align: top; }
.demo-cards td:first-child { padding-right: 10px; white-space: nowrap; }
.demo-next { margin-bottom: 10px; }
.demo-next__l { font-weight: 600; font-size: 13px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.demo-next__armed { padding: 2px 8px; font-size: 11px; }
.demo-next__c { gap: 6px; }
.demo-panel .chip { height: 32px; padding: 0 12px; font-size: 13px; }
.demo-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-jump { display: grid; gap: 6px; margin-bottom: 10px; }
@media (max-width: 720px) {
  body:has(.buybar.is-on) .demo-pill { bottom: 84px; }
  .demo-pill { min-height: 32px; }
  .demo-pill::before { content: ''; position: absolute; inset: -6px; } /* 44 px touch target around a 32 px pill */
  .demo-panel { left: 0; right: 0; bottom: 0; width: auto; max-height: 80vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .demo-panel .chip, .demo-panel .btn--sm { height: 44px; }
  .demo-panel__x { width: 44px; height: 44px; }
  .demo-jump .link, .demo-panel__s > p > .link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- book cards and buy buttons: books with no text yet (Batch 0b) ---------- */
.bk__soon { font: 600 13px/1 var(--f-ui); color: var(--ink-2); }
.btn[data-own].is-soon { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); --hover: color-mix(in srgb, var(--ink) 8%, transparent); }
[data-dark] .btn[data-own].is-soon { --fg: var(--stone); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--stone) 40%, transparent); }

/* ---------- dialogs on phones (realism round B6): every .dlg is a bottom sheet with full-width buttons, the main one on
   top. Moved from css/pages/account.css; dialog.dlg outranks the per-dialog widths (.ck-dlg, .rax-dlg). ---------- */
@media (max-width: 560px) {
  dialog.dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; }
  dialog.dlg form { padding: var(--s5) var(--side, 20px) calc(var(--s5) + env(safe-area-inset-bottom, 0px)); }
  dialog.dlg .dlg__acts { flex-direction: column-reverse; align-items: stretch; }
  dialog.dlg .dlg__acts .btn { width: 100%; justify-content: center; }
}

/* ---------- "Includes VAT" with printed books in Egypt: the rate note is its own small line under the label, so the
   amount keeps its one line (bag, checkout, order summaries) ---------- */
.sum__vat dd { flex: none; white-space: nowrap; }
.sum__vat dt { min-width: 0; }
.sum__vatnote { display: block; margin-top: 2px; font: 400 12px/1.4 var(--f-ui); color: var(--ink-2); text-wrap: pretty; }

/* ---------- Arabic pass (29 Oct): right-to-left ---------- */
/* the water line (orders, library, reader, Plus) fills from the reading side: the bar is drawn left to right
   (core.js waterLine sets clip-path from the right), so in right-to-left text the whole bar is mirrored */
.wline__bar:dir(rtl) { transform: scaleX(-1); }
/* Arabic home: the authors close the store band, on sky, as in English; home.js keeps the full Arabic list (no
   .authors__list--compact), whose colours were set for the blue band */
.sv__au .authors__list:not(.authors__list--compact) { border-bottom-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.sv__au .authors__list:not(.authors__list--compact) .au a { color: var(--ink); border-top-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.sv__au .authors__list:not(.authors__list--compact) .au a::after { background: var(--ink); }
@media (max-width: 900px) {
  .sv__au .authors__list:not(.authors__list--compact) .au a { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 6px; }
}