/* Icons: one hidden sprite per page, every icon a short reference into it (ui_icon). */
.ui-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/*
 * PAYUNIT — Checkout surface (v19 · «C · steps», 17.45)
 * ---------------------------------------------------------------------------
 * This file is the ENTIRE stylesheet for the public checkout: the shared base,
 * the invoice checkout in three steps (.c-page), then the other pages on the
 * checkout shell (payment link, Lahza window, provider bridge, errors, sandbox,
 * statement check, shared deposits). The page does not
 * load base.css / app.css on purpose: a payment page is opened once, by a
 * stranger, often on mobile data, and every kilobyte before first paint is a
 * kilobyte of doubt. Everything here is written with logical properties so a
 * single sheet serves both Arabic (RTL) and English (LTR).
 */

/* ---------- Fonts (Arabic only; Latin uses the system stack) ------------- */
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

/* ---------- Design tokens ------------------------------------------------ */
:root{--brand-blue:#1a2842;--brand-blue-deep:#0d1526;--brand-navy:#1a2842;--brand-gold:#D6B370;--brand-coin:#C49A4A;--brand-tile:#f2f4f7;--brand-tile-line:#dfe3ea;
  --ink:#0d1526;          /* primary text + primary button */
  --ink-soft:#344054;
  --muted:#667085;
  --faint:#8a94a6;
  --line:#e6e8ee;
  --line-soft:#eff1f5;
  --paper:#ffffff;
  --page:#f4f5f8;
  --page-2:#eceef3;
  --gold:#c39a4e;
  --gold-soft:#f3e9d5;
  --ok:#067647;
  --ok-bg:#ecfdf3;
  --ok-line:#abefc6;
  --warn:#b54708;
  --warn-bg:#fffaeb;
  --warn-line:#fedf89;
  --bad:#b42318;
  --bad-bg:#fef3f2;
  --bad-line:#fecdca;
  --r-xl:22px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(13,21,38,.04),0 14px 34px -18px rgba(13,21,38,.24);
  --shadow-sm:0 1px 2px rgba(13,21,38,.05);
  --shadow-lg:0 1px 2px rgba(13,21,38,.05),0 30px 60px -30px rgba(13,21,38,.35);
  --navy:#1a2842;
  --focus:0 0 0 3px rgba(195,154,78,.32);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
html[lang="ar"]{--sans:"PU Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--page)}
body{
  margin:0;min-height:100dvh;
  font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);
  background:var(--page);
  background-image:radial-gradient(1100px 460px at 50% -160px,#fff 0%,rgba(255,255,255,0) 70%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,p,dl,dd,dt,figure{margin:0}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}

/* ---------- Copy protection ---------------------------------------------
 * The page behaves like an installed app: nothing is selectable, draggable or
 * long-pressable. Fields the payer must actually type into are the single
 * exception, and the wallet address is copied through its button only.
 * ----------------------------------------------------------------------- */
body{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
input:not([readonly]),textarea,select{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.co-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mono{font-family:var(--mono);letter-spacing:.01em}
/* Arrows point the way the page reads, and values carrying their own direction
   are placed by the page (both as in pu-base.css). */
html[dir="rtl"] .ui-icon-directional{transform:scaleX(-1)}
:where([dir="auto"],[dir="ltr"]):where(:not(html,p,pre,input,textarea,select)){text-align:-webkit-match-parent;text-align:match-parent}

/* ==========================================================================
 * Invoice checkout — «C · steps» (17.45)
 * --------------------------------------------------------------------------
 * views/invoice_checkout.php on the steps shell of views/checkout_layout.php
 * (body.is-steps > .c-page). On a phone the merchant sits on a navy header and
 * the page is a white bottom sheet whose main button stays in reach; from 760px
 * the header turns light and the sheet becomes a centred panel. Everything below
 * is scoped to .c-page, so the other pages on the checkout shell (payment link,
 * Lahza window, provider bridge, errors, sandbox) keep their own look.
 * ========================================================================== */
body.checkout-body.is-steps{background:var(--navy);background-image:none;background-attachment:scroll;overflow-x:hidden}
.c-page{min-height:100dvh;display:flex;flex-direction:column;width:100%;overflow-x:clip}
.c-page :where(h1,h2,h3,p){margin:0}

/* Header: brand, language, then who is being paid. */
.c-hero{color:#fff;padding:14px 16px 30px;background:radial-gradient(600px 260px at 50% 0,#2a3c5e 0%,#1a2842 60%,#132036 100%)}
.c-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.c-hero .co-brand{gap:9px;min-width:0}
.c-hero .co-logo{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.c-hero .co-brand .pu-brand-word{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.c-hero .pu-language-switch{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:none;color:rgba(255,255,255,.55)}
.c-hero .pu-language-switch b{color:rgba(255,255,255,.55)}
.c-hero .pu-language-switch b.is-on{color:#fff}
.c-merch{display:grid;justify-items:center;gap:6px;text-align:center;margin-block-start:18px;min-width:0}
.c-merch .co-avatar{width:56px;height:56px;border-radius:16px;font-size:22px;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.co-avatar.is-store{color:#fff;background:linear-gradient(150deg,#3d5a3a,#24392a);border-color:#24392a}
.c-merch-t{display:grid;gap:2px;min-width:0;max-width:100%}
.c-merch-t small{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.62)}
.c-merch-name{display:flex;align-items:center;justify-content:center;gap:6px;font-size:18px;font-weight:700;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.c-merch-name>span[dir]{min-width:0}
.c-merch .co-verified{color:#6ce9a6;margin:0}
.c-merch .co-verified svg{width:18px;height:18px}

/* The sheet. */
.c-sheet{flex:1;display:flex;flex-direction:column;position:relative;background:var(--paper);border-radius:24px 24px 0 0;margin-block-start:-16px;box-shadow:0 -10px 30px -12px rgba(0,0,0,.35);min-width:0}
.c-grab{width:42px;height:5px;border-radius:99px;background:#d9dde5;margin:9px auto 0}
.c-flash{margin:14px 16px 0}
.c-notices{padding-inline:16px}
.c-sh{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 16px 0}
.c-sh-back{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);background:var(--paper);transition:background .15s,border-color .15s}
.c-sh-back:hover{background:var(--page);border-color:#d3d7e0}
.c-sh-back svg{width:18px;height:18px}
.c-sh-back.is-off{visibility:hidden}
.c-sh-t{min-width:0}
.c-sh-t small{display:block;font-size:12px;font-weight:600;color:var(--faint);line-height:1.4}
.c-sh-t b{display:block;font-size:17px;font-weight:700;line-height:1.35}
.c-sh-amt{font-weight:700;font-size:15px;white-space:nowrap}
.c-sh-amt .co-unit{font-size:10.5px}
.c-prog{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:12px 16px 0}
.c-prog i{height:4px;border-radius:99px;background:var(--line-soft)}
.c-prog i.is-done{background:var(--ink)}
.c-prog i.is-on{background:linear-gradient(90deg,var(--gold),#d9bb7c)}
.c-body{padding:20px 16px 0;display:grid;gap:16px;align-content:start;flex:1;min-width:0;grid-template-columns:minmax(0,1fr)}
.c-body>:last-child{margin-block-end:20px}
.c-body.c-res{padding-block-start:26px}

/* The main button stays in reach on a phone. */
.c-foot,.c-body .co-actions{position:sticky;bottom:0;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 14px);padding-block:14px max(14px,env(safe-area-inset-bottom))}
.c-foot{padding-inline:16px;display:grid;gap:12px}
.c-body .co-actions{margin-block:-6px -4px}
.c-page .co-trust{justify-content:center;flex-wrap:wrap;gap:8px 10px;margin:0;font-size:13px;color:var(--muted)}
.c-page .co-trust>span{display:inline-flex;align-items:center;gap:6px}
.c-page .co-trust svg{width:16px;height:16px;color:var(--ok)}

/* Units (USD beside a figure) in gold, never on their own line. */
.c-page .co-unit{font-size:.62em;font-weight:700;color:var(--gold);letter-spacing:.04em;margin-inline-start:.3em}
.c-page .co-num{unicode-bidi:isolate}
.co-amt,.c-sh-amt,.co-send b,.co-res-amt b,.co-item-v,.co-lines dd{white-space:nowrap}
.pu-ccy{unicode-bidi:isolate}

/* Buttons */
.c-page .co-btn{min-height:54px;font-size:16px;font-weight:700;padding-inline:18px;gap:9px}
.c-page .co-btn svg{width:18px;height:18px}
.c-page .co-btn[aria-disabled="true"]{background:#e9ecf1;color:#98a1b0;box-shadow:none;cursor:default;filter:none;transform:none;pointer-events:none}
.c-page .co-btn-ghost{background:var(--paper);color:var(--ink-soft);border:1.5px solid var(--line);box-shadow:none;min-height:48px;font-size:14.5px;font-weight:600}
.c-page .co-btn-ghost:hover{background:var(--page);transform:none;box-shadow:none;filter:none}
.c-page .co-btn-ghost .co-btn-spin{border-color:rgba(13,21,38,.2);border-top-color:var(--ink)}

/* ---- Step 1: summary ---- */
.c-amt{display:grid;justify-items:center;gap:4px;text-align:center;padding-block:6px 4px}
.co-amt-label{font-size:12.5px;font-weight:600;color:var(--muted)}
.co-amt{font-size:42px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.co-amt .co-unit{font-size:15px}
.c-box{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.c-box>*+*{padding-block-start:12px;border-block-start:1px dashed var(--line)}
.c-page .co-desc{margin:0;padding:0;background:none;border-radius:0;font-size:14px;color:var(--ink-soft);line-height:1.65;overflow-wrap:anywhere}
.c-page .co-meta{margin:0;display:grid;gap:7px;font-size:13.5px}
.c-page .co-meta-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}
.c-page .co-meta-row dt{color:var(--muted);font-weight:500}
.c-page .co-meta-row dd{margin:0;font-weight:600;color:var(--ink);text-align:end;min-width:0;overflow-wrap:anywhere}
.co-items{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.co-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px}
.co-thumb{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;position:relative;background:var(--page-2);color:var(--muted);border:1px solid var(--line-soft)}
.co-thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.co-thumb svg{width:20px;height:20px}
.co-thumb i{position:absolute;inset-block-start:-7px;inset-inline-end:-7px;min-width:20px;height:20px;border-radius:999px;background:var(--ink-soft);color:#fff;font-size:11px;font-weight:700;line-height:20px;font-style:normal;text-align:center;padding-inline:5px;border:2px solid var(--paper)}
.co-item-t{min-width:0;display:grid;gap:1px}
.co-item-t b{font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.co-item-t small{font-size:12px;color:var(--muted)}
.co-item-v{font-size:14px;font-weight:600}
.co-lines{margin:0;display:grid;gap:7px;font-size:14px}
.co-lines>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.co-lines dt{color:var(--muted)}
.co-lines dd{margin:0;font-weight:600}
.co-lines .is-disc dd{color:var(--ok)}
.co-lines .is-total{border-block-start:1px solid var(--line);padding-block-start:10px;margin-block-start:3px}
.co-lines .is-total dt{color:var(--ink);font-weight:700}
.co-lines .is-total dd{font-size:17px;font-weight:700}

/* ---- Step 2: methods ---- */
.c-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.c-tile{position:relative;display:grid;gap:8px;align-content:start;justify-items:start;min-width:0;padding:14px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--paper);text-align:start;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-tap-highlight-color:transparent}
.c-tile:hover{border-color:#cfd5df}
.c-tile:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-md)}
.c-tile.is-wide{grid-column:1/-1;grid-template-columns:42px minmax(0,1fr);align-items:center;column-gap:12px;row-gap:3px;padding-inline-end:44px}
.c-tile.is-wide .co-m-lead{grid-row:span 2}
.co-m-lead{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#f2f4f7;border:1px solid #e3e7ee;color:var(--navy);flex:0 0 auto;overflow:hidden}
.co-m-lead svg{width:21px;height:21px}
.c-tile-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:14.5px;font-weight:700;line-height:1.35;min-width:0;padding-inline-end:22px;overflow-wrap:anywhere}
.c-tile.is-wide .c-tile-name{padding-inline-end:0}
.c-tile-name em{font-style:normal;font-weight:500;color:var(--faint);font-size:12px}
.co-m-sub{display:flex;align-items:center;flex-wrap:wrap;gap:5px 6px;font-size:12.5px;color:var(--muted);line-height:1.4;min-width:0}
.co-chips{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap;direction:ltr}
.co-chip{height:22px;width:34px;border-radius:6px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;padding:2px 4px}
.co-chip img{max-height:14px;max-width:100%;width:auto;object-fit:contain}
.co-chips.is-lg .co-chip{height:28px;width:46px;border-radius:8px}
.co-chips.is-lg .co-chip img{max-height:17px}
.c-tile-go{display:grid;place-items:center;width:20px;height:20px;color:var(--faint);flex:0 0 auto}
.c-tile-go svg{width:18px;height:18px}

/* ---- Step 3: a method's screen ---- */
.co-flow{display:grid;gap:16px;min-width:0;grid-template-columns:minmax(0,1fr)}
.co-h{font-size:19px;font-weight:700;line-height:1.4;letter-spacing:-.005em}
.co-sub{font-size:13.5px;color:var(--muted);margin-block-start:4px;line-height:1.6}
.co-flow-head.is-brand{display:flex;align-items:center;gap:12px}
.co-flow-logo{flex:0 0 auto}
.co-flow-logo .hm-logo{display:block;border-radius:10px;background:#fff;border:1px solid var(--line-soft)}
.co-bio{display:grid;justify-items:center;gap:12px;text-align:center;padding-block:4px 0}
.co-bio-ic{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--page);border:1px solid var(--line);color:var(--navy);position:relative}
.co-bio-ic svg{width:36px;height:36px;stroke-width:1.6}
.co-bio-ic.is-busy{background:#fff}
.co-bio-ic.is-busy::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:co-spin 1s linear infinite}
.co-bio-ic.is-logo .hm-logo{border-radius:12px}
.c-page .co-recap{display:grid;gap:8px;margin:0;padding:13px 14px;border-radius:12px;background:var(--page);border:0;font-size:13.5px}
.c-page .co-recap>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0;background:none;border:0;border-radius:0;flex:none;min-width:0}
.c-page .co-recap>div>span,.c-page .co-recap dt{display:inline;color:var(--muted);font-size:13.5px;font-weight:500}
.c-page .co-recap b,.c-page .co-recap dd{display:inline;margin:0;font-size:13.5px;font-weight:700;text-align:end;min-width:0;overflow-wrap:anywhere}
.c-page .co-note{margin:0;font-size:13.5px;border-radius:12px}
.c-page .co-note b{font-weight:700}
.c-page .co-note-info{background:#f2f5fa;border-color:#dfe5ef}
.c-page .co-live{margin:0;padding:13px 14px;border-radius:12px;background:var(--page);border:1px solid var(--line)}
.c-page .co-live b{font-size:14px;font-weight:700}
.c-page .co-live small{font-size:12.5px}
.c-page .co-pulse{width:12px;height:12px;border:0;border-radius:50%;background:var(--gold);animation:none;position:relative;margin-inline:5px}
.c-page .co-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--gold);opacity:.5;animation:co-ring 1.6s ease-out infinite}
@keyframes co-ring{from{transform:scale(.6);opacity:.7}to{transform:scale(1.5);opacity:0}}
.c-page .co-live.is-ok .co-pulse{background:var(--ok)}
.c-page .co-live.is-ok .co-pulse::after{border-color:var(--ok)}
.c-page .co-passkey-status{margin:0;border-radius:12px;font-size:13.5px}

/* Forms */
.c-page .co-form{gap:16px}
.c-page .co-field>span,.co-fieldset>legend{font-size:14px;font-weight:600;color:var(--ink-soft);margin-block-end:7px}
.c-page .co-input{height:48px;font-size:15px;padding-inline:14px}
.co-fieldset{border:0;margin:0;padding:0;min-width:0}
.co-fieldset>legend{display:block;padding:0}
.co-nets{display:grid;gap:8px}
.co-net{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;border:1.5px solid var(--line);background:#fff;cursor:pointer;min-width:0;transition:border-color .15s,box-shadow .15s}
.co-net:hover{border-color:#cfd5df}
.co-net:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,21,38,.06)}
.co-net input{appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;border-radius:50%;border:1.8px solid #c9ced8;background:#fff;display:grid;place-items:center;flex:0 0 auto;cursor:pointer}
.co-net input:checked{border-color:var(--ink);background:var(--ink)}
.co-net input:checked::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.co-net input:focus-visible{outline:none;box-shadow:var(--focus)}
.co-net img{width:22px;height:22px;flex:0 0 auto}
.co-net b{font-size:14.5px;font-weight:700;min-width:0;overflow-wrap:anywhere}

/* Digital currency: QR beside the details on a wide screen, under them on a phone. */
.co-x-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.co-x-side{display:grid;gap:14px;min-width:0;align-content:start}
.co-qr-wrap{display:grid;justify-items:center;gap:8px;order:2}
.c-page .co-qr{width:176px;height:176px;padding:10px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:none}
.co-qr-wrap small{font-size:12.5px;color:var(--muted)}
.c-page .co-asset{display:inline-flex;align-items:center;gap:7px;height:auto;padding:5px 12px 5px 7px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700;direction:ltr;white-space:nowrap}
.c-page .co-asset img{width:20px;height:20px}
.co-send{display:grid;gap:2px;padding:14px;border-radius:var(--r-md);background:var(--page);text-align:center}
.co-send>span{font-size:12.5px;color:var(--muted);font-weight:600}
.co-send b{font-size:26px;font-weight:700;letter-spacing:-.01em}
.co-send b .co-unit{font-size:13px}
/* The address: label and a light copy chip on one row, the address in short groups
   in a soft box, and a full-width copy button under it. */
.c-page .co-addr{display:grid;gap:8px;margin:0}
.co-addr-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.co-addr-head>span{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.co-chip-copy{display:inline-flex;align-items:center;gap:5px;height:30px;padding-inline:11px;border-radius:999px;border:1px solid var(--line);background:var(--page);color:var(--ink-soft);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.co-chip-copy:hover{background:var(--page-2)}
.co-chip-copy svg{width:14px;height:14px}
.co-addr-label{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
/* The address on ONE line: the size follows the screen so a full address fits; it scrolls sideways only as a last resort. */
.c-page .co-addr{container-type:inline-size}
.co-addr-box{display:flex;justify-content:safe center;padding:13px 12px;border-radius:var(--r-md);background:var(--page);border:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none;direction:ltr}
.co-addr-box::-webkit-scrollbar{display:none}
.co-addr-line{white-space:nowrap;font-family:var(--mono);font-size:clamp(10.5px,calc((100cqi - 26px) / 25.6),15px);line-height:1.5;letter-spacing:0;color:var(--ink);user-select:all}
.co-addr-copy svg{width:16px;height:16px}
.co-chip-copy.is-done,.co-addr-copy.is-done{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}

/* ---- Outcomes ---- */
.co-res{display:grid;gap:18px;text-align:center;min-width:0;grid-template-columns:minmax(0,1fr)}
.co-res-ic{position:relative;width:72px;height:72px;margin-inline:auto;border-radius:50%;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok);box-shadow:0 0 0 8px #f4fbf7;animation:co-pop .45s cubic-bezier(.2,1.2,.4,1) both}
.co-res-ic svg{width:34px;height:34px;stroke-width:2.2}
.co-res-ic.is-warn{background:var(--warn-bg);color:var(--warn);box-shadow:0 0 0 8px #fffcf3}
.co-res-ic.is-bad{background:var(--bad-bg);color:var(--bad);box-shadow:0 0 0 8px #fffaf9}
.co-res-ic.is-muted{background:var(--page-2);color:var(--muted);box-shadow:0 0 0 8px #f7f8fa}
.co-res.is-success .co-res-ic svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:co-draw .5s ease-out .3s forwards}
.co-res h1{font-size:23px;font-weight:700;line-height:1.35}
.co-res .co-lead{font-size:14.5px;color:var(--muted);margin-block-start:4px;overflow-wrap:anywhere}
.co-res.is-compact{gap:16px}
.co-res.is-compact .co-res-ic{width:64px;height:64px}
.co-res.is-compact .co-res-ic svg{width:30px;height:30px}
.co-res-amt{padding:14px;border-radius:var(--r-md);background:var(--page);display:grid;gap:2px}
.co-res-amt>span{font-size:12.5px;color:var(--muted);font-weight:600}
.co-res-amt b{font-size:30px;font-weight:700;letter-spacing:-.01em}
.co-res-amt b .co-unit{font-size:14px}
.co-res-amt .co-res-approx{font-size:12.5px;color:var(--muted);font-weight:600}
.co-res-amt.is-brand{background:linear-gradient(135deg,#f7f8fa,#eceef2)}
.co-res-amt.is-muted b,.co-res-amt.is-muted b .co-unit{color:var(--faint)}
.c-page .co-reward{display:inline-flex;justify-self:center;margin:0 auto;padding:7px 14px 7px 10px;border-radius:999px;font-size:13.5px}
.c-page .co-receipt{margin:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);gap:0;text-align:start;overflow:hidden}
.c-page .co-receipt>div{padding:11px 14px;font-size:13.5px;background:none}
.c-page .co-receipt>div+div{border-block-start:1px solid var(--line-soft)}
.c-page .co-receipt>div.is-lead{background:#fbfbfd}
.c-page .co-receipt dt{font-size:13.5px}
.c-page .co-receipt dd{font-size:13.5px}
.c-page .co-res .co-note{text-align:start}
.co-res-actions{display:grid;gap:10px}
.c-page .co-notice{margin:0}

/* The Netloopers frame, when the operator turns it on. */
.c-page .co-nl-frame{margin:0}

/* ---- Wide screens: a centred panel on a light page ---- */
@media(min-width:760px){
  body.checkout-body.is-steps{background:#eef0f4 radial-gradient(1000px 500px at 50% -200px,#fff 0%,rgba(255,255,255,0) 70%) no-repeat}
  .c-page{max-width:560px;margin-inline:auto;padding:28px 16px 24px}
  .c-hero{background:none;color:var(--ink);padding:0 0 18px}
  .c-hero .co-brand,.c-hero .co-brand .pu-brand-word,.c-merch-name{color:var(--ink)}
  .c-hero .co-logo{background:var(--brand-tile);border-color:var(--brand-tile-line);color:var(--navy)}
  .c-hero .pu-language-switch{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow-sm);color:var(--faint)}
  .c-hero .pu-language-switch b{color:var(--faint)}
  .c-hero .pu-language-switch b.is-on{color:var(--ink)}
  .c-merch{display:flex;align-items:center;gap:12px;text-align:start;margin-block-start:22px}
  .c-merch .co-avatar{width:46px;height:46px;font-size:19px;border-radius:14px;box-shadow:none}
  .c-merch-t small{color:var(--faint)}
  .c-merch-name{justify-content:flex-start;font-size:17px}
  .c-merch .co-verified{color:var(--ok)}
  .c-sheet{flex:none;margin:0;border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden}
  .c-grab{display:none}
  .c-flash{margin:20px 24px 0}
  .c-notices{padding-inline:24px}
  .c-sh{padding:20px 24px 0}
  .c-prog{padding:14px 24px 0}
  .c-body{padding:24px 24px 0}
  .c-body>:last-child{margin-block-end:24px}
  .c-body.c-res{padding-block-start:30px}
  .c-foot,.c-body .co-actions{position:static;background:none;padding:6px 0 0;margin:0}
  .c-foot{padding:0 24px 24px}
  .co-x-grid{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .co-qr-wrap{order:0}
}
@media(min-width:1400px){.c-page{padding-block-start:56px}}
@media(min-width:1800px){.c-page{max-width:600px;padding-block-start:72px}}
@media(max-width:370px){
  .c-tiles{gap:8px}
  .c-tile{padding:12px}
  .co-amt{font-size:36px}
  .c-hero{padding-inline:12px}
  .c-sh,.c-prog,.c-body,.c-foot{padding-inline:12px}
  .co-addr-box{padding-inline:10px}
}
@media(max-width:300px){.c-tiles{grid-template-columns:minmax(0,1fr)}}
.c-page .co-foot{padding:18px 16px max(20px,env(safe-area-inset-bottom));margin:0;background:var(--paper)}
@media(min-width:760px){.c-page .co-foot{background:none;padding:18px 0 6px}}

/* Above the shared rules further down (same names, other pages). */
.c-page .co-meta{padding:0;border:0}
.c-page .c-box>*+*{padding-block-start:12px;border-block-start:1px dashed var(--line)}
.c-page .co-recap b span,.c-page .co-recap dd span{display:inline;margin:0;font-size:inherit;color:inherit;font-weight:inherit}
@media(prefers-reduced-motion:reduce){.c-page .co-pulse::after,.co-bio-ic.is-busy::before,.co-res-ic{animation:none}.co-res.is-success .co-res-ic svg path{stroke-dashoffset:0;animation:none}}


/* ==========================================================================
 * Other pages on the checkout shell (views/checkout_layout.php without steps)
 * ========================================================================== */

/* ---------- Shell -------------------------------------------------------- */
.co{min-height:100dvh;display:flex;flex-direction:column;padding:18px 16px max(28px,calc(env(safe-area-inset-bottom) + 16px))}
.co-wrap{width:100%;max-width:1000px;margin-inline:auto;flex:1;display:flex;flex-direction:column;gap:18px}

/* Header */
.co-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:2px}
.co-brand{display:inline-flex;align-items:center;gap:10px}
.co-logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:var(--brand-tile);color:var(--brand-navy);line-height:1;border:1px solid var(--brand-tile-line)}
/* PAYUNIT Brand Kit 1.0 symbol and outlined wordmark (see pu-base.css). */
.pu-mark-coin{fill:var(--brand-coin,currentColor)}
.co-logo .pu-mark{display:block;width:54%;height:54%}
.co-brand .pu-brand-word{display:block;line-height:1.35;font-size:22px;letter-spacing:0}.co-brand b{font-size:15px;font-weight:700;letter-spacing:.14em}
.co-brand small{display:block;font-size:11px;font-weight:500;color:var(--faint);letter-spacing:.02em;line-height:1.3;margin-block-start:4px}
.co-top-actions{display:flex;align-items:center;gap:8px}
/* Shared language switch. Checkout intentionally does not load pu-base.css, so
   the shared PHP component needs its compact button styles here as well. */
.pu-language-switch{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;height:38px;min-width:70px;padding-inline:13px;
  border-radius:999px;border:1.5px solid var(--line);background:var(--paper);box-shadow:var(--shadow-sm);
  font-size:12.5px;font-weight:700;color:var(--faint);line-height:1;white-space:nowrap;text-decoration:none;
  transition:border-color .16s,color .16s,transform .16s;background .16s;
}
.pu-language-switch b{font-size:inherit;font-weight:700;color:var(--faint)}
.pu-language-switch b.is-on{color:var(--ink)}
.pu-language-switch>span{opacity:.45}
.pu-language-switch:hover{border-color:#c4cad4;transform:translateY(-1px)}
.pu-language-switch:focus-visible{outline:2px solid var(--gold);outline-offset:3px;box-shadow:none}
@media(max-width:360px){.pu-language-switch{min-width:63px;padding-inline:9px}}

/* Two-column grid */
.co-grid{display:grid;gap:16px;align-items:start}
@media(min-width:900px){
  .co-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:22px}
  .co-grid>.co-side{position:sticky;top:18px}
}
/* On a phone the rail collapses so its cards become grid items of their own. */
@media(max-width:899px){
  .co-side{display:contents}
  /* Once payment data exists — an address to send to, or a provider session to
     finish — it is what the payer came back for, and the summary is context
     they have already read. Without this the QR and the address opened below
     the fold behind a full-height summary card, so the payer had to scroll to
     reach what they had just asked the page to produce. */
  .co-grid.is-paying .co-main{order:-1}
  .co-grid.is-paying .co-summary{order:3}
}
.co-solo{max-width:520px;margin-inline:auto;width:100%}

/* The chosen method, once payment data is on screen: one line instead of the
   full chooser panel, still reversible. */
.co-chosen{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 12px;padding:0 4px;font-size:12.5px;color:var(--muted)
}
.co-chosen span{font-weight:700;color:var(--ink)}
.co-chosen a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.co-chosen a:hover{color:var(--ink)}

/* ---------- Summary rail ------------------------------------------------- */
.co-summary{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.co-summary::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--gold),#e6cd9a 55%,rgba(195,154,78,0))}
.co-payee{display:flex;align-items:center;gap:12px}
.co-avatar{
  width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,#f6f2e8,#efe6d2);color:#8a6b30;border:1px solid var(--gold-soft);
  font-size:19px;font-weight:700;
}
.co-avatar img{width:100%;height:100%;object-fit:cover}
.co-payee-meta small{display:block;font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.02em}
.co-payee-meta h1{font-size:16.5px;font-weight:700;line-height:1.35;margin-block-start:2px;word-break:break-word}
.co-amount{margin-block-start:20px;padding-block-start:18px;border-block-start:1px solid var(--line-soft)}
.co-amount>small{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.co-amount-value{display:flex;align-items:baseline;gap:8px;margin-block-start:6px;flex-wrap:wrap}
.co-amount-value b{font-size:clamp(32px,8vw,42px);font-weight:700;line-height:1.05;letter-spacing:-.025em}
.co-amount-value span{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.co-desc{
  margin-block-start:14px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--page-2);color:var(--ink-soft);font-size:13.5px;line-height:1.55;
}
.co-meta{margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--line-soft);display:grid;gap:9px}
.co-meta-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px}
.co-meta-row dt{color:var(--muted);font-weight:500;flex:0 0 auto}
.co-meta-row dd{font-weight:600;color:var(--ink-soft);text-align:end;word-break:break-word}

/* Assurances under the summary: what a stranger wants to know before typing. */

/* ---------- Panel -------------------------------------------------------- */
.co-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow);
}
.co-panel+.co-panel{margin-block-start:14px}
.co-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-block-end:16px}
.co-panel-head h2{font-size:16px;font-weight:700;letter-spacing:-.01em}
.co-panel-head p{font-size:13px;color:var(--muted);line-height:1.6;margin-block-start:4px}
.co-step{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--gold);letter-spacing:.08em;text-transform:uppercase;margin-block-end:8px;
}
.co-step::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--gold)}

/* Method chooser */
.co-methods{display:grid;gap:10px;margin-block-end:18px}
.co-method{
  display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:var(--r-md);
  border:1.5px solid var(--line);background:var(--paper);
  transition:border-color .16s,box-shadow .16s,background .16s,transform .16s;
}
.co-method:hover{border-color:#d3d7e0;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.co-method.is-on{border-color:var(--ink);background:#fbfbfd;box-shadow:0 0 0 1px var(--ink) inset}
.co-method-mark{
  width:44px;height:32px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:3px;
  background:var(--page-2);border:1px solid var(--line-soft);padding:4px;direction:ltr;
}
.co-method-mark img{height:16px;width:auto;object-fit:contain}
/* The header carries the plain gold symbol, as a receipt does; the wallet
   option carries the tiled app mark, so the two never read as the same badge
   printed twice and the PAYUNIT rail is the one a payer picks out at a glance. */
.co-method-mark.is-wallet{background:none;border-color:transparent;padding:0}
.co-method-mark .co-logo{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--brand-tile);color:var(--brand-navy);border:1px solid var(--brand-tile-line)}
.co-method-mark .co-logo .pu-mark{width:54%;height:54%}
/* A hosted method (PayPal, Stripe...) carries its own logo, square, untinted. */
.co-method-mark.is-brand{background:none;border-color:transparent;padding:0}
.co-method-mark.is-brand .hm-logo,.co-asset.is-brand .hm-logo{display:block;border-radius:9px;object-fit:contain;background:#fff}
.co-asset.is-brand{height:auto;padding:0;background:none;border:0}
.co-method-copy{min-width:0;flex:1}
.co-method-copy b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.co-method-copy small{display:block;font-size:12px;color:var(--faint);letter-spacing:.03em;margin-block-start:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-method-tick{width:20px;height:20px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center}
.co-method.is-on .co-method-tick{border-color:var(--ink);background:var(--ink);color:#fff}
.co-method-tick svg{width:11px;height:11px;opacity:0}
.co-method.is-on .co-method-tick svg{opacity:1}

/* ---------- Forms -------------------------------------------------------- */
.co-form{display:grid;gap:14px}
.co-fields{display:grid;gap:14px}
@media(min-width:560px){.co-fields.is-two{grid-template-columns:1fr 1fr}.co-fields .is-wide{grid-column:1/-1}}
.co-field{display:block}
.co-field>span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-block-end:6px}
.co-input{
  width:100%;height:46px;padding-inline:13px;border-radius:var(--r-md);
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink);
  font:inherit;font-size:14.5px;transition:border-color .16s,box-shadow .16s;
}
select.co-input{padding-inline-end:34px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:right 12px center}
html[dir="rtl"] select.co-input{background-position:left 12px center}
.co-input::placeholder{color:#a6adba}
.co-input:hover{border-color:#d3d7e0}
.co-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,21,38,.08)}
.co-input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(180,35,24,.09)}
.co-help{display:block;font-size:12px;color:var(--faint);margin-block-start:5px;line-height:1.5}

/* Radio rails */

/* ---------- Buttons ------------------------------------------------------ */
.co-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:52px;padding-inline:20px;border:0;border-radius:var(--r-md);cursor:pointer;
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  background:linear-gradient(180deg,#1a2842,#0d1526);color:#fff;
  box-shadow:0 1px 2px rgba(13,21,38,.16),0 10px 22px -12px rgba(13,21,38,.6);
  transition:transform .14s,box-shadow .14s,filter .14s;
}
.co-btn:hover{filter:brightness(1.09);transform:translateY(-1px);box-shadow:0 1px 2px rgba(13,21,38,.16),0 14px 26px -12px rgba(13,21,38,.62)}
.co-btn:active{transform:translateY(0) scale(.995)}
.co-btn[disabled],.co-btn[aria-busy="true"]{opacity:.62;cursor:default;transform:none;filter:none}
.co-btn svg{width:17px;height:17px;flex:0 0 auto}

.co-btn-ghost{background:transparent;color:var(--ink-soft);border:1.5px solid var(--line);box-shadow:none;min-height:46px;font-size:14px}
.co-btn-ghost:hover{filter:none;background:var(--page-2);transform:none;box-shadow:none}
.co-btn-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:co-spin .7s linear infinite;display:none}
.co-btn[aria-busy="true"] .co-btn-spin{display:block}
@keyframes co-spin{to{transform:rotate(360deg)}}

/* ---------- Notices ------------------------------------------------------ */
.co-note{display:flex;align-items:flex-start;gap:9px;padding:12px 13px;border-radius:var(--r-md);font-size:13px;line-height:1.6;border:1px solid}
.co-note[hidden]{display:none}
.co-redirect-panel [data-lahza-note]{margin-bottom:14px}
.co-note svg{width:16px;height:16px;flex:0 0 auto;margin-block-start:2px}
.co-note-info{background:var(--page-2);border-color:var(--line);color:var(--ink-soft)}
.co-note-warn{background:var(--warn-bg);border-color:var(--warn-line);color:#93370d}
.co-note-bad{background:var(--bad-bg);border-color:var(--bad-line);color:#912018}

.co-trust{display:flex;align-items:center;gap:8px;margin-block-start:14px;font-size:12px;color:var(--faint);line-height:1.55}
.co-trust svg{width:15px;height:15px;flex:0 0 auto;color:var(--ok)}

/* ---------- Live status -------------------------------------------------- */
.co-live{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-md);background:var(--page-2);border:1px solid var(--line);margin-block-start:14px}
.co-live b{display:block;font-size:13.5px;font-weight:600}
.co-live small{display:block;font-size:12px;color:var(--muted);margin-block-start:2px;line-height:1.5}
.co-pulse{width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:2.5px solid #dfe3ea;border-top-color:var(--ink);animation:co-spin .85s linear infinite}
.co-live.is-ok{background:var(--ok-bg);border-color:var(--ok-line)}
.co-live.is-ok .co-pulse{border-color:var(--ok-line);border-top-color:var(--ok);animation:none;position:relative}

/* ---------- Crypto ------------------------------------------------------- */
.co-asset{display:inline-flex;align-items:center;gap:7px;direction:ltr;height:32px;padding-inline:11px;border-radius:999px;background:var(--page-2);border:1px solid var(--line);font-size:12.5px;font-weight:700;flex:0 0 auto}
.co-asset img{width:17px;height:17px}
.co-qr-box{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px;border-radius:var(--r-md);background:var(--page-2);border:1px solid var(--line);margin-block-end:16px}
.co-qr{width:186px;height:186px;border-radius:12px;background:#fff;display:grid;place-items:center;padding:9px;box-shadow:var(--shadow-sm);overflow:hidden}
.co-qr img,.co-qr canvas{width:100%!important;height:100%!important;image-rendering:pixelated}
.co-qr.is-fallback{font-size:12px;color:var(--muted);text-align:center;padding:16px;line-height:1.55}
.co-qr-box small{font-size:12px;color:var(--muted)}
.co-terms{display:grid;gap:1px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--line-soft);margin-block-end:14px}
.co-terms>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:var(--paper)}
.co-terms dt{font-size:12.5px;color:var(--muted);font-weight:500}
.co-terms dd{font-size:14px;font-weight:600;text-align:end}
.co-terms>div.is-lead{background:linear-gradient(180deg,#fbf8f1,#fff)}
.co-terms>div.is-lead dd{font-size:18px;letter-spacing:-.015em}
.co-terms dd .co-unit{font-size:12.5px;margin-inline-start:5px}
/* The currency beside a figure is a unit, never its own line. */
.co-unit{display:inline!important;font-weight:600;color:var(--muted);letter-spacing:0}
.co-addr{margin-block-end:14px}
.co-addr>span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-block-end:6px}
.co-addr-row{display:flex;align-items:stretch;gap:8px}
.co-addr-value{
  flex:1;min-width:0;padding:11px 13px;border-radius:var(--r-md);border:1.5px solid var(--line);
  background:var(--page-2);font-family:var(--mono);font-size:12.5px;line-height:1.5;
  word-break:break-all;color:var(--ink-soft);text-align:left;
}
.co-copy{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding-inline:14px;
  border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--paper);
  font-size:13px;font-weight:600;cursor:pointer;transition:border-color .16s,background .16s,color .16s;
}
.co-copy:hover{border-color:#cfd4de;background:var(--page-2)}
.co-copy.is-done{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.co-copy svg{width:15px;height:15px}

/* ---------- Provider ----------------------------------------------------- */
.co-cards{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-block-end:16px;direction:ltr}
.co-cards img{height:26px;width:auto;padding:5px 8px;border-radius:8px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.co-recap{display:flex;gap:10px;margin-block-end:14px}
.co-recap>div{flex:1;padding:12px 13px;border-radius:var(--r-md);background:var(--page-2);border:1px solid var(--line)}
.co-recap span{display:block;font-size:12px;color:var(--muted);font-weight:500}
.co-recap b{display:block;font-size:14.5px;font-weight:700;margin-block-start:3px}

/* ---------- Wallet / passkey --------------------------------------------- */
.co-passkey-status{margin-block-end:12px;padding:12px 13px;border-radius:var(--r-md);font-size:13px;line-height:1.55;background:var(--page-2);border:1px solid var(--line);color:var(--ink-soft)}
.co-passkey-status.is-error{background:var(--bad-bg);border-color:var(--bad-line);color:#912018}

/* ---------- Payment link ----------------------------------------------- */
.co-link{max-width:480px;width:100%;margin-inline:auto}
.co-link .co-payee{margin-block-end:20px}
.co-summary.is-tight{padding:12px}
.co-link .co-payee.is-compact{margin-block-end:10px;gap:10px}
.co-payee.is-compact .co-payee-meta{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.co-payee.is-compact .co-payee-meta small{font-size:11.5px}
.co-payee.is-compact .co-payee-meta h1{font-size:15px;margin:0}
.co-payee.is-compact .co-avatar{width:28px;height:28px;border-radius:8px;font-size:13px}
.co-field>.co-amount-input{display:flex;align-items:center;gap:10px;margin:0;font-size:inherit;font-weight:inherit;color:inherit}
.co-amount-input .co-input{height:58px;font-size:26px;font-weight:700;text-align:center;letter-spacing:-.01em}
.co-amount-input b{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.co-field>span i{font-style:normal;font-weight:500;color:var(--faint)}

/* ---------- Result screens ----------------------------------------------- */
.co-result{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 24px 26px;box-shadow:var(--shadow);text-align:center;
  max-width:520px;margin-inline:auto;width:100%;
}
.co-result-icon{
  width:64px;height:64px;border-radius:50%;margin-inline:auto;display:grid;place-items:center;
  margin-block-end:18px;animation:co-pop .45s cubic-bezier(.2,1.2,.4,1) both;
}
.co-result-icon svg{width:30px;height:30px;stroke-width:2.6}
.is-success .co-result-icon{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.is-error .co-result-icon{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad)}
@keyframes co-pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.co-result h1{font-size:21px;font-weight:700;letter-spacing:-.015em}
.co-result .co-note{text-align:start}
.co-result>p{font-size:14px;color:var(--muted);line-height:1.6;margin-block-start:7px;max-width:38ch;margin-inline:auto}
.co-result>p+*{margin-block-start:22px}
.co-actions{display:grid;gap:10px}
.co-result-amount{
  margin-block:22px;padding:18px;border-radius:var(--r-md);
  background:var(--page-2);border:1px solid var(--line);
}
.co-result-amount>span{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
.co-result-amount b{display:block;font-size:32px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-block-start:5px}
.co-result-amount b .co-unit{font-size:15px;margin-inline-start:6px}
.co-receipt{display:grid;gap:1px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--line-soft);text-align:start;margin-block-end:20px}
.co-receipt>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:var(--paper)}
.co-receipt dt{font-size:12.5px;color:var(--muted);font-weight:500;flex:0 0 auto}
.co-receipt dd{font-size:13.5px;font-weight:600;text-align:end;word-break:break-word;min-width:0}
.co-receipt>div.is-lead{background:#fbfbfd}
.co-reward{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 13px;border-radius:var(--r-md);background:var(--gold-soft);border:1px solid #e8d5ac;margin-block-end:18px;font-size:13.5px;font-weight:700;color:#6d5322}
.co-reward svg{width:16px;height:16px;color:#8a6b30;flex:0 0 auto}

/* ---------- Footer ------------------------------------------------------- */
.co-foot{margin-block-start:6px;text-align:center;display:grid;gap:9px;justify-items:center}
.co-foot-badge{font-size:12px;color:var(--faint);font-weight:600}
.co-foot-links{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);flex-wrap:wrap;justify-content:center}
.co-foot-links a{transition:color .16s}
.co-foot-links a:hover{color:var(--ink-soft)}
.co-foot-links i{width:3px;height:3px;border-radius:50%;background:#c8cdd8;display:inline-block}
/* ---------- Motion / print ----------------------------------------------- */
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{body{display:none!important}}

/* ==========================================================================
 * Responsive hardening (v18.1)
 * --------------------------------------------------------------------------
 * A grid or flex item defaults to `min-width:auto`, which means it refuses to
 * shrink below its own min-content width. One nowrap label deep inside the
 * card-method tile ("Visa · Mastercard · Apple Pay · Google Pay") was therefore
 * setting the width of the entire single-column grid, and the whole checkout
 * scrolled sideways on any phone narrower than 415px.
 *
 * The fix is structural, not a patch: every track that holds content is
 * declared `minmax(0,1fr)` so it can never exceed its container, and every flex
 * child that holds text gets `min-width:0`. From here the layout is fluid from
 * a 280px folded phone up to an ultrawide desktop.
 * ========================================================================== */

/* Tracks that must never outgrow their container. */
.co-grid,.co-methods,.co-form,.co-fields,.co-terms,.co-receipt{grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.co-fields.is-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:900px){.co-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}}

/* Flex and grid children that carry text. */
.co-method,.co-method-copy,.co-live,.co-live>div,.co-trust,.co-trust>span,
.co-note,.co-note>span,.co-payee,.co-payee-meta,
.co-recap>div,.co-reward,.co-addr-value,.co-summary,.co-panel,.co-result,
.co-main{min-width:0}

/* A payment option must never hide one of its own methods behind an ellipsis:
   the label wraps to a second line instead. */
.co-method-copy small{white-space:normal;overflow:visible;text-overflow:clip}

/* Label/value rows fall to two lines rather than forcing the card wider. */
.co-meta-row,.co-terms>div,.co-receipt>div{flex-wrap:wrap}
.co-meta-row dd,.co-terms dd,.co-receipt dd{min-width:0;overflow-wrap:anywhere}

/* Merchant names, invoice descriptions and references are user data: they can be
   one long unbroken token, and must break rather than push the page sideways. */
.co-payee-meta h1,.co-desc,.co-result>p,.co-addr-value{overflow-wrap:anywhere}

/* ---- Small phones (≤400px) ---------------------------------------------- */
@media(max-width:400px){
  .co{padding:14px 12px max(22px,calc(env(safe-area-inset-bottom) + 12px))}
  .co-summary,.co-panel{padding:18px 16px}
  .co-result{padding:26px 18px 22px}
  .co-brand small{display:none}
  .co-amount-value b{font-size:clamp(28px,9vw,36px)}
  /* Address and its copy button stack: side by side leaves neither usable. */
  .co-addr-row{flex-direction:column;align-items:stretch}
  .co-copy{justify-content:center;padding-block:11px}
  .co-recap{flex-wrap:wrap}
  .co-recap>div{flex:1 1 100%}
  .co-qr{width:min(186px,72vw);height:min(186px,72vw)}
}

/* ---- Very small / folded phones (≤330px) -------------------------------- */
@media(max-width:330px){
  .co-top{flex-wrap:wrap;row-gap:10px}
  .co-top-actions{margin-inline-start:auto}
  .co-method{gap:10px;padding:11px 12px}
  .co-method-mark{width:38px;height:28px}
  .co-btn{font-size:14px;padding-inline:14px}
}

/* ---- Payment methods: two cards per row -------------------------------- */
/* Each method is a small card: its logos centred on top, a short name under
   them. No sub-lines: the logos already say what it takes. The chosen card gets
   the navy frame and a navy check badge sitting on its corner, outside the
   logos. Two side by side on every screen; one per row only on the narrowest
   folded phones. */
.co-methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.co-method{position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;padding:16px 10px 14px;min-height:96px}
.co-method-name{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.co-method-copy{width:100%}
.co-method .co-method-mark{width:auto;height:auto;padding:0;background:none;border:0;gap:5px;flex-wrap:wrap;justify-content:center}
.co-method-mark.is-cards img{width:32px;height:22px;padding:2px 3px;border-radius:5px;background:#fff;border:1px solid var(--line-soft);object-fit:contain;box-shadow:0 1px 2px rgba(13,21,38,.05)}
.co-method .co-method-tick{position:absolute;top:-9px;inset-inline-end:-9px;width:24px;height:24px;border:0;background:var(--ink);color:#fff;box-shadow:0 0 0 3px var(--paper),0 4px 10px rgba(13,21,38,.25);opacity:0;transform:scale(.6);transition:opacity .18s,transform .22s cubic-bezier(.2,1.3,.4,1)}
.co-method .co-method-tick svg{opacity:1;width:12px;height:12px}
.co-method.is-on .co-method-tick{opacity:1;transform:scale(1)}
.co-method.is-on{background:linear-gradient(180deg,#fff,#f7f8fb)}
/* Every logo on a method card sits in the same white chip: card schemes,
   coins, PayPal, Stripe, the wallet. One size for all, so no brand looks bigger
   than another. */
.co-methods{--chip-w:40px;--chip-h:28px}
.co-method-mark.is-cards img,.co-method-mark.is-coins img,.co-method-mark.is-brand .hm-logo,.co-asset.is-brand .hm-logo,.co-method .co-method-mark .co-logo{
  width:var(--chip-w);height:var(--chip-h);padding:4px 6px;border-radius:6px;background:#fff;border:1px solid var(--line-soft);
  object-fit:contain;box-shadow:0 1px 2px rgba(13,21,38,.05);box-sizing:border-box;flex:0 0 auto
}
.co-method-mark.is-coins img{padding:3px}
.co-method .co-method-mark .co-logo{display:grid;place-items:center;padding:0;color:var(--brand-navy)}
.co-method .co-method-mark .co-logo .pu-mark{width:auto;height:62%}
.co-asset.is-brand .hm-logo{--chip-w:40px;--chip-h:28px}
@media(min-width:440px){.co-methods{--chip-w:44px;--chip-h:30px}}
@media(max-width:340px){.co-method{padding:14px 8px 12px}.co-method .co-method-mark{gap:3px}.co-methods{--chip-w:32px;--chip-h:22px}.co-method-mark.is-cards img,.co-method-mark.is-brand .hm-logo{padding:2px 3px}}
@media(max-width:300px){.co-methods{grid-template-columns:minmax(0,1fr)}}

/* ---- The website's look ------------------------------------------------- */
/* Same light as the site and the sign-in pages: warm gold at the top corner, a
   navy hint low on the other side, on calm paper, with slow soft glows behind
   white cards that rise in one after the other. */
body.checkout-body{
  background:
    radial-gradient(80% 60% at 88% 0%,rgba(214,179,112,.18),transparent 62%),
    radial-gradient(60% 60% at 0% 100%,rgba(26,40,66,.07),transparent 62%),
    linear-gradient(180deg,#f8f8f9,#eceef2);
  background-attachment:fixed;
}
.co-glow{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.co-glow i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;animation:co-float 18s ease-in-out infinite}
.co-glow i:nth-child(1){width:380px;height:380px;background:#f3e9d5;top:-120px;inset-inline-start:-80px}
.co-glow i:nth-child(2){width:300px;height:300px;background:#dbe4f5;bottom:-100px;inset-inline-end:8%;animation-delay:-6s}
.co-glow i:nth-child(3){width:220px;height:220px;background:#e7f8ee;top:35%;inset-inline-end:-70px;animation-delay:-11s}
@keyframes co-float{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,18px)}}
.checkout-body .co{position:relative;z-index:1}
@keyframes co-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.co-side,.co-main>*,.co-result{animation:co-rise .6s cubic-bezier(.2,.8,.2,1) both}
.co-main>*:nth-child(1){animation-delay:.08s}.co-main>*:nth-child(2){animation-delay:.16s}.co-main>*:nth-child(3){animation-delay:.24s}

/* Who is paid and how much: a white card, the amount on warm paper. */
.co-summary.is-brand .co-amount{margin-block-start:18px;padding:16px 18px;border:1px solid #e3e6ec;border-radius:var(--r-md);background:linear-gradient(135deg,#f7f8fa,#eceef2)}
.co-summary.is-brand .co-amount>small{color:#667085}
.co-summary.is-brand .co-amount-value span{color:var(--gold)}

/* ---- Result screens: paid, expired, unavailable ------------------------- */
.co-result{position:relative;overflow:hidden}
.co-result::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--gold),#e6cd9a 55%,rgba(195,154,78,0))}
.co-result-icon{position:relative;width:76px;height:76px;margin-block-end:20px}
.co-result-icon svg{width:34px;height:34px}
.co-result-icon::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:co-halo 1.6s ease-out .35s both}
@keyframes co-halo{0%{opacity:.4;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
.is-success .co-result-icon{background:radial-gradient(circle at 30% 25%,#f1fbf5,#dcf3e5);border:1px solid #bfe6cd;color:var(--ok);box-shadow:0 0 0 7px rgba(231,248,238,.8)}
/* The check draws itself. */
.is-success .co-result-icon svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:co-draw .5s ease-out .3s forwards}
@keyframes co-draw{to{stroke-dashoffset:0}}
.is-expired .co-result-icon{background:#fdf6e7;border:1px solid #f0dcae;color:#a8761d}
.is-error .co-result-icon{box-shadow:0 0 0 7px rgba(220,38,38,.06)}
/* A short burst of gold dots around the paid check, as on the site. */
.co-burst{position:absolute;inset:0;pointer-events:none}
.co-burst i{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--brand-gold);opacity:0;animation:co-burst .9s cubic-bezier(.2,.8,.3,1) .45s both}
.co-burst i:nth-child(even){width:5px;height:5px;margin:-2.5px;background:#e6cd9a}
.co-burst i:nth-child(1){--a:0deg}.co-burst i:nth-child(2){--a:45deg}.co-burst i:nth-child(3){--a:90deg}.co-burst i:nth-child(4){--a:135deg}
.co-burst i:nth-child(5){--a:180deg}.co-burst i:nth-child(6){--a:225deg}.co-burst i:nth-child(7){--a:270deg}.co-burst i:nth-child(8){--a:315deg}
@keyframes co-burst{0%{opacity:0;transform:rotate(var(--a)) translateY(0)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-62px)}}
/* The amount paid on warm paper. */
.co-result-amount.is-brand{background:linear-gradient(135deg,#f7f8fa,#eceef2);border-color:#e3e6ec}
.co-result-amount.is-brand>span{color:#667085}
.co-result-amount.is-brand b .co-unit{color:var(--gold)}
/* Points earned: a gold coin and the line, with one soft shine. */
.co-reward{gap:10px;padding:12px 14px;background:linear-gradient(135deg,#fbf3e1,#f3e4c2);border-color:#e8d5ac;position:relative;overflow:hidden}
.co-reward::after{content:"";position:absolute;inset-block:0;width:40%;inset-inline-start:-50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:co-shine 2.4s ease-in-out .9s 2}
@keyframes co-shine{to{inset-inline-start:120%}}
.co-reward-coin{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#e6cd9a,var(--brand-coin));flex:0 0 auto;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),0 2px 6px rgba(138,107,48,.25)}
/* Points: three coins drop in one after another and the number counts up. */
.co-reward-coins{display:inline-flex;flex:0 0 auto}
.co-reward-coins .co-reward-coin{margin-inline-start:-12px;animation:co-coin .7s cubic-bezier(.2,1.4,.4,1) both}
.co-reward-coins .co-reward-coin:first-child{margin-inline-start:0;animation-delay:.6s}
.co-reward-coins .co-reward-coin:nth-child(2){animation-delay:.75s}
.co-reward-coins .co-reward-coin:nth-child(3){animation-delay:.9s}
@keyframes co-coin{0%{opacity:0;transform:translateY(-26px) rotateY(0)}60%{opacity:1;transform:translateY(3px) rotateY(360deg)}100%{opacity:1;transform:none}}
.co-reward-n{font-size:20px;font-weight:800;color:#6d5322;font-variant-numeric:tabular-nums;animation:co-pop .5s cubic-bezier(.2,1.3,.4,1) .9s both}
.co-reward{flex-wrap:wrap}
/* The payment notice, saved as an image like a bank's. */
.co-notice{width:100%;margin-block-end:10px;background:#fff}
.co-reward .co-reward-coin svg{width:16px;height:16px;color:#fff}
@media(prefers-reduced-motion:reduce){.co-glow i,.co-side,.co-main>*,.co-result,.co-burst,.co-result-icon::after,.co-reward::after,.co-reward-coins .co-reward-coin,.co-reward-n{animation:none}.is-success .co-result-icon svg path{stroke-dashoffset:0;animation:none}.co-method .co-method-tick{transition:none}}

/* ---- Large screens ------------------------------------------------------ */
@media(min-width:1600px){
  .co-wrap{max-width:1100px}
}

/* Provider auto-redirect bridge: intentionally compact because it is normally
   visible for only a fraction of a second. It still remains usable when JS is
   disabled or external navigation is prevented by the browser. */
.co-redirect-panel{max-width:720px;margin:clamp(32px,8vh,84px) auto;padding:clamp(22px,4vw,36px)}
.co-redirect-panel .co-live{margin-bottom:18px}
.co-redirect-panel .co-btn{width:100%;justify-content:center}
.co-redirect-panel .co-hint{margin:14px 0 0;text-align:center}

/* قيمة قابلة للنسخ (رقم الفاتورة / الرقم المرجعي) */
.pu-mono{font-family:var(--mono);letter-spacing:.01em}
.pu-copyval{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;flex-wrap:wrap}
.pu-copyval-text{min-width:0;overflow-wrap:anywhere;word-break:break-all}
.pu-copybtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);font:inherit;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.pu-copybtn:hover{background:var(--page-2);color:var(--ink)}
.pu-copybtn svg{width:14px;height:14px}
.pu-copybtn.is-done{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}

/* ---------- الدفع بالتحويل اليدوي ------------------------------------------ */
/* زر النسخ: أيقونة فقط، دون نص يزيح التنسيق. النص يبقى لقارئ الشاشة. */
.pu-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pu-copyval{flex-wrap:nowrap;gap:6px}
.pu-copybtn{width:30px;height:30px;padding:0;justify-content:center;border-radius:9px}
.pu-copybtn svg{width:15px;height:15px}
.co-copy [data-copy-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.co-copy{width:42px;min-width:42px;padding:0;justify-content:center}

.is-waiting .co-result-icon{background:#fffaeb;border:1px solid #fedf89;color:#b54708}
.co-result .co-live{margin-block-start:4px;text-align:start}
.co-result>.co-btn{width:100%}

/* Trust: verified merchant badge and the payer's full cost, shown before paying. */
.co-verified{display:inline-grid;place-items:center;vertical-align:-3px;margin-inline-start:6px;color:var(--ok)}
.co-verified svg{width:18px;height:18px}
.co-fees{margin-block-start:14px;display:grid;gap:6px}
.co-fees>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px}
.co-fees dt{color:var(--muted);font-weight:600}
.co-fees dd{margin:0;font-weight:700}
.co-fees>.is-total{padding-block-start:8px;border-block-start:1px dashed var(--line-soft)}
.co-fees>.is-total dt{color:inherit}
.co-fee-note{display:flex;align-items:flex-start;gap:7px;margin-block-start:10px;font-size:12.5px;line-height:1.5;color:var(--ok)}
.co-fee-note svg{width:15px;height:15px;flex:0 0 auto;margin-block-start:2px}

/* Statement check page (views/statement_verify.php). */
.co-verify-title{font-size:20px;font-weight:700;line-height:1.3;margin:0}
.co-verify-result{display:flex;align-items:flex-start;gap:8px;margin-block-start:16px;padding:12px 14px;border-radius:12px;font-weight:600;font-size:14px;line-height:1.5}
.co-verify-result svg{width:20px;height:20px;flex:0 0 auto}
.co-verify-result.is-ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.co-verify-result.is-bad{background:#fef3f2;border:1px solid #fecdca;color:#b42318}

/* Shared local deposit (read-only link). */
.dsh-head{display:flex;align-items:center;gap:12px;margin-block-end:14px}
.dsh-head>div{flex:1;min-width:0;display:grid;gap:2px}
.dsh-head .co-verify-title{margin:0;font-size:19px}
.dsh-head small{color:var(--muted,#667085);font-size:12.5px}
.dsh-logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--page-2,#eceef3);overflow:hidden;flex:0 0 auto}
.dsh-logo img{max-width:80%;max-height:80%}.dsh-logo svg{width:22px;height:22px}
.dsh-status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#fffaeb;color:#b54708;white-space:nowrap}
.dsh-status.is-ok{background:#ecfdf3;color:#067647}.dsh-status.is-bad{background:#fef3f2;color:#b42318}
.dsh-amount{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;border-radius:14px;overflow:hidden;background:var(--line,#e4e7ec);margin-block-end:14px}
.dsh-amount>div{display:grid;gap:2px;padding:12px 14px;background:var(--page-2,#f2f4f7)}
.dsh-amount span{font-size:12px;color:var(--muted,#667085)}
.dsh-amount b{font-size:21px}.dsh-amount b small{font-size:12.5px;color:var(--muted,#667085)}
.dsh-receipt{display:block;margin-block:14px;border-radius:14px;overflow:hidden;border:1px solid var(--line,#e4e7ec)}
.dsh-receipt img{display:block;width:100%;max-height:520px;object-fit:contain;background:#f8f9fb}
.dsh-note{font-size:12.5px}
.dsh-rows{display:grid;margin:0;border:1px solid var(--line,#e4e7ec);border-radius:14px;overflow:hidden}
.dsh-rows>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-block-end:1px solid var(--line,#e4e7ec)}
.dsh-rows>div:last-child{border-block-end:0}
.dsh-rows dt{font-size:13px;color:var(--muted,#667085)}
.dsh-rows dd{margin:0;font-weight:700;font-size:14px;text-align:end;overflow-wrap:anywhere}

/* Short screens (a phone with its browser bars): less air around the page, so a payer sees it whole. */
@media (max-height:720px){.co{padding-block-start:10px}.co-wrap{gap:10px}}
/* Test checkout: a band that cannot be mistaken for a real payment page. */
.co-test-banner{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:repeating-linear-gradient(135deg,#fff7e0 0 12px,#ffefc2 12px 24px);border:1px solid #f2c94c;color:#7a5a00;font-weight:700;font-size:13.5px}
.co-test-banner .ui-icon{width:18px;height:18px;flex:0 0 auto}

/* A person's follow page for a payment link (views/payment_link_follow.php) */
.lm-follow{display:grid;gap:14px}
.lm-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--co-line,#e5e7eb);border-radius:14px}
.lm-row.is-off{opacity:.6}
.lm-ic{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:#e8f7ef;color:#15803d}
.lm-row.is-off .lm-ic{background:#f3f4f6;color:#6b7280}
.lm-copy{display:grid;gap:2px;min-width:0}
.lm-copy small{color:var(--co-muted,#6b7280);font-size:12.5px;overflow-wrap:anywhere}
.lm-amount{display:grid;justify-items:end;gap:2px}
.lm-amount small{font-size:12px;color:var(--co-muted,#6b7280)}
.lp-via{display:flex;gap:6px;align-items:center;margin:0 0 6px}

/* A hosted method's accepted payment systems and operator (HostedMethods::schemes/operator) */
.co-method-schemes{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.co-method-schemes img{width:30px;height:20px;padding:2px 3px;border-radius:5px;background:#fff;border:1px solid var(--co-line,#e5e7eb);object-fit:contain;box-sizing:border-box}
.co-method-op{font-weight:500;font-size:11.5px;color:var(--co-muted,#6b7280)}

/* Netloopers (G08/G09): stacked recap, centred trust line, optional in-page frame */
.co-recap-stack{flex-direction:column}
.co-recap.co-recap-stack>div{flex:0 0 auto}
.co-trust-center{justify-content:center;flex-wrap:wrap}
.co-cards-inline{margin:0;gap:4px}
.co-cards-inline img{height:22px;width:auto;padding:3px 5px;box-shadow:none}
.co-nl-frame{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-block-end:12px;background:#fff}
.co-nl-frame iframe{display:block;width:100%;height:620px;border:0}
.co-nl .co-recap b span{display:inline;font-size:inherit;color:inherit;font-weight:inherit}

/* 17.45.1 — method tiles: one fixed layout on every tile.
   Top row: icon (start) and radio (end); then the name, one quiet line, and at most three marks. */
.c-tiles{align-items:stretch}
.c-tile{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lead radio" "name name" "op op" "marks marks";align-content:start;justify-items:stretch;row-gap:0;padding:14px;min-height:132px}
.c-tile>.co-m-lead{grid-area:lead;justify-self:start;margin-block-end:12px}
.c-tile>.c-tile-go{grid-area:radio;position:static;align-self:start;margin:0}
.c-tile .c-tile-name{grid-area:name;padding:0;display:block;font-size:15px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-tile .c-tile-op{grid-area:op;margin-block-start:2px;font-size:12.5px;font-weight:500;color:var(--faint);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.c-tile>.c-tile-marks{grid-area:marks;display:flex;gap:5px;flex-wrap:nowrap;margin-block-start:10px;direction:ltr;justify-content:flex-end;overflow:hidden}
html[dir=ltr] .c-tile>.c-tile-marks{justify-content:flex-start}
.c-tile .co-chip.is-x{display:none}
.c-tile .c-tile-prov{margin-inline-start:4px;font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.01em}
.c-tile .co-chip.is-more{width:auto;min-width:30px;padding-inline:6px;font-size:11px;font-weight:700;color:var(--muted)}
.c-tile.is-wide{grid-template-columns:42px minmax(0,1fr) auto;grid-template-areas:"lead name radio" "lead op radio" "lead marks radio";column-gap:12px;align-items:center;align-content:center;min-height:0;padding-inline-end:14px}
.c-tile.is-wide>.co-m-lead{margin:0;grid-row:1 / span 3;align-self:center}
.c-tile.is-wide>.c-tile-go{grid-row:1 / span 3;align-self:center;margin:0}
.c-tile.is-wide>.c-tile-marks{margin-block-start:6px}
@media(max-width:370px){.c-tile{min-height:122px;padding:12px}.c-tile .c-tile-name{font-size:14px}}
@media(min-width:760px){.c-page .co-x-grid{align-items:center}}

/* Wallet tile: the points reward, shown like a small prize. */
.c-tile.is-wide{grid-template-areas:"lead name radio" "lead op radio" "lead marks radio" "lead earn radio"}
.c-tile .c-tile-earn{grid-area:earn;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-block-start:8px;padding:4px 11px 4px 9px;border-radius:999px;background:linear-gradient(135deg,#fbf3df,#f3e3bd);border:1px solid #e6cf98;color:#7a5a1c;font-size:12.5px;font-weight:700;line-height:1.3;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 4px 10px -6px rgba(154,115,48,.55)}
.c-tile .c-tile-earn svg{width:15px;height:15px;color:#b88a32;flex:none}
.c-tile.is-wide:not(:has(.c-tile-op)) .c-tile-earn{margin-block-start:6px}
.c-tile.is-wide>.co-m-lead,.c-tile.is-wide>.c-tile-go{grid-row:1 / -1}
.c-tile.is-wide{grid-template-rows:auto auto auto auto}
.c-tile.is-wide{row-gap:0}
.c-tile.is-wide .c-tile-earn,.c-tile.is-wide:not(:has(.c-tile-op)) .c-tile-earn{margin-block-start:4px}

/* 17.45.5 / 17.49.4 — every screen: each method is one calm row (icon · name and note · marks · radio), not a tall box. */
.c-tiles{grid-template-columns:minmax(0,1fr);gap:10px}
.c-tile,.c-tile.is-wide{grid-column:auto;grid-template-columns:42px minmax(0,1fr) auto auto;grid-template-areas:"lead text marks radio";grid-template-rows:auto;column-gap:14px;row-gap:0;align-items:center;align-content:center;min-height:0;padding:14px 16px}
.c-tile>.co-m-lead,.c-tile.is-wide>.co-m-lead{grid-area:lead;grid-row:auto;align-self:center;margin:0}
.c-tile>.c-tile-go,.c-tile.is-wide>.c-tile-go{grid-area:radio;grid-row:auto;align-self:center;margin:0}
.c-tile>.c-tile-marks,.c-tile.is-wide>.c-tile-marks{grid-area:marks;align-self:center;margin:0}
.c-tile-text{grid-area:text;display:grid;justify-items:start;min-width:0}
.c-tile .c-tile-text>*{grid-area:auto;max-width:100%}
.c-tile .c-tile-op{margin-block-start:1px}
/* A long name wraps to a second line instead of being cut. */
.c-tile .c-tile-name{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
@media(min-width:480px){
  .c-tile .co-chip.is-x{display:grid}
  .c-tile .co-chip.is-more{display:none}
}
/* Phones: a little tighter, so the name keeps its room beside three marks. */
@media(max-width:479px){
  .c-tile,.c-tile.is-wide{column-gap:10px;padding:12px}
  .c-tile>.co-m-lead{width:38px;height:38px;border-radius:11px}
  .c-tile,.c-tile.is-wide{grid-template-columns:38px minmax(0,1fr) auto auto}
  .c-tile>.c-tile-marks{gap:4px}
  .c-tile .co-chip{width:30px;height:20px;padding:2px 3px}
  .c-tile .co-chip.is-more{min-width:26px;padding-inline:4px}
  .c-tile .c-tile-name{font-size:14.5px}
}
@media(max-width:370px){
  .c-tile,.c-tile.is-wide{grid-template-areas:"lead text radio" "lead marks radio";grid-template-columns:38px minmax(0,1fr) auto}
  .c-tile>.co-m-lead,.c-tile>.c-tile-go{grid-row:1 / span 2}
  .c-tile>.c-tile-marks{justify-content:flex-start;margin-block-start:6px}
  html[dir=rtl] .c-tile>.c-tile-marks{justify-content:flex-end}
}

/* 17.45.5 — the public payment link as step 1 of the same checkout: one large amount, then «for what». */
.c-link{display:contents}
.c-link-amt{display:grid;justify-items:center;gap:8px;padding:4px 0 2px;text-align:center}
.c-link-amt-in{position:relative;display:block;direction:ltr;width:100%;max-width:320px;padding:6px 52px 10px;border-block-end:2px solid var(--line);transition:border-color .15s}
.c-link-amt-in:focus-within{border-color:var(--gold)}
.c-link-amt-in input{display:block;min-width:0;width:100%;border:0;outline:0;background:none;padding:0;text-align:center;font:inherit;font-size:44px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.c-link-amt-in input::placeholder{color:#c3c9d3}
.c-link-amt-in .co-unit{position:absolute;right:10px;bottom:20px;font-size:14px;margin:0}
.c-link-amt small{font-size:12.5px;color:var(--faint)}
.c-link .c-box .co-field{margin:0}
.c-link .co-field>span i{font-style:normal;font-weight:500;color:var(--faint)}
.c-link .co-help{font-size:12.5px;color:var(--faint);margin-block-start:6px}
@media(max-width:370px){.c-link-amt-in input{font-size:38px}}

/* 17.47.0 — phones and tablets: the header in the home balance colours (deep ink, a soft gold glow). */
@media(max-width:759.98px){
  body.checkout-body.is-steps{background:#0b1220}
  .c-hero{position:relative;overflow:hidden;isolation:isolate;background:#0b1220}
  .c-hero::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;border-radius:50%;top:-220px;inset-inline-end:-40px;background:radial-gradient(circle,rgba(196,154,74,.24) 0%,rgba(196,154,74,0) 65%);pointer-events:none}
  .c-merch-t small{color:#aab4c5}
}

/* 17.50.4 — every payment method on one line at every width: icon, name with its
   provider or networks and the points badge, the scheme logos (larger), the radio.
   Nothing wraps. The name always shows whole; when the line is short the networks
   step aside first, then the badge keeps only its coin (sized by the line itself,
   a container query, not by the screen). */
.c-tile,.c-tile.is-wide{grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"lead text marks radio";grid-template-rows:auto;column-gap:12px;align-items:center;min-height:0;padding:14px 16px}
.c-tile>.co-m-lead,.c-tile.is-wide>.co-m-lead{grid-area:lead;grid-row:1;width:44px;height:44px;margin:0}
.c-tile>.c-tile-go,.c-tile.is-wide>.c-tile-go{grid-area:radio;grid-row:1;margin:0}
.c-tile-text{grid-area:text;grid-row:1;container-type:inline-size;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.c-tile .c-tile-text>*{max-width:none}
.c-tile .c-tile-name{display:block;flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-line-clamp:unset;font-size:15px}
.c-tile .c-tile-op{flex:0 1 auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.c-tile .c-tile-earn{flex:0 0 auto;margin:0;padding:3px 10px 3px 8px;font-size:12px;white-space:nowrap}
.c-tile .c-tile-earn svg{width:14px;height:14px}
.c-tile>.c-tile-marks,.c-tile.is-wide>.c-tile-marks{grid-area:marks;grid-row:1;display:flex;flex-wrap:nowrap;gap:6px;margin:0;align-self:center}
.c-tile .co-chip{width:48px;height:32px;padding:3px 5px;border-radius:8px}
.c-tile .co-chip img{width:100%;height:100%;object-fit:contain}
.c-tile .co-chip.is-more{width:auto;min-width:36px;height:32px;font-size:12.5px}
/* The badge: its full words, then its short words, then only its coin, as the line allows. */
.c-tile .c-tile-earn .is-short{display:none}
@container (max-width:250px){.c-tile .c-tile-op{display:none}}
@container (max-width:225px){.c-tile .c-tile-earn .is-long{display:none}.c-tile .c-tile-earn .is-short{display:inline}}
@container (max-width:200px){.c-tile .c-tile-earn{padding:5px}.c-tile .c-tile-earn .is-short{display:none}}
/* Phones: two logos, a little smaller. */
@media(max-width:479px){
  .c-tile,.c-tile.is-wide{grid-template-columns:40px minmax(0,1fr) auto auto;grid-template-areas:"lead text marks radio";column-gap:10px;padding:12px}
  .c-tile>.co-m-lead,.c-tile.is-wide>.co-m-lead{grid-row:1;width:40px;height:40px;border-radius:11px}
  .c-tile>.c-tile-marks{gap:5px;margin:0;justify-content:flex-end}
  .c-tile .co-chip{width:40px;height:28px;padding:2px 4px}
  .c-tile .co-chip:nth-child(n+3),.c-tile .co-chip.is-more{display:none}
  .c-tile .c-tile-name{font-size:14.5px}
  /* The wallet's own logo repeats its name: on a phone its room goes to the points badge. */
  .c-tile:has(.c-tile-earn)>.c-tile-marks{display:none}
}
/* Very small phones: one logo. */
@media(max-width:360px){.c-tile .co-chip:nth-child(n+2){display:none}}
/* 17.50.8: the points badge is a gold coin with «+» (its words stay as the label for screen readers and on hover);
   the wallet's own mark shows on phones too; round and square marks (wallet, coins) fill their chip like the card logos. */
.c-tile .c-tile-earn{position:relative;flex:0 0 auto;width:30px;height:30px;padding:0;margin:0;justify-content:center;gap:0;border-radius:50%;font-size:0}
.c-tile .c-tile-earn svg{width:17px;height:17px}
.c-tile .c-tile-earn i{position:absolute;top:-4px;inset-inline-end:-5px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#c49a4a;color:#fff;font-style:normal;font-size:12px;font-weight:700;line-height:1;box-shadow:0 0 0 2px #fff}
@container (max-width:200px){.c-tile .c-tile-earn{padding:0}}
.c-tile .co-chip.is-sq{padding:2px}
@media(max-width:479px){
  .c-tile:has(.c-tile-earn)>.c-tile-marks{display:flex}
  .c-tile .c-tile-earn{width:28px;height:28px}
  .c-tile .co-chip.is-sq{padding:1px}
}

/* Pay with the Payunit app (views/_co_wallet.php): calm, ink and white; gold only in the mark. */
.co-ways{display:grid;gap:0}
.co-way{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;min-width:0}
.co-way-head{display:flex;align-items:flex-start;gap:12px}
.co-way-ic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--page);border:1px solid var(--line);color:var(--navy)}
.co-way-ic svg{width:22px;height:22px;stroke-width:1.7}
.co-way-text{flex:1;min-width:0}
.co-way-t{font-size:16px;font-weight:700;line-height:1.45;margin:0}
.co-way-s{font-size:13px;color:var(--muted);line-height:1.6;margin:2px 0 0}
.co-way-tag{flex:none;font-size:11.5px;font-weight:700;color:var(--ink);background:var(--page);border:1px solid var(--line);border-radius:999px;padding:3px 9px;margin-block-start:2px}
.co-way .co-actions,.c-body .co-way .co-actions{position:static;background:none;padding:0;margin:0}
.co-way .co-passkey-status{margin:0}
.co-app-desk{display:none;gap:18px;align-items:center;padding:14px;border-radius:12px;background:var(--page)}
.co-app-desk .co-app-qr{width:150px;height:150px;flex:none;background:#fff;border-radius:10px;padding:8px;box-sizing:content-box}
.co-app-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.co-app-steps li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.co-app-steps li span{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.co-app-open{gap:10px}
.co-app-mark{display:grid;grid-template-columns:7px 7px;gap:2px;flex:none}
.co-app-mark i{width:7px;height:7px;border-radius:2px;background:#fff}
.co-app-mark.is-ink i{background:var(--navy)}
.co-app-mark i:last-child,.co-app-mark.is-ink i:last-child{background:#c49a4a;border-radius:50%}
.co-app-wait{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:12.5px;color:var(--muted)}
.co-app-wait i{width:7px;height:7px;border-radius:50%;background:#1f8a5b;animation:co-app-pulse 1.6s ease-in-out infinite}
@keyframes co-app-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.co-app-or{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--muted);font-size:12.5px}
.co-app-or::before,.co-app-or::after{content:"";flex:1;height:1px;background:var(--line)}
.co-app-only-desk{display:none}
@media(min-width:760px){.co-app-desk{display:flex}.co-app-only-mob{display:none}.co-app-only-desk{display:block}.c-tile.co-app-only-desk{display:grid}}
@media(prefers-reduced-motion:reduce){.co-app-wait i{animation:none}}
@media(max-width:759px){.co-way.co-flow .co-btn{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}}

/* 17.91 — the first screen: the details of the invoice or order folded under one line (<details>). */
.c-details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.c-details-sum{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.c-details-sum::-webkit-details-marker{display:none}
.c-details-sum:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-md)}
.c-details-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.c-details-t b{font-size:14.5px;font-weight:700}
.c-details-t small{font-size:12.5px;color:var(--faint)}
.c-details-chev{width:18px;height:18px;color:var(--faint);transform:rotate(90deg);transition:transform .15s;flex:none}
.c-details[open] .c-details-chev{transform:rotate(-90deg)}
.c-details>.c-box{border:0;border-block-start:1px solid var(--line);border-radius:0 0 var(--r-md) var(--r-md)}
@media(prefers-reduced-motion:reduce){.c-details-chev{transition:none}}