/**
 * Stripe Payment Link Button — front-end styles
 *
 * All colors and key dimensions are exposed as CSS variables on the
 * .splb-account scope, so a child theme can override them without
 * modifying plugin files. To override globally, set the variables
 * on :root in your theme.
 */

/* ==========================================================================
 * Base button reset (preserved from v1.4.3)
 *
 * Strips theme <button> defaults from every plugin button. Without this,
 * themes that style all <button> elements globally cause "green flash"
 * issues on the user menu, profile buttons, and password toggle.
 *
 * Selectors are intentionally low-specificity so component classes
 * (.splb-btn--solid, .splb-user-menu__trigger, etc.) reliably win.
 * ========================================================================== */

.splb-account button,
.splb-user-menu button,
.splb-subscribe-form button:not(.splb-subscribe-btn) {
    /* Theme-bleed reset for buttons inside our shortcodes.
       The .splb-subscribe-btn used to be included here back when it inherited
       from these resets and only added background/color on top. With v1.6.8 the
       subscribe button has its own complete styling (transparent bg, cream
       border, hover glow) and being included in this reset would wipe its
       border and box-shadow. So it's excluded via :not(.splb-subscribe-btn)
       here and styled in its own block below. The reset still applies to
       other generic buttons inside .splb-subscribe-form (a hypothetical
       close/dismiss icon button, etc.) and to all buttons inside
       .splb-account and .splb-user-menu. */
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    cursor: pointer;
    text-align: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;
}

.splb-account button:hover,
.splb-account button:focus,
.splb-account button:active,
.splb-user-menu button:hover,
.splb-user-menu button:focus,
.splb-user-menu button:active,
.splb-subscribe-form button:not(.splb-subscribe-btn):hover,
.splb-subscribe-form button:not(.splb-subscribe-btn):focus,
.splb-subscribe-form button:not(.splb-subscribe-btn):active {
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
}

/* ---------- Subscribe button (pricing page CTA) ---------- */
.splb-subscribe-form .splb-subscribe-btn {
    /* Values confirmed via DevTools inspect-element on the live Zenith
       plan button (the source of truth — see decision log). The earlier
       Figma table that suggested a transparent outline was outdated /
       aspirational; the live Elementor implementation is a solid cream
       pill with black text that fills amber on hover. */
    --splb-sub-bg: #E2DFD9;
    --splb-sub-bg-hover: #FFB800;
    --splb-sub-text: #000000;
    --splb-sub-text-hover: #000000;
    --splb-sub-radius: 36px;
    --splb-sub-padding-y: 16px;
    --splb-sub-padding-x: 24px;

    display: inline-block;
    background: var(--splb-sub-bg);
    color: var(--splb-sub-text);
    border: 0;
    border-radius: var(--splb-sub-radius);
    padding: var(--splb-sub-padding-y) var(--splb-sub-padding-x);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.splb-subscribe-form .splb-subscribe-btn:hover,
.splb-subscribe-form .splb-subscribe-btn:focus {
    background: var(--splb-sub-bg-hover);
    color: var(--splb-sub-text-hover);
    text-decoration: none;
	border-radius: var(--splb-sub-radius);
    /* Glow matches the live Zenith spec: 12px blur, 85% alpha. The live
       Elementor button also declared `border-color: #A3F7D1` on hover but
       since this button has no border (border: 0), that rule was a no-op
       in the original and is intentionally omitted here. */
    box-shadow: 0 0 12px 0 rgba(255, 184, 0, 0.85);
}

.splb-subscribe-btn:focus-visible {
    outline: 2px solid var(--splb-sub-bg-hover);
    outline-offset: 2px;
}

/* When the shortcode is wrapped in a <form> for logged-in users, ensure
   the form doesn't introduce extra spacing around the button. */
form.splb-subscribe-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.splb-account {
    /* --- Color tokens --- */
    --splb-bg-page: #1a1d24;
    --splb-bg-card: #232730;
    --splb-bg-card-alt: #1f232b;
    --splb-bg-table-row: transparent;
    --splb-bg-table-row-hover: #2a2f3a;

    --splb-text-primary: #ffffff;
    --splb-text-secondary: #a8adb7;
    --splb-text-muted: #6c7280;
    --splb-text-on-accent: #1a1d24;

    --splb-accent: #f5d976;       /* yellow used for buttons / pagination dots */
    --splb-accent-hover: #f0c947;
    --splb-border: #2f343f;

    /* --- Layout tokens --- */
    --splb-radius: 12px;
    --splb-radius-sm: 8px;
    --splb-gap: 24px;
    --splb-card-padding: 24px;

    /* --- Type tokens --- */
    --splb-font-sm: 13px;
    --splb-font-base: 14px;
    --splb-font-lg: 18px;
    --splb-font-xl: 22px;
    --splb-font-xxl: 28px;

    color: var(--splb-text-primary);
    font-size: var(--splb-font-base);
    line-height: 1.5;
}

.splb-account * {
    box-sizing: border-box;
}

/* ---------- Section headings ---------- */

.splb-account .splb-section-title {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 800 !important; /* User-confirmed override — required to defeat theme h2 weight */
    margin: 0 0 36px;
    color: #FFFFFF;
}

/* ---------- Billing details card ---------- */

.splb-billing-card {
    background: var(--splb-bg-card);
    border-radius: var(--splb-radius);
    padding: var(--splb-card-padding);
    position: relative;
    margin-bottom: var(--splb-gap);
    max-width: 480px;
}

.splb-billing-card__edit {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--splb-text-secondary);
    text-decoration: none;
    line-height: 0;
}

.splb-billing-card__edit:hover {
    color: var(--splb-text-primary);
}

.splb-billing-card__edit svg {
    width: 18px;
    height: 18px;
}

.splb-billing-card__product {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.splb-billing-card__product-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--splb-radius-sm);
    background: var(--splb-bg-card-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--splb-accent);
    flex-shrink: 0;
}

.splb-billing-card__product-icon svg {
    width: 22px;
    height: 22px;
}

.splb-billing-card__product-name {
    font-size: var(--splb-font-lg);
    font-weight: 600;
    color: var(--splb-text-primary);
}

.splb-billing-card__price {
    font-size: var(--splb-font-xxl);
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--splb-text-primary);
}

.splb-billing-card__price-interval {
    font-size: var(--splb-font-base);
    font-weight: 400;
    color: var(--splb-text-secondary);
}

.splb-billing-card__renewal {
    color: var(--splb-text-secondary);
    font-size: var(--splb-font-base);
    margin-bottom: 20px;
}

.splb-billing-card__renewal-date {
    color: var(--splb-text-primary);
    font-weight: 500;
}

.splb-button {
    display: inline-block;
    background: var(--splb-accent);
    color: var(--splb-text-on-accent);
    border: 0;
    padding: 10px 20px;
    border-radius: var(--splb-radius-sm);
    font-size: var(--splb-font-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.splb-button:hover,
.splb-button:focus {
    background: var(--splb-accent-hover);
    color: var(--splb-text-on-accent);
}

.splb-billing-card__status-canceling {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    background: var(--splb-bg-card-alt);
    border-radius: var(--splb-radius-sm);
    font-size: var(--splb-font-sm);
    color: var(--splb-text-secondary);
}

/* ---------- Payment history table ---------- */

.splb-history-card {
    background: var(--splb-bg-card);
    border-radius: var(--splb-radius);
    padding: var(--splb-card-padding);
    overflow: hidden;
}

.splb-history-table-wrap {
    overflow-x: auto;
}

.splb-history-table {
    width: 100%;
    border: none;
    border-collapse: separate;
    border-spacing: 0 5px;
    font-size: 16px;
}

.splb-history-table thead,
.splb-history-table thead tr {
    background: transparent;
    border: none;
    box-shadow: none;
}

.splb-history-table tbody tr,
.splb-history-table tbody tr:nth-child(odd),
.splb-history-table tbody tr:nth-child(even),
.splb-history-table tbody tr:hover {
    background: transparent;
    border: none;
    box-shadow: none;
}

.splb-history-table th {
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 34px;
    background: transparent;
    border: none;
    border-bottom: 0 none transparent;
    border-top: 0 none transparent;
    box-shadow: none;
    white-space: nowrap;
}

/* Higher-specificity kill for border-bottom on the thead row.
   Some themes add `table thead tr { border-bottom: 1px solid X }`
   which can render as the faint line under the column headers.
   After 4 versions of trying without !important and the line surviving,
   this is the only certain override against an unknown theme rule. */
.splb-history-table thead tr,
.splb-history-table thead tr th,
.splb-history-card .splb-history-table thead tr,
.splb-history-card .splb-history-table thead tr th {
    border: none !important;
    border-bottom: 0 none transparent !important;
    border-top: 0 none transparent !important;
    box-shadow: none !important;
    background: transparent !important;
}

.splb-history-table td {
    padding: 9px 34px;
    background: #242930;
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 16px;
    border: none;
    box-shadow: none;
    vertical-align: middle;
}

/* Defeat theme-applied alternating-row striping and hover backgrounds.
   Themes commonly add tr:nth-child(even) td { background: ... } and
   tr:hover td { background: ... } rules. Lock our color across all
   states with the same specificity-friendly selector chain. */
.splb-history-table tbody tr:nth-child(odd) td,
.splb-history-table tbody tr:nth-child(even) td,
.splb-history-table tbody tr:hover td,
.splb-history-table tbody tr:hover {
    background: #242930;
}

.splb-invoice-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
}

.splb-invoice-link:hover {
    color: var(--splb-accent);
}

.splb-invoice-link svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* ---------- Status pill (Payment History) ----------
   Compact rounded badge so each row gets a quick at-a-glance status.
   The pill reflects the SUBSCRIPTION'S current state, not the invoice's
   payment outcome — see render_subscription_status_pill() in
   class-splb-shortcodes.php for the rationale. Three modifier classes
   cover the four Stripe statuses we map to:
     --active     active or trialing  (green — good standing)
     --past-due   past_due or unpaid  (amber — at risk)
     --canceled   canceled or incomplete  (gray — terminal)
   The older `--paid` / `--refunded` / `--failed` modifiers from v1.6.5
   are retained below because we may reintroduce them when refund
   handling lands and a hybrid status (sub-state + invoice-outcome) is
   needed. They render correctly but aren't emitted by current code. */
.splb-history-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

.splb-history-status--active {
    background: rgba(76, 175, 80, 0.16);
    color: #5DCAA5;
}

.splb-history-status--past-due {
    background: rgba(255, 184, 0, 0.16);
    color: #FFB800;
}

.splb-history-status--canceled {
    background: rgba(160, 160, 160, 0.16);
    color: #A8B3CF;
}

/* Reserved for v1.7+ refund/failure handling — see comment above. */
.splb-history-status--paid {
    background: rgba(76, 175, 80, 0.16);
    color: #5DCAA5;
}

.splb-history-status--refunded {
    background: rgba(255, 184, 0, 0.16);
    color: #FFB800;
}

.splb-history-status--failed {
    background: rgba(229, 75, 75, 0.16);
    color: #E54B4B;
}

.splb-history-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--splb-text-secondary);
}

