/* 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 (v18)
 * ---------------------------------------------------------------------------
 * This file is the ENTIRE stylesheet for the public checkout. 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-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);
  --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}

/* ---------- 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)}