/**
 * BEM Checkout v5 — light redesign skin.
 *
 * Loaded on the checkout page only. The page keeps every piece of v4 checkout
 * logic (variation switcher selects, BEM Addons, WC billing/payment/coupon) and
 * this stylesheet re-skins that real WooCommerce markup to the v5 design.
 *
 * Layout: design tokens in :root, then component blocks, then a "WooCommerce
 * element mapping" section that styles the actual WC output (billing fields,
 * payment methods, terms checkboxes, place-order button, totals, notices).
 */

/* =============================================
   SELF-HOSTED FONT (Stack Sans — the typeface used by the index-light.html mock)
   Variable WOFF2 (weight 300–700), latin + latin-ext per family, self-hosted so
   the checkout has NO render-blocking third-party font request and no FOIT
   (font-display:swap). Two cuts: Headline (titles/labels/pills) + Text
   (body/inputs/values) — assigned via --font-headline / --font-text below.
   ============================================= */
@font-face {
    font-family: 'Stack Sans Headline';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../assets/fonts/stacksans-headline-latinext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Stack Sans Headline';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../assets/fonts/stacksans-headline-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Stack Sans Text';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../assets/fonts/stacksans-text-latinext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Stack Sans Text';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../assets/fonts/stacksans-text-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================
   GLOBAL TOKENS
   ============================================= */
.bemv5-checkout {
    /* Brand */
    --clr-accent: #6100C6;
    --clr-accent-hover: #4F00A3;
    --clr-accent-soft: #F2EAFF;
    --clr-accent-light: rgba(97, 0, 198, 0.10);
    --clr-accent-border: rgba(97, 0, 198, 0.45);

    /* Surfaces — warm light palette */
    --clr-bg: #F6F4F1;
    --clr-surface: #FFFFFF;
    --clr-surface-2: #FAF8F5;
    --clr-surface-3: #FFFFFF;
    --clr-card: #FFFFFF;
    --clr-card-hover: #FBF9F6;

    /* Borders */
    --clr-border: #E8E4DE;
    --clr-border-strong: #D9D4CC;
    --clr-border-hover: #BCB6AC;
    --clr-border-focus: var(--clr-accent-border);

    /* Text — high contrast, calm */
    --clr-text-primary: #1A1320;
    --clr-text-secondary: #6B6477;
    --clr-text-muted: #9A93A6;
    --clr-text-disabled: #C7C2CC;

    /* Status */
    --clr-success: #0E8A3F;
    --clr-error: #D33C3C;

    /* Shadows — soft ambient */
    --shadow-sm: 0 1px 2px rgba(24, 18, 32, 0.04);
    --shadow-md: 0 4px 14px rgba(24, 18, 32, 0.06);
    --shadow-lg: 0 12px 32px rgba(24, 18, 32, 0.08);
    --shadow-glow: 0 8px 24px rgba(97, 0, 198, 0.18);

    --radius-sm: 6px;
    --radius-n: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --transition: 0.18s ease;

    /* Typography — Stack Sans (self-hosted @font-face above), matching the mock.
       Headline = titles/labels/pills (default); Text = body/inputs/values. */
    --font-headline: 'Stack Sans Headline', system-ui, sans-serif;
    --font-text: 'Stack Sans Text', system-ui, sans-serif;
    --font-body: 'Stack Sans Headline', system-ui, sans-serif;
}

/* =============================================
   PAGE-LEVEL: light brand-wash background, hide theme chrome
   ============================================= */
/* Selector lives OUTSIDE .bemv5-checkout, so the --clr-* tokens aren't in scope
   here — colours are literal. Same purple-wash -> warm-cream gradient as the
   index-light.html mock. NOT background-attachment:fixed — that repaints the
   whole gradient every scroll frame (jank); the gradient is tied to the page box. */
body.bemv5-checkout-page {
    background:
        radial-gradient(1400px 900px at 50% -25%, rgba(97, 0, 198, 0.45), transparent 60%),
        radial-gradient(900px 700px at 92% 8%, rgba(120, 30, 220, 0.28), transparent 55%),
        radial-gradient(900px 700px at 8% 105%, rgba(97, 0, 198, 0.10), transparent 55%),
        linear-gradient(180deg, #2C0B5A 0%, #5B17B2 12%, #B59AE6 28%, #E5D6F8 45%, #F4ECE0 75%, #F6F4F1 100%) !important;
    /* Defaults would let the fixed-pixel radials tile vertically on tall pages
       (sparse fallback layouts where body grows past the radials' 900px box),
       creating a "split" gradient look. no-repeat fixes that. min-height keeps
       the gradient covering the viewport on short pages, so the bottom never
       fades to browser default white. */
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
    color: #1A1320;
}

/* Admin bar overlays the top 32px (46px on small screens) of the page via
   WordPress core's `html { margin-top: 32px !important; }` rule. That margin
   creates a white strip above the gradient. Strip it; admin bar is already
   `position: fixed; z-index: 99999`, so the body extends to the top of the
   viewport and the admin bar floats over the first 32px of gradient (matches
   the rest of the v5 surfaces — no visible gap). */
html:has(body.bemv5-checkout-page) {
    margin-top: 0 !important;
}
@media screen and (max-width: 782px) {
    html:has(body.bemv5-checkout-page) {
        margin-top: 0 !important;
    }
}

/* Hide every bit of theme chrome on the checkout page. */
body.bemv5-checkout-page #masthead,
body.bemv5-checkout-page .site-header,
body.bemv5-checkout-page .header-area,
body.bemv5-checkout-page .site-footer,
body.bemv5-checkout-page .copy-right-area,
body.bemv5-checkout-page .backtotop,
body.bemv5-checkout-page .breadcrumb-area,
body.bemv5-checkout-page .breadcrumb-wrapper,
body.bemv5-checkout-page .page-header,
body.bemv5-checkout-page #crumbs,
body.bemv5-checkout-page .woocommerce-breadcrumb,
body.bemv5-checkout-page .entry-header,
body.bemv5-checkout-page .entry-title,
body.bemv5-checkout-page .checkout-shape,
body.bemv5-checkout-page .checkout-area .section-title {
    display: none !important;
}

/* Neutralize the whole wrapper chain so the v5 layout owns the full width.
   #page > #primary.content-area > .container > .page-grid > #main.site-main
   > article > .entry-content > .woocommerce > form.checkout */
body.bemv5-checkout-page #primary,
body.bemv5-checkout-page .content-area,
body.bemv5-checkout-page .container,
body.bemv5-checkout-page .page-grid,
body.bemv5-checkout-page #main,
body.bemv5-checkout-page .site-main,
body.bemv5-checkout-page .site-content,
body.bemv5-checkout-page #content,
body.bemv5-checkout-page article,
body.bemv5-checkout-page .entry-content,
body.bemv5-checkout-page .bemcom-checkout-area,
body.bemv5-checkout-page .checkout-area,
body.bemv5-checkout-page .woocommerce,
body.bemv5-checkout-page form.checkout {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
}

/* The hidden machinery that must stay in the DOM but never be seen:
   - native variation selects (pills drive them)
   - VRN variation-switcher form + the line-item product rows */
.bemv5-checkout .bemv5-hidden-select,
.bemv5-checkout .vrn-variation-switcher,
.bemv5-checkout .variations_form,
.bemv5-checkout .woocommerce-checkout-review-order-table thead,
.bemv5-checkout .woocommerce-checkout-review-order-table .cart_item {
    /* Kept in the DOM (JS reads their values + clicks the hidden switch button)
       but never rendered. display:none removes the whole subtree, so no child can
       re-show it (which a fragile visibility/clip hide allowed after an AJAX
       re-render) and the raw <select>s can never overlap the email row again.
       The variation swap still works: VRN serializes the inputs and switcher.php
       sets variation_id directly — neither needs the form to be visible. */
    display: none !important;
}

/* =============================================
   LAYOUT
   ============================================= */
.bemv5-checkout {
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* Stack Sans Text (the body cut) on inputs, values, descriptions and field labels
   — the mock pairs Headline (titles/labels/pills, the default) with Text here. */
.bemv5-checkout .input,
.bemv5-checkout .woocommerce-billing-fields input,
.bemv5-checkout .woocommerce-billing-fields select,
.bemv5-checkout .section-subtitle,
.bemv5-checkout .accordion-body .form-row label,
.bemv5-checkout .woocommerce-checkout-review-order-table tfoot tr th,
.bemv5-checkout .woocommerce-checkout-review-order-table tfoot tr td,
.bemv5-checkout .payment-section-title,
.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > label,
.bemv5-checkout .addon-items .description,
.bemv5-checkout .bem-addon-option .description,
.bemv5-checkout .bem-addon-option .bem-addon-desc {
    font-family: var(--font-text);
}

/* Stack Sans Headline EXPLICITLY on titles/labels/pills/addon options. The base
   theme's style.css sets `h1,h2,…{font-family:var(--gbl-primary-font)}` and
   `body,p,input{…}` as DIRECT (specificity-1) rules that beat inheritance — so
   these v5 elements must declare the font themselves (as the mock does), or the
   theme font leaks back in. .bemv5-checkout .X (0,2,0) wins over the base 0,0,1. */
.bemv5-checkout .section-title,
.bemv5-checkout .field-label,
.bemv5-checkout .option-btn,
.bemv5-checkout .sidebar-title,
.bemv5-checkout .accordion-title,
.bemv5-checkout .addon-items label,
.bemv5-checkout .bem-addon-option label {
    font-family: var(--font-headline);
}

.bemv5-checkout *,
.bemv5-checkout *::before,
.bemv5-checkout *::after {
    box-sizing: border-box;
}

/* Neutralize WooCommerce/theme form-row floats & widths — v5 stacks fields. */
.bemv5-checkout form .form-row,
.bemv5-checkout .form-row {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

.bemv5-checkout .col2-set,
.bemv5-checkout .col2-set .col-1,
.bemv5-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
    padding: 0;
}

.bemv5-checkout table {
    border: 0;
    margin: 0;
}

.bemv5-checkout ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bemv5-checkout .checkout-wrapper {
    width: 100%;

    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.bemv5-checkout .bemv5-logo {
    grid-column: 1 / -1;
    width: 94px;
    height: auto;
}

@media (max-width: 820px) {
    .bemv5-checkout .checkout-wrapper {
        grid-template-columns: 1fr;
    }
    .bemv5-checkout .sidebar {
        position: static;
    }
}

/* =============================================
   CARDS — left panel becomes a white card in the light redesign (the dark theme
   left it transparent on the black page). The sidebar card is styled in its own
   section further down. Border is a near-white edge that reads against the
   purple-wash background; shadow is the soft purple-tinted ambient from the mock.
   ============================================= */
.bemv5-checkout .left-panel {
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 20px 50px -12px rgba(60, 20, 130, 0.18),
        0 4px 16px rgba(60, 20, 130, 0.06);
}

/* Subtle divider between sections inside the left card (mock behaviour). */
.bemv5-checkout .left-panel .form-section:not(:last-child) {
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 28px;
    margin-bottom: 28px;
}

/* =============================================
   TITLES & LABELS
   ============================================= */
.bemv5-checkout .section-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--clr-text-primary);
    margin: 0 0 4px;
}

.bemv5-checkout .section-subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--clr-text-secondary);
    margin: 0 0 28px;
}

