/* Maktoob — checkout (Batch 4): saved cards, brand marks, messages at Place, instalment totals, the bank redirect veil. */

/* ---------- notes above the steps (an e-book you now own) ---------- */
.co__notes:empty { display: none; }
.co__notes { display: grid; gap: var(--s3, 12px); margin-bottom: var(--s5); }
.co-note i { font-style: italic; }

/* ---------- payment method tiles: brand marks under the line ---------- */
.co-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------- saved cards: default first; an expired card is dimmed, with Update beside it ---------- */
.co-card { position: relative; display: grid; }
.co-card .radio-card { align-items: center; }
.co-card .radio-card .radio-card__dot { margin-top: 0; }
.co-card .radio-card__e { display: inline-flex; }
.co-card.is-expired .radio-card { padding-inline-end: 120px; }
.co-card.is-expired .radio-card__e { display: none; }
.co-card__upd { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); min-height: 44px; }
.co-card .co-scvc { margin: 10px 0 4px; padding-inline-start: 50px; }
.co-scvc .input { max-width: 140px; }
.co-scvc .field__hint--ink { max-width: 46ch; }
@media (max-width: 480px) {
  .co-card .co-scvc { padding-inline-start: 16px; }
  .co-card .radio-card__e { display: none; } /* the brand is in the card's name already */
  /* an expired card: Update moves under the card's text */
  .co-card.is-expired .radio-card { padding-inline-end: 16px; padding-bottom: 64px; }
  .co-card__upd { top: auto; bottom: 12px; transform: none; inset-inline-end: auto; inset-inline-start: 50px; }
}

/* ---------- the card number field: the brand mark shows once the number says which card it is ---------- */
.card-field > .pmark[data-m=""] { visibility: hidden; }
.card-field > .input { padding-inline-end: 72px; }

/* ---------- instalments: what it costs in all ---------- */
.co-instal { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--sky) 22%, transparent); font-size: 14px; line-height: 1.5; color: var(--ink); }
.co-instal__l { font-weight: 700; }
.co-instal__v { font-variant-numeric: tabular-nums; }
.dlg .co-instal { margin: 0; }

/* ---------- the fail note's action ---------- */
.co-fail__act { display: inline; margin-inline-start: 2px; font-weight: 700; }
.note[data-fail]:focus { outline: none; }
.note[data-fail]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- a change at Place (price, stock, promo) or a pending payment ---------- */
.co-change { display: grid; gap: 12px; padding: var(--s5); border-radius: var(--r-md); background: var(--white); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #E8B04A 70%, transparent), var(--e1); }
.co-change:focus { outline: none; }
.co-change:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.co-change--wait { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 45%, transparent), var(--e1); }
.co-change__t { display: flex; align-items: center; gap: 10px; font: 700 17px/1.3 var(--f-ui); }
.co-change__t svg { flex: none; width: 22px; height: 22px; color: #9A6512; }
.co-change--wait .co-change__t svg { color: var(--blue); }
.co-change p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.co-change p i { font-style: italic; color: var(--ink); }
.co-change__sum { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.co-change__sum dd { text-align: end; }
.co-change__sum s { color: var(--ink-2); text-decoration-thickness: 1.5px; }
.co-change__sum b { font-weight: 700; color: var(--ink); }
.co-change__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.co-change__acts .btn { flex: 1 1 auto; }
@media (max-width: 600px) { .co-change__acts .btn { flex-basis: 100%; } }

/* ---------- the redirect to the bank, and back ---------- */
.co-veil { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px 16px;
  background: color-mix(in srgb, var(--stone) 92%, transparent); backdrop-filter: blur(4px); }
.co-veil__in { display: grid; justify-items: center; gap: 10px; width: min(440px, 100%); padding: 36px 28px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--e3); text-align: center; }
.co-veil__spin { width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--blue) 18%, transparent); border-top-color: var(--blue); animation: co-spin .9s linear infinite; }
.co-veil__k { font: 700 13px/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.co-veil__t { font: 700 20px/1.3 var(--f-ui); color: var(--ink); }
.co-veil__s { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@keyframes co-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .co-veil__spin { animation: none; border-color: var(--blue); border-right-color: color-mix(in srgb, var(--blue) 18%, transparent); }
}

/* ---------- 390: the phone row no longer pushes its step past the screen edge ---------- */
.co .step-p__body { grid-template-columns: minmax(0, 1fr); }
.co .field > .phone { min-width: 0; }

/* =====================================================================================================================
   Batch 11: the phone step's code, the ways to pay folding on phones, Saudi panels, the VAT line, a long order summary
   that folds and scrolls inside its sticky column, and the fixed total-and-button bar on phones.
   ===================================================================================================================== */

/* ---------- the code step: who it went to, the error, "Send again in 0:42" ---------- */
.co-otp__to bdi { font-weight: 700; color: var(--ink); }
.co-otp__to .link--btn, .co-otp__again .link--btn { min-height: 44px; }
.co-otp__err:not([hidden]) { margin-top: -4px; }
.co-otp__again { margin-top: -6px; }
[data-resend]:disabled { color: var(--ink-2); text-decoration: none; cursor: default; opacity: 1; }
[data-resend] [dir="ltr"] { font-variant-numeric: tabular-nums; }
.otp input:disabled { opacity: .5; cursor: not-allowed; }
.co .phone select { min-width: 92px; }

/* ---------- STC Pay's number and its code ---------- */
.co .phone--fixed { background: var(--white); }
.dlg .co-stc { margin: 4px 0; }

/* ---------- the VAT line under the total ---------- */
.sum__vat { margin-top: -4px; font-size: 13px; color: var(--ink-2); }
.sum__vat dt, .sum__vat dd { font-weight: 500; color: var(--ink-2); }
.sum__vat dd { font-variant-numeric: tabular-nums; }

/* ---------- the ways to pay: "Change · N more ways to pay" (phones only; desktop keeps every way in view) ---------- */
.co-pays__more { display: none; }
@media (max-width: 900px) {
  .co-pays.is-folded > .radio-card[aria-checked="false"] { display: none; }
  .co-pays__more { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 16px; border-radius: var(--r-md);
    background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); font: 600 15px/1.3 var(--f-ui); color: var(--ink); text-align: start; cursor: pointer; }
  .co-pays__more span:first-child { color: var(--blue); font-weight: 700; }
  .co-pays__more span:first-child::after { content: '·'; margin-inline-start: 8px; color: var(--ink-2); font-weight: 400; }
  .co-pays__n { flex: 1; color: var(--ink-2); }
  .co-pays__more svg { flex: none; width: 16px; height: 16px; color: var(--ink-2); }
  .co-pays__more:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
}