/* ---------- Pagination ---------- */

.splb-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.splb-pagination a,
.splb-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    font-size: var(--splb-font-sm);
    color: var(--splb-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.splb-pagination a:hover {
    background: var(--splb-bg-card-alt);
    color: var(--splb-text-primary);
}

.splb-pagination .splb-pagination-current {
    background: var(--splb-accent);
    color: var(--splb-text-on-accent);
    font-weight: 600;
}

.splb-pagination .splb-pagination-arrow {
    background: var(--splb-accent);
    color: var(--splb-text-on-accent);
}

.splb-pagination .splb-pagination-arrow:hover {
    background: var(--splb-accent-hover);
}

.splb-pagination .splb-pagination-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ---------- Empty / login states ---------- */

.splb-notice {
    padding: 20px;
    background: var(--splb-bg-card);
    border-radius: var(--splb-radius);
    color: var(--splb-text-secondary);
    text-align: center;
}

/* ---------- Thank-you page ---------- */

.splb-thank-you {
    background: var(--splb-bg-card);
    border-radius: var(--splb-radius);
    padding: 32px;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.splb-thank-you h2 {
    color: var(--splb-text-primary);
    margin-top: 0;
}

.splb-thank-you p {
    color: var(--splb-text-secondary);
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
    .splb-account {
        --splb-card-padding: 16px;
        --splb-gap: 16px;
    }

    /* .splb-billing-card__price { font-size: 22px; } removed — the mobile
       block below now sets price to Inter 600 16px per the latest Figma. */

    /* .splb-history-table th/td padding rules removed — at ≤767 the table
       view is hidden entirely and the cards view renders instead. */
}

/* ==========================================================================
 * v1.3.0 additions: redesigned billing card, profile form, user menu
 * ========================================================================== */

/* ---------- Generic button styles (used on multiple shortcodes) ---------- */

.splb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 36px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.splb-btn--solid {
    background: #E2DFD9;
    color: #000;
    border-color: #E2DFD9;
}

.splb-btn--solid:hover,
.splb-btn--solid:focus {
    background: #FFB800;
    border-color: #FFB800;
    color: #000;
    /* Brand-amber glow on the primary action buttons (Upgrade Plan,
       Save Changes, View Plans, subscribe). Matches the subscribe
       button glow added in v1.6.5 so all solid buttons share one look. */
    box-shadow: 0 0 12px 0 rgba(255, 184, 0, 0.85);
}

.splb-btn--outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.splb-btn--outline:hover,
.splb-btn--outline:focus {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    /* Soft cream glow on secondary/outline buttons (View Plan Details,
       Cancel, etc.). Lower alpha than the solid glow so secondary
       actions read as quieter than primary actions. */
    box-shadow: 0 0 12px 0 rgba(226, 223, 217, 0.35);
}

/* User-confirmed cascade override: chain `button` + two classes to beat
   theme rules like `button { font-weight: 400 }` that apply at desktop
   widths. Without this, our base .splb-btn `font-weight: 600` loses the
   cascade and buttons render at the theme's weight instead of bold. */
button.splb-btn.splb-btn--outline,
button.splb-btn.splb-btn--solid {
    font-weight: 700 !important;
}

button.splb-btn.splb-btn--solid {
    font-size: 16px !important;
}

/* ---------- Notice (success/error) ---------- */

.splb-notice {
    padding: 12px 16px;
    border-radius: var(--splb-radius, 12px);
    margin-bottom: 16px;
    font-size: 14px;
}

.splb-notice--success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.splb-notice--error {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ==========================================================================
 * Billing card — redesigned for v1.3 to match the Vyntox design
 * ========================================================================== */

.splb-billing-card {
    background: var(--splb-bg-card, #232730);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 102px;
    max-width: none; /* override v1.2 cap */
    padding: 0;     /* override v1.2 padding (now applied per-section) */
    position: static; /* override v1.2 absolute-positioned edit pencil */
}

.splb-billing-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.splb-billing-card__header-icon {
    color: #FFB800;
    display: inline-flex;
}

.splb-billing-card__header-icon svg {
    width: 32px;
    height: 32px;
}

.splb-billing-card__header-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    font-family: 'Exo 2';
}

.splb-billing-card__body {
    padding: 24px 48px;
}

.splb-billing-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.splb-billing-card__row--renewal {
    margin-bottom: 24px;
}

.splb-billing-card__plan {
    display: flex;
    align-items: center;
    gap: 12px;
}

.splb-billing-card__plan-icon {
    color: #FFB800;
    display: inline-flex;
}

.splb-billing-card__plan-icon svg {
    width: 32px;
    height: 32px;
}

.splb-billing-card__plan-name {
    color: #E2DFD9;
    font-family: 'Exo 2';
    font-weight: 800;
    font-size: 24px;
}

.splb-billing-card__price {
    font-family: 'Inter';
    font-weight: 600;
    font-size: 16px;
    color: #E2DFD9;
}

.splb-billing-card__price-interval {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.splb-billing-card__renewal-label {
    color: #E2DFD9;
    font-family: 'Exo 2';
    font-weight: 700;
    font-size: 18px;
}

.splb-billing-card__renewal-value {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.splb-billing-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.splb-billing-card__actions .splb-btn {
    width: 100%;
}

/* ==========================================================================
 * Empty state: rendered when user has no active subscription. Reuses
 * the .splb-billing-card surface but with a centered message + CTA
 * instead of header/body/actions.
 * ========================================================================== */

.splb-billing-card--empty {
    /* Inherits bg, radius, margin from .splb-billing-card. */
    padding: 0;
}

.splb-billing-card__empty-body {
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
}

.splb-billing-card__empty-message {
    margin: 0;
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #E2DFD9;
    line-height: 1.4;
}

/* On tablet/mobile use the same #242930 surface as the rest of the
   mobile billing card design. Tighter padding for smaller viewports. */
@media (max-width: 1024px) {
    .splb-billing-card--empty {
        background: #242930;
    }

    .splb-billing-card__empty-body {
        padding: 32px 24px;
    }
}

/* ==========================================================================
 * Payment History — table tweaks for v1.3 design
 * ========================================================================== */

.splb-history-card {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.splb-history-table-wrap {
    border: none;
    box-shadow: none;
}

/* v1.3 inherits the new table layout from the rules above (border-spacing,
   transparent th, #242930 td). The only override here is to keep the
   header text color matching the design at a lighter weight. */
.splb-history-table th {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 12px 34px;
    border: none;
    box-shadow: none;
}

.splb-history-table td {
    padding: 9px 34px;
    color: #FFFFFF;
}

/* Invoice link spec lives in the main .splb-invoice-link block above
   (Exo 2 700 18px, color #FFB800, 32px icon). No overrides here. */

/* ==========================================================================
 * Payment History — cards view (rendered alongside the table; CSS toggles
 * which is visible per breakpoint).
 *
 * Default state (desktop): cards hidden, table shown. Tablet/mobile media
 * queries flip this. Card layout itself is defined here so it's testable
 * independently of viewport rules.
 * ========================================================================== */

.splb-history-cards-view {
    display: none; /* shown by tablet/mobile media queries */
}

.splb-history-card-item {
    background: #242930;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.splb-history-card-item__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Default header order: icon first (left), title second.
   Mobile media query flips this with order: properties. */
.splb-history-card-item__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #FFB800;
    text-decoration: none;
    line-height: 0;
    order: 1;
}

.splb-history-card-item__icon svg {
    width: 32px;
    height: 32px;
}

.splb-history-card-item__title {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #FFB800;
    text-decoration: none;
    line-height: 1.2;
    flex: 1;
    min-width: 0; /* lets long invoice numbers truncate cleanly */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    order: 2;
}

.splb-history-card-item__title:hover {
    color: #FFB800;
    text-decoration: underline;
}

.splb-history-card-item__rows {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.splb-history-card-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
}

.splb-history-card-item__label {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #E2DFD9;
}

.splb-history-card-item__value {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #E2DFD9;
    text-align: right;
}

.splb-history-card-item__value--plan {
    color: #FFB800; /* plan name is yellow accent per Figma */
}

/* ---------- Pagination dots ---------- */

.splb-pagination .splb-pagination-current {
    background: #FFB800;
    color: #000;
}

.splb-pagination .splb-pagination-arrow {
    background: transparent;
    color: #FFB800;
    border-color: #FFB800;
}

.splb-pagination .splb-pagination-arrow:hover {
    background: rgba(255, 184, 0, 0.1);
    color: #FFB800;
}

.splb-pagination a:not(.splb-pagination-arrow) {
    color: #FFB800;
}

/* ==========================================================================
 * Profile Information shortcode
 * ========================================================================== */

.splb-profile {
    color: #fff;
}

.splb-profile-form {
    display: block;
}

/* Avatar row */

.splb-profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.splb-profile-avatar-row.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.splb-profile-avatar {
    width: 146px;
    height: 146px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--splb-bg-card-alt, #1f232b);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splb-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.splb-profile-avatar__initials {
    font-size: 28px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.splb-profile-avatar-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Avatar action buttons — per design spec.
   Override the generic .splb-btn--solid / --outline rules with the
   exact colors and padding from the design. The :hover rules from
   the generic styles are also overridden here so the buttons don't
   change to yellow on hover (avatar buttons stay neutral). */
.splb-profile-avatar-actions .splb-btn {
    padding: 16px 24px;
}

.splb-profile-avatar-actions .splb-btn--solid{
    background: #E2DFD9;
    color: #000;
    border-color: #E2DFD9;
}
.splb-profile-avatar-actions .splb-btn--solid:hover,
.splb-profile-avatar-actions .splb-btn--solid:focus {
	background: #ffb800;
    color: #000;
    border-color: #ffb800;
    border-radius: 36px;
}

.splb-profile-avatar-actions .splb-btn--outline,
.splb-profile-avatar-actions .splb-btn--outline:hover,
.splb-profile-avatar-actions .splb-btn--outline:focus {
    background: transparent !important;
    color: #E2DFD9;
    border: 1px solid #E2DFD9;
    border-radius: 36px;
    padding: 16px 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

/* Form grid */

.splb-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 70px;
    margin-bottom: 32px;
}

/* Defense-in-depth: CSS Grid `1fr` tracks have a default min-width of
   `auto`, which means a cell can refuse to shrink below its intrinsic
   content width. For text inputs with very long content (or any child
   element with a long unbreakable string), this can cause a column to
   blow out past 50% and push the layout sideways. Forcing `min-width: 0`
   on each grid item ensures the cell honors the `1fr` track strictly,
   regardless of content. Same applies to the inner field-group containers
   so nested flex children inherit the constraint. */
.splb-profile-grid > .splb-field-group,
.splb-field-group > .splb-field,
.splb-field > .splb-field__input {
    min-width: 0;
}

.splb-field--full {
    grid-column: 1 / -1;
}

.splb-field__label {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.splb-field .splb-field__input {
    width: 100%;
    padding: 18px 24px 19px 26px;
    border-radius: 20px;
    background: #242930;
    border: none;
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.splb-field__input:focus {
    outline: none;
    border-color: rgba(255, 184, 0, 0.5);
}

.splb-field__input--readonly {
    cursor: not-allowed;
    opacity: 0.7;
}

.splb-field__password-wrap,
.splb-field__select-wrap {
    position: relative;
}

.splb-field__password-wrap .splb-field__password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: #FFB800;
    line-height: 0;
}

.splb-field__password-toggle svg {
    width: 32px;
    height: 32px;
}

.splb-field__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    cursor: pointer;
}

.splb-field__select-wrap > svg {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #fff;
    width: 18px;
    height: 18px;
}

/* Form actions */

.splb-profile-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Save Changes (solid) and Cancel (outline) match Upload / Delete styles
   per design — same padding, same colors, same hover behavior. */
.splb-profile-actions .splb-btn {
    padding: 16px 24px;
}

.splb-profile-actions .splb-btn--solid {
    background: #E2DFD9;
    color: #000;
    border-color: #E2DFD9;
}

.splb-profile-actions .splb-btn--solid:hover,
.splb-profile-actions .splb-btn--solid:focus{
	background: #ffb800;
    color: #000;
    border-color: #ffb800;
    border-radius: 36px;
}

.splb-profile-actions .splb-btn--outline,
.splb-profile-actions .splb-btn--outline:hover,
.splb-profile-actions .splb-btn--outline:focus {
    background: transparent !important;
    color: #E2DFD9;
    border: 1px solid #E2DFD9;
    border-radius: 36px;
    padding: 16px 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

/* ==========================================================================
 * User Menu (header dropdown)
 * ========================================================================== */

.splb-user-menu {
    position: relative;
    display: inline-block;
    /* Anti-FOUC: PHP renders this element with style="visibility:hidden",
       this rule reveals it once the stylesheet has loaded. !important is
       required because inline styles outrank class selectors. */
    visibility: visible !important;
}

.splb-user-menu .splb-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 8px;
    background: var(--splb-bg-card, #232730);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: background-color 0.15s;
}

/* Trigger does NOT lighten on hover or when the dropdown is open —
   the trigger keeps its default card background in all states.
   Matches the Figma "profile card" reference. */
.splb-user-menu__trigger:hover,
.splb-user-menu.is-open .splb-user-menu__trigger {
    background: var(--splb-bg-card, #232730);
}

/* Higher-specificity rule for the hover state to win over any theme
   `button:hover` rules that might paint over our background. Matches
   the four properties on the base trigger so theme `button:hover`
   styling can't introduce a border, change the radius, or recolor
   the text on hover. */
button.splb-user-menu__trigger:hover {
    background: var(--splb-bg-card, #232730);
    border: 0;
    border-radius: 999px;
    color: #fff;
}

/* Defend the pill corner radius on keyboard focus too — some themes
   apply a default `:focus` outline with a different border-radius
   that visually breaks the pill on tab navigation. */
button.splb-user-menu__trigger:focus {
    border-radius: 999px;
}

.splb-user-menu__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--splb-bg-card-alt, #1f232b);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splb-user-menu__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.splb-user-menu__avatar-initials {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.splb-user-menu__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}

.splb-user-menu__name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.splb-user-menu__email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.splb-user-menu__chevron {
    color: rgba(255, 255, 255, 0.6);
    display: inline-flex;
    transition: transform 0.15s ease;
}

.splb-user-menu__chevron svg {
    width: 16px;
    height: 16px;
}

.splb-user-menu.is-open .splb-user-menu__chevron {
    transform: rotate(180deg);
}

.splb-user-menu__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /* Match the trigger pill's width exactly. The containing block
       (.splb-user-menu) is `display:inline-block` and sized by its
       only child — the trigger — so `width: 100%` here resolves to
       the trigger's rendered width. This gives us automatic
       width-matching for any name/email length without measuring in
       JS. The `min-width` is a floor for unusually short triggers
       (very brief names/emails) so menu items like "Account Settings"
       still fit comfortably even if the trigger is narrower than that. */
    width: 100%;
    min-width: 200px;
    background: var(--splb-bg-card, #232730);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    box-sizing: border-box;
}

.splb-user-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-size: 14px;
    transition: background-color 0.15s;
}

.splb-user-menu__item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.splb-user-menu__item-icon {
    display: inline-flex;
    color: #FFB800;
}

.splb-user-menu__item-icon svg {
    width: 18px;
    height: 18px;
}

.splb-user-menu__item--danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.splb-user-menu__login {
    display: inline-block;
    padding: 10px 20px;
    background: var(--splb-accent, #E2DFD9);
    color: #000;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

.splb-user-menu__login:hover {
    background: #FFB800;
    color: #000;
}

/* ==========================================================================
 * Field group cards
 *
 * The form fields are wrapped in two groups (.splb-field-group--personal
 * and .splb-field-group--account). On desktop and mobile these wrappers
 * are visually transparent so fields appear flat. On tablet they get
 * `#232730` background, padding, and rounded corners — per the tablet
 * Figma which groups the fields into separate cards.
 * ========================================================================== */

.splb-field-group {
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ==========================================================================
 * Mobile User Card (rendered by [splb_user_menu_mobile])
 *
 * Designed to be placed inside an Elementor hamburger drawer on tablet
 * and mobile. Always-expanded vertical layout, no toggle/dropdown JS.
 * Buttons reuse .splb-btn--solid / --outline so weight/color overrides
 * applied elsewhere also apply here for visual consistency.
 * ========================================================================== */

.splb-user-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.splb-user-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.splb-user-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splb-user-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.splb-user-card__avatar-initials {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.splb-user-card__details {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* lets ellipsis work on long emails */
    line-height: 1.3;
}

.splb-user-card__name {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.splb-user-card__email {
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.splb-user-card__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #FFB800;
}

.splb-user-card__icon svg {
    width: 32px;
    height: 32px;
}

.splb-user-card__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
}

/* Buttons in the mobile user card — full-width, Inter 700 14px.
   !important on font-weight and font-family preemptively because the
   theme's button rules win the cascade against plain declarations
   (same pattern already required on .splb-profile-actions buttons). */
.splb-user-card__actions .splb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px;
    line-height: 1;
    text-align: center;
}

.splb-user-card__actions .splb-btn--solid,
.splb-user-card__actions .splb-btn--solid:hover,
.splb-user-card__actions .splb-btn--solid:focus {
    background: #E2DFD9;
    color: #000000;
    border-color: #E2DFD9;
}

.splb-user-card__actions .splb-btn--outline,
.splb-user-card__actions .splb-btn--outline:hover,
.splb-user-card__actions .splb-btn--outline:focus {
    background: transparent;
    color: #E2DFD9;
    border: 1px solid #E2DFD9;
}

/* ==========================================================================
 * Responsive tweaks for v1.3
 * ========================================================================== */

/* ---------- Tablet: 481px – 1024px ----------
   Per Figma: avatar row becomes a rounded card. Field groups become
   two separate rounded cards. Form fields stack to a single column.
   Cancel/Save buttons centered at bottom. */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Avatar row → card with translucent white bg, tighter gap to form below */
    .splb-profile-avatar-row {
        background: rgba(246, 247, 249, 0.15); /* #F6F7F926 */
        border-radius: 24px;
        padding: 23px 26px 22px 26px;
        gap: 20px;
        margin-bottom: 12px;
    }

    .splb-profile-avatar {
        width: 92px;
        height: 92px;
    }

    /* Avatar buttons — Inter 700 14px, Delete cream text, Upload black text.
       Targets the modifier classes (--outline / --solid) directly so this
       beats the desktop rules that also target those modifier selectors. */
    .splb-profile-avatar-actions .splb-btn--outline,
    .splb-profile-avatar-actions .splb-btn--outline:hover,
    .splb-profile-avatar-actions .splb-btn--outline:focus,
    .splb-profile-avatar-actions .splb-btn--solid,
    .splb-profile-avatar-actions .splb-btn--solid:hover,
    .splb-profile-avatar-actions .splb-btn--solid:focus {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700 !important; /* User-confirmed override — required to defeat theme's button weight on tablet */
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0;
        text-align: center;
    }

    .splb-profile-avatar-actions .splb-btn--outline,
    .splb-profile-avatar-actions .splb-btn--outline:hover,
    .splb-profile-avatar-actions .splb-btn--outline:focus {
        color: #E2DFD9;
    }

    .splb-profile-avatar-actions .splb-btn--solid,
    .splb-profile-avatar-actions .splb-btn--solid:hover,
    .splb-profile-avatar-actions .splb-btn--solid:focus {
        color: #000000;
    }

    /* Field groups → two stacked cards, 12px between them */
    .splb-profile-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .splb-field-group {
        background: rgba(246, 247, 249, 0.15); /* #F6F7F926 */
        border-radius: 24px;
        padding: 28px 26px 27px 26px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Field labels — Inter 600 16px (already on desktop, restated for safety) */
    .splb-field__label {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600;
        font-size: 16px;
    }

    /* Field inputs — smaller, more rounded, cream text */
    .splb-field .splb-field__input {
        border-radius: 16px;
        padding: 16px 24px;
        background: #242930;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0;
        color: #E2DFD9;
    }

    /* Action buttons centered, with same Inter 700 14px treatment */
    .splb-profile-actions {
        justify-content: center;
        margin-top: 32px;
    }

    .splb-profile-actions .splb-btn--outline,
    .splb-profile-actions .splb-btn--outline:hover,
    .splb-profile-actions .splb-btn--outline:focus,
    .splb-profile-actions .splb-btn--solid,
    .splb-profile-actions .splb-btn--solid:hover,
    .splb-profile-actions .splb-btn--solid:focus {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700 !important; /* User-confirmed override — required to defeat theme's button weight on tablet */
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0;
        text-align: center;
    }

    .splb-profile-actions .splb-btn--outline,
    .splb-profile-actions .splb-btn--outline:hover,
    .splb-profile-actions .splb-btn--outline:focus {
        color: #E2DFD9;
    }

    .splb-profile-actions .splb-btn--solid,
    .splb-profile-actions .splb-btn--solid:hover,
    .splb-profile-actions .splb-btn--solid:focus {
        color: #000000;
    }

    /* ---------- Payment History: hide table, show 2-column card grid ---------- */
    .splb-history-table-view {
        display: none;
    }

    .splb-history-cards-view {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* Section title scaled down on tablet (matches mobile) per spec. */
    .splb-account .splb-section-title {
        font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700 !important; /* User-confirmed override */
        font-size: 18px;
        color: #ffffff;
    }
}
/* ---------- Mobile: ≤ 767px ----------
   Per design: avatar row stays a card but tighter. Fields are flat (no
   cards) just like desktop, stacked vertically. Save sits ABOVE Cancel
   and both are full-width — achieved via flex-direction: column-reverse
   so the HTML order (Cancel, Save) is preserved but visually flipped.
   Billing card switches to mobile-specific styling per the Figma:
   #242930 bg, 24px padding/radius, stacked buttons with Upgrade on top. */
@media (max-width: 767px) {
    /* Avatar row → tighter card with smaller avatar */
    .splb-profile-avatar-row {
        background: #232730;
        border-radius: 20px;
        padding: 16px;
        gap: 16px;
    }

    .splb-profile-avatar {
        width: 80px;
        height: 80px;
    }

    .splb-profile-avatar-actions {
        gap: 8px;
    }

    .splb-profile-avatar-actions .splb-btn {
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 700 !important; /* User-confirmed override — required to defeat theme's button weight on mobile */
    }

    /* Field groups → flat single column (no cards) */
    .splb-profile-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .splb-field-group {
        background: transparent;
        padding: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Save above Cancel, both full-width */
    .splb-profile-actions {
        flex-direction: column-reverse;
        gap: 12px;
        margin-top: 24px;
    }

    .splb-profile-actions .splb-btn {
        width: 100%;
        font-weight: 700 !important; /* User-confirmed override — required to defeat theme's button weight on mobile */
    }

    /* ---------- Payment History: hide table, show single-column cards ---------- */
    .splb-history-table-view {
        display: none;
    }

    .splb-history-cards-view {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Mobile flips icon to right, title stays left (reverse of tablet/desktop). */
    .splb-history-card-item__icon {
        order: 2;
    }

    .splb-history-card-item__title {
        order: 1;
    }

    /* ---------- Billing card actions: Upgrade on top (solid first) ----------
       The grid is already 1fr at (max-width: 640px) — here we reorder the
       children so the solid Upgrade button appears above the outline View
       Plan Details, per the mobile Figma. */
    .splb-billing-card__actions .splb-btn--solid {
        order: 1;
    }

    .splb-billing-card__actions .splb-btn--outline {
        order: 2;
    }
}

/* ---------- Existing rules retained for billing card and user menu,
   merged to 767px to match the new mobile breakpoint ---------- */
@media (max-width: 767px) {
    /* User-confirmed: keep label/value pair on the same row on mobile per Figma.
       Previous v1.5.10 was setting flex-direction: column which stacked the
       label above the value. The Figma shows them aligned on one row with
       label left, value right. */
    .splb-billing-card__row {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
    }

    .splb-billing-card__actions {
        grid-template-columns: 1fr;
    }

    .splb-user-menu__details {
        display: none;
    }

    .splb-user-menu__email {
        display: none;
    }

    /* ---------- Mobile billing card per Figma ----------
       Card surface, header/body padding, typography sizing, button styling.
       All values from the user's mobile spec. */
    .splb-billing-card {
        background: #242930;
        border-radius: 24px;
        padding: 0; /* header/body keep their own padding */
    }

    .splb-billing-card__header {
        padding: 24px;
    }

    .splb-billing-card__header-icon svg {
        width: 32px;
        height: 32px;
    }

    .splb-billing-card__header-title {
        font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: #ffffff;
    }

    .splb-billing-card__body {
        padding: 24px;
    }

    .splb-billing-card__plan-icon svg {
        width: 32px;
        height: 32px;
    }

    .splb-billing-card__plan-name {
        font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: #E2DFD9;
    }

    .splb-billing-card__price {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #E2DFD9;
    }

    .splb-billing-card__renewal-label {
        font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: #E2DFD9;
    }

    .splb-billing-card__renewal-value {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #E2DFD9;
    }

    /* Button styling: padding 14/24, radius 36px, Inter 700 14px.
       !important on font-weight defends against theme button rules
       (same pattern needed elsewhere). */
    .splb-billing-card__actions .splb-btn {
        padding: 14px 24px;
        border-radius: 36px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700 !important;
        font-size: 14px;
        text-align: center;
    }

    .splb-billing-card__actions .splb-btn--solid,
    .splb-billing-card__actions .splb-btn--solid:hover,
    .splb-billing-card__actions .splb-btn--solid:focus {
        color: #000000;
    }

    .splb-billing-card__actions .splb-btn--outline,
    .splb-billing-card__actions .splb-btn--outline:hover,
    .splb-billing-card__actions .splb-btn--outline:focus {
        color: #E2DFD9;
    }

    /* ---------- Section title scaled down for tablet+mobile ---------- */
    .splb-account .splb-section-title {
        font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700 !important; /* User-confirmed override */
        font-size: 18px;
        color: #ffffff;
    }
}