.bemv5-checkout .field-label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--clr-text-primary);
    margin-bottom: 10px;
}

.bemv5-checkout .form-section:not(:last-child) {
    margin-bottom: 32px;
}

/* The Platform group is the last .form-section inside #variations-switcher, so the
   rule above skips its bottom margin — add spacing on the container so "Available
   Add-ons" isn't cramped against the Platform pills. */
.bemv5-checkout #variations-switcher {
    margin-bottom: 32px;
}

/* =============================================
   OPTION PILL BUTTONS (variation attributes)
   ============================================= */
.bemv5-checkout .option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

@media (max-width: 720px) {
    .bemv5-checkout .option-group {
        gap: 12px;
    }
}

.bemv5-checkout .option-btn {
    position: relative;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    color: var(--clr-text-secondary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    outline: none;
    flex: 1 1 auto;
    box-shadow: var(--shadow-sm);
}

.bemv5-checkout .option-btn:hover {
    border-color: var(--clr-border-hover);
    color: var(--clr-text-primary);
    background: var(--clr-card-hover);
}

.bemv5-checkout .option-btn.selected {
    background: linear-gradient(80.46deg, #FFFFFF 27.48%, #F7F0FF 100%) padding-box,
    radial-gradient(120% 162.8% at 53.04% -32%, #6100C6 0%, rgba(97, 0, 198, 0.30) 100%) border-box;
    border: 1.5px solid transparent;
    color: var(--clr-text-primary);
    box-shadow: 0 0 0 4px rgba(97, 0, 198, 0.08), 0 4px 14px rgba(97, 0, 198, 0.12);
}

/* Options removed by the variation/compatibility rules */
.bemv5-checkout .option-btn[hidden],
.bemv5-checkout .option-btn.bemv5-pill-hidden {
    display: none !important;
}

/* A whole attribute group hides when it has no available option for the
   current selection (non-challenge groups only — see v5-checkout.js). */
.bemv5-checkout .form-section.bemv5-section-hidden {
    display: none !important;
}

.bemv5-checkout .option-btn.bemv5-pill-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.bemv5-checkout .option-btn .badge {
    background: var(--clr-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(97, 0, 198, 0.30);
    border: 1px solid var(--clr-accent);
    border-radius: 8px;
    white-space: nowrap;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

/* A pill carrying a badge lays out label-left / badge-right (mock behaviour);
   default option-btn is justify-content:center. */
.bemv5-checkout .option-btn.has-badge {
    justify-content: space-between;
}

/* =============================================
   ADD-ON CARDS  (BEM Addons plugin output)
   .addon-items = a card; .bem-addon-option = an option inside a multi card
   ============================================= */
/* The plugin nests: .addons-grid > #wc_checkout_add_ons > .addon-items--multi
   > p.form-row > .woocommerce-input-wrapper > .bem-addon-option (option cards).
   We keep those wrappers as pass-through blocks and place the 2-up grid on the
   option container itself. */
.bemv5-checkout .addons-grid,
.bemv5-checkout #wc_checkout_add_ons,
.bemv5-checkout .addon-items.addon-items--multi,
.bemv5-checkout .addon-items.addon-items--multi > .form-row {
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* the addon's own (group) label is redundant — we render the section heading */
.bemv5-checkout .addon-items.addon-items--multi > .form-row > label {
    display: none;
}

/* lay the option cards two-up */
.bemv5-checkout .addon-items .woocommerce-input-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

@media (max-width: 1000px) {
    .bemv5-checkout .addon-items .woocommerce-input-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Each selectable unit (single-input card OR an option row) renders as a card.
   The multi container is NOT a card — only its option cards are interactive. */
.bemv5-checkout .addon-items:not(.addon-items--multi),
.bemv5-checkout .bem-addon-option {
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    box-shadow: var(--shadow-sm);
    margin: 0;
}

.bemv5-checkout .addon-items:not(.addon-items--multi):hover,
.bemv5-checkout .bem-addon-option:hover {
    border-color: var(--clr-border-hover);
    background: var(--clr-card-hover);
}

.bemv5-checkout .addon-items:not(.addon-items--multi).active,
.bemv5-checkout .bem-addon-option.active {
    background: linear-gradient(80.46deg, #FFFFFF 27.48%, #F7F0FF 100%) padding-box,
    radial-gradient(120% 162.8% at 53.04% -32%, #6100C6 0%, rgba(97, 0, 198, 0.30) 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 0 0 4px rgba(97, 0, 198, 0.08), 0 4px 14px rgba(97, 0, 198, 0.12);
}

.bemv5-checkout .bem-addon-hidden {
    display: none !important;
}

/* Per-option "Free" state: bem-addons-filter.js adds .bem-addon-free when the
   option's free_conditions match the selected variation. The server charges $0
   (authoritative); this swaps the shown cost for a green "Free". */
.bemv5-checkout .bem-addon-option .bem-addon-free-label {
    display: none;
}

.bemv5-checkout .bem-addon-option.bem-addon-free .bem-addon-cost {
    display: none;
}

.bemv5-checkout .bem-addon-option.bem-addon-free .bem-addon-free-label {
    display: inline;
    color: var(--clr-success);
    font-weight: 600;
}

/* hide the raw checkbox/radio — the whole card is the control */
.bemv5-checkout .addon-items input[type="checkbox"],
.bemv5-checkout .addon-items input[type="radio"],
.bemv5-checkout .bem-addon-option input[type="checkbox"],
.bemv5-checkout .bem-addon-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.bemv5-checkout .addon-items label,
.bemv5-checkout .bem-addon-option label {
    /* !important beats WooCommerce's higher-specificity `label.checkbox { display:inline }`
       so the title sits on its own line and the description starts below it. */
    display: block !important;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-text-primary);
    cursor: pointer;
    margin: 0;
    transition: color var(--transition);
}

.bemv5-checkout .addon-items.active label,
.bemv5-checkout .bem-addon-option.active label {
    color: var(--clr-text-primary);
}

.bemv5-checkout .addon-items .description,
.bemv5-checkout .bem-addon-option .description,
.bemv5-checkout .addon-items .bem-addon-desc,
.bemv5-checkout .bem-addon-option .bem-addon-desc {
    display: block;
    width: 100%;
    font-size: 0.78rem;
    color: var(--clr-text-secondary);
    line-height: 1.5;
    margin-top: 6px;
    transition: color var(--transition);
}

.bemv5-checkout .addon-items.active .description,
.bemv5-checkout .bem-addon-option.active .description {
    color: var(--clr-text-secondary);
}

/* the per-option price the plugin prints */
.bemv5-checkout .addon-items .amount,
.bemv5-checkout .bem-addon-option .amount,
.bemv5-checkout .bem-addon-cost {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--clr-text-secondary);
}

.bemv5-checkout .addon-items.active .amount,
.bemv5-checkout .bem-addon-option.active .amount,
.bemv5-checkout .addon-items.active .bem-addon-cost,
.bemv5-checkout .bem-addon-option.active .bem-addon-cost {
    color: var(--clr-text-primary);
}

/* =============================================
   SIDEBAR
   ============================================= */
.bemv5-checkout .sidebar {
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-xl);
    padding: 24px;
    position: sticky;
    top: 40px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 20px 50px -12px rgba(60, 20, 130, 0.18),
        0 4px 16px rgba(60, 20, 130, 0.06);
}

.bemv5-checkout .sidebar-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--clr-border);
}

.bemv5-checkout .sidebar-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--clr-text-primary);
    margin: 0;
}

/* generic inputs (also applied to WC fields in the mapping section) */
.bemv5-checkout .input,
.bemv5-checkout .woocommerce-billing-fields input[type="text"],
.bemv5-checkout .woocommerce-billing-fields input[type="email"],
.bemv5-checkout .woocommerce-billing-fields input[type="tel"],
.bemv5-checkout .woocommerce-billing-fields input[type="number"],
.bemv5-checkout .woocommerce-billing-fields input[type="password"],
.bemv5-checkout .woocommerce-billing-fields select,
.bemv5-checkout .woocommerce-billing-fields .select2-selection,
.bemv5-checkout .promo-row input {
    width: 100%;
    /* !important: the base theme's `button,input,…{font-family:inherit}` plus WC's
       own input rules fight this; the TYPED value must render in Stack Sans Text. */
    font-family: var(--font-text) !important;
    background: var(--clr-surface-3);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    color: var(--clr-text-primary);
    transition: border-color var(--transition);
    outline: none;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.31px;
    font-weight: 400;
}

.bemv5-checkout .input::placeholder,
.bemv5-checkout .woocommerce-billing-fields input::placeholder,
.bemv5-checkout .promo-row input::placeholder {
    color: var(--clr-text-muted);
    font-weight: 300;
}

/* WC wraps each control in an inline span — make it a full-width block */
.bemv5-checkout .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

/* ---- select2 (country) light skin ----
   WooCommerce loads its own select2.css; every rule below is forced with
   !important and mirrors select2's --default specificity so the light skin
   always wins regardless of stylesheet order. The open dropdown is appended to
   <body> (outside .bemv5-checkout), so it is scoped to the page body class with
   literal colours (the --clr-* custom props only exist inside .bemv5-checkout). */

/* Closed box */
.bemv5-checkout .select2-container--default .select2-selection--single,
.bemv5-checkout .select2-container .select2-selection--single {
    height: auto !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #FFFFFF !important;
    border: 1.5px solid #E8E4DE !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
}

.bemv5-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1A1320 !important;
    line-height: 24px !important;
    padding: 0 !important;
}

/* select2 (country) renders its dropdown at <body> level — OUTSIDE .bemv5-checkout —
   so the --font-* custom props don't resolve there. Force Stack Sans Text with a
   LITERAL value across the whole widget (closed box + dropdown + options + search),
   !important to beat select2's own CSS and the base `input{font-family:inherit}`. */
body.bemv5-checkout-page .select2-container,
body.bemv5-checkout-page .select2-container *,
body.bemv5-checkout-page .select2-dropdown,
body.bemv5-checkout-page .select2-dropdown * {
    font-family: 'Stack Sans Text', system-ui, sans-serif !important;
}

.bemv5-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9A93A6 !important;
}