/* ---------- the order summary: "+N more", and on desktop a sticky column whose item list scrolls inside ---------- */
.co__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-weight: 700; }
@media (min-width: 901px) {
  .co__side { display: flex; flex-direction: column; max-height: calc(100svh - 120px); }
  .co__side > .panel { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
  .co__side > .panel > * { flex: none; }
  .co__side [data-co-items] { flex: 0 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; margin-inline: -6px; padding-inline: 6px; scrollbar-width: thin; }
  .co__side [data-co-items]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm, 6px); }
  /* a long order: smaller lines, and once opened the list keeps to a height that leaves the total in view even before
     the column sticks (it starts ~330 px down the page) */
  .co__side [data-co-items].is-many .co__line { padding: 6px 0; }
  .co__side [data-co-items].is-many .co__line .it__cv { width: 32px; }
  .co__side [data-co-items].is-long { max-height: max(160px, calc(100svh - 600px)); }
  /* the list scrolls: a hairline marks where the totals begin */
  .co__side [data-co-items].is-long { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
  .co__side [data-co-items].is-long .co__more { position: sticky; bottom: 0; width: 100%; justify-content: flex-start; background: var(--stone-50); }
  /* short screens: the reassurance lines give way to the items and the total */
  @media (max-height: 760px) { .co__side .trust { display: none; } }
}

/* ---------- phones: the fixed bar with the total and the open step's button ---------- */
.co__bar { display: none; }
@media (max-width: 900px) {
  .co__bar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--stone-50); box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 12%, transparent), 0 -10px 28px -14px rgb(0 41 56 / .28); }
  .co__bar-t { display: grid; gap: 1px; min-width: 0; }
  .co__bar-l { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
  .co__bar-v { font: 700 18px/1.2 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .co__bar-go { flex: 0 1 auto; min-width: 0; min-height: 48px; padding-inline: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .co__bar-go[hidden] { display: none; }
  /* nothing hides behind it: the page ends above it, focused fields scroll clear of it, toasts and the Demo pill sit on top */
  body:has(.co__bar) { padding-bottom: var(--co-bar, 68px); }
  html:has(.co__bar) { scroll-padding-bottom: calc(var(--co-bar, 68px) + 16px); }
  body:has(.co__bar) .toast { bottom: calc(var(--co-bar, 68px) + 12px); }
  body:has(.co__bar) .demo-pill { bottom: calc(var(--co-bar, 68px) + 12px); }
  /* the step's own button stays (the bar mirrors it); on phones the bar is the one in reach */
}
@media (max-width: 360px) { .co__bar-go { padding-inline: 14px; } .co__bar-v { font-size: 16px; } }
@media (prefers-reduced-motion: no-preference) { .co__bar-go { transition: background-color var(--t-ui); } }

/* ---------- a bag with printed copies reached in SAR ---------- */
.co-blocked p { max-width: 52ch; }

/* =====================================================================================================================
   Realism round (B2, B3): card fields on phones, and one main button at a time while the fixed bar shows.
   ===================================================================================================================== */

/* ---------- phones: the card number clears its brand badge; expiry and security code share a row, the name below ---------- */
@media (max-width: 600px) {
  .co .step-p { padding: var(--s5) var(--s4); }
  .co .step-p[data-state="done"], .co .step-p[data-state="todo"] { padding-block: var(--s4); }
  .co .pay-more { padding: var(--s4); }
  .co .grid3:has(#c-exp) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .co .card-field > .input { padding-inline-end: 62px; }
}

/* ---------- ≤ 900: the fixed bar carries the open step's main button, so the step's own copy steps aside. It leaves the
   layout, the tab order and the accessibility tree (visibility), but keeps a box: the bar's tap still .click()s it ---------- */
@media (max-width: 900px) {
  .co:has(.co__bar-go:not([hidden])) .step-p[data-state="open"] .co__go {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); visibility: hidden; pointer-events: none; }
}

/* ---------- the phone step's first-time welcome: name (optional), WhatsApp news (unticked), the terms ---------- */
.co-welcome { display: grid; gap: var(--s4); }
.co-welcome > .field { gap: 8px; }
.co-welcome > .field .field__l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.co-welcome > .check { margin-top: 4px; }
.co-welcome > .check + .field__hint--ink { margin-top: calc(-1 * var(--s4) + 2px); padding-inline-start: 30px; }
.co-consent { margin-top: 4px; padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); font-size: 13.5px; }
.co-consent .link { font-weight: 600; }

/* ---------- payment pending: the small print under "Pay another way" ---------- */
.co-change__fine { margin-top: -2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }