/**
 * Popup Checkout — modern storefront theme layer.
 * Loaded after checkout-popup.css; uses layout tokens from settings.
 */

/* --- Shell & overlay --- */
.rixes-occ-checkout-popup {
    --rixes-occ-popup-font:
        ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rixes-occ-checkout-popup__overlay {
    background: var(--rixes-occ-popup-overlay, rgba(15, 23, 42, 0.52));
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

.rixes-occ-checkout-popup__panel {
    border: none;
    box-shadow: var(
        --rixes-occ-popup-shadow,
        0 25px 50px -12px rgba(15, 23, 42, 0.18)
    );
    background: var(--rixes-occ-popup-bg, #fff);
    overflow: clip;
    will-change: opacity, transform;
}

/* Open / close — overlay fade + panel lift (trigger-bridge.js) */
.rixes-occ-checkout-popup__overlay {
    opacity: 0;
    transition: opacity 380ms ease;
}

.rixes-occ-checkout-popup--open:not(.rixes-occ-checkout-popup--closing)
    .rixes-occ-checkout-popup__overlay {
    opacity: 1;
}

.rixes-occ-checkout-popup--closing .rixes-occ-checkout-popup__overlay {
    opacity: 0;
}

.rixes-occ-checkout-popup__panel {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition:
        opacity 380ms ease,
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        height 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rixes-occ-checkout-popup--open:not(.rixes-occ-checkout-popup--closing)
    .rixes-occ-checkout-popup__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.rixes-occ-checkout-popup--closing .rixes-occ-checkout-popup__panel {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
}

@media (max-width: 640px) {
    .rixes-occ-checkout-popup__panel {
        transform: translateY(100%);
    }

    .rixes-occ-checkout-popup--open:not(.rixes-occ-checkout-popup--closing)
        .rixes-occ-checkout-popup__panel {
        transform: translateY(0);
    }

    .rixes-occ-checkout-popup--closing .rixes-occ-checkout-popup__panel {
        transform: translateY(100%);
    }
}

/* Content reveal after session load */
.rixes-occ-checkout-popup__content {
    position: relative;
}

.rixes-occ-checkout-popup__loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--rixes-occ-popup-bg, #fff) 92%, transparent);
}

.rixes-occ-checkout-popup--preparing [data-rixes-occ-body] {
    visibility: hidden;
    pointer-events: none;
}

.rixes-occ-checkout-popup--revealing [data-rixes-occ-body] {
    visibility: visible;
    animation: rixes-occ-content-reveal 380ms ease forwards;
}

.rixes-occ-checkout-popup--revealing .rixes-occ-checkout-popup__loading {
    animation: rixes-occ-loading-fade 380ms ease forwards;
}

@keyframes rixes-occ-content-reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes rixes-occ-loading-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Wizard step transitions */
.rixes-occ-checkout-popup__main-inner {
    position: relative;
}

.rixes-occ-checkout-popup--wizard-animating .rixes-occ-checkout-popup__main-inner {
    overflow: hidden;
}

.rixes-occ-checkout-popup--wizard-animating [data-rixes-occ-wizard-step] {
    transition:
        opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rixes-occ-checkout-popup--wizard-animating
    [data-rixes-occ-wizard-step].rixes-occ-wizard-step--leaving {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    opacity: 0;
    transform: translateX(-28px);
    pointer-events: none;
}

.rixes-occ-checkout-popup--wizard-animating
    [data-rixes-occ-wizard-step].rixes-occ-wizard-step--entering {
    opacity: 0;
    transform: translateX(28px);
}

.rixes-occ-checkout-popup--wizard-animating
    [data-rixes-occ-wizard-step].rixes-occ-wizard-step--active {
    opacity: 1;
    transform: translateX(0);
}

.rixes-occ-checkout-popup--wizard-back.rixes-occ-checkout-popup--wizard-animating
    [data-rixes-occ-wizard-step].rixes-occ-wizard-step--leaving {
    transform: translateX(28px);
}

.rixes-occ-checkout-popup--wizard-back.rixes-occ-checkout-popup--wizard-animating
    [data-rixes-occ-wizard-step].rixes-occ-wizard-step--entering {
    transform: translateX(-28px);
}

.rixes-occ-checkout-popup--wizard-resizing .rixes-occ-checkout-popup__panel {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .rixes-occ-checkout-popup__overlay,
    .rixes-occ-checkout-popup__panel,
    .rixes-occ-checkout-popup--wizard-animating [data-rixes-occ-wizard-step] {
        transition: none !important;
        animation: none !important;
    }

    .rixes-occ-checkout-popup:not(.rixes-occ-checkout-popup--open)
        .rixes-occ-checkout-popup__overlay,
    .rixes-occ-checkout-popup:not(.rixes-occ-checkout-popup--open)
        .rixes-occ-checkout-popup__panel {
        opacity: 1;
        transform: none;
    }
}

.rixes-occ-checkout-popup__title-bar:not([hidden]) {
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 88%, #fff) 0%,
        var(--rixes-occ-popup-accent, #10b981) 50%,
        var(--rixes-occ-popup-accent-hover, #059669) 100%
    );
    box-shadow: 0 1px 0
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 35%, transparent);
}

.rixes-occ-checkout-popup--title-bar-active
    .rixes-occ-checkout-popup__title-bar
    .rixes-occ-checkout-popup__close {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.rixes-occ-checkout-popup--title-bar-active
    .rixes-occ-checkout-popup__title-bar
    .rixes-occ-checkout-popup__close:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.rixes-occ-checkout-popup__close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rixes-occ-popup-bg, #fff) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--rixes-occ-popup-muted, #64748b);
    box-shadow: var(--rixes-occ-popup-shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.08));
    font-size: 0;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.rixes-occ-checkout-popup__close:hover {
    background: var(--rixes-occ-popup-surface-elevated, #fff);
    color: var(--rixes-occ-popup-text, #0f172a);
    transform: scale(1.03);
}

.rixes-occ-checkout-popup__close svg {
    display: block;
}

/* Loading */
.rixes-occ-checkout-popup__loading {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 220px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--rixes-occ-popup-muted, #64748b);
    font-size: 0.9375rem;
    font-weight: 500;
}

.rixes-occ-checkout-popup[data-rixes-occ-state="loading"] .rixes-occ-checkout-popup__loading,
.rixes-occ-checkout-popup--preparing .rixes-occ-checkout-popup__loading {
    display: flex;
}

.rixes-occ-checkout-popup[data-rixes-occ-state="loading"] .rixes-occ-checkout-popup__panel,
.rixes-occ-checkout-popup--preparing .rixes-occ-checkout-popup__panel {
    min-height: 220px;
}

.rixes-occ-checkout-popup__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 22%, transparent);
    border-top-color: var(--rixes-occ-popup-accent, #10b981);
    border-radius: 50%;
    animation: rixes-occ-spin 0.75s linear infinite;
}

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

.rixes-occ-checkout-popup__error {
    margin: 1.5rem;
    padding: 1rem 1.15rem;
    border-radius: var(--rixes-occ-popup-radius-sm, 12px);
    background: #fef2f2;
    border: none;
    box-shadow: inset 0 0 0 1px #fecaca;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Login-required state */
.rixes-occ-checkout-popup__error.rixes-occ-checkout-popup__error--login {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 2rem 1.5rem;
    padding: 1.5rem 1.5rem 1.35rem;
    background: color-mix(
        in srgb,
        var(--rixes-occ-popup-accent, #10b981) 8%,
        var(--rixes-occ-popup-bg, #fff)
    );
    box-shadow: inset 0 0 0 1px
        color-mix(
            in srgb,
            var(--rixes-occ-popup-accent, #10b981) 22%,
            transparent
        );
    color: var(--rixes-occ-popup-text, #111827);
}

.rixes-occ-checkout-popup__error--login .rixes-occ-checkout-login__title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--rixes-occ-popup-text, #0f172a);
}

.rixes-occ-checkout-popup__error--login .rixes-occ-checkout-login__text {
    color: var(--rixes-occ-popup-muted, #475569);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.rixes-occ-checkout-popup__error--login .rixes-occ-checkout-login__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    padding: 0.7rem 1.4rem;
    border-radius: 9999px;
    background: var(--rixes-occ-popup-accent, #10b981);
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    box-shadow: 0 6px 16px
        color-mix(
            in srgb,
            var(--rixes-occ-popup-accent, #10b981) 32%,
            transparent
        );
    transition:
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.rixes-occ-checkout-popup__error--login .rixes-occ-checkout-login__cta:hover {
    background: var(--rixes-occ-popup-accent-hover, #059669);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px
        color-mix(
            in srgb,
            var(--rixes-occ-popup-accent, #10b981) 38%,
            transparent
        );
}

.rixes-occ-checkout-popup__error--login .rixes-occ-checkout-login__cta:focus-visible {
    outline: 2px solid var(--rixes-occ-popup-accent, #10b981);
    outline-offset: 3px;
}

/* --- Typography & sections --- */
.rixes-occ-checkout-section__title {
    margin: 0 0 1.1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--rixes-occ-popup-text, #0f172a);
}

.rixes-occ-checkout-popup__main
    .rixes-occ-checkout-section:first-child
    .rixes-occ-checkout-section__title {
    margin-top: 0;
}

/* --- Fields (modern) --- */
.rixes-occ-checkout-popup {
    --rixes-occ-field-radius: var(--rixes-occ-popup-radius-sm, 12px);
    --rixes-occ-field-bg: var(--rixes-occ-popup-surface-elevated, #fff);
    --rixes-occ-field-border: color-mix(
        in srgb,
        var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.08)) 100%,
        transparent
    );
    --rixes-occ-field-shadow: inset 0 0 0 1.5px var(--rixes-occ-field-border);
}

.rixes-occ-checkout-popup__main-inner,
.rixes-occ-checkout-aside-fields {
    font-family: var(--rixes-occ-popup-font);
    padding-top: 1rem;
}

/* Section cards (wide / two-column main column) */
.rixes-occ-checkout-section--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    margin-bottom: 1.15rem;
    padding: 1.35rem 1.2rem 1.2rem;
    border-radius: calc(var(--rixes-occ-field-radius) + 2px);
    background: var(--rixes-occ-field-bg);
    box-shadow: var(--rixes-occ-field-shadow);
}

.rixes-occ-checkout-section--grid .rixes-occ-checkout-section__title {
    grid-column: 1 / -1;
    margin-bottom: 0.15rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.08));
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--rixes-occ-popup-text, #0f172a);
}

.rixes-occ-checkout-section--grid .rixes-occ-field {
    margin-bottom: 0;
}

/* Full-width fields in grid */
.rixes-occ-checkout-section--grid .rixes-occ-field--email,
.rixes-occ-checkout-section--grid .rixes-occ-field--country,
.rixes-occ-checkout-section--grid .rixes-occ-field--state,
.rixes-occ-checkout-section--grid .rixes-occ-field--textarea,
.rixes-occ-checkout-section--grid .rixes-occ-field--payment_method,
.rixes-occ-checkout-section--grid .rixes-occ-field--terms,
.rixes-occ-checkout-section--grid .rixes-occ-field--coupon,
.rixes-occ-checkout-section--grid .rixes-occ-field--key-billing_address_1,
.rixes-occ-checkout-section--grid .rixes-occ-field--key-billing_address_2,
.rixes-occ-checkout-section--grid .rixes-occ-field--key-billing_company,
.rixes-occ-checkout-section--grid .rixes-occ-field--key-billing_phone,
.rixes-occ-checkout-section--grid .rixes-occ-field--key-order_comments,
.rixes-occ-checkout-section--grid .rixes-occ-field--key-ship_to_different_address {
    grid-column: 1 / -1;
}

.rixes-occ-checkout-section--grid:not(:has(.rixes-occ-field--key-billing_last_name))
    .rixes-occ-field--key-billing_first_name {
    grid-column: 1 / -1;
}

.rixes-occ-checkout-section--payment.rixes-occ-checkout-section--grid {
    gap: 0.75rem;
}

.rixes-occ-field__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rixes-occ-popup-muted, #64748b);
}

.rixes-occ-field__label .required {
    font-weight: 700;
}

.rixes-occ-field__input,
select.rixes-occ-field__input,
.rixes-occ-field__input textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 0.9rem;
    border: none;
    border-radius: var(--rixes-occ-field-radius);
    background: var(--rixes-occ-popup-bg, #fff);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--rixes-occ-popup-text, #0f172a);
    box-shadow: var(--rixes-occ-field-shadow);
    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

select.rixes-occ-field__input {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    cursor: pointer;
}

.rixes-occ-field__input::placeholder {
    color: color-mix(in srgb, var(--rixes-occ-popup-muted, #64748b) 65%, transparent);
    font-weight: 400;
}

.rixes-occ-field__input:hover,
select.rixes-occ-field__input:hover {
    box-shadow:
        inset 0 0 0 1.5px
            color-mix(
                in srgb,
                var(--rixes-occ-popup-accent, #10b981) 25%,
                var(--rixes-occ-field-border)
            ),
        0 2px 8px
            color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 6%, transparent);
}

.rixes-occ-field__input:focus,
select.rixes-occ-field__input:focus,
.rixes-occ-field__input textarea:focus {
    outline: none;
    background: var(--rixes-occ-field-bg);
    box-shadow:
        inset 0 0 0 2px var(--rixes-occ-popup-accent, #10b981),
        0 0 0 4px
            color-mix(
                in srgb,
                var(--rixes-occ-popup-accent, #10b981) 12%,
                transparent
            );
}

.rixes-occ-field--error .rixes-occ-field__input,
.rixes-occ-field__input.rixes-occ-field--error {
    box-shadow:
        inset 0 0 0 2px #ef4444,
        0 0 0 4px rgba(239, 68, 68, 0.1);
}

/* Payment block */
.rixes-occ-checkout-section--payment .rixes-occ-field--payment_method {
    margin-bottom: 0;
}

.rixes-occ-field__payment-methods {
    gap: 0.65rem;
}

.rixes-occ-payment-method-item {
    border-radius: var(--rixes-occ-field-radius);
    overflow: hidden;
    box-shadow: var(--rixes-occ-field-shadow);
    background: var(--rixes-occ-popup-bg, #fff);
}

.rixes-occ-field__payment-option {
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--rixes-occ-popup-text, #0f172a);
    box-shadow: none;
}

.rixes-occ-field__payment-option:has(input:checked) {
    background: color-mix(
        in srgb,
        var(--rixes-occ-popup-accent, #10b981) 8%,
        var(--rixes-occ-popup-bg, #fff)
    );
    box-shadow: inset 0 -1px 0 var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.08));
}

.rixes-occ-payment-method__title::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--rixes-occ-popup-accent, #10b981);
    vertical-align: 0.1em;
    box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 25%, transparent);
}

.rixes-occ-checkout-popup .payment_box {
    padding: 1rem 1rem 0.85rem;
    margin: 0;
    background: var(--rixes-occ-popup-bg, #fff);
    border-top: 1px solid var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.08));
}

.rixes-occ-checkout-popup .payment_box .wc-stripe_cc-container,
.rixes-occ-checkout-popup .payment_box .wc-stripe-gateway-container {
    margin: 0;
}

.rixes-occ-checkout-popup #wc-stripe-card-element,
.rixes-occ-checkout-popup .payment_box .StripeElement {
    min-height: 2.75rem;
    padding: 0.15rem 0;
}

.rixes-occ-checkout-popup .wc-stripe-save-source {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.1));
    font-size: 0.8125rem;
    color: var(--rixes-occ-popup-muted, #64748b);
}

.rixes-occ-checkout-popup .wc-stripe-save-source input[type="checkbox"] {
    accent-color: var(--rixes-occ-popup-accent, #10b981);
}

/* Single gateway: hide redundant radio row when Stripe renders inline */
.rixes-occ-field__payment-methods:has(
        > .rixes-occ-payment-method-item:only-child.wc-stripe-no-desc
    )
    > .rixes-occ-payment-method-item
    > .rixes-occ-field__payment-option {
    display: none;
}

.rixes-occ-field__payment-methods:has(
        > .rixes-occ-payment-method-item:only-child.wc-stripe-no-desc
    )
    > .rixes-occ-payment-method-item
    .payment_box {
    border-top: none;
    padding-top: 1rem;
}

/* Terms — card row + custom checkbox */
.rixes-occ-field--terms .rixes-occ-field__terms-label {
    align-items: center;
    margin: 0;
    padding: 0.9rem 1rem;
    border-radius: var(--rixes-occ-field-radius);
    background: var(--rixes-occ-popup-bg, #fff);
    box-shadow: var(--rixes-occ-field-shadow);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--rixes-occ-popup-text, #334155);
    transition: box-shadow 0.2s ease;
}

.rixes-occ-field--terms .rixes-occ-field__terms-label:has(input:checked) {
    box-shadow:
        inset 0 0 0 2px
            color-mix(
                in srgb,
                var(--rixes-occ-popup-accent, #10b981) 40%,
                transparent
            ),
        0 0 0 4px
            color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 8%, transparent);
}

.rixes-occ-field--terms .rixes-occ-field__terms-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    margin: 0;
    border: 2px solid
        color-mix(in srgb, var(--rixes-occ-popup-muted, #64748b) 35%, transparent);
    border-radius: 0.35rem;
    background: var(--rixes-occ-field-bg);
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.rixes-occ-field--terms .rixes-occ-field__terms-label input[type="checkbox"]:checked {
    border-color: var(--rixes-occ-popup-accent, #10b981);
    background: var(--rixes-occ-popup-accent, #10b981)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 0.7rem no-repeat;
    box-shadow: none;
}

.rixes-occ-field--terms .rixes-occ-field__terms-copy a {
    text-decoration: none;
    border-bottom: 1px solid
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 45%, transparent);
}

/* Card layouts — keep single column fields */
.rixes-occ-checkout-popup.rixes-occ-layout-mode-card .rixes-occ-checkout-section--grid {
    display: block;
    padding: 0;
    box-shadow: none;
    background: transparent;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-card
    .rixes-occ-checkout-section--grid
    .rixes-occ-checkout-section__title {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 1rem;
}

@media (max-width: 520px) {
    .rixes-occ-checkout-section--grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .rixes-occ-checkout-section--grid .rixes-occ-field--key-billing_first_name,
    .rixes-occ-checkout-section--grid .rixes-occ-field--key-billing_last_name {
        grid-column: 1 / -1;
    }
}

.rixes-occ-field__coupon .rixes-occ-coupon-apply {
    border-radius: var(--rixes-occ-popup-radius-sm, 12px);
    background: var(--rixes-occ-popup-text, #0f172a);
    color: #fff;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    transition:
        opacity 0.2s ease,
        transform 0.15s ease;
}

.rixes-occ-field__coupon .rixes-occ-coupon-apply:hover {
    opacity: 0.88;
    background: var(--rixes-occ-popup-text, #0f172a);
}

/* --- Order summary (wide layouts) --- */
.rixes-occ-checkout-popup.rixes-occ-layout-mode-wide .rixes-occ-checkout-popup__aside {
    background: linear-gradient(
        180deg,
        color-mix(
                in srgb,
                var(--rixes-occ-popup-surface, #f8fafc) 40%,
                var(--rixes-occ-popup-bg, #fff)
            )
            0%,
        var(--rixes-occ-popup-surface, #f8fafc) 100%
    );
    border-left: none;
    box-shadow: inset 1px 0 0 var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.08));
}

.rixes-occ-checkout-summary__heading {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.rixes-occ-checkout-summary {
    padding: 0.25rem 0;
}

.rixes-occ-checkout-summary__item {
    grid-template-columns: 52px 1fr auto;
    gap: 0.75rem 1rem;
    padding: 0.85rem;
    margin-bottom: 0.5rem;
    border: none;
    border-radius: var(--rixes-occ-popup-radius-sm, 12px);
    background: var(--rixes-occ-popup-surface-elevated, #fff);
    box-shadow: var(--rixes-occ-popup-shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.05));
}

.rixes-occ-checkout-summary__item:last-child {
    margin-bottom: 0.75rem;
}

.rixes-occ-checkout-summary__item img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    box-shadow: none;
}

.rixes-occ-checkout-summary__row {
    padding: 0.35rem 0;
    font-size: 0.875rem;
}

.rixes-occ-checkout-summary__total {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.08));
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
}

/* --- Buttons --- */
.rixes-occ-checkout-popup__cta {
    padding: 0.7rem 1.35rem;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 92%, #fff) 0%,
        var(--rixes-occ-popup-accent, #10b981) 55%,
        var(--rixes-occ-popup-accent-hover, #059669) 100%
    );
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 20px
            color-mix(
                in srgb,
                var(--rixes-occ-popup-accent, #10b981) 38%,
                transparent
            );
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.rixes-occ-checkout-popup__cta:hover {
    filter: brightness(1.04);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 12px 28px
            color-mix(
                in srgb,
                var(--rixes-occ-popup-accent, #10b981) 42%,
                transparent
            );
}

.rixes-occ-checkout-popup__secondary {
    padding: 0.7rem 1.1rem;
    border-radius: 9999px;
    font-weight: 600;
    color: var(--rixes-occ-popup-muted, #64748b);
    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.rixes-occ-checkout-popup__secondary:hover {
    color: var(--rixes-occ-popup-text, #0f172a);
    background: var(--rixes-occ-popup-bg, #fff);
    text-decoration: none;
}

.rixes-occ-checkout-popup__footer {
    padding: 0.55rem 1.25rem 0.7rem;
    border-top: none;
    box-shadow: 0 -1px 0 var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.08));
    background: color-mix(in srgb, var(--rixes-occ-popup-bg, #fff) 94%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- Card layouts shared --- */
.rixes-occ-checkout-popup.rixes-occ-layout-mode-card .rixes-occ-checkout-popup__panel {
    border-radius: var(--rixes-occ-popup-radius-lg, 22px);
}

.rixes-occ-checkout-popup__hero {
    padding: 1.75rem 1.5rem 0.25rem;
}

.rixes-occ-checkout-popup__hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 22%, #fff),
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 8%, #fff)
    );
    box-shadow: 0 8px 20px
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 22%, transparent);
}

.rixes-occ-checkout-popup__hero-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.rixes-occ-checkout-popup__hero-lead {
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Centered card — panel hugs field column width */
.rixes-occ-checkout-popup.rixes-occ-layout-mode-centered .rixes-occ-checkout-popup__panel {
    width: min(var(--rixes-occ-popup-max-width, 400px), calc(100vw - 2rem));
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-centered .rixes-occ-checkout-popup__layout,
.rixes-occ-checkout-popup.rixes-occ-layout-mode-centered .rixes-occ-checkout-popup__main,
.rixes-occ-checkout-popup.rixes-occ-layout-mode-centered .rixes-occ-checkout-popup__aside {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-centered .rixes-occ-checkout-popup__aside,
.rixes-occ-checkout-popup[data-rixes-occ-layout="card_centered"]
    .rixes-occ-checkout-popup__aside {
    border-top: none;
    margin: 0;
    padding: 1rem 0 0;
    background: transparent;
}

.rixes-occ-checkout-popup[data-rixes-occ-layout="card_centered"]
    .rixes-occ-checkout-popup__main
    .rixes-occ-field,
.rixes-occ-checkout-popup[data-rixes-occ-layout="card_centered"]
    .rixes-occ-checkout-popup__main
    .rixes-occ-checkout-section,
.rixes-occ-checkout-popup[data-rixes-occ-layout="card_centered"]
    .rixes-occ-field--payment_method {
    max-width: 380px;
}

.rixes-occ-checkout-popup[data-rixes-occ-layout="card_centered"] .rixes-occ-checkout-summary {
    padding: 1rem;
    border-radius: var(--rixes-occ-popup-radius-sm, 12px);
    background: var(--rixes-occ-popup-bg, #fff);
}

/* Radio list — single column, tall selectable rows */
.rixes-occ-checkout-popup.rixes-occ-layout-mode-radio .rixes-occ-checkout-popup__main-inner {
    display: block !important;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-radio .rixes-occ-checkout-popup__hero-icon {
    border-radius: 50%;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-radio .rixes-occ-field--payment_method::before {
    content: "Payment method";
    display: block;
    margin-bottom: 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rixes-occ-popup-muted, #64748b);
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-radio
    .rixes-occ-radio-stack
    .rixes-occ-field__payment-option {
    border: 1.5px solid transparent;
    background: var(--rixes-occ-popup-bg, #fff);
    box-shadow: none;
    border-radius: 16px;
    min-height: 62px;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-radio
    .rixes-occ-radio-stack
    .rixes-occ-field__payment-option:has(input:checked) {
    border-color: var(--rixes-occ-popup-accent, #10b981);
    background: var(--rixes-occ-popup-surface-elevated, #fff);
    box-shadow:
        0 0 0 1px
            color-mix(
                in srgb,
                var(--rixes-occ-popup-accent, #10b981) 40%,
                transparent
            ),
        inset 5px 0 0 var(--rixes-occ-popup-accent, #10b981);
}

/* Split toggles — 2-column grid, chip payment */
.rixes-occ-checkout-popup.rixes-occ-layout-mode-split .rixes-occ-checkout-popup__main {
    padding: 0.75rem 1.25rem 0.5rem;
    background: color-mix(
        in srgb,
        var(--rixes-occ-popup-bg, #fff) 55%,
        var(--rixes-occ-popup-bg, #fff)
    );
    border-radius: var(--rixes-occ-popup-radius-sm, 12px);
    margin: 0 1rem 0.5rem;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-split .rixes-occ-checkout-popup__hero {
    display: none !important;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-split .rixes-occ-checkout-popup__main-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-split .rixes-occ-field--payment_method::before {
    content: "Pay with";
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rixes-occ-popup-muted, #64748b);
}

.rixes-occ-split-toggle__opt {
    border: 1.5px solid transparent;
    border-radius: 8px;
    background: var(--rixes-occ-popup-bg, #fff);
    font-weight: 600;
    font-size: 0.8125rem;
}

.rixes-occ-split-toggle__opt.is-active {
    border-color: var(--rixes-occ-popup-accent, #10b981);
    background: var(--rixes-occ-popup-accent, #10b981);
    box-shadow: none;
    color: #fff;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-split
    .rixes-occ-payment-split
    .rixes-occ-split-toggle__opt.is-active {
    color: #fff;
}

/* Product banner */
.rixes-occ-checkout-popup.rixes-occ-layout-mode-banner
    .rixes-occ-checkout-popup__banner.rixes-occ-checkout-popup__banner--visible {
    height: 200px;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-banner
    .rixes-occ-checkout-popup__banner--visible
    .rixes-occ-checkout-popup__banner-overlay {
    padding: 1.25rem 1.5rem 1.35rem;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(15, 23, 42, 0.82) 100%
    );
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-banner .rixes-occ-checkout-popup__banner-title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-banner:not(.rixes-occ-checkout-popup--title-bar-active)
    .rixes-occ-checkout-popup__panel
    > .rixes-occ-checkout-popup__close {
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
}

/* Wide: two column vs actions on the right */
.rixes-occ-checkout-popup[data-rixes-occ-layout="two_column"] .rixes-occ-checkout-popup__aside {
    background: var(--rixes-occ-popup-surface, #f8fafc);
}

.rixes-occ-checkout-popup.rixes-occ-layout-mode-actions-right .rixes-occ-checkout-popup__aside {
    background: linear-gradient(
        180deg,
        color-mix(
                in srgb,
                var(--rixes-occ-popup-accent, #10b981) 6%,
                var(--rixes-occ-popup-surface, #f8fafc)
            )
            0%,
        var(--rixes-occ-popup-surface, #f8fafc) 40%
    );
}

/* Actions right */
.rixes-occ-checkout-popup.rixes-occ-layout-mode-actions-right
    .rixes-occ-checkout-popup__secondary {
    border: 1.5px solid var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.1));
    border-radius: 9999px;
    background: var(--rixes-occ-popup-surface-elevated, #fff);
    font-weight: 600;
}

.rixes-occ-checkout-popup__footer--actions-right .rixes-occ-checkout-popup__cta {
    border-radius: 9999px;
    min-width: 160px;
}

/* Success */
.rixes-occ-checkout-success--card,
.rixes-occ-checkout-success {
    padding: 2.5rem 1.5rem 2rem;
}

.rixes-occ-checkout-success--card .rixes-occ-checkout-success__icon {
    border-radius: 20px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 18%, #fff),
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 6%, #fff)
    );
    box-shadow: 0 10px 24px
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 20%, transparent);
}

.rixes-occ-checkout-success--card .rixes-occ-checkout-success__cta {
    border-radius: 14px;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 92%, #fff) 0%,
        var(--rixes-occ-popup-accent, #10b981) 100%
    );
}

/* Dark slate — light text throughout */
.rixes-occ-checkout-popup--dark,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__panel {
    color: var(--rixes-occ-popup-text, #f4f4f5);
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-section__title,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-summary__heading,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__hero-title,
.rixes-occ-checkout-popup--dark .rixes-occ-field__label,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-summary__name,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-summary__line,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-summary__row strong,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-summary__total,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-summary__total strong,
.rixes-occ-checkout-popup--dark .rixes-occ-field__payment-option,
.rixes-occ-checkout-popup--dark .rixes-occ-split-toggle__opt,
.rixes-occ-checkout-popup--dark .rixes-occ-field--checkbox,
.rixes-occ-checkout-popup--dark .rixes-occ-field--terms,
.rixes-occ-checkout-popup--dark .rixes-occ-field--payment_method::before {
    color: var(--rixes-occ-popup-text, #f4f4f5);
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__hero-lead,
.rixes-occ-checkout-popup--dark .rixes-occ-field__desc,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-summary__row,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__loading,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__secondary {
    color: var(--rixes-occ-popup-muted, #d4d4d8);
}

.rixes-occ-checkout-popup--dark .rixes-occ-field__label .required,
.rixes-occ-checkout-popup--dark .rixes-occ-field--terms a,
.rixes-occ-checkout-popup--dark .rixes-occ-field--checkbox a {
    color: color-mix(in srgb, var(--rixes-occ-popup-accent, #10b981) 75%, #fff);
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__aside {
    background: linear-gradient(180deg, #1c1c1f 0%, #141416 100%);
    box-shadow: inset 1px 0 0 var(--rixes-occ-popup-divider, rgba(255, 255, 255, 0.1));
}

.rixes-occ-checkout-popup--dark {
    --rixes-occ-field-bg: var(--rixes-occ-popup-surface-elevated, #262629);
    --rixes-occ-field-border: rgba(255, 255, 255, 0.12);
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-section--grid {
    background: var(--rixes-occ-field-bg);
    box-shadow: inset 0 0 0 1px var(--rixes-occ-field-border);
}

.rixes-occ-checkout-popup--dark
    .rixes-occ-checkout-section--grid
    .rixes-occ-checkout-section__title {
    border-bottom-color: var(--rixes-occ-field-border);
    color: var(--rixes-occ-popup-text, #f4f4f5);
}

.rixes-occ-checkout-popup--dark .rixes-occ-field__input,
.rixes-occ-checkout-popup--dark select.rixes-occ-field__input {
    color: var(--rixes-occ-popup-text, #f4f4f5);
    background: var(--rixes-occ-popup-bg, #141416);
    box-shadow: inset 0 0 0 1.5px var(--rixes-occ-field-border);
}

.rixes-occ-checkout-popup--dark select.rixes-occ-field__input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.rixes-occ-checkout-popup--dark .rixes-occ-field__input::placeholder {
    color: #a1a1aa;
}

.rixes-occ-checkout-popup--dark .rixes-occ-payment-method-item {
    background: var(--rixes-occ-popup-bg, #141416);
    box-shadow: inset 0 0 0 1px var(--rixes-occ-field-border);
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup .payment_box {
    background: var(--rixes-occ-popup-bg, #141416);
    border-top-color: var(--rixes-occ-field-border);
}

.rixes-occ-checkout-popup--dark .rixes-occ-field--terms .rixes-occ-field__terms-label {
    color: var(--rixes-occ-popup-muted, #d4d4d8);
    background: var(--rixes-occ-popup-bg, #141416);
    box-shadow: inset 0 0 0 1.5px var(--rixes-occ-field-border);
}

.rixes-occ-checkout-popup--dark
    .rixes-occ-field--terms
    .rixes-occ-field__terms-label
    input[type="checkbox"] {
    background: var(--rixes-occ-field-bg);
    border-color: rgba(255, 255, 255, 0.2);
}

.rixes-occ-checkout-popup--dark .rixes-occ-field__payment-option,
.rixes-occ-checkout-popup--dark .rixes-occ-split-toggle__opt {
    color: var(--rixes-occ-popup-text, #f4f4f5);
    background: var(--rixes-occ-popup-bg, #141416);
}

.rixes-occ-checkout-popup--dark .rixes-occ-field__payment-option:has(input:checked),
.rixes-occ-checkout-popup--dark .rixes-occ-split-toggle__opt.is-active {
    color: #fff;
}

.rixes-occ-checkout-popup--dark
    .rixes-occ-radio-stack
    .rixes-occ-field__payment-option:has(input:checked) {
    background: color-mix(
        in srgb,
        var(--rixes-occ-popup-accent, #10b981) 18%,
        var(--rixes-occ-popup-bg, #141416)
    );
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-summary__item {
    background: var(--rixes-occ-popup-surface-elevated, #262629);
    box-shadow: none;
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-summary__item img {
    background: #3f3f46;
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__close {
    background: color-mix(
        in srgb,
        var(--rixes-occ-popup-bg, #141416) 88%,
        transparent
    );
    color: #e4e4e7;
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__footer {
    background: color-mix(
        in srgb,
        var(--rixes-occ-popup-bg, #141416) 92%,
        transparent
    );
}

.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__wizard-prev,
.rixes-occ-checkout-popup--dark .rixes-occ-checkout-popup__wizard-next {
    color: var(--rixes-occ-popup-text, #f4f4f5);
    background: var(--rixes-occ-popup-bg, #141416);
    border-color: transparent;
}

@media (max-width: 768px) {
    .rixes-occ-checkout-popup__panel {
        border-radius: 20px 20px 0 0;
    }

    .rixes-occ-checkout-popup.rixes-occ-layout-mode-wide .rixes-occ-checkout-popup__aside {
        background: var(--rixes-occ-popup-surface, #f8fafc);
        box-shadow: inset 0 1px 0
            var(--rixes-occ-popup-divider, rgba(15, 23, 42, 0.08));
    }
}