.bemv5-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 10px !important;
}

.bemv5-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6B6477 transparent transparent transparent !important;
}

.bemv5-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(97, 0, 198, 0.45) !important;
}

/* Open dropdown panel (body-level) */
body.bemv5-checkout-page .select2-container .select2-dropdown,
body.bemv5-checkout-page .select2-container--default .select2-dropdown,
body.bemv5-checkout-page .select2-dropdown {
    background-color: #FFFFFF !important;
    border: 1.5px solid #E8E4DE !important;
    border-radius: 10px !important;
    color: #1A1320 !important;
    box-shadow: 0 12px 32px rgba(24, 18, 32, 0.12) !important;
}

body.bemv5-checkout-page .select2-search--dropdown {
    padding: 8px !important;
    background-color: #FFFFFF !important;
}

body.bemv5-checkout-page .select2-container--default .select2-search--dropdown .select2-search__field,
body.bemv5-checkout-page .select2-search--dropdown .select2-search__field {
    background-color: #FAF8F5 !important;
    border: 1.5px solid #E8E4DE !important;
    border-radius: 8px !important;
    color: #1A1320 !important;
    padding: 8px 10px !important;
    outline: none !important;
}

body.bemv5-checkout-page .select2-results > .select2-results__options {
    max-height: 240px !important;
    background-color: #FFFFFF !important;
}

body.bemv5-checkout-page .select2-container--default .select2-results__option,
body.bemv5-checkout-page .select2-results__option {
    color: #1A1320 !important;
    background-color: transparent !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
}

body.bemv5-checkout-page .select2-container--default .select2-results__option--highlighted,
body.bemv5-checkout-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #6100C6 !important;
    color: #fff !important;
}

body.bemv5-checkout-page .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(97, 0, 198, 0.10) !important;
    color: #1A1320 !important;
}

.bemv5-checkout .input:focus,
.bemv5-checkout .woocommerce-billing-fields input:focus,
.bemv5-checkout .woocommerce-billing-fields select:focus,
.bemv5-checkout .promo-row input:focus {
    border-color: var(--clr-border-focus);
}

/* Browser autofill paints inputs white/yellow and overrides the themed background.
   The inset box-shadow masks it; text stays the themed colour. The WooCommerce validated/
   invalid contexts are listed explicitly so the mask still wins AFTER a field is
   validated (otherwise WC's higher-specificity rule drops the mask and the white
   autofill background reappears on focus/blur). No border here — the focus rule
   below owns the accent border. */
.bemv5-checkout input:-webkit-autofill,
.bemv5-checkout input:-webkit-autofill:hover,
.bemv5-checkout input:-webkit-autofill:focus,
.bemv5-checkout input:-webkit-autofill:active,
.bemv5-checkout textarea:-webkit-autofill,
.bemv5-checkout select:-webkit-autofill,
.bemv5-checkout .form-row.woocommerce-validated input:-webkit-autofill,
.bemv5-checkout .form-row.woocommerce-validated input:-webkit-autofill:hover,
.bemv5-checkout .form-row.woocommerce-validated input:-webkit-autofill:focus,
.bemv5-checkout .form-row.woocommerce-invalid input:-webkit-autofill,
.bemv5-checkout .form-row.woocommerce-invalid input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--clr-text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--clr-surface-3) inset !important;
    box-shadow: 0 0 0 1000px var(--clr-surface-3) inset !important;
    caret-color: var(--clr-text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

/* WooCommerce colours validated fields green and invalid red. Match index-light.html:
   themed border (accent only on focus) — no green/red. IMPORTANT: do NOT set
   box-shadow here, or it would wipe the autofill mask above. */
.bemv5-checkout .woocommerce-billing-fields .form-row.woocommerce-validated input.input-text,
.bemv5-checkout .woocommerce-billing-fields .form-row.woocommerce-validated select,
.bemv5-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid input.input-text,
.bemv5-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid select,
.bemv5-checkout .form-row.woocommerce-validated input.input-text,
.bemv5-checkout .form-row.woocommerce-invalid input.input-text {
    background-color: var(--clr-surface-3) !important;
    border-color: var(--clr-border) !important;
}

.bemv5-checkout .woocommerce-billing-fields .form-row.woocommerce-validated input.input-text:focus,
.bemv5-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid input.input-text:focus,
.bemv5-checkout .form-row input.input-text:focus,
.bemv5-checkout .form-row select:focus {
    border-color: var(--clr-border-focus) !important;
}

/* =============================================
   EMAIL ROW + CHECK / EDIT
   ============================================= */
.bemv5-checkout .email-row {
    margin-bottom: 20px;
}

.bemv5-checkout .email-input-wrap {
    display: flex;
    gap: 8px;
    /* stretch (mock default) so the Check/Edit button matches the input's full
       height instead of floating shorter than it (that mismatch read as a "gap"). */
    align-items: stretch;
}

/* WC renders billing_email as a wide .form-row with its own label + wrapper.
   Force it to behave as a flexible item so the input + Check button sit on one
   row (override the generic .form-row width:100% reset above). */
.bemv5-checkout .email-row .form-row {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.bemv5-checkout .email-row .form-row > label {
    display: none !important;
}

.bemv5-checkout .email-row .woocommerce-input-wrapper,
.bemv5-checkout .email-row input[type="email"] {
    display: block;
    width: 100%;
    margin: 0;
}

.bemv5-checkout .email-input-wrap .btn-check,
.bemv5-checkout .email-input-wrap .btn-edit {
    flex: 0 0 auto;
}

.bemv5-checkout .btn-check,
.bemv5-checkout .btn-edit {
    /* inline-flex centering keeps the label centred when the button is stretched
       to the input's full height (see .email-input-wrap: align-items: stretch). */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 18px !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-text) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    transition: all var(--transition) !important;
    flex-shrink: 0;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    height: auto !important;
}

.bemv5-checkout .btn-check {
    background: var(--clr-accent) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
}

.bemv5-checkout .btn-check:hover {
    background: var(--clr-accent-hover) !important;
}

.bemv5-checkout .btn-edit {
    background: var(--clr-surface-3) !important;
    background-image: none !important;
    border: 1.5px solid var(--clr-border) !important;
    color: var(--clr-text-secondary) !important;
}

.bemv5-checkout .btn-edit:hover {
    border-color: var(--clr-border-hover) !important;
    color: var(--clr-text-primary) !important;
}

.bemv5-checkout .bemv5-hidden {
    display: none !important;
}

/* Verified email — js/v5-checkout.js adds .verified to #billing_email on a
   successful "Check". Mock shows green border + faint green wash + a green check
   disc on the right. CSS-only: the tick is an inline-SVG background (no JS/markup
   change). #billing_email lacks the .input class, so it's targeted by id too. */
.bemv5-checkout .input.verified,
.bemv5-checkout #billing_email.verified {
    border-color: var(--clr-success) !important;
    background-color: rgba(14, 138, 63, 0.05) !important;
    padding-right: 42px !important;
}

/* The green check disc sits on the input's wrapper (not the input's own
   background), so the browser-autofill box-shadow mask can't paint over it.
   :has() lets the wrapper react to the verified input with no JS. */
.bemv5-checkout .email-row .woocommerce-input-wrapper {
    position: relative;
}

.bemv5-checkout .email-row .woocommerce-input-wrapper:has(#billing_email.verified)::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230E8A3F'/%3E%3Cpath d='M5.4 10.3l2.7 2.7 6.5-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Inline email hint: format error / "did you mean" typo nudge under the field. */
.bemv5-checkout .bemv5-email-hint {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.bemv5-checkout .bemv5-email-hint:empty {
    display: none;
}

.bemv5-checkout .bemv5-email-hint.is-error {
    color: var(--clr-error);
}

.bemv5-checkout .bemv5-email-hint.is-suggest {
    color: var(--clr-text-secondary);
}

.bemv5-checkout .bemv5-email-hint .bemv5-email-fix {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--clr-accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bemv5-checkout .bemv5-email-hint .bemv5-email-fix:hover {
    color: var(--clr-accent-hover);
}

/* =============================================
   ACCORDIONS (Customer Details / Billing Info)
   ============================================= */
.bemv5-checkout .accordion {
    border-top: 1px solid var(--clr-border);
    padding-top: 16px;
    margin-top: 16px;
    overflow: hidden;
}

.bemv5-checkout .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 2px 0 12px;
}

.bemv5-checkout .accordion-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-text-primary);
}

