/* =========================================================================
   QuickPay Payment Design System — Patterns
   -------------------------------------------------------------------------
   Reusable, Stripe-inspired component patterns built on tokens.css. Load
   AFTER tokens.css and after MudBlazor's stylesheet (these selectors
   intentionally override a few Mud defaults).

   Page scope: `.cybs-page` paints a light surface over the global brand-green
   body for payment pages only — the global body (login, etc.) is untouched.

   Class prefix: .cybs-*  (originated in the Cybersource checkout prototype;
   reuse on any payment-method / checkout surface).
   ========================================================================= */

/* ---- Page shell ------------------------------------------------------- */
.cybs-page {
    position: relative;
    color: var(--cy-text);
    font-family: var(--cy-font);
}

/* Scoped light surface that paints over the global green body for payment pages */
.cybs-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(53, 130, 60, 0.07), transparent 55%),
        radial-gradient(90% 60% at 0% 100%, rgba(53, 130, 60, 0.05), transparent 60%),
        #f5f8f6;
}

.cybs-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
}

.cybs-portal-main .cybs-shell {
    padding: 0;
}

.cybs-workbench-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    box-sizing: border-box;
    min-height: var(--cy-workbench-banner-offset, 56px);
    padding: 0.55rem 1rem;
    background: var(--cy-primary-strong);
    color: #fff;
    box-shadow: var(--cy-shadow-sm);
    font-size: 0.92rem;
    font-weight: 400;
}

.cybs-workbench-banner a:not(.fp-btn) {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cybs-workbench-banner a:not(.fp-btn):hover,
.cybs-workbench-banner a:not(.fp-btn):focus-visible {
    color: #fff;
}

.cybs-workbench-return.fp-btn {
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
}

.cybs-workbench-return.fp-btn:hover,
.cybs-workbench-return.fp-btn:focus-visible {
    text-decoration: none;
}

.cybs-portal:has(.cybs-workbench-banner) {
    --cy-workbench-banner-offset: 56px;
    padding-top: var(--cy-workbench-banner-offset);
}

.cybs-portal:has(.cybs-workbench-banner) .cybs-sidebar,
.cybs-portal:has(.cybs-workbench-banner) .cybs-portal-topbar {
    top: var(--cy-workbench-banner-offset);
}

.cybs-portal:has(.cybs-workbench-banner) .cybs-sidebar {
    height: calc(100vh - var(--cy-workbench-banner-offset));
}

.cybs-portal:has(.cybs-workbench-banner) .cybs-sidebar-scrim {
    top: var(--cy-workbench-banner-offset);
}

@media (max-width: 620px) {
    .cybs-portal:has(.cybs-workbench-banner) {
        --cy-workbench-banner-offset: 104px;
    }
}

/* ---- Top bar ---------------------------------------------------------- */
.cybs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cybs-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

/* Green Frontpoint wordmark on the transparent light page background */
.cybs-brand-mark {
    display: inline-flex;
    align-items: center;
}

.cybs-brand-mark img {
    height: 48px;
    width: auto;
    display: block;
}

.cybs-brand-tag {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cy-text-muted);
}

.cybs-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--cy-border-strong);
    background: var(--cy-surface);
    color: var(--cy-text-muted);
}

.cybs-status-pill .cybs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cy-text-faint);
}

.cybs-status-pill.is-live {
    color: var(--cy-primary-strong);
    border-color: var(--cy-tint-14);
    background: var(--cy-tint-06);
}

.cybs-status-pill.is-live .cybs-dot {
    background: var(--cy-primary);
    box-shadow: 0 0 0 3px var(--cy-tint-14);
}

.cybs-status-pill.is-mock .cybs-dot {
    background: #d9a514;
}

/* ---- Inline note (informational / prototype) -------------------------- */
.cybs-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.95rem;
    margin-bottom: 1.75rem;
    border-radius: var(--cy-radius-sm);
    background: #fff8e8;
    border: 1px solid #f3e2b6;
    color: #7a5a12;
    font-size: 0.84rem;
    line-height: 1.45;
}

.cybs-note .mud-icon-root {
    color: #c79215;
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ---- Back link -------------------------------------------------------- */
/* color uses !important to override the global `a { ...green... !important }` */
.cybs-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cy-text-muted) !important;
    text-decoration: none;
    transition: color 0.15s ease, gap 0.15s ease;
}

.cybs-back:hover {
    color: var(--cy-primary-strong) !important;
    gap: 0.45rem;
}

.cybs-back .mud-icon-root {
    font-size: 1.05rem;
}

/* ---- Heading ---------------------------------------------------------- */
.cybs-head {
    margin-bottom: 1.5rem;
}

.cybs-title {
    margin: 0 0 0.45rem;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

/* Larger display title for hero / landing surfaces (e.g. the Home page). */
.cybs-title--xl {
    font-size: 2.4rem;
}

.cybs-subtitle {
    margin: 0;
    max-width: 60ch;
    color: var(--cy-text-muted);
    font-size: 1.02rem;
    line-height: 1.5;
}

.cybs-subtitle b,
.cybs-subtitle strong {
    color: var(--cy-text);
    font-weight: 700;
}

/* ---- Dashboard --------------------------------------------------------- */
.cybs-dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.8rem;
}

.cybs-dashboard .cybs-title {
    font-weight: 700;
}

.cybs-account-pill {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.9rem 0.55rem 0.6rem;
    background: var(--cy-surface);
    border: 1px solid var(--cy-border);
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(16, 40, 28, 0.05);
}

.cybs-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(53, 130, 60, 0.12);
    color: var(--cy-primary-strong);
    font-size: 0.78rem;
    font-weight: 800;
}

.cybs-account-copy {
    display: grid;
    gap: 0.1rem;
    line-height: 1.15;
}

.cybs-account-name {
    color: var(--cy-text);
    font-size: 0.9rem;
    font-weight: 700;
}

.cybs-account-number {
    color: var(--cy-text-faint);
    font-size: 0.78rem;
}

.cybs-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1.4rem;
    align-items: stretch;
}

.cybs-dashboard-grid > .cybs-hero:only-child {
    grid-column: 1 / -1;
}

.cybs-dashboard-side {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-width: 0;
}

.cybs-dashboard-side-no-flex {
    gap: 1.4rem;
    min-width: 0;
}

.cybs-dashboard-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    padding: 1.5rem 1.6rem;
}

.cybs-tile-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--cy-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cybs-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(53, 130, 60, 0.10);
    color: var(--cy-primary-strong);
}

.cybs-dashboard-section {
    margin-top: 1.4rem;
}

@media (max-width: 920px) {
    .cybs-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard tile body (next payment / payment method) */
.cybs-dashboard-tile {
    gap: 0.55rem;
}

.cybs-tile-value {
    margin-top: 0.5rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cy-text);
}

.cybs-tile-meta {
    font-size: 0.88rem;
    color: var(--cy-text-muted);
}

.cybs-tile-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.5rem;
}

.cybs-tile-link {
    align-self: flex-start;
    margin-top: 0.6rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cy-primary-strong);
    text-decoration: none;
}

.cybs-tile-link:hover {
    text-decoration: underline;
}

/* Recent activity */
.cybs-activity-account {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cy-text-faint);
}

/* Three columns - [label over date] [method - amount] [status] - sized to their widest content
   across the whole list, so everything lines up without any element needing a min-width to hold
   a column open. Rows are subgrids of the list so they share those tracks. */
.cybs-activity-list {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 1rem;
    margin-top: 0.4rem;
}

.cybs-activity-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    padding: 0.95rem 0;
    border-bottom: 1px solid #eef1ef;
}

/* The empty state is a sibling of the rows, so it has to opt out of the columns. */
.cybs-activity-list > .cybs-empty {
    grid-column: 1 / -1;
}

.cybs-activity-row:last-child {
    border-bottom: none;
}

/* Row reads [label over date] .... [method] [amount] [status], the trailing three
   right-aligned. `flex: 1 1 auto` here absorbs the slack and pushes them over. */
.cybs-activity-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* The method and the amount are one phrase, so they share a column and one tight gap. The
   column is wider than most rows' content; keeping the phrase flush right puts all of that
   slack ahead of it, which is why the gap between the card, the dash and the amount stays
   the same on every row. */
.cybs-activity-payment {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* Compact restatement of the payment-method tile for a list row. */
.cybs-activity-method {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cybs-activity-method .cybs-method-brand {
    width: 34px;
    height: 24px;
    border-radius: 6px;
}

.cybs-activity-method .cybs-method-brand .mud-icon-root {
    font-size: 0.95rem;
}

.cybs-activity-method .cybs-method-line {
    flex-wrap: nowrap;
    gap: 0.35rem;
}

.cybs-activity-method .cybs-method-name,
.cybs-activity-method .cybs-method-dots {
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Decorative divider between the method and the amount. Rendered only when there is a method
   to separate, and spaced by the phrase's own gap on both sides so it reads as joining the
   two rather than trailing the card. */
.cybs-activity-sep {
    flex: 0 0 auto;
    color: var(--cy-text-muted);
    font-size: 1rem;
    line-height: 1;
    user-select: none;
}

.cybs-activity-label {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--cy-text);
}

.cybs-activity-date {
    font-size: 0.82rem;
    color: var(--cy-text-faint);
}

.cybs-activity-amount {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--cy-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Narrow screens: the columns will not fit, so drop back to a wrapping flex row where the
   label/date takes its own line and the payment phrase and status sit beneath it. The phrase
   stays intact - only where it sits changes. */
@media (max-width: 620px) {
    .cybs-activity-list {
        display: flex;
        flex-direction: column;
    }

    .cybs-activity-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    .cybs-activity-main {
        flex: 1 1 100%;
    }

    .cybs-activity-payment {
        flex: 1 1 auto;
        justify-content: flex-start;
    }
}

/* Processing badge (amber) — pairs with the existing .cybs-badge-ok */
.cybs-badge-warn {
    color: #946a00;
    background: rgba(210, 154, 46, 0.16);
}

.cybs-badge-warn .mud-icon-root {
    color: #d29a2e;
}

/* Pay-balance amount summary card */
.cybs-paysummary {
    text-align: left;
}

.cybs-paysummary + .cybs-payment-details-card {
    margin-top: 1.4rem;
}

/* ---- Layout: main + sticky rail --------------------------------------- */
.cybs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 1.25rem;
    align-items: start;
}

.cybs-main {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.cybs-rail {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
    position: sticky;
    top: 1.25rem;
}

@media (max-width: 880px) {
    .cybs-grid {
        grid-template-columns: 1fr;
    }
    .cybs-rail {
        position: static;
    }
}

/* ---- Cards ------------------------------------------------------------ */
.cybs-card {
    background: var(--cy-surface);
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius);
    box-shadow: var(--cy-shadow-sm);
    padding: 1.5rem 1.6rem;
}

.cybs-card--flush {
    padding: 0;
    overflow: hidden;
}

.cybs-card-head {
    margin-bottom: 1.1rem;
}

.cybs-card-head--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cybs-card-title {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cybs-card-sub {
    margin: 0.25rem 0 0;
    color: var(--cy-text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.cybs-mt-0 { margin-top: 0; }
.cybs-mt-2 { margin-top: 0.75rem; }

.cybs-secure {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cy-primary-strong);
    background: var(--cy-tint-06);
    border-radius: 9999px;
    padding: 0.28rem 0.65rem;
}

.cybs-secure .mud-icon-root {
    font-size: 1rem;
}

.cybs-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--cy-text-muted);
    font-size: 0.9rem;
}

/* ---- Account key/value ------------------------------------------------ */
.cybs-kv {
    margin: 0;
    display: grid;
    gap: 0.85rem;
}

.cybs-kv > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.cybs-kv dt {
    color: var(--cy-text-muted);
    font-size: 0.82rem;
}

.cybs-kv dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* ---- Saved payment method (Stripe-style row) -------------------------- */
.cybs-method {
    border-color: var(--cy-tint-14);
    box-shadow: var(--cy-shadow-md);
}

.cybs-method-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius-sm);
    background: linear-gradient(180deg, var(--cy-tint-06), rgba(255, 255, 255, 0));
}

.cybs-method-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cy-primary) 0%, var(--cy-primary-bright) 100%);
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(31, 80, 38, 0.7);
}

/* Card-brand accents (the default brand badge stays Frontpoint green) */
/* The `i` flag matches the attribute value case-insensitively. Card type reaches the UI with
   inconsistent casing depending on which gateway path wrote it ("Discover", "discover", "VISA"),
   and Amex is stored as "Amex" but lowercased to "american express" on the CyberSource path,
   so both spellings are listed. */
