/* ==========================================================================
   Paidrelay — order page (order.html). Builds on site.css: .panel .field
   .choice .btn .status .note .receipt .price. Nothing here restyles those
   classes globally; everything is scoped to o* classes or to the order page
   containers.
   ========================================================================== */

/* site.css display rules (.note, .field, grids) beat the hidden attribute. */
.obody [hidden]{display:none!important}

.ohead{padding-block:clamp(1.75rem,1.2rem + 2.4vw,3rem) clamp(1.25rem,1rem + 1vw,2rem)}
.ohead .wrap{display:grid;gap:12px}
.ohead .lede{max-width:62ch}

.obody{padding-block:0 var(--sec)}
.ogrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:960px){.ogrid{grid-template-columns:minmax(0,1fr)}}
.ocol,.oform{display:grid;gap:20px;min-width:0}

/* Step heading */
.ostep{display:flex;align-items:center;gap:12px}
.ostep-n{font:600 .85rem/1 var(--f-mono);width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--signal);color:var(--signal)}
.ostep h2{font-size:var(--h3)}

/* Fieldsets */
.ofs{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.ofs legend{padding:0;margin-block-end:8px}
.ohint{margin:0}
.oopt{font-weight:400;color:var(--muted);font-size:var(--t-xs)}
.ogrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
@media (max-width:620px){.ogrid2{grid-template-columns:minmax(0,1fr)}}
.field textarea{resize:vertical;min-height:80px}
.field input.mono{font-family:var(--f-code);font-size:.95rem}

/* Choice tiles: content inside .choice labels */
.choice label{position:relative}
.ochoice-svc{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:620px){.ochoice-svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ochoice-months{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:520px){.ochoice-months{grid-template-columns:repeat(2,minmax(0,1fr))}}
.oc-name{font-weight:600;color:var(--ink)}
.oc-sub{font-size:var(--t-xs);color:var(--muted)}
.oc-price{font:600 var(--t-sm)/1.3 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.choice label.is-off{opacity:.45;cursor:not-allowed}

/* Coins */
.ochoice-coin{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.ochoice-net{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ocoin-tile{display:flex!important;align-items:center;gap:10px}
.ocoin-tile img{width:26px;height:26px;flex:none;object-fit:contain}
.ocoin-tile .oc-text{display:grid;gap:0;min-width:0}
.ocoin-tile .oc-name,.ocoin-tile .oc-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.choice label.oquick{grid-column:1/-1;padding:14px 16px}
.oquick .oc-name{font-size:var(--t-md)}
.oquick .oc-sub{white-space:normal}
.oquick-badge{margin-inline-start:auto;font:600 .7rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--approved);background:var(--approved-wash);padding:5px 8px;border-radius:999px;white-space:nowrap}
.oquick-logos{display:flex;gap:3px;flex:none}

/* Service info line and method box */
.osvc-info p{font-size:var(--t-sm);color:var(--body);border-inline-start:2px solid var(--line-2);padding-inline-start:12px}
.omethod{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--paper)}
.omethod .method{margin-block-start:2px}
.omethod-title{font-weight:600;color:var(--ink)}
.omethod-text{font-size:var(--t-sm)}
@media (max-width:480px){.omethod{flex-direction:column;gap:8px}}
.olist{margin:0;padding-inline-start:20px;display:grid;gap:4px;font-size:var(--t-sm)}

/* Checkbox rows */
.ocheck{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:var(--t-sm);color:var(--ink)}
.ocheck input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--signal)}
#login-wrap{display:grid;gap:12px}
#login-warn{gap:10px}
#login-warn p{font-size:var(--t-sm)}

/* Errors */
.oerr{display:none;font-size:var(--t-xs);color:var(--declined);margin:0}
.has-error .oerr,.oerr.is-on{display:block}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--declined)}
.oblock{border-color:var(--declined);background:var(--declined-wash);color:var(--ink)}
.oerr-sum{font-size:var(--t-sm)}

/* Submit row */
.osubmit{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px dashed var(--line-2);padding-top:20px}
.osubmit-total{display:grid;gap:4px}
@media (max-width:520px){.osubmit .btn{width:100%}}

/* Summary aside */
.oside{display:grid;gap:16px;position:sticky;top:88px}
@media (max-width:960px){.oside{position:static}}
.oside .receipt{box-shadow:none}
.oside .receipt-row span:last-child{text-align:end;color:var(--ink)}
.oside-total{align-items:center!important}
.oside-total .price{font-size:1.5rem}
.oside-fine{font:400 var(--t-xs)/1.5 var(--f);color:var(--muted)}
.oside-facts{display:grid;gap:10px;font-size:var(--t-sm);padding-inline:4px}
.oside-facts strong{color:var(--ink)}

/* ---- Invoice ------------------------------------------------------------ */
.oinv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.oinv-id{font-size:clamp(1.15rem,1rem + .8vw,1.5rem);letter-spacing:.02em;margin-top:6px}
.otimer{text-align:end}
.otimer-value{font-size:1.6rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.otimer.is-urgent .otimer-value{color:var(--amber)}
.otimer.is-expired .otimer-value{color:var(--declined)}
.obar{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:-8px}
.obar-fill{height:100%;width:100%;background:var(--signal);transition:width 1s linear}
.obar.is-urgent .obar-fill{background:var(--amber)}

.oinv-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:640px){.oinv-body{grid-template-columns:minmax(0,1fr)}.oinv-qr{order:2}}
.oinv-qr{display:grid;gap:8px;justify-items:center;text-align:center}
.oqr{width:200px;height:200px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:4px;display:grid;place-items:center}
.oqr.is-off{background:repeating-linear-gradient(45deg,var(--paper) 0 8px,var(--white) 8px 16px);color:var(--muted);font:500 var(--t-xs)/1.4 var(--f-mono);text-align:center;padding:16px}
.oinv-fields{display:grid;gap:16px;min-width:0}
.ocoin{display:flex;align-items:center;gap:12px}
.ocoin img{width:36px;height:36px;object-fit:contain}
.ocoin-name{font-weight:600;color:var(--ink)}
.obox{display:grid;gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--paper);min-width:0}
.obox-label{font:600 .72rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ocopy{display:flex;align-items:center;gap:12px;justify-content:space-between;min-width:0}
.ocopy .btn{flex:none}
.oamount{font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;word-break:break-all}
.oaddr{font-family:var(--f-code);font-size:.95rem;color:var(--ink);word-break:break-all;line-height:1.45}
.oaddr.is-off{color:var(--declined);font-family:var(--f);font-weight:600}
.btn[data-copied]{border-color:var(--approved);color:var(--approved)}

.ostatus{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.ostatus .status{flex:none;margin-top:2px}
.ostatus-text{display:grid;gap:8px;justify-items:start;font-size:var(--t-sm)}
.ostatus-title{font-weight:600;color:var(--ink);font-size:var(--t-md)}
.ostatus.is-done{border-color:var(--approved);background:var(--approved-wash)}
.ostatus.is-bad{border-color:var(--declined);background:var(--declined-wash)}
@media (max-width:520px){.ostatus{flex-direction:column}}

.osum{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:var(--t-sm);border-top:1px dashed var(--line-2);padding-top:16px}
.osum dt{color:var(--muted)}
.osum dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.osum dd.mono{font-size:.88rem}

/* Paired fields: keep this label on one line so both columns stay level. */
#account-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}