.bemv5-checkout .accordion-arrow {
    width: 18px;
    height: 18px;
    color: var(--clr-text-muted);
    transition: transform var(--transition);
    flex-shrink: 0;
}

.bemv5-checkout .accordion.open .accordion-arrow {
    transform: rotate(180deg);
}

.bemv5-checkout .accordion-body {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 8px;
}

.bemv5-checkout .accordion.open .accordion-body {
    display: flex;
}

/* WC field rows inside accordions */
.bemv5-checkout .accordion-body .form-row {
    margin: 0;
    padding: 0;
    width: 100%;
    float: none;
}

.bemv5-checkout .accordion-body .form-row label {
    display: block;
    font-size: 14px;
    color: var(--clr-text-secondary);
    margin-bottom: 5px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: -0.31px;
}

.bemv5-checkout .accordion-body .form-row .required {
    color: var(--clr-accent);
    border: 0;
}

/* two-up rows for first/last name etc. */
.bemv5-checkout .accordion-body .bemv5-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* =============================================
   PRICING (review-order table tfoot, re-skinned)
   ============================================= */
.bemv5-checkout .woocommerce-checkout-review-order-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    margin: 0;
    background: transparent;
}

.bemv5-checkout .woocommerce-checkout-review-order-table tfoot {
    display: block;
    border-top: 1px solid var(--clr-border);
    padding-top: 16px;
    margin-top: 16px;
}

.bemv5-checkout .woocommerce-checkout-review-order-table tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    border: 0;
}

.bemv5-checkout .woocommerce-checkout-review-order-table tfoot tr th,
.bemv5-checkout .woocommerce-checkout-review-order-table tfoot tr td {
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.31px;
    font-weight: 400;
    color: var(--clr-text-secondary);
    text-align: left;
}

.bemv5-checkout .woocommerce-checkout-review-order-table tfoot tr td {
    font-weight: 500;
    color: var(--clr-text-primary);
    text-align: right;
}

.bemv5-checkout .woocommerce-checkout-review-order-table tfoot .cart-discount td {
    color: var(--clr-success);
}

/* Coupon "[Remove]" link — WC outputs it inside the discount cell with no colour
   of its own, so on the light theme it was invisible. Make it a small, clearly
   visible link in the theme's secondary tone, turning red (destructive) on hover. */
.bemv5-checkout .woocommerce-remove-coupon {
    color: var(--clr-text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 8px;
    white-space: nowrap;
}

.bemv5-checkout .woocommerce-remove-coupon:hover {
    color: var(--clr-error);
}

/* Subtotal's mapped variation suffix — muted + smaller so "Subtotal" still leads. */
.bemv5-checkout .woocommerce-checkout-review-order-table tfoot .bemv5-subtotal-variation {
    font-weight: 400;
    color: var(--clr-text-muted);
    font-size: 12px;
}

/* Itemised add-on lines (one per selected option) — slightly indented + secondary
   tone so they read as a breakdown beneath the subtotal. */
.bemv5-checkout .woocommerce-checkout-review-order-table tfoot .bemv5-addon-line th {
    font-weight: 400;
    color: var(--clr-text-secondary);
    padding-left: 12px;
}

.bemv5-checkout .bemv5-addon-free {
    color: var(--clr-success);
    font-weight: 500;
}

.bemv5-checkout .woocommerce-checkout-review-order-table tfoot .order-total {
    padding: 12px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--clr-border);
}

.bemv5-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.bemv5-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.45px;
    color: var(--clr-text-primary);
}

/* =============================================
   PROMO CODE
   ============================================= */
.bemv5-checkout .promo-row {
    position: relative;
    margin: 14px 0;
}

.bemv5-checkout .promo-row input {
    padding-right: 90px;
}

.bemv5-checkout .promo-row .apply-btn {
    position: absolute;
    /* Seat the button INSIDE the input flush top & bottom: top/bottom (instead of
       top:50% + translateY) make it fill the input's height minus a small even
       inset, so it no longer floats short in the middle. */
    top: 5px;
    bottom: 5px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-bg) !important;
    background-image: none !important;
    border: none !important;
    color: var(--clr-text-disabled) !important;
    padding: 0 12px !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-text) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: not-allowed;
    pointer-events: none;
    transition: all var(--transition) !important;
    white-space: nowrap;
    outline: none;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
}

/* Enabled once a code is typed — mirrors index-light.html's .btn-apply.enabled
   (default is the subtle grey var(--clr-bg) that blends into the input). */
.bemv5-checkout .promo-row .apply-btn.enabled {
    background: var(--clr-accent-soft) !important;
    color: var(--clr-accent) !important;
    cursor: pointer;
    pointer-events: auto;
}

.bemv5-checkout .promo-row .apply-btn.enabled:hover {
    background: var(--clr-accent) !important;
    color: #fff !important;
}

/* While loading, hide the label even though .enabled set color:#fff — same
   specificity (4 classes) but declared later, so this wins. Only the spinner shows;
   the label returns when .is-loading is removed. */
.bemv5-checkout .promo-row .apply-btn.is-loading {
    color: transparent !important;
}

/* place_order's base colour comes from a 2-id selector (.bemv5-checkout #payment
   #place_order, specificity 2,1,0), so the loading spinner's color:transparent must
   match the id-count + add a class (2,2,0) to hide the "Complete Purchase" label. */
.bemv5-checkout #payment #place_order.is-loading {
    color: transparent !important;
}

/* =============================================
   PAYMENT METHODS  (#payment / .wc_payment_methods)
   ============================================= */
.bemv5-checkout #payment {
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 16px;
}

.bemv5-checkout .payment-section-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--clr-text-primary);
    margin-bottom: 10px;
}

.bemv5-checkout #payment ul.wc_payment_methods {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* "Please fill in your details above to see available payment methods." —
   WooCommerce's no-gateways placeholder (li.woocommerce-info). Real gateways are
   li.wc_payment_method, so hiding this never hides an actual payment option. */
.bemv5-checkout #payment li.woocommerce-info,
.bemv5-checkout #payment ul.wc_payment_methods > li.woocommerce-info {
    display: none !important;
}

/* Each method is ONE flex row: [radio] [label: name … icons]. WooCommerce keeps
   the radio as a separate sibling of the label, so the ROW must be the <li>
   (not the label). Making the label display:flex alone left it block-level, which
   dropped it onto its own line below the radio — that was the "kaymış" bug.
   flex-wrap lets the expanded payment box drop to a full-width line below. */
.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method {
    margin: 0;
    background: var(--clr-surface-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    transition: background-color var(--transition);
}

/* Light redesign: hover + selected-row highlight (mock .payment-option.selected).
   The selected highlight is driven by a JS class (syncPaymentHighlight in
   js/v5-checkout.js), NOT :has(:checked). Reason: the Stripe wallet row is a
   SEPARATE radio group (name=bemv5_wallet), so :has(:checked) could light up two
   rows at once (a real gateway AND the wallet), and :has() re-eval on radio change
   is unreliable in some browsers — both caused the "old row stays purple" bug.
   The JS sets exactly ONE .bemv5-pay-selected at a time. */
.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method:hover {
    background: var(--clr-card-hover);
}

.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method.bemv5-pay-selected {
    background: var(--clr-accent-soft);
}

.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method:not(:last-child) {
    border-bottom: 1px solid var(--clr-border);
}

.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > label {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1px;
    font-weight: 500;
    color: var(--clr-text-primary);
}

/* expanded box (Stripe card element, PayPal box) wraps to its own full-width line */
.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > .payment_box {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 12px;
}

/* custom radio dot */
.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    border: 2px solid var(--clr-border-strong);
    margin: 0;
    order: 0;
    position: relative;
    cursor: pointer;
    transition: border-color var(--transition);
    flex-shrink: 0;
}

.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"]:checked {
    border-color: var(--clr-accent);
}

.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--clr-accent);
    border-radius: 50%;
}

.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > label img {
    margin-left: auto;
    height: 24px;
    max-height: 24px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

/* Korapay ships a white-wordmark logo (kora-wc-300.png) built for dark checkouts;
   on the light payment row the "kora" wordmark vanishes. Swap to the navy-wordmark
   variant from the SAME plugin (kora-wc-full.png, ~12KB — actually smaller than the
   18KB white original) — CSS-only image replacement via the `content` property, so
   no PHP/plugin change and no perf cost. */
.bemv5-checkout #payment li.wc_payment_method.payment_method_korapay > label img {
    content: url('/wp-content/plugins/korapay-payments-gateway/assets/images/kora-wc-full.png');
}

/* PayPal Payments injects the reCAPTCHA v2 fallback iframe into #ppcp-recaptcha-v2-container
   with only an inline `margin:20px 0` — no positioning, no layout. On the v5 chrome the
   container ends up overlapping the "Pay" button area. Force it into its own block row
   above the order button so the challenge renders cleanly (and the user can actually
   solve it without the iframe sitting on top of the click target). */
.bemv5-checkout #ppcp-recaptcha-v2-container {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    clear: both !important;
    margin: 16px 0 !important;
    min-height: 78px;
}
.bemv5-checkout #ppcp-recaptcha-v2-container > div,
.bemv5-checkout #ppcp-recaptcha-v2-container iframe {
    margin: 0 auto !important;
}

