/**
 * BEM Checkout Theme - Checkout Styles
 * Hides standard footer on checkout
 */
.woocommerce-checkout #colophon,
.woocommerce-checkout .site-footer {
    display: none !important;
}

/* User Info Display in Step 2 */
.bem-user-info-display {
    margin-bottom: 20px;
    color: var(--gray);
    font-size: 14px;
    font-weight: 500;
    font-family: "Stack Sans Text", sans-serif;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bem-border);
}

/* Back Button in Step Header */
.step .back {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 12px;
    background: transparent;
    transition: background 0.2s ease;
}

.step .back:hover {
    background: #2a2a2a;
}

.step .back svg path {
    fill: var(--gray);
}

.step .back:hover svg path {
    fill: var(--white);
}


:root {
    /* Colors */
    --color-primary: #FFFFFF;
    /* Matches --bem-text-main */
    --bem-text-main: #FFFFFF;
    --bem-bg: #000000;
    --bem-surface: #151515;
    /* Addon Cards */
    --bem-surface-hover: #1E1E1E;
    --bem-border: #2F2F2F;
    /* Borders */
    --bem-text-muted: #A0A0A0;
    /* Labels, descriptions */
    --bem-accent: #6e00ff;
    /* Primary Purple */
    --bem-accent-hover: #5a00cc;
    --bem-error: #E74C3C;

    /* Legacy Mappings */
    --white: #FAFAFA;
    --gray: #A0A0A0;
    --border: #3E3E3E;
    --bg: #000000;
    --dark: #212121;

    /* Layout */
    --bem-container: 956px;
    --bem-radius: 12px;
    --bem-spacing: 40px;
}