.cybs-method-brand[data-brand="Visa" i]             { background: linear-gradient(135deg, #1a1f71, #2b3fae); }
.cybs-method-brand[data-brand="Mastercard" i]       { background: linear-gradient(135deg, #c0392b, #eb7d2b); }
.cybs-method-brand[data-brand="Amex" i],
.cybs-method-brand[data-brand="American Express" i] { background: linear-gradient(135deg, #1d6fb8, #2aa5d6); }
.cybs-method-brand[data-brand="Discover" i]         { background: linear-gradient(135deg, #d9772b, #f1a13a); }

/* A bank account is not a card brand. It keeps the Frontpoint green tile, stated
   explicitly rather than relying on falling through the accents above — the value
   those accents key off is CustomerBillingInfo.CreditCardType, which on older ACH
   rows can still hold a stale card brand and would tint the tile with it. */
.cybs-method-brand--bank { background: linear-gradient(135deg, var(--cy-primary) 0%, var(--cy-primary-bright) 100%); }

.cybs-method-brand .mud-icon-root {
    font-size: 1.15rem;
}

/* Logo variant: a neutral tile that frames full-colour brand artwork
   (official Visa / Mastercard / Amex / Maestro marks) instead of a gradient. */
.cybs-method-brand--logo {
    background: #fff;
    border: 1px solid var(--cy-border);
    box-shadow: none;
    padding: 3px 5px;
}

.cybs-method-brand--logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.cybs-method-info {
    flex: 1 1 auto;
    min-width: 0;
}

.cybs-method-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cybs-method-name {
    font-weight: 650;
    font-size: 0.95rem;
}

.cybs-method-name-skeleton {
    font-weight: 650;
    font-size: 0.95rem;
    width: 20%;
}

.cybs-method-dots {
    color: var(--cy-text-muted);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.cybs-method-meta {
    margin-top: 0.2rem;
    color: var(--cy-text-faint);
    font-size: 0.8rem;
}

.cybs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 9999px;
    padding: 0.25rem 0.55rem 0.25rem 0.45rem;
}

.cybs-badge-ok {
    color: var(--cy-primary-strong);
    background: var(--cy-tint-10);
}

.cybs-badge-ok .mud-icon-root {
    font-size: 0.95rem;
    color: var(--cy-primary);
}

.cybs-token {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.25rem;
}

.cybs-token-label {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cy-text-faint);
}

.cybs-token-id {
    font-family: var(--cy-font-mono);
    font-size: 0.78rem;
    color: var(--cy-text);
    background: #f1f4f2;
    border: 1px solid var(--cy-border);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    word-break: break-all;
}

/* ---- Inline error ----------------------------------------------------- */
.cybs-inline-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--cy-radius-sm);
    background: var(--cy-danger-tint);
    border: 1px solid var(--cy-danger-border);
    color: var(--cy-danger-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.cybs-inline-error .mud-icon-root {
    color: var(--cy-danger);
    flex: 0 0 auto;
}

/* ---- Action buttons ---------------------------------------------------- */
.cybs-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.cybs-page .cybs-btn {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    border-radius: var(--cy-radius-sm);
    padding: 0.55rem 1.15rem;
}

/* Large CTA — matches the prototype's primary action buttons (Pay, Save, Add). */
.cybs-page .cybs-btn-lg {
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    border-radius: 12px;
}

.cybs-page .cybs-btn-primary {
    background-color: var(--cy-primary);
    color: #fff !important;
    box-shadow: 0 10px 24px -12px rgba(31, 80, 38, 0.7);
}

.cybs-page .cybs-btn-primary:hover {
    background-color: var(--cy-primary-strong);
}

.cybs-page .cybs-btn-ghost {
    border: 1px solid var(--cy-border-strong);
    color: var(--cy-text) !important;
    background: var(--cy-surface);
}

.cybs-page .cybs-btn-ghost:hover {
    background: #f3f6f4;
    border-color: var(--cy-text-faint);
}

.cybs-page .cybs-btn-text {
    color: var(--cy-primary-strong) !important;
}

.cybs-page .cybs-btn-text:hover {
    background: var(--cy-tint-06);
}

.cybs-page .cybs-btn:disabled {
    opacity: 0.5;
}

/* ---- Disclosures (collapsible payload / settings) --------------------- */
.cybs-disclosure > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1.05rem 1.45rem;
    user-select: none;
}

.cybs-disclosure > summary::-webkit-details-marker {
    display: none;
}

.cybs-disclosure > summary:hover {
    background: #f6f8f7;
}

.cybs-disclosure .cybs-chevron {
    color: var(--cy-text-faint);
    transition: transform 0.2s ease;
}

.cybs-disclosure[open] .cybs-chevron {
    transform: rotate(180deg);
}

.cybs-disclosure-body {
    padding: 0 1.45rem 1.4rem;
}

/* Option row — a subtle tinted panel for an inline choice above a form,
   e.g. "Use my account contact information". */
.cybs-optionrow {
    margin-bottom: 1rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius-sm);
    background: var(--cy-tint-06);
}

.cybs-optionrow .mud-checkbox {
    margin: 0;
}

/* Collapsed billing summary — when "Use my account contact information" is on,
   the form folds into this tidy read-only card (Stripe address pattern) instead
   of rendering a disabled 9-field form. Echoes the saved-card row's look. */
.cybs-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius-sm);
    background: linear-gradient(180deg, var(--cy-tint-06), rgba(255, 255, 255, 0));
}

.cybs-summary-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--cy-tint-10);
    color: var(--cy-primary-strong);
}

.cybs-summary-icon .mud-icon-root {
    font-size: 1.15rem;
}

.cybs-summary-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cybs-summary-name {
    font-weight: 650;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.cybs-summary-line {
    margin-top: 0.15rem;
    color: var(--cy-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-word;
}

/* Stacked summaries — a vertical list of .cybs-summary rows (e.g. processed
   payments) with consistent spacing. */
.cybs-payment-list {
    display: grid;
    gap: 0.75rem;
}

.cybs-reveal {
    animation: cybsRise 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .cybs-reveal {
        animation: none;
    }
}

/* ---- Checkout element (Stripe Payment Element look) ------------------- *
   The hosted widget renders these .cybs-checkout-* nodes via JS; the rules
   below turn them into a single grouped, hairline-divided card field.       */
.cybs-checkout-host {
    min-height: 0;
    border: none;
    padding: 0;
    background: transparent;
}


.cybs-widget-wrap {
    position: relative;
    min-height: 8.5rem;
}

.cybs-payment-details-card {
    position: relative;
}

.cybs-widget-loading-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--cy-surface) 88%, transparent);
    border-radius: var(--cy-radius-sm);
    z-index: 2;
}

/* Busy: the form is coming back, so it keeps its box under the spinner overlay. */
.cybs-checkout-host.is-loading {
    visibility: hidden;
}

/* Blocked: an empty-state panel takes the form's place in flow, so the host has to
   give up its space rather than leave a gap above the panel. It stays in the DOM
   because the widget script resolves it by id when the customer retries. */
.cybs-checkout-host.is-hidden {
    display: none;
}

.cybs-checkout-shell {
    display: grid;
    gap: 0.85rem;
}