/* Stripe "Credit / Debit Card" — Visa + Mastercard icons, right-aligned. */
.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > label .bemv5-card-icons {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > label svg,
.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > label .bemv5-card-icons svg {
    height: 24px;
    width: auto;
    display: block;
}

/* The theme's global `svg { fill: var(--text-color) }` overrides these card
   icons' root fill="none", so their inner border-rect (which has no explicit
   fill) inherits the dark text colour and covers the white card background,
   leaving only a thin light edge. Re-assert fill:none so the white shows. */
.bemv5-checkout .pay-svg {
    fill: none;
}

/* Wallet glyph (Apple) relies on currentColor; keep it the label's light colour. */
.bemv5-checkout .bemv5-wallet-icon svg {
    fill: currentColor;
}

/* Confirmo's own JS appends an <img class="confirmo-logo"> to the label — hide
   it; we present the gateway as "Crypto" with the Bitcoin card icon instead. */
.bemv5-checkout .confirmo-logo {
    display: none !important;
}

/* gateway icons may be multiple imgs (PayPal, etc.) — keep them tidy on the right */
.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method > label img + img {
    margin-left: 4px;
}

.bemv5-checkout #payment .payment_box {
    background: var(--clr-surface-2);
    border: 0;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--clr-text-secondary);
}

.bemv5-checkout #payment .payment_box::before {
    display: none;
}

/* =============================================
   GATEWAY INTEGRATION FIXES (Stripe / PayPal)
   ============================================= */

/* Stripe/PayPal inject the express-checkout (Apple Pay / Google Pay / Link)
   element as a DIRECT CHILD of the checkout grid, which adds a stray grid cell
   and shifts the whole 1fr/380px layout. Safety net: force any direct child of
   the grid that isn't the logo/left-panel/sidebar to span the full width so it
   can never break the columns. */
.bemv5-checkout .checkout-wrapper > *:not(.bemv5-logo):not(.left-panel):not(.sidebar-col) {
    grid-column: 1 / -1;
}

/* Wallet express checkout (Google Pay / Apple Pay via Stripe), presented as a
   selectable payment ROW. Selecting it swaps the main CTA for the wallet button.
   NOTE: wallets only render in a secure context (HTTPS) on a supported
   device/browser. js/v5-checkout.js parks the Stripe element in #bemv5-gpay-slot
   (placed AFTER #order_review so the AJAX refresh never destroys it).

   The slot is hidden by CLIPPING height — never display:none, which would
   unmount the Stripe button — and revealed full-width when the row is selected. */
.bemv5-checkout #bemv5-gpay-slot {
    margin: 0;
}

.bemv5-checkout #bemv5-gpay-slot.is-active {
    margin: 14px 0 0;
}

/* Collapse the Stripe express element by default — height-clip only, NEVER
   display:none (that unmounts the Stripe button). This also stops it from
   flashing at its raw injection point before JS parks it in the slot. */
.bemv5-checkout #wc-stripe-express-checkout-element {
    height: 0;
    overflow: hidden;
    margin: 0 !important;
}

.bemv5-checkout #bemv5-gpay-slot.is-active #wc-stripe-express-checkout-element {
    height: auto;
    min-height: 56px;
    overflow: visible;
}

.bemv5-checkout #wc-stripe-express-checkout-button-separator {
    display: none !important;
}

/* Wallet method icon (Google "G" / Apple glyph), sized like the card icons. */
.bemv5-checkout #payment ul.wc_payment_methods li.wc_payment_method.bemv5-wallet-method > label .bemv5-wallet-icon svg {
    height: 20px;
}

/* When the wallet row is active, suppress the underlying real gateway's
   selected highlight + hide its expanded box and the default place-order CTA,
   so only the wallet button shows as the main action. */
.bemv5-checkout #payment.bemv5-express-active li.wc_payment_method:not(.bemv5-wallet-method) > input[type="radio"]:checked {
    border-color: var(--clr-border);
}

.bemv5-checkout #payment.bemv5-express-active li.wc_payment_method:not(.bemv5-wallet-method) > input[type="radio"]:checked::after {
    display: none;
}

.bemv5-checkout #payment.bemv5-express-active .payment_box {
    display: none !important;
}

.bemv5-checkout #payment.bemv5-express-active #place_order {
    display: none !important;
}

/* PayPal (ppcp) injects its OWN standalone Apple Pay + Google Pay express buttons
   right after #place_order — UNCONDITIONALLY (not gated by selecting a method, not
   part of the radio list). They duplicate the Stripe wallet row and, on devices
   where a wallet can't run (e.g. Apple Pay on Windows/Chrome), render dead/stuck.
   Decision: wallets go through Stripe (the radio-row pattern), so hide PayPal's
   standalone wallet buttons on checkout. DISPLAY-ONLY + checkout-scoped: the PayPal
   radio gateway (normal PayPal/card via #ppc-button-ppcp-gateway) is untouched and
   keeps working. Reversible. */
/* Robust + page-level: PayPal's SDK can render/move these wallet buttons OUTSIDE
   .bemv5-checkout and may suffix the ids, so match by id-prefix at the body level
   too. The id-prefix [id^=...] deliberately does NOT match #ppc-button-ppcp-gateway
   or #ppc-button-ppcp-card-button-gateway, so the normal PayPal + card buttons stay. */
body.bemv5-checkout-page [id^="ppc-button-ppcp-applepay"],
body.bemv5-checkout-page [id^="ppc-button-ppcp-googlepay"],
.bemv5-checkout [id^="ppc-button-ppcp-applepay"],
.bemv5-checkout [id^="ppc-button-ppcp-googlepay"] {
    display: none !important;
}

/* Blocks-checkout express area is unused here (we run the classic checkout). */
.bemv5-checkout .wc-block-components-express-payment {
    display: none !important;
}

/* Expanded payment box (Stripe card element / PayPal area) on the light theme.
   No outer border — the Stripe card element inside already has its own border;
   doubling them created an ugly nested-box look. */
.bemv5-checkout #payment div.payment_box {
    background: var(--clr-surface-3);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--clr-text-secondary);
    margin: 0 0 12px;
}

.bemv5-checkout #payment div.payment_box p {
    color: var(--clr-text-secondary);
}

/* Light-theme the Stripe Payment Element (a Stripe-hosted iframe). WC Stripe
   (10.5+) builds the iframe's "Appearance" by reading the COMPUTED styles of the
   hidden #wc-stripe-hidden-style-input (class .input-text). Styling that input —
   and any .input-text inside #payment — light makes Stripe render the card fields
   light to match the theme. The element container is light too. */
.bemv5-checkout #payment #wc-stripe-hidden-style-input,
.bemv5-checkout #payment .input-text,
.bemv5-checkout #payment input.input-text {
    background-color: var(--clr-surface-3) !important;
    color: var(--clr-text-primary) !important;
    border: 1.5px solid var(--clr-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
}

.bemv5-checkout #payment #wc-stripe-hidden-style-input::placeholder,
.bemv5-checkout #payment .input-text::placeholder {
    color: var(--clr-text-muted) !important;
}

/* WC Stripe wraps its card form in <fieldset id="wc-stripe-cc-form"> (and other
   gateways do the same). Browsers render fieldset with a default border (visible
   as the unwanted outer rectangle on the light theme — the dark theme hid it by
   coincidence of background colour). Reset it so only our themed boxes show.
   min-width:0 also stops Chrome's fieldset default (min-content) from breaking
   the flex layout. Scoped to #payment so other fieldsets on the site aren't
   touched. */
.bemv5-checkout #payment fieldset {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.bemv5-checkout #payment fieldset > legend {
    display: none;
}

/* Stripe UPE container: the Stripe iframe inside already renders the card
   fields with their own rounded borders (driven by the Appearance API via
   the .input-text styler below). An outer border here would just nest a box
   around that — the "border-box around the form" we don't want. So no border,
   no padding (the parent .payment_box already pads). The legacy non-UPE Stripe
   selectors keep a border so each separate field still looks like an input. */
.bemv5-checkout #payment .wc-stripe-upe-element,
.bemv5-checkout #payment #wc-stripe-upe-element {
    background: transparent;
    border: 0;
    padding: 0;
}

.bemv5-checkout #payment .wc-stripe-elements-field,
.bemv5-checkout #payment .StripeElement {
    background: var(--clr-surface-3);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}

.bemv5-checkout #payment .wc-stripe-upe-errors,
.bemv5-checkout #payment .woocommerce-error,
.bemv5-checkout #payment .wc-stripe-error {
    color: var(--clr-error);
}

/* =============================================
   TERMS / POLICY CHECKBOXES (injected before submit)
   privacy_policy / terms_of_service / refund_policy
   ============================================= */
.bemv5-checkout #payment .form-row.privacy,
.bemv5-checkout #payment .form-row.terms,
.bemv5-checkout #payment .form-row.policy,
.bemv5-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
    margin: 0 0 12px;
    padding: 0;
}

.bemv5-checkout #payment .form-row.privacy .woocommerce-input-wrapper,
.bemv5-checkout #payment .form-row.terms .woocommerce-input-wrapper,
.bemv5-checkout #payment .form-row.policy .woocommerce-input-wrapper {
    display: block;
}

/* Checkbox sits in a fixed left gutter (absolute) so the consent text flows as
   normal wrapping inline text beside it. (A flex label turned every word-run and
   link into its own narrow flex column, shattering the paragraph.) */
.bemv5-checkout #payment .form-row.privacy label,
.bemv5-checkout #payment .form-row.terms label,
.bemv5-checkout #payment .form-row.policy label {
    position: relative;
    display: block;
    margin: 0;
    padding-left: 28px;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: -0.1px;
    color: var(--clr-text-secondary);
    cursor: pointer;
}

.bemv5-checkout #payment .form-row.privacy input[type="checkbox"],
.bemv5-checkout #payment .form-row.terms input[type="checkbox"],
.bemv5-checkout #payment .form-row.policy input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid var(--clr-border-strong);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition);
}

