/* ============================================================
   FXPay – Stablecoin Transfer UI
   ------------------------------------------------------------
   01. Tokens & reset
   02. Buttons
   03. Header (logo · wallet · profile)
   04. Footer
   05. Page shell & headings
   06. Stepper
   07. Alerts
   08. Cards & forms
   09. FX combo field (currency + amount)
   10. Radio cards (payment / payout)
   11. Summary panel
   12. Review modal
   13. Receipt (success page)
   14. Responsive
   15. Print
   ============================================================ */


/* ============================================================
   01. TOKENS & RESET
   ============================================================ */
   :root{
    --brand:#153a2f;
    --brand-2:#2e7a63;
    --green:#16a34a;
    --red:#dc2626;
    --ink:#102921;
    --muted:#5e6e69;
    --line:#dce9e4;
    --bg:#f2f8f6;
    --card:#ffffff;
    --tint:#eff7f3;
    --tint-2:#f8fcfa;
    --tint-3:#dbece5;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
    margin:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    font-family:Inter, "Segoe UI", Arial, sans-serif;
    font-size:14px;
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
hr{ border:0; }

a{ color:var(--brand); }

img,svg{ vertical-align:middle; }

::selection{ background:#c6e3d8; }


/* ============================================================
   02. BUTTONS
   ============================================================ */
.btn-primary,
.btn-ghost{
    display:block;
    width:auto;
    border-radius:8px;
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:opacity .15s ease, border-color .15s ease, background .15s ease;
}

.btn-primary{
    padding:8px 20px;
    border:0;
    color:#fff;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
}
.btn-primary:hover{ opacity:.92; }

/* ---- Review & Pay : green ---- */
.summary-actions #reviewPayBtn{
    display:block;
    width:100%;
    margin-top:10px;
    padding:8px 20px;
    border:0;
    border-radius:8px;
    background:linear-gradient(135deg, #15803d, #16a34a);
    color:#fff;
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    text-align:center;
    cursor:pointer;
    transition:opacity .15s ease;
}
.summary-actions #reviewPayBtn:hover{ opacity:.92; }
.summary-actions #reviewPayBtn:disabled{
    opacity:.5;
    cursor:not-allowed;
}
.summary-actions .btn-primary{
    display:block;
    width:100%;
    margin:0;
}
.summary-actions .btn-ghost{
    display:block;
    width:100%;
    margin-top:10px;        /* ⬅ space between the two buttons */
}
.btn-green{
    background:linear-gradient(135deg, #4ade80, #86efac);
    color:#14532d;
}
.btn-green:hover{ opacity:.92; }

.summary-actions .btn-primary + .btn-primary{
    margin-top:10px;
}

.btn-ghost{
    padding:11px 20px;
    border:1px solid var(--line);
    color:var(--ink);
    background:var(--card);
}
.btn-ghost:hover{ border-color:#aecfc1; background:var(--tint); }

.btn-block{ width:100%; }

.btn-primary:disabled,
.btn-ghost:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.btn-link{
    display:block;
    margin-top:10px;
    font-size:13px;
    color:var(--brand);
    text-align:center;
    text-decoration:none;
}
.btn-link:hover{ text-decoration:underline; }


/* ============================================================
   03. HEADER
   ============================================================ */
.app-header{
    flex:0 0 auto;
    position:sticky;
    top:0;
    z-index:40;
    background:#ffffff;
    border-bottom:1px solid var(--line);
}
.header-inner{
    max-width:1400px;
    margin:auto;
    padding:14px 20px;   /* was 10px 20px */
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

/* ---- logo ---- */
.brand{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    row-gap:4px;
    color:var(--ink);
    text-decoration:none;
}
.brand-logo{
    height:52px;       /* was 38px */
    width:auto;
    display:block;
    object-fit:contain;
    align-self:center;
}
.brand-logo-note{
    flex-basis:100%;         /* full-width line under the logo + name row */
    font-size:12px;
    font-weight:600;
    line-height:1.1;
    color:var(--muted);
    white-space:nowrap;
}
.brand-name{ font-size:19px; font-weight:700; letter-spacing:-.3px; }
.brand-name span{ color:var(--brand-2); }
.brand h3{
    color: darkorange;
}
/* ---- right group ---- */
.header-right{
    display:flex;
    align-items:center;
    gap:12px;
}

/* ---- wallet ---- */
.wallet{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 14px 6px 10px;
    background:var(--tint);
    border:1px solid var(--line);
    border-radius:8px;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.wallet:hover{
    border-color:#aecfc1;
    box-shadow:0 2px 10px rgba(21,58,47,.10);
}
.wallet-icon{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:8px;
    color:#fff;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow:0 2px 6px rgba(21,58,47,.26);
}
.wallet-icon svg{ width:25px; height:25px; display:block; }

.wallet-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}
.wallet-text small{
    font-size:10px;
    font-weight:600;
    letter-spacing:.2px;
    color:var(--muted);
}
.wallet-text strong{
    font-size:15px;
    font-weight:500;              /* not bold, per spec */
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

/* ---- profile ---- */
.profile{ position:relative; }

.profile-btn{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 8px 4px 4px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--card);
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.profile-btn:hover{
    border-color:#aecfc1;
    box-shadow:0 2px 10px rgba(21,58,47,.10);
}
.profile-btn[aria-expanded="true"]{
    border-color:var(--brand-2);
    box-shadow:0 0 0 3px #d9ece4;
}
.profile-avatar{
    flex:0 0 auto;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
}
.profile-avatar svg{ width:18px; height:18px; display:block; }
.profile-avatar.initials{ font-size:13px; font-weight:800; letter-spacing:.3px; }

.profile-caret{
    width:10px;
    height:7px;
    color:var(--muted);
    transition:transform .2s ease;
}
.profile-btn[aria-expanded="true"] .profile-caret{ transform:rotate(180deg); }

.profile-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:238px;
    padding:8px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 18px 40px rgba(16,41,33,.16);
    z-index:70;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.profile-dropdown.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.pd-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px 10px;
}
.pd-avatar{
    flex:0 0 auto;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e8f4ef;
    color:var(--brand);
    font-size:14px;
    font-weight:800;
}
.pd-id{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.pd-id b{ font-size:14px; }
.pd-id small{
    font-size:11px;
    color:var(--muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.profile-dropdown hr{
    border-top:1px solid var(--line);
    margin:6px 4px;
}
.pd-item{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:9px 10px;
    border:0;
    border-radius:9px;
    background:none;
    font:inherit;
    font-size:13px;
    color:#1e4a3c;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
    transition:background .13s ease, color .13s ease;
}
.pd-item svg{ flex:0 0 auto; width:16px; height:16px; color:var(--muted); }
.pd-item:hover{ background:var(--tint); color:var(--brand); }
.pd-item:hover svg{ color:var(--brand-2); }
.pd-item.danger{ color:var(--red); }
.pd-item.danger svg{ color:var(--red); }
.pd-item.danger:hover{ background:#fef2f2; color:#b91c1c; }
.pd-form{ margin:0; }


/* ============================================================
   04. FOOTER
   ============================================================ */
.app-footer{
    flex:0 0 auto;
    margin-top:auto;
    background:var(--card);
    border-top:1px solid var(--line);
}
.footer-inner{
    max-width:1400px;
    margin:auto;
    padding:12px 16px;
    text-align:center;
}
.app-footer .copyright{
    margin:0;
    font-size:13px;
    font-weight:400;
    line-height:1.5;
    color:var(--muted);
}
.app-footer .copyright span{
    color:inherit;
    font-variant-numeric:tabular-nums;
}

.app-footer .powered-by{
    font-size:13px;
    font-weight:400;
    line-height:1.5;
    color:var(--muted);
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.app-footer .powered-by-logo{
    height:26px;
    width:auto;
    max-width:100px;
    display:block;
}

/* ============================================================
   05. PAGE SHELL & HEADINGS
   ============================================================ */
.page{
    flex:1 0 auto;
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:18px 20px 26px;
    background:#f2f8f6;
}
.page.center{ max-width:680px; }

.page-head{
    text-align:center;
    margin:22px 0 0;
}
.page-head h1{
    font-size:20px;
    font-weight:600;
    line-height:1.2;
}
.page-head h1 span{ color:var(--brand-2); }
.page-head p{
    margin-top:6px;
    font-size:14px;
    color:var(--muted);
}


/* ============================================================
   06. STEPPER
   ============================================================ */
.stepper{
    display:flex;
    align-items:center;
    gap:0;
    list-style:none;
    padding:0;
    max-width:760px;
    margin:14px auto 14px;
}

/* On the three-column transfer page the stepper is stretched across the columns
   rather than sitting in its own centred box: it starts a little in from the left
   edge of column 1 and stops short of the right edge of the confirmation column.
   Tune the width with the left/right offsets below. */
.page > .stepper{
    max-width:none;
    margin:14px 120px 26px 80px;
}
.stepper li{
    display:flex;
    align-items:center;
    gap:9px;
    flex:1 1 auto;
    min-width:0;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
}
.stepper li:last-child{ flex:0 0 auto; }

.stepper li .st-num{
    flex:0 0 auto;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#d6e8e1;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
/* Digit and tick share the single grid cell so neither can shift the other; only
   one of them is ever displayed. */
.stepper li .st-digit,
.stepper li .st-tick{ grid-area:1 / 1; }
.stepper li .st-tick{
    display:none;
    width:100%;
    height:100%;
}

.stepper li .st-lbl{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* connector */
.stepper li:not(:last-child)::after{
    content:"";
    flex:1 1 auto;
    min-width:18px;
    height:2px;
    margin:0 12px 0 6px;
    border-radius:2px;
    background:#d6e8e1;
    transition:background .18s ease;
}

/* done → green + tick */
.stepper li.done{ color:var(--green); }
.stepper li.done .st-num{
    background:var(--green);
    color:#fff;
    box-shadow:0 3px 9px rgba(22,163,74,.30);   /* same lift as .rc-check */
}
.stepper li.done .st-digit{ display:none; }
.stepper li.done .st-tick{ display:block; }
.stepper li.done:not(:last-child)::after{ background:var(--green); }

/* active → brand green */
.stepper li.active{ color:var(--ink); }
.stepper li.active .st-num{
    background:var(--brand);
    color:#fff;
    box-shadow:0 0 0 4px #d9ece4;
}


/* ============================================================
   07. ALERTS
   ============================================================ */
/* Kept deliberately short. An alert appears above the whole form, so every pixel it
   takes pushes Fetch Quote further down the page - and it turns up at exactly the
   moment the user needs that button again. */
.alert{
    margin:0 0 5px;
    padding:7px 12px;
    border-radius:9px;
    font-size:12px;
    font-weight:600;
    line-height:1.35;
}

/* The stepper already leaves a generous gap underneath it. When an alert drops in it
   sits in that gap rather than on top of it, so the form below does not move as far. */
.stepper + .alert{ margin-top:-14px; }

/* Two alerts at once (an expired session and a validation failure, say) stay one block. */
.alert + .alert{ margin-top:-4px; }

/* The gap below an alert is not the alert's own margin: the form has no padding or border,
   so .tri-grid's 32px top margin collapses through it and lands here. An alert already
   separates the stepper from the form, so that full gap is not needed on top of it. */
.alert + form .tri-grid{ margin-top:10px; }
.alert.error{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#b91c1c;
}
.alert.success{
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    color:#15803d;
}

/* ============================================================
   08. THREE-COLUMN TABBED LAYOUT
   ============================================================ */
.tri-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,320px) minmax(290px,330px);
    gap:28px;
    align-items:stretch;   /* all three columns end at the same height */
    margin-top:32px;
}
.col{ min-width:0; display:flex; flex-direction:column; }

/* ---- action bar under the left column (Fetch Quote) ---- */
.col-actions{
    flex:0 0 auto;
    margin-top:14px;
}
.col-actions .btn-primary{
    display:flex;            /* centres the symbol next to the label */
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;              /* spans the full width of the first column */
    padding:11px 22px;
}

.btn-coin{
    flex:0 0 auto;
    width:1.5em;
    height:1.5em;
    object-fit:contain;
    filter:invert(1);
    mix-blend-mode:screen;
}

.mode-tabs{
    display:flex;
    gap:0;
    margin:0;
    position:relative;
    z-index:2;
}
/* single header tab sitting on top of the pacs.008 upload card */
.mode-tab{
    flex:1 1 0;
    min-width:0;
    margin:0;
    padding:13px 10px;
    border:1px solid transparent;
    border-bottom:0;
    border-radius:16px 16px 0 0;
    background:var(--tint-3);
    font-family:inherit;
    font-size:13.5px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
    color:#000;
}

/* stretches the upload card to the column height */
.upload-stage{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    min-height:0;
}
.upload-stage > .upload-card{ flex:1 1 auto; height:auto; }

/* ---- pacs.008 XML upload card ---- */
.upload-card{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
    padding:22px;
    border:1px solid var(--line);
    border-radius:0 0 16px 16px;   /* flush with the headings above */
    background:#fff;
    box-shadow:0 1px 3px rgba(16,41,33,.06),
    0 12px 32px rgba(16,41,33,.10);
}
.upload-head{ margin-bottom:14px; }
.upload-head h4{
    margin:0;
    font-size:15px;
    font-weight:700;
    color:var(--ink);
}
.upload-head small{
    display:block;
    margin-top:3px;
    font-size:12px;
    line-height:1.4;
    color:var(--muted);
}
.upload-drop{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    padding:14px;
    border:1.5px dashed var(--line);
    border-radius:12px;
    background:var(--tint-2);
    cursor:pointer;
    transition:border-color .16s ease, background .16s ease;
}
.upload-drop:hover{
    border-color:var(--brand-2);
    background:#f2f9f6;
}
.upload-ico{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
}
.upload-ico svg{ width:19px; height:19px; }
.upload-drop-text{ min-width:0; }
.upload-drop-text b{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
}
.upload-drop-text small{
    display:block;
    margin-top:2px;
    font-size:11.5px;
    color:var(--muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
/* the text box grows with the layout and scrolls vertically */
.upload-text-group{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
}
/* The border + radius live on the wrapper, which clips the scrollbars,
   so the rounded corners are never overlapped when they appear. */
.xml-box-wrap{
    display:flex;
    flex:1 1 auto;
    min-height:190px;
    max-height:420px;
    border:1.5px solid var(--line);
    border-radius:10px;
    background:#f9fdfb;
    overflow:hidden;
    transition:border-color .16s ease, box-shadow .16s ease;
}
.xml-box-wrap:focus-within{
    border-color:var(--brand-2);
    box-shadow:0 0 0 3px #d9ece4;
}
.xml-box{
    flex:1 1 auto;
    width:100%;
    min-width:0;
    min-height:0;
    padding:12px 14px;
    border:0;
    border-radius:0;
    background:transparent;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:12.5px;
    line-height:1.55;
    color:var(--ink);
    white-space:pre;
    overflow:auto;
    resize:none;
    outline:none;
    /* slim scrollbars that sit comfortably inside the clipped corners */
    scrollbar-width:thin;
    scrollbar-color:#b5d0c5 transparent;
}
.xml-box::-webkit-scrollbar{ width:10px; height:10px; }
.xml-box::-webkit-scrollbar-track{ background:transparent; }
.xml-box::-webkit-scrollbar-corner{ background:transparent; }
.xml-box::-webkit-scrollbar-thumb{
    border:2px solid transparent;
    border-radius:8px;
    background:#b5d0c5;
    background-clip:padding-box;
}
.xml-box::-webkit-scrollbar-thumb:hover{
    background:#93bda9;
    background-clip:padding-box;
}

.col-title{
    margin:0 0 9px 2px;
    font-size:15px;
    font-weight:700;
    color:var(--ink);
}

.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.section-head .col-title{
    margin:0 0 0 2px;
    border:0;
}

/* ---------------- FORMS ---------------- */
.form-group{ display:flex; flex-direction:column; min-width:0; }

.form-group label{
    margin-bottom:5px;
    font-size:12px;
    font-weight:600;
    color:var(--muted);
}
.form-group input,
.form-group select{
    min-width:0;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    font-family:inherit;
    font-size:13.5px;
    color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-group input:focus,
.form-group select:focus{
    outline:0;
    border-color:var(--brand-2);
    box-shadow:0 0 0 3px #d9ece4;
}
.form-group input::placeholder{ color:#a9c4ba; text-overflow:ellipsis; }
.form-group input[spellcheck="false"]{
    letter-spacing:.3px;
    font-variant-numeric:tabular-nums;
}
.form-group select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:34px;
    cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
}

/* ============================================================
   11. SUMMARY PANEL
   ============================================================ */

/* Heading bar: mirrors the left column's mode headings so both columns line up,
   and sits flush on top of the card (no gap). */
.summary-head{
    margin:0;
    padding:13px 14px;
    border:1px solid var(--line);
    border-bottom:0;
    border-radius:16px 16px 0 0;
    background:var(--tint-3);
    font-size:15px;
    font-weight:700;
    line-height:1.2;
    color:var(--ink);
    text-align: center;
}

.summary-card{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:visible;
    padding:18px;
    background:#fff;
    border:1px solid var(--line);
    border-top:0;
    border-radius:0 0 16px 16px;   /* flush with the heading above */
    box-shadow:0 1px 3px rgba(16,41,33,.06),
    0 8px 24px rgba(16,41,33,.09);
}

/* ---------------- QUOTE COUNTDOWN ---------------- */
.quote-timer[hidden]{ display:none; }

.quote-timer{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:7px 12px;
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    border-bottom:1px solid #fcd34d;
    background:linear-gradient(135deg,#fffbeb,#fef3c7);
    color:#92400e;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.quote-timer .qt-ico{
    flex:0 0 auto;
    width:15px;
    height:15px;
    color:#b45309;
    animation:qt-tick 1s steps(2, end) infinite;   /* the watch keeps ticking */
}
.quote-timer .qt-ico svg{ width:100%; height:100%; display:block; }
.quote-timer .qt-value{
    font-size:14px;
    font-weight:800;
    color:#b45309;
    font-variant-numeric:tabular-nums;
}
@keyframes qt-tick{
    0%,100%{ transform:scale(1); }
    50%    { transform:scale(1.14); }
}
@media(prefers-reduced-motion:reduce){
    .quote-timer .qt-ico{ animation:none; }
}

/* last few seconds */
.quote-timer.is-urgent{
    border-bottom-color:#fca5a5;
    background:linear-gradient(135deg,#fee2e2,#fecaca);
    color:#7f1d1d;
}
.quote-timer.is-urgent .qt-ico,
.quote-timer.is-urgent .qt-value{ color:#b91c1c; }

/* ran out before Review & Pay - the figures below have been blanked */
.quote-timer.is-expired{
    border-bottom-color:var(--line);
    background:#f3f4f6;
    color:var(--muted);
}
.quote-timer.is-expired .qt-ico{ animation:none; }
.quote-timer.is-expired .qt-ico,
.quote-timer.is-expired .qt-value{ color:var(--muted); }

#summaryBody.is-expired .sum-row b{ color:var(--muted); font-weight:600; }

/* ---- stablecoin watermark behind the transfer summary ---- */
.col-summary .summary-card{ position:relative; }
.col-summary .summary-card::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:min(80%, 250px);
    height:min(80%, 250px);
    transform:translate(-50%,-50%);
    background:url("../img/stablecoin_symbol.png") center / contain no-repeat;
    mix-blend-mode:multiply;
    opacity:.12;
    pointer-events:none;
}
/* keep the rows and buttons painted on top of the mark */
.col-summary .summary-card > *{ position:relative; }

.summary-title{
    margin:0 0 12px;
    font-size:16px;
    font-weight:700;
    color:var(--ink);
}

.summary-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow:visible;
}

/* ---------------- ROWS ---------------- */
.sum-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:6px;
    font-size:13px;
    color:var(--muted);
}
.sum-row b{
    max-width:62%;
    font-weight:600;
    text-align:right;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sum-row.big b{ font-size:14px; font-weight:650; color:var(--green); }
.sum-row.total b{ font-size:14px; font-weight:650; color:var(--brand); }

.summary-card hr{
    border:0;
    border-top:1px dashed var(--line);
    margin:6px 0;
}

/* ---------------- EMPTY STATE ---------------- */
.summary-empty{
    padding:26px 12px;
    text-align:center;
}
.se-ico{
    width:42px;
    height:42px;
    margin:0 auto 10px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e8f4ef;
    color:var(--brand);
}
.se-ico svg{ width:21px; height:21px; display:block; }
.summary-empty p{
    margin:0;
    font-size:12.5px;
    line-height:1.45;
    color:var(--muted);
}

/* ---------------- STALE ---------------- */
#summaryBody.is-stale{
    opacity:.42;
    filter:grayscale(.6);
    pointer-events:none;
}
.summary-stale{
    margin:0 0 10px;
    padding:8px 11px;
    border:1px solid #fed7aa;
    border-radius:9px;
    background:#fff7ed;
    color:#c2410c;
    font-size:12px;
    font-weight:600;
    text-align:center;
}

/* ---------------- ACTIONS ---------------- */
.summary-actions{
    flex:0 0 auto;
    margin-top:8px;
}
.summary-actions [hidden]{ display:none !important; }

/* ---------------- QUOTE EXPIRY TIMER (summary + review modal) ----------------
   Background follows the time left on the quote; classes are set by QuoteTimer in app.js. */
.quote-timer{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin:0 0 10px;
    padding:8px 12px;
    border:1px solid transparent;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    transition:background-color .4s ease, color .4s ease, border-color .4s ease;
}
.quote-timer[hidden]{ display:none; }
.quote-timer .qt-ico{ width:16px; height:16px; flex:0 0 auto; }
.quote-timer .qt-value{
    font-variant-numeric:tabular-nums;
    font-size:14px;
    font-weight:800;
    letter-spacing:.3px;
}
.quote-timer.is-ok{      background:#dcfce7; border-color:#86efac; color:#166534; }
.quote-timer.is-warn{    background:#fef3c7; border-color:#fcd34d; color:#92400e; }
.quote-timer.is-low{     background:#fee2e2; border-color:#fca5a5; color:#b91c1c;
                         animation:qt-pulse 1s ease-in-out infinite; }
.quote-timer.is-expired{ background:#e5e7eb; border-color:#d1d5db; color:#4b5563; }
@keyframes qt-pulse{ 50%{ opacity:.65; } }
@media (prefers-reduced-motion:reduce){ .quote-timer.is-low{ animation:none; } }
.review-head .quote-timer{ margin:10px 0 0; }

/* ---------------- PLACEHOLDER STATE ---------------- */

#summaryBody.is-placeholder .sum-row b{
    color:#9db5aa;
    font-weight:600;
}
#summaryBody.is-placeholder .sum-row.big b,
#summaryBody.is-placeholder .sum-row.total b{
    color:#abc5bb;
    font-weight:650;
}

/* ============================================================
   12. REVIEW MODAL
   ============================================================ */
.modal-backdrop{
    position:fixed;
    inset:0;
    z-index:60;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(16,41,33,.55);
}
.modal-backdrop.open{ display:flex; }

.modal{
    position:relative;
    width:100%;
    max-width:470px;
    max-height:92vh;
    overflow:hidden;
    padding:24px;
    background:var(--card);
    border-radius:18px;
    box-shadow:0 24px 60px rgba(16,41,33,.30);
}
.modal-close{
    position:absolute;
    top:10px;
    right:14px;
    border:0;
    background:none;
    font-size:26px;
    line-height:1;
    color:var(--muted);
    cursor:pointer;
}
.modal-close:hover{ color:var(--ink); }

.review-head{ text-align:center; margin-bottom:16px; }
.review-head h3{ font-size:21px; font-weight:700; }
.review-sub{
    margin-top:4px;
    font-size:12px;
    color:var(--muted);
}

.review-hero{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:14px;
    margin-bottom:16px;
    border-radius:13px;
    background:var(--tint-2);
    font-size:16px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
}
.review-hero .green{
    color:var(--green);
}
.review-hero i{
    font-style:normal;
    font-size:18px;
    color:var(--brand-2);
}
.review-hero b{
    font-weight:700;
}
.review-grid{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:0;
    margin:0 0 18px;
}
.review-grid dt,
.review-grid dd{
    padding:8px 0;
    border-bottom:1px dashed var(--line);
    font-size:13px;
}
.review-grid dt{ color:var(--muted); }
.review-grid dd{
    margin:0;
    font-weight:600;
    text-align:right;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}
.review-grid dt.tot,
.review-grid dd.tot{
    border-bottom:0;
    padding-top:12px;
    font-size:15px;
}
.review-grid dd.tot{ color:var(--brand); font-weight:700; }

.review-actions{
    display:flex;
    gap:10px;
}
.review-actions .btn-primary,
.review-actions .btn-ghost{
    flex:1 1 0;
    margin:0;
    padding:11px 14px;
    font-size:14px;
}
.review-actions form{
    flex:1 1 0;
    margin:0;
    display:block;
}
.review-actions form .btn-primary{ width:100%; }


/* ---- session countdown inside the review modal ---- */
.session-countdown{
    margin:15px 0 12px;
    padding:6px 10px;
    border:1px solid #fcd34d;
    border-radius:5px;
    background:linear-gradient(135deg,#fffbeb,#fef3c7);
    font-size:12px;
    font-weight:600;
    color:#92400e;
    text-align:center;
}
.session-countdown b{
    font-variant-numeric:tabular-nums;
    color:#b45309;
}
.session-countdown.is-urgent{
    border-color:var(--red);
    background:rgba(220,38,38,.06);
    color:var(--red);
}
.session-countdown.is-urgent b{ color:var(--red); }

/* ============================================================
   12b. PAYMENT FAILURE MODAL
   ============================================================ */
.modal-error{
    position:relative;
}
.modal-error .modal-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.modal-error .error-icon{
    font-size:48px;
    margin-bottom:16px;
}
.modal-error .modal-title{
    font-size:21px;
    font-weight:700;
    color:var(--red);
    margin-bottom:12px;
}
.modal-error .modal-message{
    font-size:14px;
    color:var(--muted);
    margin-bottom:20px;
    line-height:1.5;
}
.reference-box{
    width:100%;
    padding:16px;
    margin-bottom:20px;
    background:var(--tint);
    border:1px solid var(--line);
    border-radius:12px;
}
.reference-box .h3{
    display:block;
    font-size:12px;
    color:var(--muted);
    font-weight:600;
    margin-bottom:8px;
}
.reference-box .reference-id{
    display:block;
    font-size:14px;
    font-weight:700;
    font-family:'Courier New', monospace;
    color:var(--red);
    word-break:break-all;
    margin-bottom:12px;
    padding:8px;
    background:rgba(220,38,38,.05);
    border-radius:6px;
}
.reference-box .btn-copy{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border:1px solid var(--red);
    border-radius:6px;
    background:transparent;
    color:var(--red);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:all .15s ease;
}
.reference-box .btn-copy:hover{
    background:var(--red);
    color:#fff;
}
.reference-box .btn-copy:disabled{
    opacity:.6;
    cursor:not-allowed;
}
.reference-box .copy-icon{
    width:16px;
    height:16px;
    flex-shrink:0;
}
.reference-box .btn-copy-text{
    display:inline;
}

.modal-error .modal-actions{
    width:100%;
}
.modal-error .btn-block{
    width:100%;
}

/* ============================================================
   13. RECEIPT (success page)
   ============================================================ */
.receipt-page{ max-width:820px; }
.receipt-page .stepper{
    max-width:450px;
    margin:16px auto 22px;
}

.receipt{
    padding:18px 22px 20px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 14px 36px rgba(21,58,47,.10);
}

/* ---- hero (stacked, centred) ---- */
.receipt-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-bottom:14px;
    margin-bottom:16px;
    border-bottom:1px solid var(--line);
}
.rc-check{
    width:46px;
    height:46px;
    margin-bottom:10px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--green);
    color:#fff;
    box-shadow:0 4px 14px rgba(22,163,74,.30);
}
.rc-check svg{ width:23px; height:23px; display:block; }

.receipt-top h1{
    font-size:19px;
    font-weight:700;
    line-height:1.25;
    color:var(--ink);
}
.receipt-top .sub{
    margin-top:4px;
    font-size:12px;
    color:var(--muted);
}

.rc-ref{
    display:inline-flex;
    align-items:baseline;
    gap:7px;
    margin-top:10px;
    padding:6px 16px;
    border:1px dashed #c2e0d3;
    border-radius:999px;
    background:var(--tint);
}
.rc-ref small{
    font-size:10.5px;
    font-weight:600;
    color:var(--muted);
}
.rc-ref b{
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
    color:var(--brand);
    font-variant-numeric:tabular-nums;
}

/* how long the payment execution took – sits right under the reference pill */
.rc-time{
    display:inline-flex;
    align-items:baseline;
    gap:7px;
    margin-top:7px;
    padding:5px 14px;
    border:1px solid #bbf7d0;
    border-radius:999px;
    background:#f0fdf4;
}
.rc-time small{
    font-size:10.5px;
    font-weight:600;
    color:#3f7a56;
}
.rc-time b{
    font-size:13.5px;
    font-weight:700;
    color:var(--green);
    font-variant-numeric:tabular-nums;
}

/* ---- two columns with a centred divider ---- */
.rc-grid{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 40px;
}
.rc-grid::before{
    content:"";
    position:absolute;
    left:50%;
    top:2px;
    bottom:2px;
    width:1px;
    transform:translateX(-50%);
    background:var(--line);
}
.rc-col{
    position:relative;
    z-index:1;
    min-width:0;
}
.rc-col h4{
    margin:0 0 6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--brand-2);
}

.rc-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    padding:4px 0;
    font-size:12.5px;
    color:var(--muted);
}

.rc-row b{
    font-weight:600;
    text-align:right;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.rc-row b.green{ color:var(--green); font-weight:700; }

/* -- PAYMENT STATUS PILL -- */
.rc-row b.rc-status{
    flex:0 0 auto;
    padding:1px 9px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.2px;
    line-height:1.5;
}
.rc-status.is-success{    border-color:#86efac; background:#dcfce7; color:#15803d; }
.rc-status.is-failed{     border-color:#fca5a5; background:#fee2e2; color:#b91c1c; }
.rc-status.is-processing{ border-color:#bfdbfe; background:#dbeafe; color:#1d4ed8; }
.rc-status.is-pending{    border-color:#fde68a; background:#fef3c7; color:#b45309; }
/* Nothing priced yet - the dash keeps the row's shape without claiming a state. */
.rc-status.is-none{       border-color:var(--line); background:#f1f7f4; color:var(--muted); }

.rc-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
    padding:11px 14px;
    border-radius:12px;
    background:var(--tint);
    font-size:13px;
    font-weight:700;
    color:var(--ink);
}
.rc-total b{
    font-size:17px;
    font-weight:700;
    color:var(--brand);
    font-variant-numeric:tabular-nums;
}

/* the headline figure of the receipt: what the beneficiary actually received */
.rc-total.rc-received{
    border:1px solid #86efac;
    background:linear-gradient(135deg,#dcfce7,#bbf7d0);
    color:#14532d;
    font-size:14px;
}
.rc-total.rc-received b{
    font-size:19px;
    color:#15803d;
}

/* ---- confirmation column on the transfer page ---- */
.receipt-card{ justify-content:flex-start; padding:14px; }

.receipt-waiting{
    margin:auto;
    padding:24px 8px;
    text-align:center;
}
.rw-ico{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    margin:0 auto 10px;
    border-radius:50%;
    background:var(--tint);
    color:var(--brand-2);
}
.rw-ico svg{ width:22px; height:22px; display:block; }
.receipt-waiting p{
    font-size:12.5px;
    line-height:1.45;
    color:var(--muted);
}

.rc-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-bottom:9px;
    margin-bottom:9px;
    border-bottom:1px solid var(--line);
}
.rc-top h4{
    margin-top:6px;
    font-size:14.5px;
    font-weight:700;
    line-height:1.25;
    color:var(--ink);
}
.rc-top .sub{
    margin-top:3px;
    font-size:10.5px;
    line-height:1.35;
    color:var(--muted);
}

/* sender on top, receiver underneath - the column is too narrow for two of them */
.rc-stack .rc-col + .rc-col{
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed var(--line);
}

/* ---- compact scale: the confirmation must fit the height the other two
        columns set, without stretching the row or scrolling ---- */


.receipt-card .rc-check{
    width:32px;
    height:32px;
    margin-bottom:0;
    box-shadow:0 3px 10px rgba(22,163,74,.28);
}
.receipt-card .rc-check svg{ width:16px; height:16px; }

.receipt-card .rc-ref{
    margin-top:7px;
    padding:3px 11px;
    gap:6px;
}
.receipt-card .rc-ref small{ font-size:9.5px; }
.receipt-card .rc-ref b{ font-size:12px; letter-spacing:.3px; }

.receipt-card .rc-time{
    margin-top:5px;
    padding:3px 11px;
    gap:6px;
}
.receipt-card .rc-time small{ font-size:9.5px; }
.receipt-card .rc-time b{ font-size:12px; }

.receipt-card .rc-col h4{ margin-bottom:3px; font-size:10px; }
.receipt-card .rc-row{ padding:2px 0; font-size:11.5px; }

.receipt-card .rc-total{
    margin-top:10px;
    padding:7px 12px;
    font-size:12px;
}
.receipt-card .rc-total b{ font-size:15px; }

.rc-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
}
.rc-actions .btn-primary,
.rc-actions .btn-ghost {
    flex: 1 1 0;
    margin: 0;
    padding: 11px 14px;
    font-size: 14px;
}

/* stacked and shorter inside the confirmation column */
.receipt-card .rc-actions{
    flex-direction:column;
    gap:7px;
    margin-top:10px;
}
.receipt-card .rc-actions .btn-primary,
.receipt-card .rc-actions .btn-ghost{
    flex:0 0 auto;
    padding:10px 12px;
    font-size:13.5px;
}

/* Refresh Status: icon + label; the icon spins while the status call is in flight */
.btn-refresh{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.rc-actions .btn-refresh{
    border:0;
    color:#fff;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow:0 2px 6px rgba(21,58,47,.22);
    transition:opacity .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rc-actions .btn-refresh:hover:not(:disabled){
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow:0 4px 12px rgba(21,58,47,.30);
    transform:translateY(-1px);
}
.rc-actions .btn-refresh:active:not(:disabled){
    transform:none;
    box-shadow:0 1px 3px rgba(21,58,47,.25);
}
.btn-refresh[hidden]{ display:none; }
.btn-refresh .refresh-ico{ width:16px; height:16px; flex:0 0 auto; }
.btn-refresh:disabled{ cursor:progress; opacity:.75; }
.btn-refresh.is-loading .refresh-ico{ animation:refresh-spin .8s linear infinite; }
@keyframes refresh-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .btn-refresh.is-loading .refresh-ico{ animation:none; } }


/* ============================================================
   14. RESPONSIVE
   ============================================================ */
/* not enough room for three: the confirmation drops to a full-width row underneath */
@media(max-width:1320px){
    .tri-grid{
        grid-template-columns:minmax(0,1fr) minmax(280px,320px);
        gap:26px;
    }
    .col-receipt{ grid-column:1 / -1; }
    /* two columns now: 346px = col2 (320) + gap (26), 160px = half of col2 */
    .page > .stepper{
        margin:14px 160px 26px 20px;
    }
}

@media(max-width:1100px){
    .tri-grid{
        grid-template-columns:minmax(0,1fr);
        gap:24px;
    }
    /* single column – nothing left to line up with */
    .page > .stepper{
        max-width:740px;
        margin:14px auto 26px;
    }
}

@media(max-width:820px){
    .summary-card{ min-height:0; }
}

@media(max-width:760px){
    .stepper li .st-lbl{ display:none; }
    .stepper li.active .st-lbl{ display:inline; }
    .stepper li:not(:last-child)::after{ margin:0 8px; }
}

@media(max-width:680px){
    .page-head h1{ font-size:22px; }

    .xml-box-wrap{ min-height:160px; }

    .rc-grid{ grid-template-columns:1fr; gap:12px; }
    .rc-grid::before{ display:none; }
    .rc-col + .rc-col{
        padding-top:12px;
        border-top:1px solid var(--line);
    }
    .rc-actions,
    .review-actions{ flex-direction:column; }
    .review-actions form{ flex:none; }
}

@media(max-width:600px){
    .header-inner{ padding:10px 14px; }
    .header-right{ gap:8px; }
    .brand-name{ font-size:17px; }
    .brand-logo{ height:36px; }

    .wallet{ padding:5px 10px 5px 8px; gap:8px; }
    .wallet-icon{ width:30px; height:30px; border-radius:9px; }
    .wallet-icon svg{ width:17px; height:17px; }
    .wallet-text small{ display:none; }
    .wallet-text strong{ font-size:14px; font-weight:500; }

    .profile-btn{ padding:3px; border:0; }
    .profile-caret{ display:none; }
    .profile-avatar{ width:30px; height:30px; }
    .profile-dropdown{ min-width:210px; }

    .page{ padding:14px 14px 20px; }
    .card{ padding:16px; }
    .app-footer .copyright{ font-size:12px; }
}

/* short screens – keep everything above the fold */
@media(max-height:780px){
    .page{ padding:12px 20px 18px; }
    .page-head{ margin-bottom:12px; }
    .page-head h1{ font-size:22px; }
    .page-head p{ font-size:13px; }
    .stepper{ margin-bottom:14px; }
    .card{ padding:16px; margin-bottom:14px; }
    .card-head{ margin-bottom:12px; }
    .summary-card{ padding:14px 16px; }
    .sum-row{ padding:5px 0; font-size:12.5px; }
    .receipt{ padding:14px 18px 16px; }
    .rc-check{ width:38px; height:38px; margin-bottom:8px; }
    .rc-check svg{ width:19px; height:19px; }
    .receipt-top h1{ font-size:17px; }
    .rc-row{ padding:3px 0; font-size:12px; }
}


/* ============================================================
   15. PRINT
   ============================================================ */
@media print{
    .app-header,
    .app-footer,
    .stepper,
    .rc-actions,
    .modal-backdrop,
    .alert,
    .col-input,
    .col-summary{ display:none !important; }

    /* only the confirmation column goes on paper */
    .tri-grid{ display:block; margin-top:0; }
    .col-receipt .summary-head{ display:none; }
    .receipt-card{
        border:0;
        box-shadow:none;
        padding:0;
    }

    body{ background:#fff; }
    .receipt{
        border:0;
        box-shadow:none;
        padding:0;
    }
    .rc-grid{ grid-template-columns:1fr 1fr; }

    /* keep the highlighted figures on the printed receipt */
    .rc-time,
    .rc-status,
    .rc-total.rc-received{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }
}

/* ============================================================
   16. ERROR PAGE (503 / downstream unavailable)
   ============================================================ */
.error-page{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52vh;
}
.error-card{
    width:100%;
    max-width:560px;
    text-align:center;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:44px 38px 34px;
    box-shadow:0 18px 44px rgba(16,41,33,.09);
}
.err-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#fee2e2;
    color:var(--red);
    margin-bottom:14px;
}
.err-badge svg{ width:32px; height:32px; }
.err-code{
    margin:0;
    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--red);
}
.error-card h1{
    margin:6px 0 10px;
    font-size:24px;
    line-height:1.25;
    color:var(--ink);
}
.err-reference{
    margin:0 auto 16px;
    padding:8px;
    max-width:42ch;
    border-radius:8px;
    background:var(--tint-2);
    font-size:13px;
    line-height:1.6;
    color:var(--muted);
}
.err-reference p{
    margin:0;
}
.err-reference b{
    display:block;
    margin-top:6px;
    font-weight:600;
    font-size: 14px;
    color:var(--ink);
    font-family:monospace;
    word-break:break-all;
}
.err-detail{
    margin:0 auto 20px;
    max-width:44ch;
    font-size:14px;
    line-height:1.55;
    color:var(--muted);
}
.err-reassure{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin:0 auto 20px;
    padding:11px 6px;
    border-radius:12px;
    background:#ecfdf5;
    border:1px solid #bbf7d0;
    font-size:14px;
    font-weight: 600;
    color:#166534;
}
.err-tick{
    display:inline-flex;
    flex:0 0 auto;
    color:var(--green);
}
.err-tick svg{ width:17px; height:17px; }
.err-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}
.err-actions .btn-primary,
.err-actions .btn-ghost{
    min-width:158px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
@media (max-width:520px){
    .error-card{ padding:32px 20px 26px; }
    .err-actions .btn-primary,
    .err-actions .btn-ghost{ width:100%; }
}

/* ============================================================
   17. PAYMENT PROCESSING OVERLAY
   ============================================================ */
.pay-processing{
    position:fixed;
    inset:0;
    z-index:90;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(16,41,33,.55);
    backdrop-filter:blur(7px) saturate(.9);
    -webkit-backdrop-filter:blur(7px) saturate(.9);
}
/* display:flex outranks the UA's [hidden] rule, so opt out explicitly. */
.pay-processing[hidden]{ display:none; }

/* Deliberately unpainted - no panel, no shadow. The coin and the rail read as floating
   over the blurred page rather than sitting in one more dialog on top of it. */
.pp-card{
    width:min(940px,100%);
    text-align:center;
    animation:pp-rise .3s ease-out both;
}
@keyframes pp-rise{
    from{ opacity:0; transform:translateY(12px); }
    to  { opacity:1; transform:none; }
}

/* ---- the coin ---- */
.pp-coin{
    margin:0 auto 16px;
    perspective:420px;      /* depth, so the flip reads as a coin turning, not a flat squash */
}
.pp-coin img{
    width:78px;
    height:78px;
    object-fit:contain;
    /* drop-shadow follows the artwork's own alpha; box-shadow would draw a square behind it. */
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));
    animation:pp-flip 1.8s linear infinite;
}
@keyframes pp-flip{
    from{ transform:rotateY(0deg); }
    to  { transform:rotateY(360deg); }
}

.pp-title{
    margin:0 0 4px;
    font-size:18px;
    font-weight:700;
    color:#fff;
    text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.pp-sub{
    margin:0 0 30px;
    font-size:12px;
    color:rgba(255,255,255,.72);
}

/* ---- the rail : every stage on one line, left to right ---- */
.pp-track{
    --pp-progress:0;        /* 0..1 - how far along the payment is; written by app.js */
    --pp-edge:6.25%;        /* half a column: where the first and last dots sit */
    --pp-dot:18px;
    position:relative;
}
.pp-rail{
    position:absolute;
    /* Ends at the centre of the outer dots, not at the edge of the track. */
    left:var(--pp-edge);
    right:var(--pp-edge);
    top:calc(var(--pp-dot) / 2);
    height:3px;
    margin-top:-1.5px;
    border-radius:999px;
    background:rgba(255,255,255,.22);
}
.pp-rail-fill{
    position:absolute;
    inset:0 auto 0 0;
    width:calc(var(--pp-progress) * 100%);
    border-radius:999px;
    background:linear-gradient(90deg,#4ade80,#86efac);
    transition:width .55s cubic-bezier(.4,0,.2,1);
}
/* Two elements on purpose: the outer one is placed and slides, the inner one spins.
   One element cannot do both - the spin's transform would wipe out the centring. */
.pp-rail-coin{
    position:absolute;
    top:50%;
    left:calc(var(--pp-progress) * 100%);
    transform:translate(-50%,-50%);
    perspective:200px;
    transition:left .55s cubic-bezier(.4,0,.2,1);
}
.pp-rail-coin img{
    display:block;
    width:26px;
    height:26px;
    object-fit:contain;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
    animation:pp-flip 1.4s linear infinite;
}

/* ---- the stages ---- */
.pp-nodes{
    position:relative;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;      /* equal columns, however many stages there are */
    align-items:start;
    margin:0;
    padding:0;
    list-style:none;
}
.pp-nodes li{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    padding:0 4px;
    /* Stages not reached yet stay in place, just recessive, so nothing shifts. */
    color:rgba(255,255,255,.45);
    transition:color .3s ease;
}
.pp-dot{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:var(--pp-dot);
    height:var(--pp-dot);
    border:2px solid currentColor;
    border-radius:50%;
    background:rgba(18,45,37,0);   /* near-opaque, so the rail does not show inside the ring */
    font-size:10px;
    font-weight:900;
    line-height:1;
    transition:border-color .3s ease, background .3s ease;
}
.pp-label{
    font-size:11px;
    font-weight:600;
    line-height:1.3;
}

.pp-nodes li.is-active{ color:#fff; }
.pp-nodes li.is-active .pp-dot{
    border-color:#fff;
    animation:pp-pulse 1.1s ease-out infinite;
}
@keyframes pp-pulse{
    from{ box-shadow:0 0 0 0 rgba(255,255,255,.45); }
    to  { box-shadow:0 0 0 9px rgba(255,255,255,0); }
}

.pp-nodes li.is-done{ color:#86efac; }
.pp-nodes li.is-done .pp-dot{
    border-color:#4ade80;
    background:#16a34a;
    color:#fff;
}
.pp-nodes li.is-done .pp-dot::before{ content:'\2713'; }

.pp-track.is-settling .pp-nodes li:last-child .pp-dot{
    animation:pp-pulse 1.1s ease-out infinite;
}

@media (max-width:880px){
    .pp-nodes li{ gap:7px; padding:0 2px; }
    .pp-label{ font-size:9.5px; }
}
@media (max-width:620px){
    .pp-track{ --pp-dot:14px; }
    .pp-coin img{ width:62px; height:62px; }
    .pp-rail-coin img{ width:20px; height:20px; }
    .pp-label{ font-size:8.5px; }
    .pp-sub{ margin-bottom:22px; }
}

/* A turning coin is decoration; anyone who asked for less motion gets a still one. */
@media (prefers-reduced-motion:reduce){
    .pp-card,
    .pp-coin img,
    .pp-rail-coin img,
    .pp-nodes li.is-active .pp-dot,
    .pp-track.is-settling .pp-nodes li:last-child .pp-dot{ animation:none; }
    .pp-rail-fill,
    .pp-rail-coin{ transition:none; }
}