.cybs-checkout-banner {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.cybs-checkout-banner strong {
    font-size: 0.9rem;
    font-weight: 650;
}

/* Live view: hide the mode banner the widget renders inside the card.
   (The footnote footer is hidden by its own rule below.) The same info
   is intentionally unobtrusive in the customer checkout. */
.cybs-checkout-banner {
    display: none;
}

.cybs-checkout-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background-color: var(--cy-tint-10);
    color: var(--cy-primary-strong);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.6rem;
}

/* The grouped, single-box card element with internal hairline dividers */
.cybs-checkout-fields {
    display: grid;
    gap: 0;
    border: 1px solid var(--cy-border-strong);
    border-radius: var(--cy-radius-sm);
    background: var(--cy-surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cybs-checkout-fields:focus-within {
    border-color: var(--cy-primary);
    box-shadow: var(--cy-ring);
}

.cybs-checkout-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--cy-border);
}

.cybs-checkout-field {
    display: block;
    min-width: 0;
}

.cybs-checkout-row .cybs-checkout-field + .cybs-checkout-field {
    border-left: 1px solid var(--cy-border);
}

/* Labels become accessible-only; placeholders carry the hint (Stripe-style) */
.cybs-checkout-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cybs-checkout-field input {
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0.95rem 1rem;
    font-size: 0.95rem;
    color: var(--cy-text);
}

.cybs-checkout-field input::placeholder {
    color: var(--cy-text-faint);
}

.cybs-checkout-field input:focus {
    outline: none;
    box-shadow: none;
    background: var(--cy-tint-06);
}

/* Card brand glyph inside the card-number field */
.cybs-checkout-field input[data-cybs-field="cardNumber"] {
    padding-right: 3.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335823c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 26px;
}

.cybs-checkout-field input[data-cybs-field="cardNumber"]:focus {
    background-color: var(--cy-tint-06);
}

.cybs-checkout-note {
    color: var(--cy-text-faint);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* The footer is not part of the customer checkout experience. */
.cybs-checkout-footer {
    display: none;
}

/* ---- Code / payload panel --------------------------------------------- */
.cybs-checkout-json {
    background-color: #0f2c20;
    border-radius: var(--cy-radius-sm);
    color: #d8f5e6;
    font-family: var(--cy-font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0.75rem 0 0;
    max-height: 360px;
    overflow: auto;
    padding: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Narrow shell (settings-style single column) ---------------------- */
.cybs-shell--narrow {
    max-width: 720px;
}

/* ---- Heading with a trailing action ----------------------------------- */
.cybs-head--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}

.cybs-head--row .cybs-head-text {
    min-width: 0;
}

/* Holds the trailing action against the right edge once the row wraps, where
   space-between has nothing left to push it against. */
.cybs-head--row .cybs-head-action {
    margin-left: auto;
}

/* ---- Payment-method list (managed rows) ------------------------------- */
.cybs-method-list {
    display: grid;
}

.cybs-method-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 0;
    border-top: 1px solid var(--cy-border);
}

.cybs-method-item:first-child {
    border-top: none;
    padding-top: 0;
}

.cybs-method-item:last-child {
    padding-bottom: 0;
}

.cybs-method-list--select {
    margin: 1rem 0 1.25rem;
}

.cybs-method-list--select .cybs-method-item:first-child {
    padding-top: 1rem;
}

.cybs-method-list--select .cybs-method-item:last-child {
    padding-bottom: 1rem;
}

.cybs-method-item--select {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-inline: 1rem;
    cursor: pointer;
}

.cybs-method-item--select:hover:not(:disabled),
.cybs-method-item--select.is-selected {
    background: var(--cy-tint-10);
}

.cybs-method-item--select.is-selected {
    padding-left: calc(1rem + 3px);
}

.cybs-method-item--select.is-selected::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--cy-primary);
    content: "";
    pointer-events: none;
}

.cybs-method-item--select[aria-disabled="true"] {
    cursor: wait;
    opacity: 0.65;
}

.cybs-method-select-icon {
    margin-left: auto;
    color: var(--cy-primary);
}

.cybs-default-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cy-primary-strong);
    background: var(--cy-tint-10);
    border-radius: 9999px;
    padding: 0.18rem 0.5rem;
}

/* Same shape as the Default pill, in the danger palette. The word carries the meaning, so the
   colour is never the only signal. */
.cybs-expired-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cy-danger-text);
    background: var(--cy-danger-tint);
    border-radius: 9999px;
    padding: 0.18rem 0.5rem;
}

/* An expired card's brand art recedes so the red pill carries the row. Shared by the managed
   list, the payment-page chooser, and the dashboard tile. */
.cybs-method-item--expired .cybs-method-brand,
.cybs-tile-card--expired .cybs-method-brand {
    filter: grayscale(1);
    opacity: 0.55;
}

.cybs-method-item--expired .cybs-method-dots,
.cybs-tile-card--expired .cybs-method-dots {
    color: var(--cy-text-faint);
}

/* Payment-page chooser: an expired card stays listed, so the customer isn't left wondering where
   it went, but it cannot be chosen. */
.cybs-method-item--select.is-unavailable {
    cursor: not-allowed;
}

.cybs-method-item--select.is-unavailable:hover {
    background: none;
}