.bemv5-checkout #payment .form-row.privacy input[type="checkbox"]:checked,
.bemv5-checkout #payment .form-row.terms input[type="checkbox"]:checked,
.bemv5-checkout #payment .form-row.policy input[type="checkbox"]:checked {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
}

.bemv5-checkout #payment .form-row.privacy input[type="checkbox"]:checked::after,
.bemv5-checkout #payment .form-row.terms input[type="checkbox"]:checked::after,
.bemv5-checkout #payment .form-row.policy input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.bemv5-checkout #payment .form-row a {
    color: var(--clr-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.bemv5-checkout #payment .form-row .required {
    margin-left: 2px;
    color: var(--clr-accent);
    border: 0;
    text-decoration: none;
}

/* PayPal fraud-protection reCAPTCHA: the invisible v3 check runs silently; only
   when it fails does a visible v2 "I'm not a robot" widget render into this
   container (which sits just above the CTA). Collapse it to nothing while empty
   so it never leaves a gap, and centre + space it cleanly when it appears. The
   widget's own colours come from the gateway's "v2 Theme" option (set it to
   Light to match this theme). */
.bemv5-checkout #ppcp-recaptcha-v2-container:empty {
    display: none !important;
    margin: 0 !important;
}

.bemv5-checkout #ppcp-recaptcha-v2-container {
    display: flex;
    justify-content: center;
    margin: 0 0 14px !important;
}

/* =============================================
   PLACE ORDER (CTA)
   ============================================= */
/* WooCommerce's .button.alt + theme button rules fight this, so the visual
   properties are forced to match the mock's .btn-cta exactly. */
body.bemv5-checkout-page #place_order,
.bemv5-checkout #payment #place_order,
.bemv5-checkout #place_order {
    /* NOT !important on display: PayPal (ppcp) hides #place_order (inline
       display:none) and shows its own PayPal button when PayPal is selected.
       Forcing display:block!important here would keep the default button and
       suppress the PayPal button. */
    display: block;
    width: 100% !important;
    padding: 15px !important;
    background: #6100C6 !important;
    background-image: none !important;
    color: #fff !important;
    font-family: var(--font-text) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border: none !important;
    border-radius: var(--radius-md, 10px) !important;
    cursor: pointer;
    transition: all var(--transition, 0.18s ease) !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: 0 4px 14px rgba(97, 0, 198, 0.22) !important;
    float: none !important;
    margin: 8px 0 0 !important;
    height: auto !important;
    opacity: 1 !important;
}

body.bemv5-checkout-page #place_order:hover,
.bemv5-checkout #place_order:hover {
    background: #4F00A3 !important;
    box-shadow: 0 8px 22px rgba(97, 0, 198, 0.30) !important;
    transform: translateY(-1px);
}

body.bemv5-checkout-page #place_order:disabled,
.bemv5-checkout #place_order:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none !important;
}

/* =============================================
   STRIPE / SECURE BADGE
   ============================================= */
.bemv5-checkout .secure-badge {
    text-align: center;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--clr-text-secondary);
}

/* =============================================
   GEO / LOCATION INFO (existing logic)
   ============================================= */
.bemv5-checkout .bemv5-geo {
    font-size: 13px;
    color: var(--clr-text-secondary);
    background: var(--clr-bg);
    border: 1px solid var(--clr-border-strong);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 16px;
}

.bemv5-checkout .bemv5-geo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bemv5-checkout .bemv5-geo-flag {
    font-size: 18px;
    line-height: 1;
}

.bemv5-checkout .bemv5-geo-loc {
    color: var(--clr-text-primary);
    font-weight: 500;
}

.bemv5-checkout .bemv5-geo-ip {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.8;
    word-break: break-all;
}

.bemv5-checkout .bemv5-geo-help {
    margin-top: 6px;
    font-size: 12px;
}

.bemv5-checkout .bemv5-geo a {
    color: var(--clr-accent);
}

/* =============================================
   NOTICES  (WC error/message/info)
   ============================================= */
/* Left-panel notices box — empty => hidden, so it never shifts the layout. */
.bemv5-checkout .bem-checkout-notices {
    width: 100%;
    margin: 0 0 8px;
}

.bemv5-checkout .bem-checkout-notices:empty {
    display: none !important;
}

/* The group wrapper is just a container; only the inner notices get the bar look. */
.bemv5-checkout-page .woocommerce-NoticeGroup {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.bemv5-checkout-page .woocommerce-error,
.bemv5-checkout-page .woocommerce-message,
.bemv5-checkout-page .woocommerce-info {
    list-style: none;
    border-radius: 10px;
    padding: 16px;
    margin: 0 0 12px;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #D9D4CC;
    background: #FFFFFF;
    color: #1A1320;
    box-shadow: 0 4px 14px rgba(24, 18, 32, 0.06);
}

.bemv5-checkout-page .woocommerce-error::before,
.bemv5-checkout-page .woocommerce-message::before,
.bemv5-checkout-page .woocommerce-info::before {
    display: none;
}

.bemv5-checkout-page .woocommerce-error {
    background: rgba(211, 60, 60, 0.08);
    border-color: rgba(211, 60, 60, 0.22);
    color: #D33C3C;
}

.bemv5-checkout-page .woocommerce-message {
    background: rgba(14, 138, 63, 0.08);
    border-color: rgba(14, 138, 63, 0.22);
    color: #0E8A3F;
}

.bemv5-checkout-page .woocommerce-error li,
.bemv5-checkout-page .woocommerce-message li,
.bemv5-checkout-page .woocommerce-info li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bemv5-checkout-page .woocommerce-error a,
.bemv5-checkout-page .woocommerce-message a,
.bemv5-checkout-page .woocommerce-info a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =============================================
   SUPPRESS WC's DEFAULT BLOCK OVERLAY / SPINNER
   It greys out the order-review + payment during every update_checkout and
   looks bad on the light theme. The v5 fullscreen loader already covers waits.
   ============================================= */
.bemv5-checkout-page .blockUI.blockOverlay,
.bemv5-checkout-page .blockUI.blockMsg,
.bemv5-checkout .blockUI.blockOverlay,
.bemv5-checkout .blockUI.blockMsg,
.bemv5-checkout .woocommerce-checkout-review-order::before,
.bemv5-checkout #payment::before {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
}

/* =============================================
   IN-BUTTON LOADERS + INSTANT PRESS
   The full-screen candlestick overlay stays hidden; each button shows its own
   modern spinner while its request is in flight, and an instant :active press so
   a tap is felt immediately (actions are a ~1s server round trip).
   ============================================= */
.bemv5-checkout .option-btn:active,
.bemv5-checkout .apply-btn:active,
.bemv5-checkout .btn-check:active,
.bemv5-checkout .btn-edit:active,
body.bemv5-checkout-page #place_order:active,
.bemv5-checkout #place_order:active {
    transform: scale(0.97);
}

.bemv5-checkout .option-btn.is-loading,
.bemv5-checkout .apply-btn.is-loading,
body.bemv5-checkout-page #place_order.is-loading,
.bemv5-checkout #place_order.is-loading {
    color: transparent !important;
    pointer-events: none;
}

/* Spinner positioning context. Do NOT set position on .apply-btn — it is already
   position:absolute (floats inside the promo input); overriding it to relative
   dropped the button below the input. .option-btn is already position:relative;
   only #place_order is statically positioned and needs this. */
body.bemv5-checkout-page #place_order.is-loading,
.bemv5-checkout #place_order.is-loading {
    position: relative;
}

/* Hide the label/icons under the spinner (keeps the gradient/selected bg). */
.bemv5-checkout .option-btn.is-loading > *,
.bemv5-checkout .apply-btn.is-loading > * {
    visibility: hidden;
}

.bemv5-checkout .option-btn.is-loading::after,
.bemv5-checkout .apply-btn.is-loading::after,
body.bemv5-checkout-page #place_order.is-loading::after,
.bemv5-checkout #place_order.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(97, 0, 198, 0.25);
    border-top-color: var(--clr-accent);
    border-radius: 50%;
    animation: bemv5-btn-spin 0.6s linear infinite;
}

/* The place-order CTA has a solid accent (purple) background, so ITS spinner must
   be white to read; the option/apply spinners above are accent, sized for the
   white surfaces they sit on. Declared after the shared rule so it wins. */
body.bemv5-checkout-page #place_order.is-loading::after,
.bemv5-checkout #place_order.is-loading::after {
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}

@keyframes bemv5-btn-spin {
    to { transform: rotate(360deg); }
}

/* =============================================
   LOADER OVERLAY (market candlesticks)
   ============================================= */
