/* Maktoob — the purchase and sign-in sheet (Batches 3 and 10). The sheet's first styles stay in site.css (727–769, 1281–1282)
   and shop.css (474–493); this file overrides them: a header that folds to one line, a scrolling body and a sticky footer
   with the amount, the one main action and the secure line. Full screen at ≤ 600 px. */

/* ---------- frame: header · body (scrolls) · footer (sticky) ---------- */
.sheet__in { overflow: hidden; padding-bottom: 0; }
.sheet__item { flex: none; transition: padding var(--t-ui); }
.sheet__meta { flex: 1; min-width: 0; }
.sheet__form { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; margin: var(--s5) -36px 0; padding: 0; }
.sheet__form[hidden] { display: none; }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 36px var(--s6); scroll-padding-bottom: 16px; }
.sheet__foot {
  flex: none; display: grid; gap: 10px; padding: 14px 36px calc(22px + env(safe-area-inset-bottom));
  background: var(--stone); box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 10%, transparent), 0 -10px 24px -18px rgb(0 41 56 / .35);
}
.sheet__foot:empty { display: none; }
.sheet__foot .sheet__go { margin-top: 0; height: 56px; }
.sheet__foot .sheet__err { margin-top: 0; align-items: flex-start; line-height: 1.45; }
.sheet__foot .sheet__err::before { margin-top: 1px; }
.sheet__err[hidden] { display: none; }
.sheet__sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-size: 13.5px; color: var(--ink-2); }
.sheet__tot { color: var(--ink-2); }
.sheet__tot strong { margin-inline-start: 4px; font: 700 17px/1.2 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.sheet__vat { font-variant-numeric: tabular-nums; }
.sheet__secure { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 18px; font-size: 12.5px; color: var(--ink-2); }
.sheet__secure svg { width: 14px; height: 14px; flex: none; color: var(--deep-water, var(--blue)); }
.sheet__terms { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.sheet__lead { font-size: 15px; line-height: 1.5; color: var(--ink); }

/* ---------- the header folds to one line after the phone step ---------- */
.sheet__item--fold { gap: 12px; padding: 8px 14px 8px 8px; }
.sheet__item--fold .sheet__cv { width: 30px; }
.sheet__item--fold .sheet__ico { width: 40px; height: 40px; }
.sheet__item--fold .sheet__ico svg { width: 20px; height: 18px; }
.sheet__item--fold .sheet__k, .sheet__item--fold .sheet__sub { display: none; }
.sheet__item--fold .sheet__name { margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__item--fold .sheet__name [lang="ar"] { font-size: 17px; }
.sheet__item--fold .sheet__amt { font-size: 16px; }
[dir="rtl"] .sheet__item--fold { padding: 8px 8px 8px 14px; }

/* ---------- ways to pay ---------- */
.sheet .radio-card { align-items: center; padding: 13px 14px; }
.sheet .radio-card__dot { margin-top: 0; }
.radio-card__lead { display: grid; place-items: center; flex: none; width: 64px; }
.radio-card__lead svg { width: 24px; height: 24px; color: var(--blue); }
.radio-card__m { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sheet__methods .pay-more { gap: var(--s4); }

/* saved cards: the chosen one opens its security code; an expired one is dimmed with Update */
.scards { display: grid; gap: 8px; }
.scard { display: grid; gap: 8px; }
.scard .radio-card { width: 100%; }
.scard.is-expired { display: flex; align-items: center; gap: 14px; padding: 10px; padding-inline-start: 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-2); }
.scard.is-expired .radio-card__dot, .scard.is-expired .radio-card__n, .scard.is-expired > .pmark { opacity: .55; }
.scard.is-expired .radio-card__b { flex: 1; min-width: 0; display: grid; gap: 3px; }
.scard .radio-card__n { overflow-wrap: anywhere; }
.scard.is-expired .radio-card__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 40%, transparent); }
.scard.is-expired .radio-card__s { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
/* an expired card: ink text behind a small clock (red stays for the one main action) */
.scard.is-expired .radio-card__s::before { content: ''; flex: none; width: 15px; height: 15px; 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='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%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='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.scard__upd { flex: none; min-height: 44px; }
.scard__cvc { padding: 4px 4px 2px 48px; }
.scard__cvc .input { max-width: 160px; }
[dir="rtl"] .scard__cvc { padding: 4px 48px 2px 4px; }
.sheet__save { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.card-field > .pmark[hidden] { display: none; }
.card-field > .pmark { bottom: 17px; }

/* STC Pay number: a fixed +966 */
.phone--fixed { background: var(--white); }
.phone__cc { display: grid; place-items: center; padding: 0 14px 0 16px; font: 600 15px/1 var(--f-ui); color: var(--ink); border-right: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }

/* ---------- confirm steps ---------- */
.sheet__bank { display: grid; gap: 10px; }
.bankframe { display: block; width: 100%; height: 470px; border: 0; border-radius: var(--r-md); background: var(--white); box-shadow: var(--e1), 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.apay { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-md); background: var(--white); box-shadow: var(--e1); }
.apay__top { display: flex; align-items: center; justify-content: space-between; }
.apay__top .link--btn { min-height: 44px; }
.apay__rows { display: grid; gap: 0; }
.apay__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); font-size: 14.5px; }
.apay__rows dt { color: var(--ink-2); }
.apay__rows dd { font-weight: 600; text-align: end; }
.apay__tot dd { font-size: 17px; font-weight: 700; }
.apay__face { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.apay__glyph { position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 2.5px var(--blue); }
.apay__glyph::before { content: ''; position: absolute; inset: 11px 10px auto; height: 6px; border-radius: 0 0 8px 8px; box-shadow: inset 0 -2.5px 0 var(--blue); top: 17px; }
.apay__glyph::after { content: ''; position: absolute; left: 11px; right: 11px; top: 11px; height: 3px; background: radial-gradient(circle, var(--blue) 1.5px, transparent 2px) 0 0 / 50% 100% repeat-x; }
.sheet__lines { display: grid; gap: 12px; }
.sheet__free { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r-md); background: color-mix(in srgb, var(--sky) 22%, var(--white)); }
.sheet__free-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--sky); }
.sheet__free-ico svg { width: 22px; height: 22px; }
.sheet__free-t { font: 700 17px/1.3 var(--f-ui); margin-bottom: 4px; }