.cybs-method-item--select.is-unavailable .cybs-method-select-icon {
    color: var(--cy-text-faint);
    opacity: 0.5;
}

.cybs-method-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.cybs-linkbtn {
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--cy-font);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cy-primary-strong);
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.cybs-linkbtn.fp-btn {
    padding: 0.3rem 0.45rem;
    border: none;
    color: var(--cy-primary-strong);
    background: none;
    box-shadow: none;
}

.cybs-linkbtn:hover {
    background: var(--cy-tint-06);
}

.cybs-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    color: var(--cy-text-faint);
    transition: background 0.15s ease, color 0.15s ease;
}

.cybs-iconbtn.fp-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--cy-text-faint);
    background: none;
    box-shadow: none;
}

.cybs-iconbtn:hover {
    color: #c0392b;
    background: #fdecec;
}

/* ---- Empty state ------------------------------------------------------ */
.cybs-empty {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
}

.cybs-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--cy-tint-10);
    color: var(--cy-primary);
    margin-bottom: 0.25rem;
}

.cybs-empty-icon .mud-icon-root {
    font-size: 1.6rem;
}

/* The badge carries the news, so it comes in three tiers. Bare = good ("You're all set",
   "No payment methods yet"). --danger = something failed. --muted = blocked or waiting,
   where nothing is broken but nothing is resolved either: green would read as reassurance
   the state has not earned, red as an alarm it does not deserve. */
.cybs-empty-icon--danger {
    background: var(--cy-danger-tint);
    color: var(--cy-danger);
}

.cybs-empty-icon--muted {
    background: var(--cy-neutral-tint);
    color: var(--cy-text-muted);
}

.cybs-empty-title {
    font-size: 1.05rem;
    font-weight: 650;
}

.cybs-empty-text {
    margin: 0;
    max-width: 38ch;
    color: var(--cy-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.cybs-empty .cybs-actions {
    justify-content: center;
    margin-top: 0.6rem;
}

/* ---- Portal layout (persistent sidebar + content) --------------------- *
   A shared authenticated shell: a fixed-width left sidebar (brand + nav +
   sign out) beside the routed page. On small screens the sidebar collapses
   into a sticky top bar with a hamburger that opens a left slide-out drawer. */
.cybs-portal {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    font-family: var(--cy-font);
    color: var(--cy-text);
    background: #f5f8f6;
}

.cybs-sidebar {
    flex: 0 0 248px;
    width: 248px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 0;
    background: var(--cy-surface);
    border-right: 1px solid var(--cy-border);
    z-index: 30;
}

.cybs-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 1.5rem 1.4rem;
    margin-bottom: 0;
    border-bottom: 1px solid #eef1ef;
}

.cybs-sidebar-brand .cybs-brand-mark img,
.cybs-portal-topbar .cybs-brand-mark img {
    height: 30px;
}

/* The brand lockup is an <a> in the sidebar — strip the link underline/colour */
.cybs-portal .cybs-brand,
.cybs-portal .cybs-brand:hover {
    text-decoration: none;
}

.cybs-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-content: start;
    margin-top: 1.3rem;
    padding-right: 0.9rem;
}

.cybs-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 0;
    background: none;
    cursor: pointer;
    font-family: var(--cy-font);
    font-size: 0.97rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    color: var(--cy-text-muted) !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.cybs-nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
}

.cybs-nav-link.fp-btn {
    justify-content: flex-start;
    padding: 0.6rem 1.5rem;
    border: none;
    color: var(--cy-text-muted) !important;
    background: none;
    box-shadow: none;
}

.cybs-nav-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #f1f4f2;
    color: #6b7a70;
    transition: background 0.15s ease, color 0.15s ease;
}

.cybs-nav-link .mud-icon-root {
    font-size: 1.2rem;
    color: currentColor;
}

.cybs-nav-link:hover {
    background: var(--cy-tint-06);
    color: var(--cy-text) !important;
}

.cybs-nav-link:hover .cybs-nav-chip {
    color: var(--cy-primary-strong);
}

.cybs-nav-link.active {
    background: var(--cy-tint-10);
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    color: var(--cy-text) !important;
    font-weight: 700;
}

.cybs-nav-link.active::before {
    background: var(--cy-primary);
}

.cybs-nav-link.active .cybs-nav-chip {
    background: var(--cy-primary);
    color: #fff;
}

.cybs-sidebar-foot {
    margin-top: auto;
    padding: 1rem 1.5rem 0;
    border-top: 1px solid #eef1ef;
}

.cybs-sidebar-foot .cybs-nav-link,
.cybs-sidebar-foot .cybs-nav-link.fp-btn {
    padding: 0.45rem 0;
    border-radius: 0;
    background: none;
    color: var(--cy-text-muted) !important;
}

.cybs-sidebar-foot .cybs-nav-link::before {
    display: none;
}

.cybs-sidebar-foot .cybs-nav-link:hover {
    background: none;
    color: var(--cy-text) !important;
}

.cybs-portal-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    padding: 3rem 3rem 4rem;
    overflow-x: hidden;
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(53, 130, 60, 0.07), transparent 55%),
        radial-gradient(90% 60% at 0% 100%, rgba(53, 130, 60, 0.05), transparent 60%),
        #f5f8f6;
}