.bemv5-loader {
    position: fixed;
    inset: 0;
    background: rgba(244, 242, 238, 0.6);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.bemv5-loader.show {
    display: flex;
}

.bemv5-loader .mkt-chart {
    display: flex;
    align-items: flex-end;
    height: 76px;
    gap: 5px;
}

.bemv5-loader .mkt-bar {
    position: relative;
    width: 8px;
    height: 100%;
    transform-origin: 50% 82%;
    animation: bemv5-bloom var(--bar-dur, 2.8s) var(--bar-delay, 0s) infinite cubic-bezier(0.45, 0, 0.55, 1);
    filter: drop-shadow(0 0 4px var(--bar-clr, #10b981));
}

.bemv5-loader .mkt-bar::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    border-radius: 2px;
    background: var(--bar-clr, #10b981);
    bottom: var(--body-b, 20%);
    height: var(--body-h, 30%);
}

.bemv5-loader .mkt-bar:nth-child(odd) { --bar-clr: #10b981; }
.bemv5-loader .mkt-bar:nth-child(even) { --bar-clr: #f43f5e; }
.bemv5-loader .mkt-bar:nth-child(1) { --bar-delay: 0s; --body-b: 22%; --body-h: 22%; }
.bemv5-loader .mkt-bar:nth-child(2) { --bar-delay: 0.11s; --body-b: 29%; --body-h: 30%; }
.bemv5-loader .mkt-bar:nth-child(3) { --bar-delay: 0.22s; --body-b: 52%; --body-h: 10%; }
.bemv5-loader .mkt-bar:nth-child(4) { --bar-delay: 0.33s; --body-b: 38%; --body-h: 20%; }
.bemv5-loader .mkt-bar:nth-child(5) { --bar-delay: 0.44s; --body-b: 30%; --body-h: 14%; }
.bemv5-loader .mkt-bar:nth-child(6) { --bar-delay: 0.55s; --body-b: 25%; --body-h: 27%; }
.bemv5-loader .mkt-bar:nth-child(7) { --bar-delay: 0.66s; --body-b: 18%; --body-h: 16%; }
.bemv5-loader .mkt-bar:nth-child(8) { --bar-delay: 0.77s; --body-b: 16%; --body-h: 23%; }
.bemv5-loader .mkt-bar:nth-child(9) { --bar-delay: 0.88s; --body-b: 21%; --body-h: 34%; }
.bemv5-loader .mkt-bar:nth-child(10) { --bar-delay: 0.99s; --body-b: 30%; --body-h: 12%; }

@keyframes bemv5-bloom {
    0%, 7% { opacity: 0; transform: scaleY(0.08); }
    26% { opacity: 1; transform: scaleY(1.07); }
    44%, 66% { opacity: 1; transform: scaleY(1); }
    86%, 100% { opacity: 0; transform: scaleY(0.08); }
}

/* =============================================
   THANK-YOU PAGE (order-received endpoint)
   Standalone block scoped to .bemv5-thankyou. Body chrome + gradient bg are
   inherited from body.bemv5-checkout-page; this layers a faint dot pattern,
   single-column 560px layout, white cards w/ soft purple shadow, chips,
   accordion w/ grid-rows animation, and the customer card.
   ============================================= */
body.bemv5-thankyou-page {
    padding: 48px 20px 64px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    display: flex !important;
}

body.bemv5-thankyou-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(97, 0, 198, 0.05) 1px, transparent 0);
    background-size: 22px 22px;
    opacity: 0.35;
    -webkit-mask-image: radial-gradient(ellipse at 50% 25%, black, transparent 70%);
            mask-image: radial-gradient(ellipse at 50% 25%, black, transparent 70%);
    z-index: 0;
}

.bemv5-checkout.bemv5-thankyou {
    position: relative;
    z-index: 1;
    width: 100%;
}

.bemv5-thankyou-wrapper {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.bemv5-thankyou-logo {
    width: 110px;
    height: auto;
    margin-bottom: 4px;
    display: block;
}

/* ----- card base ----- */
.bemv5-thankyou-card {
    width: 100%;
    background: var(--clr-card);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-xl);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 20px 50px -12px rgba(60, 20, 130, 0.18),
        0 4px 16px rgba(60, 20, 130, 0.06);
}

/* ----- success card ----- */
.bemv5-thankyou-success {
    padding: 40px 36px 36px;
    text-align: center;
}

.bemv5-thankyou-check {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: rgba(14, 138, 63, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.bemv5-thankyou-check::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(14, 138, 63, 0.16);
}

.bemv5-thankyou-check svg {
    width: 30px;
    height: 30px;
    stroke: var(--clr-success);
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bemv5-thankyou-title {
    font-family: var(--font-headline);
    font-size: 27px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--clr-text-primary);
    margin: 0 0 10px;
    text-wrap: balance;
}

.bemv5-thankyou-lead {
    font-family: var(--font-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--clr-text-secondary);
    max-width: 380px;
    margin: 0 auto 28px;
    text-wrap: pretty;
}

/* ----- chips ----- */
.bemv5-thankyou-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    text-align: left;
    margin: 0 0 30px;
}

.bemv5-thankyou-chip {
    background: var(--clr-card-hover);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.bemv5-thankyou-chip.full {
    grid-column: 1 / -1;
}

.bemv5-thankyou-chip-label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.bemv5-thankyou-chip-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--clr-text-primary);
    font-family: var(--font-text);
    overflow-wrap: anywhere;
}

.bemv5-thankyou-chip-value.mono {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
    letter-spacing: -0.01em;
}

.bemv5-thankyou-chip-value.strong {
    color: var(--clr-accent);
    font-weight: 600;
}

/* ----- CTA button (full-width inside success card) ----- */
.bemv5-thankyou-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 16px;
    background: var(--clr-accent);
    color: #fff !important;
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 0;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
    box-shadow: 0 4px 14px rgba(97, 0, 198, 0.22);
}

.bemv5-thankyou-button:hover {
    background: var(--clr-accent-hover);
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(97, 0, 198, 0.30);
    transform: translateY(-1px);
}

.bemv5-thankyou-button:active {
    transform: scale(0.99);
}

.bemv5-thankyou-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--transition);
}

.bemv5-thankyou-button:hover svg {
    transform: translateX(3px);
}

/* ----- failed payment branch ----- */
.bemv5-thankyou-failed {
    padding: 36px;
    text-align: center;
}

.bemv5-thankyou-failed .bemv5-thankyou-title {
    color: var(--clr-error);
}

/* ----- pending / on-hold branch ----- */
/* Order exists but no gateway confirmation yet (most often: user closed the
   gateway tab or clicked "back to merchant" without paying). Amber accent
   sits between success-green and failed-red — neither confirms nor declines. */
.bemv5-thankyou-pending {
    padding: 40px 36px 36px;
    text-align: center;
}

