/* ============================================================
   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:#5b21b6;
    --brand-2:#7c3aed;
    --green:#16a34a;
    --red:#dc2626;
    --ink:#12103a;
    --muted:#6b7280;
    --line:#e8e6f3;
    --bg:#f6f4ff;
    --card:#ffffff;
    --tint:#f6f2ff;
    --tint-2:#faf9ff;
}

*{ 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:#ddd6fe; }


/* ============================================================
   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:#cdc6ee; 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:var(--card);
    border-bottom:1px solid var(--line);
}
.header-inner{
    max-width:1180px;
    margin:auto;
    padding:10px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

/* ---- logo ---- */
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    text-decoration:none;
}
.brand-logo{ height:32px; width:auto; }
.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:#cdc6ee;
    box-shadow:0 2px 10px rgba(91,33,182,.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(91,33,182,.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:#cdc6ee;
    box-shadow:0 2px 10px rgba(91,33,182,.10);
}
.profile-btn[aria-expanded="true"]{
    border-color:var(--brand-2);
    box-shadow:0 0 0 3px #ede9fe;
}
.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(18,16,58,.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:#f3eefe;
    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:#33305c;
    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:1180px;
    margin:auto;
    padding:18px 20px;
    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;
}


/* ============================================================
   05. PAGE SHELL & HEADINGS
   ============================================================ */
.page{
    flex:1 0 auto;
    width:100%;
    max-width:1180px;
    margin:auto;
    padding:18px 20px 26px;
}
.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:740px;
    margin:14px auto 26px;
}
.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:#e5e1f7;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.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:#e5e1f7;
    transition:background .18s ease;
}

/* done → green + tick */
.stepper li.done{ color:var(--green); }
.stepper li.done .st-num{
    background:var(--green);
    color:#fff;
    font-size:0;
}
.stepper li.done .st-num::after{
    content:"\2713";
    font-size:13px;
    font-weight:800;
    line-height:1;
}
.stepper li.done:not(:last-child)::after{ background:var(--green); }

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


/* ============================================================
   07. ALERTS
   ============================================================ */
.alert{
    margin:0 0 16px;
    padding:11px 14px;
    border-radius:11px;
    font-size:13px;
    font-weight:600;
}
.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(0,1fr) minmax(280px,320px);
    gap:34px;
    align-items:start;
    margin-top:32px;
}
.col{ min-width:0; display:flex; flex-direction:column; }

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

/* ---------------- FOLDER TABS ---------------- */
.tabs{
    display:flex;
    align-items:flex-end;
    margin-bottom:-1px;          /* sit on the panel border */
    position:relative;
    z-index:2;
}