/* Layout Rules */
.bem-wc-order-review-hidden {
        position: absolute !important;
        left: -99999px !important;
        top: 0 !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Ensure payment radio buttons remain functional */
    .bem-wc-order-review-hidden input[type="radio"],
    .bem-wc-order-review-hidden .payment_box {
        position: absolute !important;
        left: -99999px !important;
    }

/* Gateway Empty State - hides payment box without display:none (breaks Stripe iframe) */
.bem-gateway-empty {
    visibility: hidden !important;
    position: absolute !important;
    left: -99999px !important;
    pointer-events: none !important;
}

    /* STEP VISIBILITY
       Keep both steps mounted so gateway SDKs initialize once and survive the
       Step 1 -> Step 2 transition without forcing update_checkout. */
    .page .bem-checkout-form {
        position: relative !important;
        width: 100% !important;
    }

    .page .step-page {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(-200vw, 0, 0) !important;
        animation: none !important;
    }

    .page .step-page.active {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: 1 !important;
        animation: fadeIn 0.3s ease !important;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ============================================
   FULL-PAGE CHECKOUT LAYOUT
   Matching checkout-new/checkout.html design
   ============================================ */

    /* Hide WordPress header on checkout */
    body.woocommerce-checkout .site-header,
    body.woocommerce-checkout #masthead,
    body.woocommerce-checkout header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Coupon Section Divider */
    .bem-coupon-section {
        border-top: 1px solid var(--bem-border);
        padding-top: 16px;
        margin-top: 16px;
    }

    /* Hide default WC heading */
    .woocommerce-billing-fields>h3 {
        display: none !important;
    }

    /* ============================================
   SELECT2 DROPDOWN STYLING (v4.5.7)
   Global rules for all Select2 dropdowns
   ============================================ */

    /* Main Select2 container */
    /* Main Select2 container - Fixed width to match other fields */
    body.woocommerce-checkout .select2-container,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Ensure Select2 container inside form-row respects parent width */
    body.woocommerce-checkout .form-row .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Select2 — matched to input styling */
    body.woocommerce-checkout .select2-container--default .select2-selection--single,
    body.woocommerce-checkout .select2-container .select2-selection--single {
        background: #0a0a0a !important;
        border: 1px solid #2a2a2a !important;
        border-radius: 10px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        outline: none !important;
        box-shadow: none !important;
        transition: border-color 0.2s ease !important;
    }

    body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
        color: var(--white) !important;
        font-family: "Stack Sans Text", sans-serif !important;
        font-size: 14px !important;
        line-height: 46px !important;
        padding: 0 14px !important;
        background-color: transparent !important;
    }

    body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
        right: 12px !important;
        width: 20px !important;
        background-color: transparent !important;
    }

    body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow b {
        border-color: #555 transparent transparent transparent !important;
        border-width: 5px 4px 0 4px !important;
        margin-left: -2px !important;
        margin-top: 0 !important;
    }

    /* Select2 dropdown - Gray background matching design */
    /* CRITICAL: Do NOT override position, top, left, width - let Select2 JS handle it */
    .select2-container--default .select2-dropdown,
    body.woocommerce-checkout .select2-dropdown {
        background: #2a2a2a !important;
        border-color: #3a374b !important;
        border-radius: 12px !important;
        z-index: 99999 !important;
    }

    /* Dropdown appearing above input */
    span.select2-dropdown.select2-dropdown--above {
        background: #2a2a2a !important;
        border-radius: 12px !important;
    }

    /* Ensure Select2 dropdown body doesn't have backdrop */
    .select2-container--default .select2-dropdown .select2-dropdown-body,
    body.woocommerce-checkout .select2-dropdown .select2-dropdown-body {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Remove any Select2 backdrop overlay */
    .select2-backdrop,
    body.woocommerce-checkout .select2-backdrop,
    .select2-dropdown-backdrop {
        display: none !important;
    }

    /* Select2 search input wrapper */
    .select2-container--default .select2-search {
        padding: 12px !important;
    }

    /* Select2 search input */
    .select2-container--default .select2-search__field {
        background: #000000 !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        color: var(--white) !important;
        font-family: "Stack Sans Text", sans-serif !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        width: 100% !important;
    }

    .select2-container--default .select2-search__field::placeholder {
        color: var(--gray) !important;
    }

    /* Select2 results */
    /* Limit dropdown height to 300px (v4.6.0 fix) */
    .select2-results__options {
        max-height: 300px !important;
        overflow-y: auto !important;
        padding: 4px !important;
    }

    /* Custom scrollbar for dark theme */
    .select2-results__options::-webkit-scrollbar {
        width: 8px !important;
    }

    .select2-results__options::-webkit-scrollbar-track {
        background: #1a1a1a !important;
    }

    .select2-results__options::-webkit-scrollbar-thumb {
        background: #3a374b !important;
        border-radius: 4px !important;
    }

    .select2-container--default .select2-results__option {
        background: transparent !important;
        color: var(--gray) !important;
        padding: 12px 16px !important;
        font-family: "Stack Sans Text", sans-serif !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        margin: 2px 4px !important;
        cursor: pointer !important;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background: #2563eb !important;
        color: var(--white) !important;
    }

    .select2-container--default .select2-results__option[aria-selected="true"] {
        background: #2a2a2a !important;
        color: var(--white) !important;
        font-weight: 500 !important;
    }

    /* ============================================
       WooCommerce Notices - Dark Theme (v6.0.1)
       Fix: Remove double-box by making NoticeGroup transparent
       ============================================ */

    /* NoticeGroup wrapper - transparent (no double-box) */
    .woocommerce-checkout .woocommerce-NoticeGroup {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
    }

    /* Individual notices - styled */
    .woocommerce-checkout .woocommerce-error,
    .woocommerce-checkout .woocommerce-message,
    .woocommerce-checkout .woocommerce-info {
        background: #0d0d0d !important;
        border: 1px solid #2a2a2a !important;
        border-radius: 12px !important;
        padding: 16px 20px !important;
        margin: 0 0 8px 0 !important;
        font-family: "Stack Sans Text", sans-serif !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        list-style: none !important;
    }

    /* Error - Red accent */
    .woocommerce-checkout .woocommerce-error {
        border-left: 3px solid #e74c3c !important;
        color: #ff6b6b !important;
    }

    /* Success - Green accent */
    .woocommerce-checkout .woocommerce-message {
        border-left: 3px solid #27ae60 !important;
        color: #6dd5a0 !important;
    }

    /* Info - Purple accent */
    .woocommerce-checkout .woocommerce-info {
        border-left: 3px solid #715df5 !important;
        color: #a99ff5 !important;
    }

    /* Notice list items - remove nested styling */
    .woocommerce-checkout .woocommerce-error li,
    .woocommerce-checkout .woocommerce-message li,
    .woocommerce-checkout .woocommerce-info li {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove WordPress admin bar spacing */
    body.woocommerce-checkout.admin-bar {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.woocommerce-checkout.admin-bar #wpadminbar {
        display: none !important;
    }

    /* Full-page body for checkout */
    body.woocommerce-checkout {
        margin: 0 !important;
        padding: 0 !important;
        background: #000 !important;
        color: var(--white) !important;
        font-family: "Stack Sans Text", sans-serif !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* v6.6.17: Do not force checkout into a dedicated html scroll container.
       Some mobile/embedded browsers show both document and inner page scrollbars
       when html is hard-set to scroll. Safe centering already handles the old
       validation-jump problem, so keep the document on its natural scroll flow. */
    html.woocommerce-checkout,
    html:has(body.woocommerce-checkout) {
        overflow-y: auto !important;
    }

    body.woocommerce-checkout {
        overflow-y: visible !important;
    }

    /* Remove ALL WordPress wrapper constraints - Phase 1 */
    body.woocommerce-checkout #page.site,
    body.woocommerce-checkout #page {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #000 !important;
        display: block !important;
    }

    body.woocommerce-checkout #primary,
    body.woocommerce-checkout .site-main,
    body.woocommerce-checkout main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
    }

    body.woocommerce-checkout .entry-content,
    body.woocommerce-checkout .woocommerce-checkout,
    body.woocommerce-checkout .woocommerce {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
    }

    /* Ensure no container wrapper interferes */
    body.woocommerce-checkout #page .container,
    body.woocommerce-checkout .site-main .container,
    body.woocommerce-checkout .entry-content .container,
    body.woocommerce-checkout #primary .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ============================================
   PAYMENT TABS WRAPPER (v4.0)
   ============================================ */
    .bem-payment-tabs-wrapper {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    /* ============================================
   ADDON CARDS (v4.0)
   ============================================ */
    /* Addon Summary Divider */
    .bem-addons-summary,
    .bem-addons-summary-checkout {
        border-top: 1px solid var(--bem-border);
        padding-top: 16px;
        margin-top: 16px;
    }

    .bem-addons-summary h4 {
        margin-top: 0;
        margin-bottom: 12px;
        font-size: 14px;
        color: var(--bem-text-main);
    }

    .addon {
        position: relative;
    }

    /* ============================================
   ADDON TOOLTIP BUTTON (v4.0)
   ============================================ */
    .addon-info-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 18px;
        height: 18px;
        padding: 3px;
        border-radius: 6px;
        background: #262626;
        border: 1px solid #2F2F2F;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: help;
        transition: all 0.2s ease;
    }

    .addon-info-btn:hover {
        background: #3E3E3E;
        border-color: #4F4F4F;
    }

    /* ============================================
       ADDON TOOLTIP (v5.9.0 - z-index fix)
       ============================================ */
    .addon-info {
        position: relative;
    }

    .addon-tooltip {
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: 280px;
        background: #2a2a2a;
        border: 1px solid #3E3E3E;
        border-radius: 8px;
        padding: 12px;
        font-family: "Stack Sans Text", sans-serif;
        font-size: 13px;
        color: var(--white);
        line-height: 1.4;
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        pointer-events: none;
        word-wrap: break-word;
        word-break: break-word;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    /* Ensure addon card creates stacking context */
    .bem-addon-fields .addon {
        position: relative !important;
        z-index: 1 !important;
    }

    .bem-addon-fields .addon:hover {
        z-index: 100 !important;
    }

    .addon-info-btn:hover .addon-tooltip {
        opacity: 1;
        visibility: visible;
    }

    .addon-tooltip::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #2a2a2a;
    }

    /* ============================================
   LOADING OVERLAY (v4.0)
   ============================================ */
    .bem-loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .bem-loading-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .bem-spinner {
        width: 50px;
        height: 50px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: #FAFAFA;
        border-radius: 50%;
        animation: bem-spin 0.8s linear infinite;
    }

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

    /* Centered spinner animation - preserves translate */
    @keyframes bem-spin-centered {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    /* ============================================
   ELEMENT LOADING STATES (v5.1 - Fixed)
   ============================================ */

    /* Element Loading State - for option groups and cards */
    .bem-element-loading {
        position: relative;
    }

    .bem-element-loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        border-radius: inherit;
        z-index: 10;
        pointer-events: none;
        /* Spinner shouldn't block clicks */
    }

    .bem-element-loading .bem-spinner-small {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-top-color: #FAFAFA;
        border-radius: 50%;
        animation: bem-spin-centered 0.8s linear infinite;
        z-index: 11;
        pointer-events: none;
    }

    /* CRITICAL FIX: Don't block clicks on loading container */
    .bem-element-loading .option:not(.disabled) {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Disabled options during loading */
    .bem-element-loading .option.disabled {
        opacity: 0.4;
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

    /* Button loading state */
    .bem-button-loading {
        position: relative;
        color: transparent !important;
        pointer-events: none;
    }

    .bem-button-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-top-color: #FAFAFA;
        border-radius: 50%;
        animation: bem-spin-centered 0.8s linear infinite;
    }

    .option.loading {
        opacity: 0.5;
        pointer-events: none;
        position: relative;
    }

    /* PAGE LAYOUT - Full-page matching checkout-new */
    body.woocommerce-checkout .page {
        min-height: 100vh !important;
        background: #000 !important;
        display: flex !important;
        flex-direction: column !important;
        /* v6.6.4: Safe centering — flex-start prevents upward shift when content
           overflows viewport (e.g., validation errors adding height).
           margin:auto on .step-page handles visual centering instead. */
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 !important;
        /* Removed padding per user request v5.2.0 */
        margin: 0 !important;
        width: 100% !important;
        position: relative !important;
    }

    /* v6.6.5: Safe vertical centering via margin-auto on the form element.
       DOM: .page > form.checkout > section.step-page
       The form is the direct flex child of .page, so margin-auto goes here.
       Centers when content fits viewport, sticks to top when it overflows. */
    body.woocommerce-checkout .page > form.checkout {
        margin-top: auto !important;
        margin-bottom: auto !important;
        width: 100% !important;
    }

    /* Container - FIXED: Target .step-page .container specifically, NOT .page .container */
    /* .page class exists on both body AND article, causing theme container to be affected */
    body.woocommerce-checkout .step-page>.container {
        width: 100% !important;
        max-width: 956px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas: "notices notices" "left right" !important;
        grid-auto-flow: row !important;
        grid-auto-columns: 1fr !important;
        gap: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Reset theme's outer .container to prevent grid splitting the whole page */
    body.woocommerce-checkout #primary>.container,
    body.woocommerce-checkout .site-content>.container,
    body.woocommerce-checkout .entry-content>.container {
        display: block !important;
        grid-template-columns: none !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Force transparent background on all parent containers up to body */
    body.woocommerce-checkout .entry-content,
    body.woocommerce-checkout .entry-content>.woocommerce,
    body.woocommerce-checkout article,
    body.woocommerce-checkout wrapper,
    body.woocommerce-checkout #primary,
    body.woocommerce-checkout #content {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Disable pseudo-elements on checkout container */
    body.woocommerce-checkout .step-page>.container::before,
    body.woocommerce-checkout .step-page>.container::after {
        display: none !important;
        content: none !important;
    }

    /* Also disable pseudo-elements on wrapper elements themselves */
    body.woocommerce-checkout #page::before,
    body.woocommerce-checkout #page::after,
    body.woocommerce-checkout .site-content::before,
    body.woocommerce-checkout .site-content::after,
    body.woocommerce-checkout .entry-content::before,
    body.woocommerce-checkout .entry-content::after,
    body.woocommerce-checkout #primary::before,
    body.woocommerce-checkout #primary::after,
    body.woocommerce-checkout .site-main::before,
    body.woocommerce-checkout .site-main::after,
    body.woocommerce-checkout main::before,
    body.woocommerce-checkout main::after {
        display: none !important;
        content: none !important;
    }

    /* LEFT COLUMN - Fixed selector */
    body.woocommerce-checkout .step-page>.container>.left {
        grid-area: left !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* RIGHT COLUMN - Fixed selector */
    body.woocommerce-checkout .step-page>.container>.right {
        grid-area: right !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Step 1 right: hero image centered vertically */
    body.woocommerce-checkout #step1>.container>.right {
        align-self: center !important;
    }

    /* Step 2 right: sticky order summary */
    body.woocommerce-checkout #step2>.container>.right {
        position: sticky !important;
        top: 20px !important;
        align-self: flex-start !important;
    }

    /* Hide any unexpected children in checkout container (except notices area) */
    body.woocommerce-checkout .step-page>.container>*:not(.left):not(.right):not(#bem-notices-area) {
        display: none !important;
    }

    /* PROGRESS BAR */
    .page .progress {
        display: flex !important;
        gap: 16px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        visibility: visible !important;
    }

    .page .progress .bar {
        flex: 1 !important;
        height: 2px !important;
        background: #3E3E3E !important;
        border-radius: 2px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .page .progress .bar.active {
        background: #FAFAFA !important;
    }

    /* STEP HEADER */
    .page .step {
        font-family: "Stack Sans Headline", "Stack Sans", sans-serif !important;
        font-size: 17px !important;
        margin-top: 24px !important;
        margin-bottom: 14px !important;
        display: block !important;
        visibility: visible !important;
    }

    .page .step .text-a {
        color: var(--gray) !important;
        font-family: "Stack Sans Headline", "Stack Sans", sans-serif !important;
    }

    .page .step .text-b {
        color: var(--white) !important;
        font-weight: 600 !important;
        font-family: "Stack Sans Headline", "Stack Sans", sans-serif !important;
    }

    .page .back {
        font-size: 18px !important;
        color: var(--gray) !important;
        cursor: pointer !important;
        margin-right: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        transition: opacity 0.2s !important;
    }

    .page .back:hover {
        opacity: 0.8 !important;
    }

    /* DESCRIPTION */
    .page .description {
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 16px !important;
        color: var(--gray) !important;
        margin-bottom: 32px !important;
        display: block !important;
        visibility: visible !important;
    }

    /* FORM */
    .page .form {
        display: grid !important;
        gap: 18px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .page .label {
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--gray) !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    .page .field {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .page .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Ensure row class doesn't conflict with WooCommerce form-row */
    .page .field.row,
    .page .row.field {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .page .woocommerce-billing-fields__field-wrapper .row .field {
        display: flex !important;
        flex-direction: column !important;
    }

    .page input[type="text"],
    .page input[type="email"],
    .page input[type="tel"],
    .page input[type="password"],
    .page input[type="number"],
    .page select,
    .page textarea {
        background: #000000 !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        padding: 12px 10px !important;
        color: var(--white) !important;
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .page input::placeholder,
    .page textarea::placeholder {
        color: var(--gray) !important;
        font-size: 14px !important;
        opacity: 1 !important;
    }

    .page input:focus,
    .page select:focus,
    .page textarea:focus {
        outline: none !important;
        border-color: #2563eb !important;
    }

    /* BUTTON */
    .page button {
        background: var(--dark) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 14px !important;
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 14px !important;
        color: var(--gray) !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        width: auto !important;
        display: inline-block !important;
    }

    .page button:hover:not(:disabled) {
        opacity: 0.9 !important;
        background: var(--bem-accent) !important;
        color: var(--white) !important;
    }

    .page button:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }

    /* CHECKBOX */
    .page .checkbox {
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 13px !important;
        color: #6E6E6E !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

    .page .checkbox span,
    .page .checkbox label {
        color: #6E6E6E !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .page .checkbox span a,
    .page .checkbox label a {
        color: #6E6E6E !important;
        text-decoration: underline !important;
    }

    .page .checkbox input[type="checkbox"],
    .page .checkbox-t {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        border: 1px solid #565656 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .page .checkbox input[type="checkbox"]:checked,
    .page .checkbox-t:checked {
        background: #715df5 !important;
        border-color: #715df5 !important;
    }

    .page .checkbox input[type="checkbox"]:checked::after,
    .page .checkbox-t:checked::after {
        content: '' !important;
        position: absolute !important;
        top: 2px !important;
        left: 5px !important;
        width: 4px !important;
        height: 8px !important;
        border: solid #ffffff !important;
        border-width: 0 2px 2px 0 !important;
        transform: rotate(45deg) !important;
        display: block !important;
    }

    /* Newsletter Checkbox - Enhanced Design (v6.0.0) */
    .page #step1 .checkbox.newsletter-checkbox {
        margin-top: 24px !important;
        padding: 18px 20px !important;
        background: linear-gradient(135deg, #151515 0%, #1a1a1a 100%) !important;
        border: 1px solid #2a2a2a !important;
        border-radius: 14px !important;
        transition: all 0.2s ease !important;
    }

    .page #step1 .checkbox.newsletter-checkbox:hover {
        border-color: var(--bem-accent, #715df5) !important;
        background: linear-gradient(135deg, #1a1a1a 0%, #1f1f2e 100%) !important;
    }

    .page #step1 .checkbox.newsletter-checkbox input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
    }

    .page #step1 .checkbox.newsletter-checkbox span {
        color: #888 !important;
        font-size: 13px !important;
    }

    /* RIGHT COLUMN - Already handled in layout section above */

    /* DIVIDERS */
    .divider {
        height: 1px;
        background: var(--border);
        margin: 24px 0;
    }

    .hr {
        height: 1px;
        background: var(--border);
        margin: 18px 0;
    }

    .page .label-col {
        font-family: "Stack Sans Notch", "Stack Sans", sans-serif !important;
        font-size: 16px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
        color: var(--color-primary) !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    .page .label-col span {
        color: var(--gray) !important;
    }

    /* OPTIONS */
    .options {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .page .option {
        padding: 12px 16px !important;
        border-radius: 999px !important;
        border: 1px solid #2F2F2F !important;
        background: #111111 !important;
        font-family: "Stack Sans Headline", "Stack Sans", sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--gray) !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        margin: 0 !important;
        flex: 1 1 auto;
        /* Make them nicely distributed */
        text-align: center;
        min-width: 80px;
    }

    .page .option:hover {
        border-color: #444 !important;
        background: #1a1a1a !important;
        color: var(--white) !important;
    }

    .page .option.active {
        background: var(--bem-accent) !important;
        border-color: var(--bem-accent) !important;
        color: var(--white) !important;
        box-shadow: 0 4px 12px rgba(110, 0, 255, 0.3);
    }

    /* ADDONS */
    .page .addons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        margin-top: 16px !important;
    }

    .page .addon {
        background: #151515 !important;
        border-radius: 16px !important;
        padding: 20px !important;
        position: relative !important;
        font-family: "Stack Sans Headline", "Stack Sans", sans-serif !important;
        color: #C5C5C5 !important;
        font-size: 16px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
    }

    .page .addon span {
        display: block !important;
        margin-top: 8px !important;
        color: var(--gray) !important;
    }

    .page .addon button {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 21px !important;
        height: 21px !important;
        padding: 4px !important;
        border-radius: 6px !important;
        background: #262626 !important;
        border: 1px solid #2F2F2F !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: var(--white) !important;
    }

    .page .addon button:hover {
        background: #333 !important;
    }

    /* Addon active state */
    .page .addon.active {
        border: 1px solid var(--bem-accent) !important;
        background: #1a1a2e !important;
    }

    .page .addon.active strong {
        color: #FFFFFF !important;
    }

    /* Option disabled state */
    .page .option.disabled,
    .page .option:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

    /* Option hidden state */
    .page .option.hidden {
        display: none !important;
    }

    /* Divider between sections */
    .page .divider {
        width: 100% !important;
        height: 1px !important;
        background: #2F2F2F !important;
        margin: 20px 0 !important;
    }

    /* CHECKOUT RIGHT SIDEBAR */
    .page .checkout-right {
        width: 100% !important;
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 14px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--white) !important;
    }

    /* Hero in right column — vertically centered, natural size */
    body.woocommerce-checkout .page .right .hero {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.woocommerce-checkout .page .right .hero img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        border-radius: 20px !important;
        object-fit: contain !important;
    }

    /* Divider in right column */
    body.woocommerce-checkout .page .right .divider {
        height: 1px !important;
        background: var(--border) !important;
        margin: 24px 0 !important;
        width: 100% !important;
    }

    /* v6.3.9: Removed duplicate checkout-right rule (subset of .page .checkout-right above) */

    .page .checkout-right .top-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-family: "Stack Sans Headline", sans-serif !important;
        font-size: 16px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
        color: var(--white) !important;
    }

    .page .checkout-right .top-row span .gray {
        color: var(--gray) !important;
    }

    .page .checkout-right .top-row .price {
        color: var(--gray) !important;
    }

    /* KV Grid - Inline Rows (v6.2.15) */
    .page .checkout-right .kv-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }

    .page .checkout-right .kv {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .page .checkout-right .kv .k {
        color: #666 !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .page .checkout-right .kv .v {
        color: var(--white) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: right !important;
    }

    .page .checkout-right .amount-row {
        display: flex !important;
        justify-content: space-between !important;
        margin-top: 10px !important;
        font-size: 14px !important;
    }

    .page .checkout-right .amount-row .k {
        color: var(--gray) !important;
    }

    .page .checkout-right .amount-row .v {
        color: var(--white) !important;
    }

    .page .checkout-right .coupon-row {
        display: grid !important;
        grid-template-columns: 1fr 110px !important;
        gap: 12px !important;
        align-items: center !important;
        margin-top: 10px !important;
    }

    .page .checkout-right .coupon-row input {
        background: #000000 !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        padding: 12px 10px !important;
        color: var(--white) !important;
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 14px !important;
    }

    .page .checkout-right .apply-btn {
        background: #2a2a2a !important;
        color: var(--gray) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 12px 10px !important;
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 14px !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }

    .page .checkout-right .apply-btn:hover {
        background: #333333 !important;
        color: var(--white) !important;
    }

    /* CARD FIELD */
    .page .card-field {
        margin-top: 14px !important;
    }

    .page .card-input {
        position: relative !important;
    }

    .page .card-input .brand {
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
        font-weight: 600 !important;
        color: #2563eb !important;
    }

    .page .card-row-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        margin-top: 12px !important;
    }

    .page .small-input {
        position: relative !important;
    }

    .page .small-input .mini-icon {
        position: absolute !important;
        right: 34px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Policy Checkboxes - Enhanced Design (v6.0.1) */
    .page .terms {
        width: 100% !important;
        margin-top: 20px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .page .terms .checkbox {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        transition: background 0.15s ease !important;
    }

    .page .terms .checkbox:last-child {
        border-bottom: none !important;
    }

    .page .terms .checkbox:hover {
        background: rgba(255, 255, 255, 0.02) !important;
    }

    .page .terms .checkbox.error,
    .page .terms .bem-policy-item.error {
        background: rgba(231, 76, 60, 0.1) !important;
        border: 1px solid #e74c3c !important;
        border-radius: 8px;
        padding: 8px 12px;
    }

    .page .terms .checkbox input[type="checkbox"],
    .page .terms .checkbox-t {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin: 0 !important;
        border: 2px solid #3a3a3a !important;
        border-radius: 4px !important;
        background: transparent !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        position: relative !important;
    }

    .page .terms .checkbox input[type="checkbox"]:checked,
    .page .terms .checkbox-t:checked {
        background: var(--bem-accent, #715df5) !important;
        border-color: var(--bem-accent, #715df5) !important;
    }

    .page .terms .checkbox input[type="checkbox"]:checked::after,
    .page .terms .checkbox-t:checked::after {
        content: '' !important;
        position: absolute !important;
        left: 5px !important;
        top: 2px !important;
        width: 5px !important;
        height: 9px !important;
        border: solid #fff !important;
        border-width: 0 2px 2px 0 !important;
        transform: rotate(45deg) !important;
    }

    .page .terms .checkbox span {
        color: #888 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        flex: 1 !important;
    }

    .page .terms .checkbox span a {
        color: #fff !important;
        text-decoration: underline !important;
        transition: color 0.2s !important;
    }

    .page .terms a {
        color: var(--bem-accent, #715df5) !important;
        text-decoration: none !important;
    }

    .page .terms a:hover {
        color: #fff !important;
        text-decoration: underline !important;
    }

    /* PAY BUTTON */
    .page .pay-btn {
        width: 100% !important;
        margin-top: 24px !important;
        background: #2a2a2a !important;
        color: var(--white) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 14px !important;
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }

    .page .pay-big {
        width: 100% !important;
        margin-top: 18px !important;
        background: #2a2a2a !important;
        color: var(--gray) !important;
        border-radius: 14px !important;
        padding: 16px 14px !important;
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }

    .page .pay-big:hover:not(:disabled) {
        background: #333333 !important;
        color: var(--white) !important;
    }

    /* PAYMENT TABS */
    .page .payment-tabs {
        display: flex !important;
        gap: 24px !important;
        margin: 24px 0 !important;
    }

    .page .payment-tabs span {
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        color: var(--gray) !important;
        cursor: pointer !important;
        transition: color 0.2s !important;
    }

    .page .payment-tabs .active {
        color: var(--white) !important;
        font-weight: 600 !important;
    }

    /* CARD ROW */
    .card-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    /* CHECKBOX GROUP */
    .checkbox-group {
        display: grid;
        gap: 12px;
        margin-top: 16px;
    }

    /* ============================================
       BILLING FORM LAYOUT (single source of truth)
       ============================================ */

    .page .woocommerce-billing-fields__field-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .page .woocommerce-billing-fields__field-wrapper .form-row {
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        /* Default: full width (fallback for fields without specific class) */
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Half-width field pairs (first_name + last_name, city + postcode) */
    .page .woocommerce-billing-fields__field-wrapper .form-row.form-row-first,
    .page .woocommerce-billing-fields__field-wrapper .form-row.form-row-last {
        width: calc(50% - 7px) !important;
        flex: 0 0 calc(50% - 7px) !important;
    }

    /* Labels */
    .page .woocommerce-billing-fields__field-wrapper .form-row label {
        font-family: "Stack Sans Text", sans-serif !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--gray) !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
        float: none !important;
        line-height: 1.4 !important;
        letter-spacing: 0.02em !important;
    }

    /* Input wrapper */
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* All form inputs */
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input[type="text"],
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input[type="email"],
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input[type="tel"],
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input[type="password"],
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input[type="number"],
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper select,
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper textarea,
    .page .woocommerce-billing-fields__field-wrapper .form-row input.input-text,
    .page .woocommerce-billing-fields__field-wrapper .form-row select,
    .page .woocommerce-billing-fields__field-wrapper .form-row textarea {
        background: #0a0a0a !important;
        border: 1px solid #2a2a2a !important;
        border-radius: 10px !important;
        padding: 0 14px !important;
        color: var(--white) !important;
        font-family: "Stack Sans Text", sans-serif !important;
        font-size: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        line-height: 1.4 !important;
        height: 46px !important;
        transition: border-color 0.2s ease !important;
    }

    /* Placeholders */
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input::placeholder,
    .page .woocommerce-billing-fields__field-wrapper .form-row input::placeholder,
    .page .woocommerce-billing-fields__field-wrapper .form-row textarea::placeholder {
        color: #555 !important;
        font-size: 14px !important;
        opacity: 1 !important;
    }

    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input:focus,
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper select:focus,
    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper textarea:focus,
    .page .woocommerce-billing-fields__field-wrapper .form-row input.input-text:focus,
    .page .woocommerce-billing-fields__field-wrapper .form-row select:focus,
    .page .woocommerce-billing-fields__field-wrapper .form-row textarea:focus {
        outline: none !important;
        border-color: #715df5 !important;
        box-shadow: 0 0 0 1px rgba(113, 93, 245, 0.15) !important;
    }

    /* Phone Field Wrapper */
    .page .woocommerce-billing-fields__field-wrapper .form-row .phone {
        display: grid !important;
        grid-template-columns: 90px 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .page .woocommerce-billing-fields__field-wrapper .form-row .phone .phone-prefix {
        background: var(--dark) !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: "Stack Sans Text", sans-serif !important;
        font-size: 14px !important;
        color: var(--white) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .page .woocommerce-billing-fields__field-wrapper .form-row .phone .woocommerce-input-wrapper {
        flex: 1 !important;
    }

    /* Required Field Indicator */
    .page .woocommerce-billing-fields__field-wrapper .form-row label .required,
    .page .woocommerce-billing-fields__field-wrapper .form-row label abbr {
        color: #e74c3c !important;
        text-decoration: none !important;
        border: none !important;
        margin-left: 2px !important;
    }

    /* Select2 Dropdown Protection - Prevent layout breakage on country/state change */
    body.woocommerce-checkout .woocommerce-billing-fields .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Field Error States */
    .page .woocommerce-billing-fields__field-wrapper .form-row.woocommerce-invalid label {
        color: #e74c3c !important;
    }

    .page .woocommerce-billing-fields__field-wrapper .form-row.woocommerce-invalid .woocommerce-input-wrapper input,
    .page .woocommerce-billing-fields__field-wrapper .form-row.woocommerce-invalid .woocommerce-input-wrapper select {
        border-color: #e74c3c !important;
    }

    /* v6.6.1: Fallback for fields without .woocommerce-input-wrapper (e.g., first_name) */
    .page .woocommerce-billing-fields__field-wrapper .form-row.woocommerce-invalid input,
    .page .woocommerce-billing-fields__field-wrapper .form-row.woocommerce-invalid select,
    .page .form-row.woocommerce-invalid input:not([type="hidden"]),
    .page .form-row.woocommerce-invalid select {
        border-color: #e74c3c !important;
    }

    .page .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-error {
        color: #e74c3c !important;
        font-size: 12px !important;
        margin-top: 4px !important;
        display: block !important;
    }

    /* Comprehensive WooCommerce Checkout Overrides */
    .page .woocommerce-checkout {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page .woocommerce-checkout h3 {
        font-family: "Stack Sans Headline", "Stack Sans", sans-serif !important;
        color: var(--white) !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
    }

    .page .woocommerce-checkout .woocommerce-billing-fields,
    .page .woocommerce-checkout .woocommerce-shipping-fields,
    .page .woocommerce-checkout .woocommerce-additional-fields {
        margin: 0 !important;
        padding: 0 !important;
    }

    .page .woocommerce-checkout .woocommerce-billing-fields h3,
    .page .woocommerce-checkout .woocommerce-shipping-fields h3 {
        display: none !important;
    }

    /* Customer Information Section - Title is now rendered in PHP template */
    /* Removed ::before pseudo-element - causes duplicate with bem-section-title h3 */

    /* Billing Details Section - Not needed for checkout-new design */
    /* Removed ::after pseudo-element - reference design doesn't have this section */

    /* Payment Methods */
    .page .woocommerce-checkout #payment {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Terms and Conditions */
    .page .woocommerce-checkout .form-row.terms {
        margin: 0 !important;
        padding: 0 !important;
    }

    .page .woocommerce-checkout .form-row.terms label {
        font-family: "Stack Sans Text", "Stack Sans", sans-serif !important;
        font-size: 13px !important;
        color: var(--gray) !important;
        line-height: 1.35 !important;
    }

    .page .woocommerce-checkout .form-row.terms label a {
        color: var(--white) !important;
        text-decoration: underline !important;
    }

    /* Order Review Section (Step 2) */
    .page #order_review_heading {
        display: none !important;
    }

    .page .woocommerce-checkout-review-order {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page .woocommerce-checkout-review-order-table {
        display: none !important;
    }

    /* Remove WooCommerce Default Styles */
    .page .woocommerce .col2-set,
    .page .woocommerce .col-1,
    .page .woocommerce .col-2 {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .page .bem-section-title.bem-billing-title {
        margin-top: 24px !important;
    }

    /* Responsive - match checkout-new-mobileadd design */
    /* Primary mobile breakpoint at 850px from reference design */
    @media (max-width: 850px) {

        /* v6.6.2: Inactive steps must not contribute to scroll height on mobile */
        body.woocommerce-checkout .step-page:not(.active) {
            display: none !important;
        }

        /* Container becomes single column */
        body.woocommerce-checkout .step-page>.container {
            display: block !important;
            grid-template-columns: 1fr !important;
            gap: 16px !important;
            padding: 16px !important;
            max-width: 100% !important;
        }

        /* Step 1: Hide right column (hero image) */
        body.woocommerce-checkout .step-page#step1>.container>.right {
            display: none !important;
        }

        /* Step 2: Move right column (order summary) below left column */
        body.woocommerce-checkout .step-page#step2>.container>.right {
            margin-top: 16px !important;
            display: flex !important;
            position: static !important;
            top: auto !important;
            align-self: stretch !important;
        }

        /* Form fields become single column on mobile */
        body.woocommerce-checkout .page .woocommerce-billing-fields__field-wrapper {
            gap: 12px !important;
        }

        body.woocommerce-checkout .page .row {
            grid-template-columns: 1fr !important;
            gap: 12px !important;
        }

        /* Full width for all form fields on mobile */
        body.woocommerce-checkout .page .woocommerce-billing-fields__field-wrapper .form-row.form-row-first,
        body.woocommerce-checkout .page .woocommerce-billing-fields__field-wrapper .form-row.form-row-last {
            width: 100% !important;
            flex: 0 0 100% !important;
        }

        /* Addons become single column */
        body.woocommerce-checkout .page .addons {
            grid-template-columns: 1fr !important;
        }

        /* Order summary kv-grid — already flex column, just tighten gap */
        body.woocommerce-checkout .page .checkout-right .kv-grid {
            gap: 6px !important;
        }

        /* Card input rows become single column */
        body.woocommerce-checkout .page .card-row-2 {
            grid-template-columns: 1fr !important;
        }

        /* Phone field full width */
        body.woocommerce-checkout .page .phone {
            grid-template-columns: 1fr !important;
        }

        /* Progress bar spacing */
        body.woocommerce-checkout .page .progress {
            margin-bottom: 12px !important;
            gap: 12px !important;
        }

        /* Step heading */
        body.woocommerce-checkout .page .step {
            font-size: 15px !important;
            margin-bottom: 12px !important;
        }

        /* Description text */
        body.woocommerce-checkout .page .description {
            font-size: 14px !important;
            margin-bottom: 24px !important;
        }

        /* Section titles */
        body.woocommerce-checkout .page .bem-section-title {
            font-size: 16px !important;
            margin-bottom: 16px !important;
        }

        /* Option buttons wrap properly */
        body.woocommerce-checkout .page .options {
            flex-wrap: wrap !important;
            gap: 8px !important;
        }

        body.woocommerce-checkout .page .option {
            font-size: 13px !important;
            padding: 6px 12px !important;
        }

        /* Coupon row single column */
        body.woocommerce-checkout .page .coupon-row {
            grid-template-columns: 1fr !important;
            gap: 8px !important;
        }

        body.woocommerce-checkout .page .coupon-row .apply-btn {
            width: 100% !important;
        }

        /* v6.6.1: Mobile - right column takes full width, no centering gap */
        body.woocommerce-checkout .step-page>.container>.right {
            align-items: stretch !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* v6.6.1: Card visual scales down on mobile */
        .bem-card-container {
            max-width: 100% !important;
        }

        .bem-card {
            max-width: 340px !important;
            margin: 0 auto !important;
        }

        /* v6.6.1: Checkout-right full width on mobile */
        body.woocommerce-checkout .page .checkout-right {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
    }

    /* Extra small mobile adjustments */
    @media (max-width: 480px) {
        body.woocommerce-checkout .step-page>.container {
            padding: 12px !important;
        }

        body.woocommerce-checkout .page .step {
            font-size: 14px !important;
        }

        body.woocommerce-checkout .page .description {
            font-size: 13px !important;
        }

        body.woocommerce-checkout .page .option {
            font-size: 12px !important;
            padding: 6px 10px !important;
        }

        body.woocommerce-checkout .page .input {
            font-size: 13px !important;
            padding: 10px 8px !important;
        }

        /* Pay button adjustments */
        body.woocommerce-checkout .page .pay-big {
            font-size: 14px !important;
            padding: 14px 12px !important;
        }
    }

    /* ============================================
   VERSION 1.6.3 FIXES - Comprehensive UI Fix
   ============================================ */

    /* 2. CONTINUE BUTTON STYLING - Primary Purple (v6.0.1) */
    body.woocommerce-checkout .page .bem-continue-btn,
    .page .step-page .bem-continue-btn,
    .page .bem-continue-btn {
        width: 100% !important;
        background: var(--bem-accent, #715df5) !important;
        color: var(--white, #FFFFFF) !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        padding: 16px !important;
        margin-top: 24px !important;
        border: none !important;
        border-radius: 12px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    body.woocommerce-checkout .page .bem-continue-btn:hover,
    .page .bem-continue-btn:hover {
        background: #5a4bd4 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(113, 93, 245, 0.3) !important;
        color: var(--white, #FFFFFF) !important;
    }

    /* 4. ADDON FIELDS FIX
   Target .bem-addon-fields container specifically */
    body.woocommerce-checkout .bem-addon-fields,
    .page .bem-addon-fields {
        margin-top: 32px !important;
        margin-bottom: 24px !important;
    }

    body.woocommerce-checkout .bem-addon-fields .label-col,
    .page .bem-addon-fields .label-col {
        font-family: "Stack Sans Headline", sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--white, #FFFFFF) !important;
        margin-bottom: 16px !important;
        line-height: 1.3 !important;
    }

    body.woocommerce-checkout .bem-addon-fields .label-col span,
    .page .bem-addon-fields .label-col span {
        color: var(--gray, #A0A0A0) !important;
    }

    /* Addon Back Button (v5.8.7) */
    .addon-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 20px !important;
        background: transparent !important;
        border: 1px solid var(--border, #3E3E3E) !important;
        border-radius: 8px !important;
        color: var(--gray, #A0A0A0) !important;
        font-family: "Stack Sans Text", sans-serif !important;
        font-size: 14px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        margin-top: 16px !important;
    }

    .addon-back-btn:hover {
        background: rgba(113, 93, 245, 0.1) !important;
        border-color: #715df5 !important;
        color: #715df5 !important;
    }

    .addon-back-btn svg {
        flex-shrink: 0;
    }

    /* Addon Grid - Compact (v5.9.0) */
    body.woocommerce-checkout .bem-addon-fields .addons,
    .page .bem-addon-fields .addons {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Addon Card - Compact */
    body.woocommerce-checkout .bem-addon-fields .addon,
    .page .bem-addon-fields .addon {
        background: #151515 !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        position: relative !important;
        cursor: pointer !important;
        border: 1px solid transparent !important;
        transition: border-color 0.2s ease !important;
        min-height: auto !important;
    }

    /* Addon Price Text - Smaller */
    body.woocommerce-checkout .bem-addon-fields .addon strong,
    .page .bem-addon-fields .addon strong {
        display: block !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #C5C5C5 !important;
        margin-bottom: 2px !important;
    }

    /* Addon Name - Compact */
    body.woocommerce-checkout .bem-addon-fields .addon span,
    .page .bem-addon-fields .addon span {
        display: block !important;
        font-size: 12px !important;
        color: var(--gray, #A0A0A0) !important;
        padding-right: 28px !important;
    }

    /* v5.8.0: addon-toggle CSS removed - button removed from markup */

    body.woocommerce-checkout .bem-addon-fields .addon.active,
    .page .bem-addon-fields .addon.active {
        border-color: var(--bem-accent) !important;
        background: #1a1a2e !important;
    }

    body.woocommerce-checkout .bem-addon-fields .addon.active strong,
    .page .bem-addon-fields .addon.active strong {
        color: #FFFFFF !important;
    }

    /* 5. SECTION TITLE FIX
   Ensure bem-section-title is properly styled */
    body.woocommerce-checkout .page .bem-section-title,
    .page .bem-section-title {
        font-family: "Stack Sans Headline", sans-serif !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        color: var(--white, #FFFFFF) !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }

    /* Mobile: Single column but compact */
    @media (max-width: 768px) {

        body.woocommerce-checkout .bem-addon-fields .addons,
        .page .bem-addon-fields .addons {
            grid-template-columns: 1fr !important;
            gap: 6px !important;
        }

        body.woocommerce-checkout .bem-addon-fields .addon,
        .page .bem-addon-fields .addon {
            padding: 10px 12px !important;
        }
    }

    @media (min-width: 481px) and (max-width: 768px) {
        body.woocommerce-checkout .step-page>.container {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }
    }

    /* v1.6.6 PHONE FIELD — removed in v6.3.9 (fully overridden by v1.7.0 phone rules below) */

    /* ============================================
   VERSION 1.7.0 FIXES - Layout Overhaul
   ============================================ */

    /* 1. PHONE FIELD - Target by exact WooCommerce ID */
    body.woocommerce-checkout .phone #billing_phone_field,
    body.woocommerce-checkout .phone p#billing_phone_field,
    .page .phone #billing_phone_field,
    .phone #billing_phone_field {
        flex: 1 1 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: stretch !important;
    }

    /* Phone wrapper - even stronger specificity */
    html body.woocommerce-checkout .woocommerce-billing-fields .field[data-field="billing_phone"] .phone,
    html body .page .field[data-field="billing_phone"] .phone {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Phone prefix - fixed width and centered text - Match HTML mockup */
    html body.woocommerce-checkout .phone .phone-prefix,
    html body .page .phone .phone-prefix {
        flex: 0 0 90px !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        height: 48px !important;
        min-height: 48px !important;
        background: #212121 !important;
        border: 1px solid #3E3E3E !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: "Stack Sans Text", sans-serif !important;
        font-size: 14px !important;
        color: #FFFFFF !important;
    }

    /* Phone input wrappers - take remaining space */
    html body.woocommerce-checkout .phone #billing_phone_field .woocommerce-input-wrapper,
    html body .page .phone #billing_phone_field .woocommerce-input-wrapper {
        width: 100% !important;
        display: flex !important;
        flex: 1 !important;
    }

    /* Phone input - match prefix height */
    html body.woocommerce-checkout .phone input#billing_phone,
    html body .page .phone input#billing_phone {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        flex: 1 !important;
    }

    /* 4. NEWSLETTER VISIBLE ON STEP 1 (v6.0.1) */
    html body.woocommerce-checkout #step1 .newsletter-checkbox,
    .page #step1 .newsletter-checkbox {
        display: flex !important;
    }

    /* ============================================
   VERSION 4.2 FIXES - Issue 1: Addons Visible in Step 1
   ============================================ */

    /* HIDE ALL ADDONS/EXTRA FIELDS IN STEP 1 - v4.2 - Comprehensive Hiding */
    html body.woocommerce-checkout #step1 .addons,
    html body.woocommerce-checkout #step1 .bem-addon-fields,
    html body.woocommerce-checkout #step1 [class*="addon"],
    html body.woocommerce-checkout #step1 .woocommerce-additional-fields,
    html body.woocommerce-checkout #step1 .woocommerce-additional-fields__field-wrapper,
    html body.woocommerce-checkout #step1 .wc-block-components-checkout-additional-information,
    html body.woocommerce-checkout #step1 .wc-checkout-additional-fields,
    .page #step1 .addons,
    .page #step1 .bem-addon-fields,
    .page #step1 [class*="addon"],
    .page #step1 .woocommerce-additional-fields,
    #step1 .addons,
    #step1 .bem-addon-fields,
    #step1 [class*="addon"],
    #step1 .woocommerce-additional-fields {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Coupon Form (Added v4.6.6) */
    .bem-coupon-section .coupon-message {
        font-size: 14px;
        color: var(--bem-text-muted);
        margin-bottom: 10px;
        display: block;
    }

    .bem-coupon-section .form-group {
        display: flex;
        gap: 10px;
    }

    .bem-coupon-section input[name="bem_coupon_code"] {
        flex: 1;
        height: 48px;
        border-radius: 8px;
        border: 1px solid var(--bem-border);
        background: #000;
        color: #fff;
        padding: 0 15px;
    }

    .bem-coupon-section .bem-apply-coupon-btn {
        height: 48px;
        padding: 0 25px;
        border-radius: 8px;
        background: var(--bem-accent);
        color: #fff;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }

    .bem-coupon-section .bem-apply-coupon-btn:hover {
        background: var(--bem-accent-hover);
    }

    .bem-coupon-section .bem-coupon-message {
        margin-top: 10px;
        font-size: 13px;
    }

    /* ============================================
   REMOVED: Legacy payment method styling
   Payment UI now lives in assets/css/payment.css
   ============================================ */

    /* Select2 — height enforcement (ultra-high specificity) */
    html body .select2-container .select2-selection--single {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
    }

    html body .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 46px !important;
        height: 46px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
    }

    html body .select2-container .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
        top: 0 !important;
        right: 12px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* ============================================
   VARIATION BUTTON CLICKABILITY FIX (v5.1.0)
   ============================================ */

/* Ensure option buttons are always clickable */
.options.selectable .option {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 5;
}

/* Only disabled options should not be clickable */
.options.selectable .option.disabled {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.4;
}

/* Remove any overlay blocking clicks */
.bem-variation-switcher .options.selectable {
    pointer-events: auto !important;
}

/* Ensure hidden options are truly hidden */
.options.selectable .option.hidden {
    display: none !important;
}

/* Prevent FOUC: hide all variation options until JS filters them.
   .bem-filtered is added by JS after filterAllOptions() runs. */
.bem-variation-switcher:not(.bem-filtered) .options.selectable .option:not(.active) {
    display: none !important;
}

/* v5.1.2 PAGE PADDING FIX — removed in v6.3.9 (all rules already in Phase 1 resets, lines 379-429) */

/* ============================================
   EQUAL LEVEL SIZE OPTIONS (v5.7.4)
   Ensure size buttons are grid-aligned and consistent
   ============================================ */
#bem-size-options {
    display: grid !important;
    /* Create flexible grid with min 70px width */
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
    gap: 10px !important;
}

#bem-size-options .option {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    flex: none !important;
    /* Override flex */
    box-sizing: border-box !important;
}

/* ============================================
   GEOLOCATION INFO DISPLAY (v5.8.0)
   Flag, country, and IP display in Step 2
   ============================================ */
.bem-geo-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    font-size: 12px !important;
    color: #A0A0A0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.bem-geo-info .bem-flag {
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

.bem-geo-info .bem-country {
    color: var(--gray, #A0A0A0) !important;
}

.bem-geo-info .bem-separator {
    opacity: 0.5 !important;
}

.bem-geo-info .bem-ip {
    color: var(--gray, #A0A0A0) !important;
}

/* ============================================
   ADDON SUMMARY DISPLAY (v5.8.0)
   Selected addons list in order summary
   ============================================ */
.bem-addons-summary {
    margin-top: 10px !important;
}

.bem-addon-row .k {
    color: var(--gray, #A0A0A0) !important;
}

.bem-addon-row .v {
    color: #4CAF50 !important;
}

/* v5.8.0: addon-toggle CSS removed - button removed from markup */

/* ============================================
   v6.0.2 UI FIXES
   1. Addon back button
   2. Klaviyo newsletter checkbox styling
   ============================================ */

/* 2. Klaviyo Newsletter Checkbox Styling (v6.0.2) */
#kl_newsletter_checkbox_field,
.page #step1 #kl_newsletter_checkbox_field,
body.woocommerce-checkout #step1 #kl_newsletter_checkbox_field {
    display: flex !important;
    align-items: flex-start !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 18px 20px !important;
    background: linear-gradient(135deg, #151515 0%, #1a1a1a 100%) !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 14px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

#kl_newsletter_checkbox_field:hover,
.page #step1 #kl_newsletter_checkbox_field:hover {
    border-color: var(--bem-accent, #715df5) !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #1f1f2e 100%) !important;
}

/* Klaviyo checkbox label */
#kl_newsletter_checkbox_field label,
#kl_newsletter_checkbox_field>label {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* Klaviyo checkbox input */
#kl_newsletter_checkbox_field input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    background: #000 !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    margin-top: 2px !important;
}

#kl_newsletter_checkbox_field input[type="checkbox"]:checked {
    background: var(--bem-accent, #715df5) !important;
    border-color: var(--bem-accent, #715df5) !important;
}

#kl_newsletter_checkbox_field input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* Klaviyo checkbox text */
#kl_newsletter_checkbox_field label span,
#kl_newsletter_checkbox_field .woocommerce-input-wrapper,
#kl_newsletter_checkbox_field span:not(.required) {
    color: #888 !important;
    font-family: "Stack Sans Text", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Mobile Styles (v6.0.2) */
@media (max-width: 850px) {

    /* Hide header back button on mobile in step 2 */
    .page #step2 .step .back {
        display: none !important;
    }

    /* Klaviyo checkbox mobile adjustments */
    #kl_newsletter_checkbox_field,
    .page #step1 #kl_newsletter_checkbox_field {
        padding: 14px 16px !important;
    }
}

/* ============================================
   LAYOUT CENTERING + PADDING FIX (v6.3.8 / v6.3.10)
   The generic container reset (#page .container)
   has ID-level specificity (0,1,2,1) that overrides
   step-page container rules (0,0,3,1). This fix
   uses higher specificity to re-assert centering,
   max-width AND padding at all breakpoints.
   ============================================ */
html body.woocommerce-checkout #page .step-page>.container,
html body.woocommerce-checkout #primary .step-page>.container,
html body.woocommerce-checkout .page .step-page>.container {
    max-width: 956px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Tablet / Mobile: full-width with breathing room */
@media (max-width: 850px) {
    html body.woocommerce-checkout #page .step-page>.container,
    html body.woocommerce-checkout #primary .step-page>.container,
    html body.woocommerce-checkout .page .step-page>.container {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 16px !important;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    html body.woocommerce-checkout #page .step-page>.container,
    html body.woocommerce-checkout #primary .step-page>.container,
    html body.woocommerce-checkout .page .step-page>.container {
        padding: 12px !important;
    }
}

/* ============================================
   WooCommerce Notices — Positioned above step content (v6.5.20)
   WC renders notices in .woocommerce-notices-wrapper outside the grid.
   We hide the original wrapper and use JS to move notices inside #bem-notices-area.
   ============================================ */

/* Hide ALL WC notices EXCEPT our #bem-notices-area and .bem-coupon-message */
body.woocommerce-checkout .woocommerce-error:not(#bem-notices-area .woocommerce-error):not(.bem-coupon-message .woocommerce-error),
body.woocommerce-checkout .woocommerce-message:not(#bem-notices-area .woocommerce-message):not(.bem-coupon-message .woocommerce-message),
body.woocommerce-checkout .woocommerce-info:not(#bem-notices-area .woocommerce-info),
body.woocommerce-checkout .woocommerce-notices-wrapper:not(#bem-notices-area) {
    position: fixed !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Our relocated notices area inside the checkout form */
#bem-notices-area {
    grid-area: notices;
    margin-bottom: 0;
    z-index: 1;
    pointer-events: none !important;
}

#bem-notices-area:empty {
    display: none;
}

/* BEM custom checkout notices — bypasses WC notice hiding rules */
.bem-checkout-notice {
    background: #0d0d0d !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin: 0 0 8px 0 !important;
    font-family: "Stack Sans Text", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: block !important;
}
.bem-notice-error {
    border-left: 3px solid #e74c3c !important;
    color: #ff6b6b !important;
}
.bem-notice-info {
    border-left: 3px solid #715df5 !important;
    color: #a99bff !important;
}

/* All notice types — dark theme consistent styling */
#bem-notices-area .woocommerce-error,
#bem-notices-area .woocommerce-message,
#bem-notices-area .woocommerce-info,
.bem-coupon-message .woocommerce-error,
.bem-coupon-message .woocommerce-message,
.bem-coupon-message .woocommerce-info {
    background: #0d0d0d !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin: 0 0 8px 0 !important;
    font-family: "Stack Sans Text", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    list-style: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

#bem-notices-area .woocommerce-error,
.bem-coupon-message .woocommerce-error {
    border-left: 3px solid #e74c3c !important;
    color: #ff6b6b !important;
}

#bem-notices-area .woocommerce-message,
.bem-coupon-message .woocommerce-message {
    border-left: 3px solid #27ae60 !important;
    color: #6dd5a0 !important;
}

#bem-notices-area .woocommerce-info {
    border-left: 3px solid #715df5 !important;
    color: #a99ff5 !important;
}

#bem-notices-area li,
.bem-coupon-message li {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: block !important;
    text-indent: 0 !important;
}

#bem-notices-area .woocommerce-error::before,
#bem-notices-area .woocommerce-message::before,
#bem-notices-area .woocommerce-info::before,
#bem-notices-area li::before,
#bem-notices-area li::marker,
.bem-coupon-message .woocommerce-error::before,
.bem-coupon-message .woocommerce-message::before,
.bem-coupon-message .woocommerce-info::before,
.bem-coupon-message li::before,
.bem-coupon-message li::marker {
    content: none !important;
    display: none !important;
}

.bem-coupon-message {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

@media (max-width: 850px) {
    #bem-notices-area {
        grid-column: 1;
    }
}
@media (max-width: 480px) {
    body.woocommerce-checkout .woocommerce-notices-wrapper,
    body.woocommerce-checkout .woocommerce-NoticeGroup,
    body.woocommerce-checkout .woocommerce-error,
    body.woocommerce-checkout .woocommerce-message,
    body.woocommerce-checkout .woocommerce-info {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}