/* components/topup-modal/topup-modal.css */

/* ── Modal shell ──────────────────────────────────────────── */
.topup-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.topup-modal.is-open {
    display: flex;
}

/* Fully visible state — added by JS after display:flex is set */
.topup-modal.is-visible {
    opacity: 1;
}

/* Fading out — added by JS before removing is-open */
.topup-modal.is-closing {
    opacity: 0;
    pointer-events: none;
}

.topup-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}

/* ── Card ─────────────────────────────────────────────────── */
.topup-modal__card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-xl, 12px);
    width: min(420px, 92vw);
    max-height: 90dvh;
    overflow-y: auto;
    padding: 1.5rem;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* ── Header ───────────────────────────────────────────────── */
.topup-modal__header {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
    gap: 0.5rem;
}

.topup-modal__title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text, #333);
    margin: 0;
    flex: 1;
    text-align: center;
}

/* ── Back arrow ───────────────────────────────────────────── */
.topup-modal__back {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text, #333);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s, transform 0.2s;
    flex-shrink: 0;
}

.topup-modal__back:hover {
    background: #f0f0f0;
    transform: translateX(-2px);
}

.topup-modal__back:active {
    transform: translateX(-4px);
}

.topup-modal__back svg {
    display: block;
}

/* ── Pricing freshness states ─────────────────────────────── */
.topup-modal__pricing-state {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md, 6px);
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.topup-modal__pricing-state--loading {
    display: flex;
    background: #f5f7ff;
    color: var(--color-text-light, #666);
}

.topup-modal__pricing-state--offline-cached {
    background: #fff8ea;
    color: #92660a;
}

.topup-modal__pricing-state--offline-blocked {
    background: #fff5f5;
    color: #c0392b;
}

/* ── Balance row ──────────────────────────────────────────── */
.topup-modal__balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md, 6px);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    background: #f5f7ff;
}