.bemv5-thankyou-clock {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: rgba(240, 165, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.bemv5-thankyou-clock::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(240, 165, 0, 0.20);
}

.bemv5-thankyou-clock svg {
    width: 30px;
    height: 30px;
    stroke: #C77F00;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ----- accordion: override the base v5 accordion inside thank-you so the
   body slides w/ a grid-rows transition (smoother than display: none/flex);
   the chevron rotates. .accordion-header click is handled by the shared
   delegated listener in v5-checkout.js. */
.bemv5-thankyou .accordion {
    border-top: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.bemv5-thankyou .accordion-header {
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.bemv5-thankyou .accordion-title {
    font-family: var(--font-headline);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--clr-text-primary);
}

.bemv5-thankyou .accordion-arrow {
    width: 20px;
    height: 20px;
    stroke: var(--clr-text-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.bemv5-thankyou .accordion.open .accordion-arrow {
    transform: rotate(180deg);
}

/* grid-rows trick for smooth height animation (the inner wrapping <div>
   owns overflow:hidden so the content collapses cleanly). */
.bemv5-thankyou .accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    gap: 0;
}

.bemv5-thankyou .accordion.open .accordion-body {
    display: grid;
    grid-template-rows: 1fr;
}

.bemv5-thankyou .accordion-body > div {
    overflow: hidden;
}

.bemv5-thankyou-accordion-inner {
    padding: 0 28px 26px;
}

/* ----- items + totals (rendered manually, not via WC order-details.php) ----- */
.bemv5-thankyou-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--clr-border);
}

.bemv5-thankyou-item + .bemv5-thankyou-item {
    padding-top: 18px;
}

.bemv5-thankyou-item-main {
    min-width: 0;
    flex: 1 1 auto;
}

.bemv5-thankyou-item-name {
    font-family: var(--font-headline);
    font-size: 16px;
    font-weight: 600;
    color: var(--clr-text-primary);
    margin: 0 0 12px;
}

.bemv5-thankyou-item-qty {
    color: var(--clr-text-muted);
    font-weight: 500;
    font-size: 14px;
}

.bemv5-thankyou-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bemv5-thankyou-meta li {
    display: flex;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    margin: 0;
}

.bemv5-thankyou-meta-label {
    color: var(--clr-text-secondary);
    font-weight: 400;
}

.bemv5-thankyou-meta-value {
    color: var(--clr-text-primary);
    font-weight: 500;
}

.bemv5-thankyou-item-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--clr-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.bemv5-thankyou-totals {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 18px;
}

.bemv5-thankyou-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
}

.bemv5-thankyou-total-row .label {
    color: var(--clr-text-secondary);
    font-weight: 400;
}

.bemv5-thankyou-total-row .value {
    color: var(--clr-text-primary);
    font-weight: 500;
}

.bemv5-thankyou-total-row.grand {
    padding-top: 14px;
    margin-top: 2px;
    border-top: 1px solid var(--clr-border);
}

.bemv5-thankyou-total-row.grand .label {
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: 600;
    color: var(--clr-text-primary);
}

.bemv5-thankyou-total-row.grand .value {
    font-family: var(--font-headline);
    font-size: 20px;
    font-weight: 600;
    color: var(--clr-accent);
}

/* ----- customer card ----- */
.bemv5-thankyou-customer {
    padding: 26px 28px 28px;
}

.bemv5-thankyou-customer-title {
    font-family: var(--font-headline);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--clr-text-primary);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.bemv5-thankyou-customer-title svg {
    width: 17px;
    height: 17px;
    stroke: var(--clr-accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bemv5-thankyou-address {
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
    color: var(--clr-text-secondary);
    margin: 0;
}

.bemv5-thankyou-address .name {
    color: var(--clr-text-primary);
    font-weight: 600;
    font-size: 15px;
}

.bemv5-thankyou-contact {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bemv5-thankyou-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--clr-text-secondary);
}

.bemv5-thankyou-contact-row svg {
    width: 16px;
    height: 16px;
    stroke: var(--clr-text-muted);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ----- extra (plugin output) card ----- */
.bemv5-thankyou-extra {
    padding: 22px 28px;
}

/* ----- footer help line ----- */
.bemv5-thankyou-foot {
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 400;
    color: var(--clr-text-primary);
    text-align: center;
    margin: 4px 0 0;
}

.bemv5-thankyou-foot a {
    font-family: var(--font-text);
    color: var(--clr-text-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bemv5-thankyou-foot a:hover {
    color: var(--clr-accent);
}

/* ----- mobile ----- */
@media (max-width: 540px) {
    body.bemv5-thankyou-page { padding: 28px 16px 48px !important; }
    .bemv5-thankyou-success { padding: 32px 22px 28px; }
    .bemv5-thankyou-chips { grid-template-columns: 1fr; }
    .bemv5-thankyou-title { font-size: 23px; }
    .bemv5-thankyou .accordion-header { padding: 20px; }
    .bemv5-thankyou-accordion-inner { padding: 0 20px 22px; }
    .bemv5-thankyou-customer { padding: 22px 20px; }
    .bemv5-thankyou-extra { padding: 18px 20px; }
}

/* =============================================
   PAY-FOR-ORDER PAGE (woocommerce/checkout/form-pay.php override).
   Loaded for both normal orders (this theme template) AND in-app orders
   (plugin swaps to its own template via locate_form_pay). Rules below scope
   the lavender summary card + resume CTA so both templates share styling
   even when the plugin's pay.css doesn't enqueue (non-in-app orders).
   ============================================= */
.bemv5-checkout .bemv5-pay-wrapper {
    grid-template-columns: 1fr;
    max-width: 460px;
}

.bemv5-checkout .bemv5-pay-summary-card {
    background: linear-gradient(180deg, #FBF7FF 0%, #F4ECFA 100%);
    border: 1px solid rgba(97, 0, 198, 0.10);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 22px;
}

.bemv5-checkout .bemv5-pay-lines { margin-bottom: 4px; }
.bemv5-checkout .bemv5-pay-lines .pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 14px;
    color: var(--clr-text-secondary);
}
.bemv5-checkout .bemv5-pay-lines .pricing-row .value {
    color: var(--clr-text-primary);
    font-weight: 500;
}

.bemv5-checkout .bemv5-pay-totals {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    margin: 0;
    background: transparent;
}
.bemv5-checkout .bemv5-pay-totals tfoot {
    display: block;
    border-top: 1px solid var(--clr-border);
    padding-top: 12px;
    margin-top: 12px;
}
.bemv5-checkout .bemv5-pay-totals tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}
.bemv5-checkout .bemv5-pay-totals tfoot tr th,
.bemv5-checkout .bemv5-pay-totals tfoot tr td {
    border: 0;
    padding: 0;
    font-size: 14px;
    background: transparent;
}
.bemv5-checkout .bemv5-pay-totals tfoot tr th {
    font-weight: 400;
    color: var(--clr-text-secondary);
    text-align: left;
}
.bemv5-checkout .bemv5-pay-totals tfoot tr td {
    font-weight: 500;
    color: var(--clr-text-primary);
    text-align: right;
}
.bemv5-checkout .bemv5-pay-totals tfoot tr.order-total {
    border-top: 1px solid rgba(97, 0, 198, 0.18);
    margin-top: 10px;
    padding-top: 14px;
    align-items: baseline;
}
.bemv5-checkout .bemv5-pay-totals tfoot tr.order-total th {
    font-size: 17px;
    font-weight: 600;
    color: var(--clr-text-primary);
}
.bemv5-checkout .bemv5-pay-totals tfoot tr.order-total td {
    font-size: 22px;
    font-weight: 700;
    color: var(--clr-accent);
    letter-spacing: -0.01em;
}

/* "Resume your payment" CTA — shown when the order has a gateway-stored
   hosted-invoice URL (Confirmo `_confirmo_redirect_url` by default; extensible
   via `bemv5_pay_resume_meta_keys` filter). Sits above the gateway selector. */
.bemv5-checkout .bemv5-pay-resume {
    background: #FFFFFF;
    border: 1px solid rgba(97, 0, 198, 0.18);
    border-left: 4px solid var(--clr-accent);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bemv5-checkout .bemv5-pay-resume-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bemv5-checkout .bemv5-pay-resume-text strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--clr-text-primary);
}
.bemv5-checkout .bemv5-pay-resume-text span {
    font-size: 13px;
    color: var(--clr-text-secondary);
}
.bemv5-checkout .bemv5-pay-resume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    background: var(--clr-accent);
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color var(--transition), transform var(--transition);
    box-shadow: 0 4px 14px rgba(97, 0, 198, 0.22);
}
.bemv5-checkout .bemv5-pay-resume-btn:hover {
    background: var(--clr-accent-hover);
    transform: translateY(-1px);
}
.bemv5-checkout .bemv5-pay-resume-alt {
    font-size: 12px;
    color: var(--clr-text-muted);
    margin: 0;
}

/* =============================================
   AffiliateWP Affiliate Area — Sign-in / Register tab UI
   Lives on the page containing [affiliate_area] (or [affiliate_login] /
   [affiliate_registration]). The templates at theme/affiliatewp/{login,
   register}.php wrap each form in a .bemv5-affiliate-tab-panel and emit a
   single .bemv5-affiliate-tabs pill bar at the top so the two forms stop
   stacking and behave like tabs.
   ============================================= */

.bemv5-affiliate-area {
    max-width: 480px;
    margin: 48px auto;
    padding: 32px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(97,0,198,.06);
    font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
    color: var(--clr-text-primary, #1a1a2e);
}

.bemv5-affiliate-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--clr-surface-soft, #f4f4f8);
    border-radius: 10px;
    margin-bottom: 24px;
}

.bemv5-affiliate-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--clr-text-secondary, #6b6b7c);
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .18s ease, color .18s ease, transform .12s ease;
    font-family: inherit;
}
.bemv5-affiliate-tab:hover { color: var(--clr-text-primary, #1a1a2e); }
.bemv5-affiliate-tab:active { transform: translateY(1px); }
.bemv5-affiliate-tab.active {
    background: #fff;
    color: var(--clr-primary, #6100c6);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.bemv5-affiliate-tab:focus-visible {
    outline: 2px solid var(--clr-primary, #6100c6);
    outline-offset: 2px;
}

.bemv5-affiliate-tab-panel { display: none; }
.bemv5-affiliate-tab-panel.active { display: block; }
.bemv5-affiliate-tab-panel[hidden] { display: none !important; }

/* AffiliateWP form skin — match the v5 input/button language so the inherited
   markup doesn't look like a stock plugin form pasted into the checkout chrome. */
.bemv5-affiliate-area .affwp-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
.bemv5-affiliate-area .affwp-form legend {
    font-size: 18px;
    font-weight: 700;
    color: var(--clr-text-primary, #1a1a2e);
    margin: 0 0 16px;
    padding: 0;
    width: 100%;
}
.bemv5-affiliate-area .affwp-form p {
    margin: 0 0 14px;
}
.bemv5-affiliate-area .affwp-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-text-secondary, #4b4b5c);
    margin-bottom: 6px;
}
.bemv5-affiliate-area .affwp-form input[type="text"],
.bemv5-affiliate-area .affwp-form input[type="email"],
.bemv5-affiliate-area .affwp-form input[type="url"],
.bemv5-affiliate-area .affwp-form input[type="password"],
.bemv5-affiliate-area .affwp-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--clr-border, #e4e4ec);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: var(--clr-text-primary, #1a1a2e);
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
.bemv5-affiliate-area .affwp-form textarea { resize: vertical; min-height: 96px; }
.bemv5-affiliate-area .affwp-form input:focus,
.bemv5-affiliate-area .affwp-form textarea:focus {
    outline: none;
    border-color: var(--clr-primary, #6100c6);
    box-shadow: 0 0 0 3px rgba(97,0,198,.12);
}
.bemv5-affiliate-area .affwp-form input[readonly] {
    background: var(--clr-surface-soft, #f7f7fa);
    color: var(--clr-text-muted, #8b8b9a);
}

.bemv5-affiliate-area .affwp-form label.affwp-tos,
.bemv5-affiliate-area .affwp-form label.affwp-user-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--clr-text-primary, #1a1a2e);
    cursor: pointer;
}
.bemv5-affiliate-area .affwp-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--clr-primary, #6100c6);
    cursor: pointer;
}

.bemv5-affiliate-area .affwp-form input[type="submit"],
.bemv5-affiliate-area .affwp-form button[type="submit"] {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: var(--clr-primary, #6100c6);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, transform .12s ease;
    font-family: inherit;
    margin-top: 4px;
}
.bemv5-affiliate-area .affwp-form input[type="submit"]:hover,
.bemv5-affiliate-area .affwp-form button[type="submit"]:hover {
    background: var(--clr-primary-hover, #5400ad);
}
.bemv5-affiliate-area .affwp-form input[type="submit"]:active,
.bemv5-affiliate-area .affwp-form button[type="submit"]:active {
    transform: translateY(1px);
}

.bemv5-affiliate-area .affwp-form .affwp-lost-password {
    text-align: center;
    margin: 12px 0 0;
    font-size: 13px;
}
.bemv5-affiliate-area .affwp-form .affwp-lost-password a {
    color: var(--clr-text-secondary, #6b6b7c);
    text-decoration: none;
}
.bemv5-affiliate-area .affwp-form .affwp-lost-password a:hover {
    color: var(--clr-primary, #6100c6);
    text-decoration: underline;
}

/* Server-side notices (AffWP::register->print_errors / login->print_errors) */
.bemv5-affiliate-area .affwp-errors,
.bemv5-affiliate-area .affwp-notice {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin: 0 0 14px;
}
.bemv5-affiliate-area .affwp-errors {
    background: rgba(220, 38, 38, .08);
    color: #b91c1c;
    border-left: 3px solid #dc2626;
}
.bemv5-affiliate-area .affwp-notice {
    background: rgba(34, 197, 94, .08);
    color: #166534;
    border-left: 3px solid #22c55e;
}

@media (max-width: 540px) {
    .bemv5-affiliate-area {
        margin: 24px 12px;
        padding: 24px 20px;
    }
}