/* Desktop: force-hide*/
@media (min-width: 901px) {
    .cybs-portal-topbar,
    .cybs-sidebar-scrim,
    .cybs-sidebar-close,
    .cybs-sidebar-close.fp-btn {
        display: none !important;
    }
}

/* Mobile: force-show*/
@media (max-width: 900px) {
    .cybs-portal-topbar {
        display: flex !important;
    }

    .cybs-sidebar-scrim {
        display: block !important;
    }

    .cybs-sidebar-close,
    .cybs-sidebar-close.fp-btn {
        display: inline-flex !important;
    }
}

.cybs-portal-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--cy-border-strong);
    background: var(--cy-surface);
    color: var(--cy-text-muted);
    cursor: pointer;
}

.cybs-portal-burger.fp-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--cy-border-strong);
    color: var(--cy-text-muted);
    background: var(--cy-surface);
    box-shadow: none;
}

@media (max-width: 900px) {
    .cybs-portal {
        display: block;
    }

    .cybs-portal-main {
        min-height: calc(100vh - 64px);
        padding: 2rem 1rem 4rem;
    }

    .cybs-portal-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        position: sticky;
        top: 0;
        z-index: 30;
        padding: 0.75rem 1rem;
        background: var(--cy-surface);
        border-bottom: 1px solid var(--cy-border);
    }

    .cybs-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: min(280px, 86vw);
        padding: 1.6rem 0;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 24px 0 60px -30px rgba(16, 40, 28, 0.5);
        z-index: 51;
    }

    .cybs-sidebar.is-open {
        transform: translateX(0);
    }

    .cybs-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid var(--cy-border);
        background: var(--cy-surface);
        color: var(--cy-text-muted);
        cursor: pointer;
    }

    .cybs-sidebar-close.fp-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--cy-border);
        color: var(--cy-text-muted);
        background: var(--cy-surface);
        box-shadow: none;
    }

    .cybs-sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(16, 40, 28, 0.28);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .cybs-sidebar-scrim.is-open {
        opacity: 1;
        visibility: visible;
    }
}

/* ---- Balance hero (Home) --------------------------------------------- *
   A prominent rounded card leading the Home page: a status pill, the balance
   amount in display type, a supporting line and a trailing pay CTA / mark.
   State modifiers recolor the surface + amount (due / past-due / pending /
   paid) to mirror the prototype's balance states.                          */
.cybs-hero {
    border: 1px solid var(--cy-border);
    border-radius: 20px;
    background: var(--cy-surface);
    padding: 2rem 2.1rem;
    box-shadow: 0 18px 44px -28px rgba(16, 40, 28, 0.4);
}

.cybs-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.cybs-hero-actions {
    display: flex;
    margin-top: 1.5rem;
}

.cybs-pay-now.fp-btn {
    width: auto;
    min-width: 10rem;
}

.cybs-pay-now-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.cybs-pay-now-content .mud-icon-root {
    display: block;
    flex: 0 0 auto;
}

.cybs-hero-caption {
    margin: 1.05rem 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cy-text-muted);
}

.cybs-hero-amount {
    margin-top: 0.25rem;
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--cy-text);
}

.cybs-hero-sub {
    margin: 0.85rem 0 0;
    max-width: 46ch;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--cy-text-muted);
}


.cybs-hero-foot {
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(22, 40, 28, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    font-size: 0.9rem;
    color: var(--cy-text-muted);
}

/* Status pill (filled tint, colour by state) */
.cybs-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--cy-primary-strong);
    background: var(--cy-tint-10);
}

.cybs-hero-pill .cybs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cy-primary-strong);
}