.topup-modal__balance-label {
    color: var(--color-text-light, #666);
}

.topup-modal__balance-value {
    font-weight: 700;
    color: var(--color-secondary, #667eea);
}

/* ── Live selection summary ───────────────────────────────── */
.topup-modal__summary-row {
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md, 6px);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

/* Fixed vote-intent chip — informational, doesn't change with selection */
.topup-modal__summary-row--intent {
    background: var(--color-blue-light);
    color: var(--color-blue);
}

/* Dynamic purchase chip — was the row's only color before the intent
   chip was split out above it */
.topup-modal__summary-row--purchase {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* ── Section label ────────────────────────────────────────── */
.topup-modal__section-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light, #999);
    margin: 1rem 0 0.5rem;
}

/* ── Quick-amount buttons (votes-first: votes on top, cost below) ──────── */
.topup-modal__quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.topup-modal__quick-btn {
    flex: 1 1 calc(33% - 0.5rem);
    min-width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.5rem;
    border: 1.5px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-md, 6px);
    background: #fff;
    cursor: pointer;
    color: var(--color-text, #333);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.topup-modal__quick-btn-votes {
    font-size: 0.85rem;
    font-weight: 700;
}

.topup-modal__quick-btn-cost {
    font-size: 0.75rem;
    opacity: 0.75;
}

.topup-modal__quick-btn:hover,
.topup-modal__quick-btn.is-selected {
    border-color: var(--color-secondary, #667eea);
    background: var(--color-secondary, #667eea);
    color: #fff;
}

.topup-modal__quick-btn--exact {
    border-color: #e74c3c;
    color: #e74c3c;
}

.topup-modal__quick-btn--exact:hover,
.topup-modal__quick-btn--exact.is-selected {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

/* ── Custom vote amount — dual linked R / votes inputs ───────────────── */
.topup-modal__custom-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.1rem 0.85rem;
}

.topup-modal__custom-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    transition: border-color 0.15s;
}

.topup-modal__custom-field:focus-within {
    border-color: var(--color-secondary, #667eea);
}

.topup-modal__custom-for {
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--color-text-light, #999);
}

.topup-modal__currency {
    padding: 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-light, #666);
    background: #f8f9fa;
    align-self: stretch;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--color-border, #e0e0e0);
    flex-shrink: 0;
}

.topup-modal__custom-votes-label {
    padding: 0 0.6rem;
    font-size: 0.85rem;
    color: var(--color-text-light, #666);
    background: #f8f9fa;
    align-self: stretch;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--color-border, #e0e0e0);
    flex-shrink: 0;
}

.topup-modal__custom-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    padding: 0.6rem 0.6rem;
    font-size: max(0.9rem, 16px);
    color: var(--color-text, #333);
    background: transparent;
}

.topup-modal__custom-input::placeholder {
    color: #bbb;
}

/* Hide native number spinner — same reasoning as the vote panel's custom
   input: inconsistent across platforms, invisible on most mobile keyboards. */
.topup-modal__custom-input::-webkit-outer-spin-button,
.topup-modal__custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.topup-modal__custom-input[type="number"] {
    -moz-appearance: textfield;
}

/* ── Special vote bundle dropdown row ─────────────────────── */
.topup-modal__bundle-row {
    display: flex;
}

/* ── Cooling-off notice (ECTA s44) ────────────────────────── */
/* ── Cooling-off notice (ECTA s44) — fine print, below Pay ─── */
.topup-modal__terms-notice {
    margin: 0.85rem 0 0;
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--color-text-muted, #999);
    text-align: center;
}

.topup-modal__terms-notice a {
    color: inherit;
    text-decoration: underline;
}

/* ── Pay button ───────────────────────────────────────────── */
.topup-modal__pay-btn {
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.85rem;
    background: linear-gradient(135deg, var(--color-secondary, #667eea), #764ba2);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg, 8px);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    letter-spacing: 0.02em;
}

.topup-modal__pay-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.topup-modal__pay-btn:not(:disabled):hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.topup-modal__pay-btn:not(:disabled):active {
    transform: translateY(0);
}

/* ── Spinner overlay ──────────────────────────────────────── */
.topup-modal__processing {
    display: none;
    border-radius: var(--radius-xl, 12px);
}

.topup-modal__processing.is-visible {
    display: flex;
}

/* ── Payment success overlay ──────────────────────────────── */
/* Sits in the same stacking context as the processing overlay. */
.topup-modal__success-overlay {
    display: none;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl, 12px);
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    z-index: 10;
}

.topup-modal__success-overlay.is-visible {
    display: flex;
}

.topup-modal__success-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #18c07a;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topup-modal__success-msg {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topup-modal__success-sub {
    font-size: 0.875rem;
    color: #555;
    margin: 0;
}

/* ── Inline error message ─────────────────────────────────── */
/* Shown by _showError() — no alert(), keeps user in context. */
.topup-modal__error {
    display: none;
    margin: 0.75rem 0;
    padding: 0.6rem 0.875rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Sticky variant: the message carries an instruction (e.g. approve the payment
   in your banking app), so it has no timer and shows a dismiss button.
   No display rule here -- JS shows/hides via the base rule above. */
.topup-modal__error--sticky {
    position: relative;
    padding-right: 2.5rem;
}

.topup-modal__error-dismiss {
    position: absolute;
    top: 0.15rem;
    right: 0.25rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.topup-modal__error-dismiss:active {
    background: rgba(220, 38, 38, 0.12);
}

/* First-time heads-up above Pay, shown only when the member has no saved card.
   No display rule: it is toggled with the hidden attribute from JS. */
.topup-modal__first-card-hint {
    margin: 1rem 0 0;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid #2165c4;
    border-radius: 8px;
    background: #eef4ff;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #1e3a5f;
    text-align: left;
}

/* ── Card picker (multi-card users) ──────────────────────── */
.topup-modal__card-picker {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    transition: grid-template-rows 0.28s ease, margin-top 0.28s ease;
}

.topup-modal__card-picker.is-ready {
    grid-template-rows: 1fr;
    margin-top: 1rem;
}

.topup-modal__card-picker-inner {
    overflow: hidden;
    min-height: 0;
}

.topup-modal__card-picker-hint {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: #d64545;
    text-align: center;
}

.topup-modal__card-picker-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6f7a8a;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.topup-modal__card-picker-scroll {
    position: relative;
}

.topup-modal__card-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 10.5rem;
    overflow-y: auto;
}

.topup-modal__card-picker-fade {
    display: none;
    position: absolute;
    left: 1px;
    right: 1px;
    height: 1.5rem;
    pointer-events: none;
}

.topup-modal__card-picker-fade--top {
    top: 0;
    background: linear-gradient(to bottom, var(--surface-2, #fff), rgba(255, 255, 255, 0));
    border-radius: 10px 10px 0 0;
}

.topup-modal__card-picker-fade--bottom {
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface-2, #fff));
    border-radius: 0 0 10px 10px;
}

.topup-modal__card-picker-scroll.has-fade-top .topup-modal__card-picker-fade--top,
.topup-modal__card-picker-scroll.has-fade-bottom .topup-modal__card-picker-fade--bottom {
    display: block;
}

.topup-modal__card-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem;
    margin-top: 0.6rem;
    border: 1px dashed #c3ccd8;
    border-radius: var(--radius, 8px);
    background: none;
    font-size: 0.8rem;
    color: #5f6b7a;
    cursor: pointer;
}

.topup-modal__card-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Default status now conveyed by the badge only — blue border/background
   is reserved for .is-selected so "currently selected" stays unambiguous. */
.topup-modal__card-option.is-default {
    /* no visual override — badge is the sole indicator */
}

.topup-modal__card-option:active {
    background: #dce9fa;
}

.topup-modal__card-option-type {
    font-weight: 700;
    color: #1a1a1a;
    text-transform: capitalize;
}

.topup-modal__card-option-last4 {
    color: #3a4560;
    white-space: nowrap;
}

.topup-modal__card-option-bank {
    font-size: 0.75rem;
    color: #8a94a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

.topup-modal__card-option-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
}

/* Chevron — signals "tap to charge" on real, selectable cards only.
   font-size chains through --card-chevron-size -> --chevron-size -> 18px
   (base.css) — unifies with admin-grid's card chevron and the compact
   picker's SVG chevron below. Was hardcoded to 1.3rem (≈20.8px) before
   2026-08-26, independently of every other card chevron in the app. */
.topup-modal__card-option-chevron {
    margin-left: auto;
    padding-left: 0.25rem;
    font-size: var(--card-chevron-size, var(--chevron-size, 18px));
    line-height: 1;
    color: #a8b3c4;
    flex-shrink: 0;
}

/* Stronger CTA feel on hover/active — reinforces "this is a button" */
.topup-modal__card-option:hover {
    border-color: #b8cdec;
    background: #edf3fc;
}

.topup-modal__card-option:hover .topup-modal__card-option-chevron {
    color: #2165c4;
}

/* Declined card — shown, not interactive */
.topup-modal__card-option.is-declined {
    cursor: default;
    background: #fef2f2;
    border-color: #fecaca;
    opacity: 0.85;
}

.topup-modal__card-option.is-declined:hover {
    background: #fef2f2;
    border-color: #fecaca;
}

.topup-modal__card-option-declined-reason {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: #dc2626;
    margin-top: 0.15rem;
}

/* Add new card — visually distinct from real saved cards (dashed, neutral) */
.topup-modal__card-option--add {
    border-style: dashed;
    border-color: #c3ccd8;
    background: #fff;
    color: #3a4560;
    font-weight: 600;
    justify-content: center;
}

.topup-modal__card-option--add:hover {
    border-color: #2165c4;
    background: #f8fafd;
}

/* Cancel — deliberately the quietest row, an escape hatch not an action */
.topup-modal__card-option--cancel {
    border: none;
    background: none;
    color: #8b95a5;
    font-weight: 500;
    justify-content: center;
    padding: 0.6rem 1rem;
}

.topup-modal__card-option--cancel:hover {
    background: #f5f6f8;
    color: #5a6472;
}

/* ── Dev simulation panel ──────────────────────────────────── */
/* Shown in place of the Paystack iframe for users with role=dev.
   Only rendered on local/staging — data-dev="1" is never set on production. */
.topup-modal__dev-badge {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #7c3aed;
    background: #f3eeff;
    border: 1px solid #c4b5fd;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
}

.topup-modal__dev-panel {
    margin-top: 0.75rem;
    padding: 1rem;
    background: #f9f6ff;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
}

.topup-modal__dev-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #7c3aed;
    margin-bottom: 0.9rem;
    line-height: 1.4;
}

.topup-modal__dev-notice strong {
    font-weight: 700;
}

.topup-modal__dev-outcomes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.topup-modal__dev-btn {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: opacity 0.15s, transform 0.1s;
    background: #fff;
    border: 1px solid;
}

.topup-modal__dev-btn:active {
    transform: translateY(1px);
}

.topup-modal__dev-btn--success {
    color: #16a34a;
    border-color: #86efac;
}

.topup-modal__dev-btn--success:hover {
    background: #f0fdf4;
}

.topup-modal__dev-btn--decline {
    color: #ea580c;
    border-color: #fdba74;
}

.topup-modal__dev-btn--decline:hover {
    background: #fff7ed;
}

.topup-modal__dev-btn--error {
    color: #dc2626;
    border-color: #fca5a5;
}

.topup-modal__dev-btn--error:hover {
    background: #fef2f2;
}

.topup-modal__dev-cancel {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #9ca3af;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s;
}

.topup-modal__dev-cancel:hover {
    background: #f9fafb;
}

/* ── Compact card picker (vote-flow entry point) ────────────────────────
   Used when TopupModal.open() is called with compact=true. Renders as a
   single trigger row (selected card + chevron) that expands in-place into
   a plain list of the other saved cards. No scroll/fade — the whole point
   of this mode is that it doesn't need to manage overflow. */

.topup-modal__card-picker-list--compact {
    max-height: none;
    overflow-y: visible;
    padding-bottom: 0;
}

.topup-modal__card-picker-trigger {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    border: 1px solid #c3ccd8;
    border-radius: var(--radius, 8px);
    background: #eef4fc;
    /* light blue tint — always the selected card */
    padding: 0.35rem 0.8rem 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
    /* Reset native <button> chrome — iOS Safari's default button styling can
       interfere with custom flex/column layouts inside a <button> in a way
       desktop browsers tolerate; without this the "Default" strip above the
       main info row could bunch up against it instead of sitting on its own
       line. */
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    margin: 0;
}

.topup-modal__card-picker-trigger.is-expanded {
    border-color: #2165c4;
    background: #e4edfb;
    /* slightly deeper while open, for clear active feedback */
}

/* Single saved card — nothing to expand into, so the row shouldn't invite
   a tap it can't do anything with. Chevron itself is omitted in the JS
   (see topup-modal.js's #buildTriggerRow); this covers the rest of the
   "this looks interactive" affordance. */
.topup-modal__card-picker-trigger.is-single {
    cursor: default;
}

.topup-modal__card-picker-trigger-toprow {
    display: flex;
    justify-content: flex-end;
    min-height: 0.75rem;
    /* reserves the strip even when no Default label */
}

/* Pill badge — matches .wallet-view__card-badge (Wallet & Payments' saved-
   card list) exactly, since the same "Default" concept should look the
   same everywhere it appears (see chat: "the pills/buttons for 'default'
   dont look the same in Top up panel as they do on the card dropdown").
   Previously this was just colored text, no background/pill at all. */
.topup-modal__card-picker-trigger-default {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #2165c4;
    background: #dce9fa;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    line-height: 1.3;
}

.topup-modal__card-picker-trigger-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.topup-modal__card-picker-trigger-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.topup-modal__card-picker-trigger-info .topup-modal__card-option-type,
.topup-modal__card-picker-trigger-info .topup-modal__card-option-last4 {
    white-space: nowrap;
    color: #3a4560;
}

.topup-modal__card-picker-trigger-info .topup-modal__card-option-bank {
    font-size: 0.75rem;
    color: #8a94a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.topup-modal__card-picker-chevron {
    display: flex;
    align-items: center;
    color: #8a94a3;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

/* Overrides the inline SVG's width/height="14" attributes set in
   topup-modal.js — CSS wins over presentation attributes on SVG in every
   modern browser, so this brings the compact picker's chevron in line with
   the other two card chevrons above via the same shared variable chain. */
.topup-modal__card-picker-chevron svg {
    width: var(--card-chevron-size, var(--chevron-size, 18px));
    height: var(--card-chevron-size, var(--chevron-size, 18px));
}

.topup-modal__card-picker-trigger.is-expanded .topup-modal__card-picker-chevron {
    transform: rotate(180deg);
}

.topup-modal__card-picker-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    border: 1px solid #c3ccd8;
    border-radius: var(--radius, 8px);
    background: #fff;
    padding: 0.55rem 0.8rem;
    margin-top: 0.4rem;
    cursor: pointer;
}

.topup-modal__card-picker-row .topup-modal__card-option-bank {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topup-modal__card-picker-row .topup-modal__card-option-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.topup-modal__card-picker-expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
}

.topup-modal__card-picker-expand.is-expanded {
    grid-template-rows: 1fr;
}

.topup-modal__card-picker-expand-inner {
    overflow: hidden;
    min-height: 0;
}

.topup-modal__disclosure {
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.topup-modal__disclosure-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.70rem 0.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-light, #888);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Reset native <button> chrome — was <summary> before, which has none */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    margin: 0;
    width: 100%;
}

.topup-modal__disclosure-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.topup-modal__disclosure.is-expanded .topup-modal__disclosure-chevron {
    transform: rotate(-180deg);
}

.topup-modal__disclosure-body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition:
        grid-template-rows var(--np-duration-fast) var(--np-ease-accelerate);
}

.topup-modal__disclosure.is-expanded .topup-modal__disclosure-body {
    grid-template-rows: 1fr;
    visibility: visible;
    transition:
        grid-template-rows var(--np-duration-fast) var(--np-ease-decelerate);
}

.topup-modal__disclosure-body-inner {
    overflow: hidden;
    min-height: 0;
}

/* ── Paystack mode pill ───────────────────────────────────── */
/* Shown to admin/dev on staging/local only (see helpers/paystack-mode.php),
   in the modal header AND on Settings -> Wallet & Payments. Lives in this
   file because this stylesheet is already loaded wherever the modal is, which
   includes Settings; it is deliberately a standalone block (not a
   .topup-modal__ element) so both places can use it. The label text and the
   --test/--live modifier are swapped together by Settings' switch handler
   (applyPaystackModeUi). TEST = amber ("not real money"), LIVE = danger red
   ("real cards, real money") -- both from tokens.css. */
.paystack-mode-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.15rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}

.paystack-mode-pill--test {
    background: var(--color-review-bg);
    border-color: var(--color-review-border);
    color: var(--color-review-text);
}

.paystack-mode-pill--live {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-text);
    color: var(--color-danger-text);
}