/* ---------- the paid panel ---------- */
.sheet__done { flex: 1; min-height: 0; display: block; place-content: normal; overflow-y: auto; margin-inline: -36px; padding: var(--s6) 36px calc(28px + env(safe-area-inset-bottom)); font: inherit; text-align: start; }
.sheet__done[hidden] { display: none; }
.sheet__paid { display: grid; gap: 14px; justify-items: start; max-width: 440px; }
.sheet__paid .sheet__tick { width: 56px; height: 56px; }
.sheet__paid .sheet__tick svg { width: 28px; height: 28px; }
.sheet__pt { font: 700 30px/1.15 var(--f-ui); letter-spacing: -.03em; outline: none; }
.sheet__pp { font-size: 16px; line-height: 1.55; color: var(--ink); }
.sheet__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; width: 100%; margin-top: 6px; }
.sheet__acts .btn { min-width: 180px; height: 52px; }
.sheet__acts .link, .sheet__acts .link--btn { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; }
.sheet__paid .note { width: 100%; }

/* ---------- sign-in (Batch 10): number, code, first-time welcome ---------- */
.sheet__reauth { margin-bottom: var(--s4); }
.sheet__ex { margin-top: -2px; }
.sheet__ex bdi { color: var(--ink); font-variant-numeric: tabular-nums; }
.sheet__sent { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sheet__sent bdi { color: var(--ink); font-weight: 600; white-space: nowrap; }
.sheet__sent .link--btn, .otp__again .link--btn, .otp__err .link--btn { min-height: 44px; display: inline-flex; align-items: center; vertical-align: middle; }
.sheet__sent .link--btn { min-height: 32px; }
.otp input:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.otp__err[hidden] { display: none; }
.otp__err p { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.otp__err p > span:last-child { min-width: 0; }
.otp__ic { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--red-act); color: var(--white); font: 700 13px/1 var(--f-ui); }
.otp__err { display: grid; gap: 10px; justify-items: start; outline: none; }
.otp__new { min-height: 44px; margin-inline-start: 28px; }
.otp__again[hidden] { display: none; }
.otp__err--lock { padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--red) 12%, transparent); }
.otp__again { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 44px; font-size: 14px; color: var(--ink-2); }
.otp__again [data-otp-timer] { font-variant-numeric: tabular-nums; }
.otp__again > span[aria-hidden] { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.sheet__welcome { gap: 14px; }
.sheet__welcome .field { display: grid; gap: 8px; }
.sheet__opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); }
.sheet__opt-h { margin: -8px 0 0 30px; }
[dir="rtl"] .sheet__opt-h { margin: -8px 30px 0 0; }
.sheet__consent .link { font-weight: 600; }

/* the Demo pill stays clear of the Pay button inside the sheet */
dialog.sheet .demo-pill { right: auto; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }

/* ---------- phones: full screen ---------- */
@media (max-width: 600px) {
  .sheet { width: 100vw; height: 100vh; height: 100dvh; padding: 0; }
  .sheet__in { margin-top: 0; height: 100%; padding: 14px 16px 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .sheet__x { top: 10px; right: 8px; }
  [dir="rtl"] .sheet__x { right: auto; left: 8px; }
  .sheet__item { margin-right: 44px; }
  [dir="rtl"] .sheet__item { margin-right: 0; margin-left: 44px; }
  .sheet__form { margin: var(--s4) -16px 0; }
  .sheet__body { padding: 2px 16px var(--s5); }
  .sheet__foot { gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .sheet__foot .sheet__go { height: 52px; }
  .sheet__t { font-size: 24px; margin-bottom: var(--s4); }
  .sheet__steps { margin-bottom: var(--s4); }
  .sheet__who { margin-top: -4px; }
  .sheet .radio-card { padding: 12px; gap: 10px; }
  .radio-card__lead { width: 56px; }
  .scard .pmark { display: none; }
  .sheet__methods .pay-more { padding: var(--s4); }
  .scard__cvc { padding-left: 34px; }
  [dir="rtl"] .scard__cvc { padding-left: 4px; padding-right: 34px; }
  .bankframe { height: max(380px, calc(100dvh - 300px)); }
  .sheet__done { margin-inline: -16px; padding: var(--s5) 16px calc(20px + env(safe-area-inset-bottom)); }
  .sheet__pt { font-size: 26px; }
  .sheet__acts .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .sheet__item { transition: none; } }

/* ---------- the keyboard is up (.sheet.is-kb, set by js/sheet.js while visualViewport.height < 600): the secure line and
   the VAT line give way, so the field being typed in (the security code) stays in view above the button (B8) ---------- */
.sheet.is-kb .sheet__secure, .sheet.is-kb .sheet__vat { display: none; }
.sheet.is-kb .sheet__foot { gap: 6px; padding-top: 8px; }
/* the trial's "Then 79 EGP a month": figures line up, and it stays with the keyboard up (it is the price, not the VAT) */
.sheet__then { font-variant-numeric: tabular-nums; }