.cybs-hero-pill--danger { color: #b3261e; background: rgba(179, 38, 30, 0.10); }
.cybs-hero-pill--danger .cybs-dot { background: #b3261e; }

.cybs-hero-pill--warn { color: #946a00; background: rgba(210, 154, 46, 0.16); }
.cybs-hero-pill--warn .cybs-dot { background: #d29a2e; }

/* Surface + amount state modifiers */
.cybs-hero--pastdue {
    background: linear-gradient(180deg, rgba(179, 38, 30, 0.045), #fff 58%);
    border-color: rgba(179, 38, 30, 0.26);
}
.cybs-hero--pastdue .cybs-hero-amount { color: #b3261e; }

.cybs-hero--pending {
    background: linear-gradient(180deg, rgba(210, 154, 46, 0.05), #fff 58%);
    border-color: rgba(210, 154, 46, 0.30);
}

.cybs-hero--paid {
    background: linear-gradient(180deg, var(--cy-tint-06), #fff 60%);
    border-color: var(--cy-tint-14);
}

/* Processing chip / paid check shown in the hero's trailing slot */
.cybs-hero-processing {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--cy-tint-14);
    color: var(--cy-primary-strong);
    font-weight: 600;
    font-size: 0.92rem;
}

.cybs-hero-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cy-primary);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(31, 80, 38, 0.55);
}

/* Key/value as divided rows (Account overview card) — larger, bordered rows
   vs the compact default .cybs-kv. */
.cybs-kv--rows {
    gap: 0;
}

.cybs-kv--rows > div {
    padding: 0.85rem 0;
    border-bottom: 1px solid #eef1ef;
}

.cybs-kv--rows > div:last-child {
    border-bottom: none;
}

.cybs-kv--rows dt {
    font-size: 0.96rem;
}

.cybs-kv--rows dd {
    font-size: 1rem;
    font-weight: 700;
}

/* ---- Payment type chooser --------------------------------------------- */
/* The step in front of both add-a-method flows. Two peers, not a primary and a
   secondary: a card and a bank account are different journeys, and the card is
   not the "real" one. */
.cybs-chooser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

@media (max-width: 640px) {
    .cybs-chooser {
        grid-template-columns: 1fr;
    }
}

.cybs-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.95rem 1rem;
    border: 1px solid var(--cy-border-strong);
    border-radius: var(--cy-radius-sm);
    background: var(--cy-surface);
    font: inherit;
    color: var(--cy-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cybs-choice:hover:not(:disabled) {
    border-color: var(--cy-primary);
    background: var(--cy-tint-06);
}

.cybs-choice:focus-visible {
    outline: none;
    border-color: var(--cy-primary);
    box-shadow: var(--cy-ring);
}

/* A type at its cap stays visible and readable — the caption explains why it is
   unavailable, so fading it to the point of illegibility would hide the reason. */
.cybs-choice:disabled {
    cursor: default;
    background: #fafcfa;
    border-color: var(--cy-border);
    color: var(--cy-text-muted);
}

.cybs-choice-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--cy-neutral-tint);
    color: var(--cy-primary-strong);
}

.cybs-choice:disabled .cybs-choice-icon {
    color: var(--cy-text-faint);
}

.cybs-choice-body {
    display: block;
    min-width: 0;
}

.cybs-choice-title {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
}

.cybs-choice-sub {
    display: block;
    margin-top: 0.15rem;
    color: var(--cy-text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* The back control is a <button> when it returns to the chooser rather than
   navigating. It must be indistinguishable from the anchor beside it, so the
   colour is restated rather than left to inherit — a bare button otherwise picks
   up the user agent's own button colour and font. */
.cybs-back--button {
    border: 0;
    background: none;
    padding: 0;
    margin-bottom: 1.1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: inherit;
    color: var(--cy-text-muted) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.cybs-back--button:hover,
.cybs-back--button:focus-visible {
    color: var(--cy-primary-strong) !important;
}

/* ---- Bank account form ------------------------------------------------- */
.cybs-fields {
    display: grid;
    gap: 0.9rem;
}

.cybs-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    /* Top-aligned so an error message under one field grows the row downwards
       instead of re-centring its neighbour — otherwise the two inputs stop
       lining up the moment one of them is wrong. */
    align-items: start;
}

@media (max-width: 640px) {
    .cybs-field-row {
        grid-template-columns: 1fr;
    }
}

/* A field that stands on its own, with room beneath it for a note. */
.cybs-field {
    display: grid;
    gap: 0.3rem;
}

/* Sits under a single field — the routing lookup's progress and its result. */
.cybs-field-note {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--cy-text-faint);
    line-height: 1.4;
}

/* The resolved bank name. Green because it confirms something: naming the bank
   back is the strongest signal available that the number was typed correctly. */
.cybs-field-note--ok {
    color: var(--cy-primary-strong);
    font-weight: 600;
}

.cybs-field-note--ok .mud-icon-root {
    font-size: 1rem;
}

/* ---- Informational notice ---------------------------------------------- */
/* For a constraint the customer needs to know about but has not run into as an
   error — a bank account that cannot pay a past-due balance. Distinct from
   .cybs-inline-error, which is for something that went wrong. */
.cybs-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--cy-info-border);
    border-radius: var(--cy-radius-sm);
    background: var(--cy-info-tint);
    color: var(--cy-info-text);
}

.cybs-notice .mud-icon-root {
    flex: 0 0 auto;
    color: var(--cy-info);
}

.cybs-notice-body {
    min-width: 0;
}

.cybs-notice-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cy-info);
}

.cybs-notice-text {
    margin: 0.2rem 0 0;
    font-size: 0.83rem;
    line-height: 1.5;
}

/* ---- Page alert ------------------------------------------------------- */
/* Something on the account needs the customer's attention before it causes a failure — an
   expired default card. Laid out like .cybs-notice, in the danger palette. */
.cybs-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--cy-danger-border);
    border-radius: var(--cy-radius-sm);
    background: var(--cy-danger-tint);
    color: var(--cy-danger-text);
}

.cybs-alert .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--cy-danger);
}

.cybs-alert-body {
    min-width: 0;
}

.cybs-alert-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
}

.cybs-alert-text {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
}

/* ---- Entrance motion -------------------------------------------------- */
@keyframes cybsRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cybs-stagger {
    animation: cybsRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--d, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
    .cybs-stagger {
        animation: none;
    }
}