.tab{
    position:relative;
    flex:0 0 auto;
    cursor:pointer;
}
.tab input{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.tab-body{
    display:block;
    padding:11px 24px;
    border: 1px solid lightsteelblue;
    border-right:0;
    background:#fff;
    font-size:13px;
    font-weight:500;
    line-height:1.2;
    color:var(--ink);
    white-space:nowrap;
    transition:background .14s ease, font-weight .14s ease;
    box-shadow:0 -3px 12px rgba(18,16,58,.07);
}
.tab:hover .tab-body{ background:#f7f5ff; }

/* selected = light blue */
.tab input:checked + .tab-body{
    background:#d6e4ff;
    font-weight:600;
}
.tab input:focus-visible + .tab-body{
    outline:2px solid var(--brand-2);
    outline-offset:-2px;
}

/* ---- last tab : folded corner ---- */
.tab-last .tab-body{
    border-right:1px solid lightsteelblue;
    padding-right:24px;                /* was 34px – no fold to clear */
    border-top-right-radius:12px;
    background:#d6e4ff;
}

/* ---------------- PANEL ---------------- */
.panel{
    flex:1 1 auto;
    min-height:396px;
    padding:18px;
    border-radius:0 12px 12px 12px;
    border-top: 1px solid lightsteelblue;
    background:#fff;
    position:relative;
    z-index:1;
    box-shadow:0 1px 3px rgba(18,16,58,.06),
    0 8px 24px rgba(18,16,58,.09);
}

/* -- SUB-PANELS (inside a main panel) -- */
.sub-panel{
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--tint-2);
}
.sub-panel + .sub-panel{ margin-top:14px; }

.sub-head{ margin-bottom:11px; }
.sub-head h4{
    margin:0;
    font-size:13px;
    font-weight:700;
    color:var(--ink);
}
.sub-head small{
    display:block;
    margin-top:2px;
    font-size:11.5px;
    line-height:1.35;
    color:var(--muted);
}

/* the fx fields sit on white inside the tinted sub-panel */
.sub-panel .fx-field{ background:#fff; }
.sub-panel .fx-field.is-readonly{ background:#f3f1fb; }

.panel,
.summary-card{
    border-color:#2a2550;                          /* softer than #12103a */
}
/* ---------------- WALLET BALANCE BOX ---------------- */
.wallet-box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border:1.5px solid var(--line);
    border-radius:8px;
    background:#fff;
}
.wb-ico{
    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 8px rgba(91,33,182,.26);
}
.wb-ico svg{
    width:26px;
    height:26px;
    display:block;
}

.wb-text{
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
    line-height:1.25;
}
.wb-text small{
    font-size:10px;
    font-weight:600;
    letter-spacing:.2px;
    color:var(--muted);
}
.wb-text strong{
    font-size:11px;
    font-weight:400;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

.panel-in[hidden]{ display:none !important; }
.panel-blank{ min-height:230px; }

.panel-note{
    margin-top:12px;
    font-size:11px;
    color:var(--muted);
}

/* ---------------- FORMS ---------------- */
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.form-group{ display:flex; flex-direction:column; min-width:0; }
.form-group.span2{ grid-column:span 2; }

.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 #ede9fe;
}
.form-group input::placeholder{ color:#c3bfd8; 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;
}

/* ---------------- VALIDATION ---------------- */
.form-group input.is-invalid,
.form-group select.is-invalid{
    border-color:var(--red);
    background:#fffafa;
}
.form-group input.is-invalid:focus,
.form-group select.is-invalid:focus{
    border-color:var(--red);
    box-shadow:0 0 0 3px #fee2e2;
}
.err{
    display:block;
    margin-top:5px;
    font-size:11.5px;
    font-weight:500;
    line-height:1.35;
    color:var(--red);
}
.err:empty{ display:none; }
.err::before{ content:"\26A0"; margin-right:5px; font-size:11px; }
.err.block{ margin-top:10px; }
.panel > .err,
.panel-in > .err{ margin:6px 2px 0; }

.hint{
    display:block;
    margin-top:4px;
    font-size:11px;
    color:var(--muted);
}

/* FX combo fields: the red border on the surrounding .fx-field.has-error is the
   only error indicator. The currency pill and the amount keep their normal
   colours so the value stays readable while being corrected. */
.fx-select.is-invalid{
    background-color:#ece7fb;
    color:var(--brand);
    border-color:var(--red);
}
.fx-select.is-invalid:hover{ background-color:#ddd4f8; }

.fx-amount.is-invalid{ color:var(--ink); }
.fx-amount.is-invalid::placeholder{ color:#c3bfd8; }
/* ============================================================
   09. FX COMBO FIELD (currency + amount in one box)
   ============================================================ */
.fx-field{
    position:relative;
    padding:6px 12px 7px;
    background:var(--card);
    border:1.5px solid var(--line);
    border-radius:6px;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.fx-field:hover{ border-color:#cdc6ee; }
.fx-field:focus-within{
    border-color:var(--brand-2);
    box-shadow:0 0 0 3px #ede9fe;
}
.fx-field.is-readonly{ background:var(--tint-2); }
.fx-field.has-error{
    border-color:var(--red);
    box-shadow:0 0 0 3px #fee2e2;
}

.fx-field-label{
    display:block;
    margin-bottom:0;
    font-size:11px;
    font-weight:600;
    line-height:1.3;
    letter-spacing:0;
    text-transform:none;
    color:var(--muted);
}

.fx-combo{
    display:flex;
    align-items:center;
    gap:0;
    margin-left:-4px;
}

.fx-cur{ flex:0 0 auto; display:flex; align-items:center; }

.fx-select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding:5px 28px 5px 12px;
    border:0;
    outline:0;
    border-radius:4px;
    background-color:#ece7fb;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    line-height:1.2;
    color:var(--brand);
    cursor:pointer;
    transition:background-color .15s ease;
    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='%237c3aed' 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 10px center;
    background-size:10px 7px;
}
.fx-select:hover{ background-color:#ddd4f8; }
.fx-select:focus{ outline:0; }
.fx-select option{ padding:10px 14px; font-weight:600; color:var(--ink); }

.fx-divider{
    flex:0 0 1px;
    align-self:stretch;
    min-height:22px;
    margin:0 10px;
    background:var(--line);
}

.fx-amount{
    flex:1 1 auto;
    min-width:0;
    width:100%;
    padding:2px 0;
    border:0;
    outline:0;
    background:transparent;
    font-family:inherit;
    font-size:16px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.3px;
    text-align:right;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}
.fx-amount::placeholder{ color:#c3bfd8; font-weight:600; }
.fx-amount:focus{ outline:0; }
.fx-amount[readonly]{ color:var(--brand); cursor:default; }
.fx-amount::-webkit-outer-spin-button,
.fx-amount::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.fx-amount[type=number]{ -moz-appearance:textfield; }

/* unselected state */
.fx-select:invalid,
.fx-select option[value=""]{
    color:#b9b5cc;
    font-weight:600;
}

/* ---- swap ---- */
.swap-line{
    display:flex;
    justify-content:center;
    margin: 10px 0;
    position:relative;
    z-index:2;
}
.swap-btn{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:1.5px solid var(--brand-2);
    border-radius:50%;
    background:var(--brand-2);
    color:#fff;
    line-height:1;
    font-size:18px;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(91,33,182,.10);
    transition:transform .2s ease, border-color .15s ease;
}
.swap-btn:hover{
    transform:rotate(180deg);
    background:var(--brand);
    border-color:var(--brand);
}
.swap-btn svg{ width:18px; height:18px; }

.swap-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
    transform:none;
}
.swap-btn:disabled:hover{ transform:none; }
/* ============================================================
   10. RADIO CARDS
   ============================================================ */
.radio-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.radio-card{ position:relative; cursor:pointer; }
.radio-card input{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.rc-body{
    display:flex;
    align-items:center;
    gap:11px;
    height:100%;
    padding:12px 13px;
    border:1.5px solid var(--line);
    border-radius:12px;
    background:var(--card);
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.rc-ico{
    flex:0 0 auto;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#f3eefe;
    color:var(--brand);
    transition:background .15s ease, color .15s ease;
}
.rc-ico svg{
    flex:0 0 auto;
    width:19px;
    height:19px;
    display:block;
}

.rc-txt{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    line-height:1.3;
}
.rc-txt b{
    font-size:13.5px;
    font-weight:700;
    color:var(--ink);
}
.rc-txt small{
    font-size:11px;
    color:var(--muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.radio-card:hover .rc-body{ border-color:#cdc6ee; }

.radio-card input:checked + .rc-body{
    border-color:var(--brand);
    background:#f9f6ff;
    box-shadow:0 0 0 3px #ede9fe;
}
.radio-card input:checked + .rc-body .rc-ico{
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    color:#fff;
}
.radio-card input:focus-visible + .rc-body{
    border-color:var(--brand-2);
    box-shadow:0 0 0 3px #ddd6fe;
}


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

.summary-card{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:434px;
    overflow:visible;
    padding:18px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 1px 3px rgba(18,16,58,.06),
    0 8px 24px rgba(18,16,58,.09);
}

.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:#f3eefe;
    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;
    padding-top:14px;
    margin-top:14px;
    border-top:1px solid var(--line);
}

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

#summaryBody.is-placeholder .sum-row b{
    color:#b9b5cc;
    font-weight:600;
}
#summaryBody.is-placeholder .sum-row.big b,
#summaryBody.is-placeholder .sum-row.total b{
    color:#c5c0d8;
    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(18,16,58,.55);
}
.modal-backdrop.open{ display:flex; }

.modal{
    position:relative;
    width:100%;
    max-width:470px;
    max-height:92vh;
    overflow:auto;
    padding:24px;
    background:var(--card);
    border-radius:18px;
    box-shadow:0 24px 60px rgba(18,16,58,.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%; }


/* ============================================================
   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(91,33,182,.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 #d9cffb;
    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;
}

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

.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;
}

.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;
}


/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media(max-height:820px){
    .sub-panel{ padding:12px; }
    .sub-panel + .sub-panel{ margin-top:11px; }
    .sub-head{ margin-bottom:9px; }
    .wallet-box{ padding:10px 12px; }
    .wb-text strong{ font-size:15px; }
    .panel{ min-height:360px; }
    .summary-card{ min-height:398px; }
}

@media(max-width:820px){
    .panel,
    .panel-blank,
    .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; }
    .form-grid{ grid-template-columns:1fr; }
    .form-group.span2{ grid-column:span 1; }

    .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; }

    .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; }
    .fx-amount{ font-size:17px; }
    .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{ display:none !important; }

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

/* ============================================================
   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(18,16,58,.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-detail{
    margin:0 auto 20px;
    max-width:44ch;
    font-size:15px;
    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%; }
}