/**
 * SPOKAR Micro — Checkout Styles
 * Ported from BRILLAMENTO checkout (commit 8). Mobile-first.
 *
 * Layer order: tokens.css → base.css → components.css → checkout.css.
 * checkout.css owns its own .spokar-btn primitives because the rest of the
 * theme uses BEM-style .btn / .btn--primary, while page-checkout-custom.php
 * uses the original BRILLAMENTO .spokar-btn .spokar-btn-primary pair (Commit 7).
 *
 * @package SpokarMicro
 */

/* ============================================================================
   COMPAT SHIM — map legacy BRILLAMENTO design tokens onto spokar-micro tokens.
   Lets us paste BRILLAMENTO CSS verbatim instead of hand-translating every var.
   ========================================================================== */
:root {
    --bm-color-primary: var(--olive);
    --bm-color-primary-dark: var(--olive-deep);
    --bm-color-accent: var(--burgundy);
    --bm-color-accent-dark: var(--burgundy-deep);
    --bm-color-text: var(--slate);
    --bm-color-bg: var(--white);
    --bm-color-muted: var(--grey-600);
    --bm-color-border: var(--grey-200);
    --bm-color-soft: var(--grey-100);
    --bm-color-light: var(--grey-100);
    --bm-color-light-grey: var(--grey-500);
    --bm-color-grey: var(--grey-600);
    --bm-color-dark-grey: var(--slate);
    --bm-color-white: var(--white);
    --bm-color-off-white: var(--grey-50);

    /* Status colors — neutral palette aligned with spokar.
       "Success/confirmed" maps onto the brand olive (spokar has no green);
       success bars set their own slate text for contrast on the olive tint. */
    --bm-color-green: var(--olive-deep);
    --bm-color-green-light: var(--olive-soft);
    --bm-color-amber: #d29a2a;
    --bm-color-amber-light: #fdf2d6;
    --bm-color-red: #c1424a;
    --bm-color-red-light: #fbe6e8;
    --bm-color-delft-blue: var(--primary);
    --bm-color-delft-blue-light: var(--primary-soft);

    /* Spacing */
    --bm-spacing-xs: 4px;
    --bm-spacing-sm: 8px;
    --bm-spacing-md: 16px;
    --bm-spacing-lg: 24px;
    --bm-spacing-xl: 32px;
    --bm-spacing-2xl: 40px;
    --bm-spacing-3xl: 48px;
    --bm-spacing-4xl: 64px;
    --bm-spacing-5xl: 96px;

    /* Radii */
    --bm-radius: var(--radius-md);
    --bm-radius-lg: var(--radius-md);

    /* Typography */
    --bm-font: var(--font-primary);
    --bm-font-serif: var(--font-primary); /* spokar has only one font family */
    --bm-font-primary: var(--font-primary);
    --bm-font-size-xs: 0.6875rem;
    --bm-font-size-sm: 0.8125rem;
    --bm-font-size-base: 0.875rem;
    --bm-font-size-md: 1rem;
    --bm-font-size-lg: 1.0625rem;
    --bm-font-size-xl: 1.25rem;
    --bm-font-size-3xl: 1.75rem;
    --bm-font-size-4xl: 2rem;
    --bm-font-weight-normal: 500;
    --bm-font-weight-medium: 600;

    /* Brand-specific colors used in the checkout markup */
    --bm-color-gold: var(--olive-deep);
    --bm-color-checkout-header-bg: var(--grey-50);
}

/* ============================================================================
   FLOATING LABEL PRIMITIVES (lifted from BRILLAMENTO base.css — checkout-only)
   Markup contract: .spokar-field-group > .spokar-field-input + .spokar-field-label
   ========================================================================== */
@keyframes onAutoFillStart {
    from { /**/ }
    to   { /**/ }
}
@keyframes onAutoFillCancel {
    from { /**/ }
    to   { /**/ }
}

.spokar-field-group {
    position: relative;
    margin-bottom: var(--bm-spacing-xl);
}

.spokar-field-input {
    width: 100%;
    padding: var(--bm-spacing-lg) 0 var(--bm-spacing-sm);
    border: 0;
    border-bottom: 1px solid var(--bm-color-border);
    background: transparent;
    font-family: var(--bm-font);
    font-size: var(--bm-font-size-md);
    color: var(--bm-color-text);
    appearance: none;
    border-radius: 0;
    transition: border-color var(--t-fast) var(--ease-out-quint);
    /* trigger autofill animation listener (consumed by JS) */
    animation-name: onAutoFillCancel;
}

.spokar-field-input:focus {
    outline: none;
    border-bottom-color: var(--bm-color-primary);
}

.spokar-field-input:-webkit-autofill {
    animation-name: onAutoFillStart;
    -webkit-text-fill-color: var(--bm-color-text);
    box-shadow: 0 0 0 1000px var(--bm-color-bg) inset;
}

.spokar-field-label {
    position: absolute;
    left: 0;
    top: var(--bm-spacing-lg);
    font-family: var(--bm-font);
    font-size: var(--bm-font-size-md);
    color: var(--bm-color-muted);
    pointer-events: none;
    transition:
        top var(--t-fast) var(--ease-out-quint),
        font-size var(--t-fast) var(--ease-out-quint),
        color var(--t-fast) var(--ease-out-quint);
}

.spokar-field-group.has-focus .spokar-field-label,
.spokar-field-group.has-value .spokar-field-label,
.spokar-field-group[data-has-value="true"] .spokar-field-label {
    top: 2px;
    font-size: var(--bm-font-size-xs);
    color: var(--bm-color-primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.spokar-field-group .required {
    color: var(--bm-color-accent);
}

.spokar-field-hint {
    display: block;
    margin-top: var(--bm-spacing-xs);
    font-size: var(--bm-font-size-xs);
    color: var(--bm-color-muted);
    line-height: 1.4;
}

.spokar-field-error {
    display: none;
    margin-top: var(--bm-spacing-xs);
    font-size: var(--bm-font-size-xs);
    color: var(--bm-color-red);
    line-height: 1.4;
}

.spokar-field-group.has-error .spokar-field-input {
    border-bottom-color: var(--bm-color-red);
}

.spokar-field-group.has-error .spokar-field-error {
    display: block;
}

.spokar-field-group.has-error .spokar-field-hint {
    display: none;
}

/* Checkbox label (no float, just inline) */
.spokar-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--bm-spacing-sm);
    font-size: var(--bm-font-size-md);
    color: var(--bm-color-text);
    cursor: pointer;
}

.spokar-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--bm-color-primary);
    cursor: pointer;
}

/* ============================================================================
   BUTTON PRIMITIVES — checkout uses .spokar-btn + modifier pair (not BEM)
   ========================================================================== */
.spokar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    /* Match the PDP .btn primitive (components.css) so checkout CTAs read
       identically to the add-to-cart / cart-drawer buttons. */
    padding: 0.95rem 1.5rem;
    font-family: var(--bm-font);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--white);
    background: var(--slate);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background var(--t-base) var(--ease-out-quint),
        color var(--t-base) var(--ease-out-quint),
        transform var(--t-fast) var(--ease-out-quint),
        border-color var(--t-base) var(--ease-out-quint);
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
}

.spokar-btn:hover {
    background: var(--slate-soft);
    color: var(--white);
}

.spokar-btn:active {
    transform: scale(0.98);
}

.spokar-btn:disabled,
.spokar-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.spokar-btn-primary {
    background: var(--primary);
    color: var(--white);
}

.spokar-btn-primary:hover {
    background: var(--primary-deep);
    color: var(--white);
}

.spokar-btn-secondary {
    background: var(--white);
    color: var(--slate);
    box-shadow: inset 0 0 0 1px var(--grey-300);
}

.spokar-btn-secondary:hover {
    background: var(--grey-100);
    color: var(--slate);
}

.spokar-btn-block,
.spokar-btn-full {
    width: 100%;
}

.spokar-btn-large {
    /* Mirrors .btn--lg (components.css). */
    padding: 1.1rem 2rem;
    font-size: 1rem;
}

.spokar-btn.loading {
    background-color: var(--grey-500);
    cursor: wait;
    pointer-events: none;
}

/* ============================================================================
   BASE LAYOUT
   ========================================================================== */

.spokar-checkout-page {
    max-width: 1400px;
    margin: 0 auto;
    /* Top padding clears the fixed .site-header (see sections.css:5-18); matches .hero pattern. */
    padding: clamp(6rem, 14vh, 9rem) var(--bm-spacing-md) var(--bm-spacing-5xl);
}

.spokar-checkout-header {
    text-align: center;
    margin-bottom: var(--bm-spacing-4xl);
}

.spokar-checkout-title {
    font-size: var(--bm-font-size-4xl);
    font-weight: var(--bm-font-weight-normal);
    letter-spacing: 2px;
    margin-bottom: var(--bm-spacing-xl);
    text-transform: uppercase;
    color: var(--bm-color-primary);
}

.spokar-checkout-container {
    display: block;
}

.spokar-checkout-main {
    margin-bottom: var(--bm-spacing-4xl);
}

.spokar-checkout-sidebar {
    position: relative;
}

/* ============================================================================
   CHECKOUT-SPECIFIC FIELD OVERRIDES
   ========================================================================== */

.spokar-checkout-form .spokar-field-label {
    font-size: var(--bm-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spokar-checkout-form .spokar-field-error {
    white-space: nowrap;
}

.spokar-field-group input[type="tel"] {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

/* Password toggle */
.spokar-field-toggle {
    position: absolute;
    right: 0;
    top: var(--bm-spacing-2xl);
    background: none;
    border: none;
    color: var(--bm-color-primary);
    font-size: var(--bm-font-size-xs);
    font-weight: var(--bm-font-weight-normal);
    cursor: pointer;
    padding: var(--bm-spacing-xs) 0;
    letter-spacing: 0.5px;
}

.spokar-field-toggle:hover {
    color: var(--bm-color-primary-dark);
}

/* Select field */
.spokar-field-select {
    padding-right: var(--bm-spacing-xl);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}

/* Textarea */
.spokar-field-textarea {
    min-height: 100px;
    padding: var(--bm-spacing-md) 0;
    resize: vertical;
}

/* ============================================================================
   GRID LAYOUTS
   ========================================================================== */
.spokar-field-row-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 768px) {
    .spokar-field-row-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--bm-spacing-xl);
    }
    .spokar-field-row-grid.spokar-grid-60-40 {
        grid-template-columns: 60% 40%;
    }
}

/* ============================================================================
   CHECKOUT SECTIONS — inner content wrappers
   ========================================================================== */
.spokar-checkout-section {
    background: transparent;
    padding: 0;
    margin-bottom: var(--bm-spacing-xl);
    border: none;
}

.spokar-checkout-subsection {
    margin-bottom: var(--bm-spacing-4xl);
}

.spokar-checkout-section h2,
.spokar-checkout-subsection h2 {
    font-family: var(--bm-font-primary);
    font-size: var(--bm-font-size-md);
    font-weight: var(--bm-font-weight-normal);
    letter-spacing: 1px;
    margin-bottom: var(--bm-spacing-xl);
    text-transform: uppercase;
    color: var(--bm-color-dark-grey);
}

.spokar-section-subtitle {
    font-size: var(--bm-font-size-md);
    font-weight: var(--bm-font-weight-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: var(--bm-spacing-3xl) 0 var(--bm-spacing-xl);
    color: var(--bm-color-dark-grey);
}

/* ============================================================================
   EMAIL GATEWAY
   ========================================================================== */
#email-gateway-section {
    text-align: center;
    margin: 0 auto var(--bm-spacing-3xl);
}

#email-gateway-section .spokar-field-group {
    text-align: left;
}

#btn-continue-checkout {
    margin-top: var(--bm-spacing-xl);
}

.spokar-email-privacy-note {
    font-size: var(--bm-font-size-base);
    color: var(--bm-color-grey);
    line-height: 1.6;
    margin-top: var(--bm-spacing-xl);
    text-align: left;
}

.spokar-login-hint {
    margin-top: var(--bm-spacing-xl);
    font-size: var(--bm-font-size-md);
    color: var(--bm-color-grey);
}

.spokar-link {
    background: none;
    border: none;
    color: var(--bm-color-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
}

.spokar-link:hover {
    color: var(--bm-color-primary-dark);
}

.spokar-link-small {
    font-size: var(--bm-font-size-base);
    color: var(--bm-color-primary);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Email Confirmed Bar */
/* [hidden] must beat the display:flex below (same shim as .spokar-modal[hidden]),
   otherwise the empty confirmed bar shows before the email is validated. */
.spokar-email-confirmed[hidden] {
    display: none;
}

.spokar-email-confirmed {
    background: var(--bm-color-green-light);
    border: 1px solid var(--bm-color-green);
    padding: var(--bm-spacing-md) var(--bm-spacing-xl);
    margin-bottom: var(--bm-spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--bm-font-size-md);
}

.spokar-email-confirmed .email-display {
    font-weight: var(--bm-font-weight-normal);
}

/* Logged status */
.spokar-logged-status {
    background: var(--bm-color-green-light);
    border: 1px solid var(--bm-color-green);
    padding: var(--bm-spacing-md) var(--bm-spacing-xl);
    margin-bottom: var(--bm-spacing-xl);
    font-size: var(--bm-font-size-md);
}

/* ============================================================================
   LOGIN / REGISTER PANELS
   ========================================================================== */
.spokar-login-box {
    text-align: center;
}

.spokar-login-box h3 {
    font-family: var(--bm-font-serif);
    font-size: var(--bm-font-size-3xl);
    font-weight: var(--bm-font-weight-normal);
    margin-bottom: var(--bm-spacing-md);
    color: var(--bm-color-dark-grey);
}

.spokar-subtitle {
    font-size: var(--bm-font-size-md);
    color: var(--bm-color-grey);
    margin-bottom: var(--bm-spacing-3xl);
}

.spokar-login-box .spokar-field-group {
    text-align: left;
}

.spokar-login-box .spokar-btn + .spokar-btn {
    margin-top: var(--bm-spacing-md);
}

.spokar-form-footer {
    text-align: center;
    margin-top: var(--bm-spacing-xl);
}

.spokar-separator {
    position: relative;
    text-align: center;
    margin: var(--bm-spacing-2xl) 0;
}

.spokar-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bm-color-border);
}

.spokar-separator span {
    position: relative;
    background: var(--white);
    padding: 0 var(--bm-spacing-md);
    color: var(--bm-color-light-grey);
    font-size: var(--bm-font-size-base);
    text-transform: uppercase;
}

/* ============================================================================
   PANELS (info / warning / success)
   ========================================================================== */
.spokar-panel {
    padding: var(--bm-spacing-md) var(--bm-spacing-xl);
    margin-bottom: var(--bm-spacing-xl);
    font-size: var(--bm-font-size-md);
    line-height: 1.6;
    border-radius: var(--bm-radius);
}

.spokar-panel-success {
    background: var(--bm-color-green-light);
    border: 1px solid var(--bm-color-green);
    color: var(--slate);
}

.spokar-panel-warning {
    background: var(--bm-color-amber-light);
    border: 1px solid var(--bm-color-amber);
    color: var(--bm-color-dark-grey);
}

.spokar-panel-info {
    background: var(--bm-color-delft-blue-light);
    border: 1px solid var(--bm-color-delft-blue);
    color: var(--bm-color-delft-blue);
}

.spokar-panel-title {
    font-weight: var(--bm-font-weight-normal);
    margin-bottom: var(--bm-spacing-sm);
}

.spokar-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spokar-panel li {
    padding: var(--bm-spacing-xs) 0;
}

/* ============================================================================
   SHIPPING METHODS — clickable cards (no radio circle)
   ========================================================================== */
.spokar-shipping-methods {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bm-spacing-3xl) 0;
}

.spokar-shipping-method {
    position: relative;
    list-style: none;
    margin: 0 0 var(--bm-spacing-md) 0;
    padding: 0;
    border: 1px solid var(--bm-color-border);
    background: var(--white);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    border-radius: var(--bm-radius);
}

.spokar-shipping-method::marker {
    display: none;
    content: '';
}

.spokar-shipping-method:hover {
    border-color: var(--bm-color-dark-grey);
}

.spokar-shipping-method:has(.spokar-shipping-radio:checked),
.spokar-shipping-method.is-selected {
    border-color: var(--bm-color-primary);
    background: var(--bm-color-off-white);
}

/* Hide native radio but keep it accessible */
.spokar-shipping-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.spokar-shipping-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--bm-spacing-md);
    padding: var(--bm-spacing-lg) var(--bm-spacing-md);
    flex-wrap: wrap;
}

.spokar-shipping-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bm-spacing-xs);
}

.spokar-shipping-title {
    font-weight: var(--bm-font-weight-normal);
    font-size: var(--bm-font-size-lg);
    color: var(--bm-color-dark-grey);
    line-height: 1.4;
}

.spokar-shipping-cost {
    font-weight: var(--bm-font-weight-normal);
    font-size: var(--bm-font-size-md);
    color: var(--bm-color-grey);
    white-space: nowrap;
}

/* "Zdarma" cost label when free shipping applies */
.spokar-shipping-free {
    color: var(--olive-deep);
    font-weight: var(--bm-font-weight-medium);
}

/* Free-shipping discount: original price struck through, new price highlighted.
   When the threshold is met the cheapest method goes free and the others drop by
   that amount — show both so the saving is visible. */
.spokar-shipping-cost-orig {
    color: var(--bm-color-grey);
    text-decoration: line-through;
    font-weight: var(--bm-font-weight-normal);
    margin-right: 4px;
    opacity: .75;
}

.spokar-shipping-cost-now {
    color: var(--olive-deep);
    font-weight: var(--bm-font-weight-medium);
}

/* ============================================================================
   FREE-SHIPPING HINT (above methods) + REGISTER PERK
   ========================================================================== */
.spokar-freeship-hint-slot {
    margin: 0 0 var(--bm-spacing-lg) 0;
}

.spokar-freeship-hint,
.spokar-register-perk {
    padding: var(--bm-spacing-md) var(--bm-spacing-lg);
    border-radius: var(--bm-radius);
    font-size: var(--bm-font-size-md);
    line-height: 1.45;
}

/* neutral progress hint (logged-in, not yet at limit) */
.spokar-freeship-hint {
    background: var(--bm-color-delft-blue-light);
    border: 1px solid var(--bm-color-delft-blue);
    color: var(--bm-color-delft-blue);
}

/* brand-accented promo (guest nudge / register perk / threshold met) */
.spokar-freeship-hint--promo,
.spokar-freeship-hint--ok,
.spokar-register-perk {
    background: rgba(211, 219, 65, 0.14);
    border: 1px solid var(--olive);
    color: var(--slate);
}

.spokar-freeship-hint--ok {
    color: var(--olive-deep);
    font-weight: var(--bm-font-weight-medium);
}

.spokar-register-perk {
    margin: 0 0 var(--bm-spacing-lg) 0;
}

.spokar-register-perk strong {
    color: var(--olive-deep);
    font-weight: var(--bm-font-weight-medium);
}

.spokar-shipping-radio:focus-visible + .spokar-shipping-label {
    outline: 2px solid var(--bm-color-primary);
    outline-offset: 2px;
}

/* Desktop layout */
@media (min-width: 768px) {
    .spokar-shipping-label {
        flex-wrap: nowrap;
        padding: var(--bm-spacing-lg) var(--bm-spacing-xl);
    }
    .spokar-shipping-info {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--bm-spacing-md);
    }
    .spokar-shipping-cost {
        margin-left: auto;
    }
}

/* ============================================================================
   SHIPPING ADDRESS (conditional, home-delivery only)
   ========================================================================== */
.spokar-shipping-fields {
    margin-top: 20px;
}

.spokar-hint-text {
    font-size: 13px;
    color: var(--bm-color-grey);
    margin-top: 15px;
    line-height: 1.5;
}

.spokar-shipping-same-as-billing {
    display: flex;
    align-items: center;
    gap: var(--bm-spacing-sm);
    padding: var(--bm-spacing-md) 0;
    font-size: var(--bm-font-size-sm);
    cursor: pointer;
}

.spokar-shipping-same-as-billing input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.spokar-shipping-address-fields {
    margin-top: var(--bm-spacing-md);
}

#shipping_country_display {
    background-color: var(--bm-color-off-white);
    cursor: not-allowed;
}

/* ============================================================================
   ORDER NOTES
   ========================================================================== */
.spokar-order-notes-section {
    padding-top: 20px;
}

#order-notes-field {
    margin-top: 20px;
}

/* ============================================================================
   PAYMENT METHODS — clickable cards mirroring shipping styling
   ========================================================================== */
.spokar-payment-methods {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bm-spacing-3xl) 0;
}

.spokar-payment-method {
    position: relative;
    list-style: none;
    margin: 0 0 var(--bm-spacing-md) 0;
    padding: 0;
    border: 1px solid var(--bm-color-border);
    background: var(--white);
    border-radius: var(--bm-radius);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.spokar-payment-method::marker {
    display: none;
    content: '';
}

.spokar-payment-method:hover {
    border-color: var(--bm-color-dark-grey);
}

.spokar-payment-method:has(.spokar-payment-radio:checked) {
    border-color: var(--bm-color-primary);
    background: var(--bm-color-off-white);
}

.spokar-payment-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--bm-spacing-md);
    padding: var(--bm-spacing-lg) var(--bm-spacing-md);
}

.spokar-payment-radio {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--bm-color-border);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.spokar-payment-radio:checked {
    border-color: var(--bm-color-primary);
}

.spokar-payment-radio:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--bm-color-primary);
}

.spokar-payment-title {
    font-weight: var(--bm-font-weight-normal);
    font-size: var(--bm-font-size-lg);
    color: var(--bm-color-dark-grey);
    display: inline-flex;
    align-items: center;
    gap: var(--bm-spacing-sm);
}

.payment_box {
    padding: 0 var(--bm-spacing-md) var(--bm-spacing-lg);
    font-size: var(--bm-font-size-sm);
    color: var(--bm-color-grey);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .spokar-payment-label {
        padding: var(--bm-spacing-lg) var(--bm-spacing-xl);
    }
    .payment_box {
        padding: 0 var(--bm-spacing-xl) var(--bm-spacing-lg);
    }
}

/* ============================================================================
   ORDER RECAP (#recap-items, #recap-shipping, #recap-payment)
   ========================================================================== */
.spokar-checkout-recap {
    margin-bottom: var(--bm-spacing-3xl);
}

.spokar-recap-intro {
    font-size: var(--bm-font-size-base);
    color: var(--bm-color-grey);
    margin: 0 0 var(--bm-spacing-xl);
    line-height: 1.5;
}

.spokar-recap-section {
    padding: var(--bm-spacing-md) 0;
    border-bottom: 1px solid var(--bm-color-border);
}

.spokar-recap-section:last-child {
    border-bottom: none;
}

.spokar-recap-title {
    font-family: var(--bm-font-primary);
    font-size: var(--bm-font-size-sm);
    font-weight: var(--bm-font-weight-normal);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bm-color-grey);
    margin: 0 0 var(--bm-spacing-sm);
}

.spokar-recap-content {
    font-size: var(--bm-font-size-md);
    color: var(--bm-color-text);
    line-height: 1.5;
}

.spokar-recap-line {
    padding: 2px 0;
}

/* ============================================================================
   ORDER SUMMARY (sidebar)
   ========================================================================== */
.spokar-order-summary {
    background: var(--white);
    padding: var(--bm-spacing-2xl) var(--bm-spacing-xl);
    border: 1px solid var(--bm-color-border);
    border-radius: var(--bm-radius);
}

/* "Přehled objednávky" heading — sidebar panel heading (no numbered badge), so
   it keeps the larger lg / 700 / tracking-wide. It is intentionally NOT shrunk
   to the .spokar-section-title 0.82rem: that size is reserved for the numbered
   checkout steps that mirror the PDP .group-label (see .spokar-section-title). */
.spokar-order-summary h2 {
    font-family: var(--bm-font-primary);
    font-size: var(--bm-font-size-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 0 0 var(--bm-spacing-xl) 0;
    color: var(--slate);
}

.spokar-order-items {
    margin-bottom: var(--bm-spacing-xl);
}

/* Order-summary line items replicate the cart-drawer mini-cart item look
   (cart-drawer.css .spokar-minicart-item): 80×120 portrait thumbnail, compact
   inline variations with swatches, bold price. The recap is read-only, so it
   shows a static "× N" quantity instead of the drawer's stepper / remove link. */
.spokar-order-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--bm-spacing-md);
    padding: 20px 0;
    border-bottom: 1px solid var(--grey-200);
}

.spokar-order-item:last-child {
    border-bottom: none;
}

.spokar-order-item__image {
    width: 80px;
    height: 120px;
    overflow: hidden;
}

.spokar-order-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.spokar-order-item__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.spokar-order-item__name {
    font-family: var(--bm-font-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--slate);
}

.spokar-order-item__variations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-family: var(--bm-font-primary);
    font-size: 0.8125rem;
    color: var(--grey-600);
}

/* Price row reads as a receipt line: unit price × qty on the left (muted),
   the line subtotal emphasised and pushed to the right edge. */
.spokar-order-item__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--bm-font-primary);
    font-size: 0.9375rem;
    color: var(--slate);
}

.spokar-order-item__price del {
    color: var(--grey-500);
    font-weight: 400;
    margin-right: 6px;
}

/* Unit price + quantity describe the calculation — muted next to the bold total.
   The qty is a static count (the read-only recap has no stepper / remove link). */
.spokar-order-item__unit,
.spokar-order-item__qty {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--grey-600);
    white-space: nowrap;
}

.spokar-order-item__subtotal {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}

.spokar-variation-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.spokar-variation-label {
    font-weight: 500;
    text-transform: lowercase;
}

.spokar-variation-value {
    color: var(--bm-color-dark-grey);
}

/* Colour line gets the same circle / silhouette swatch as the PDP picker and the
   cart drawer (markup via spokar_micro_color_swatch_html), sized to match the
   drawer swatches. Base swatch styles live in sections.css. */
.spokar-variation-line--color {
    gap: 6px;
}

.spokar-variation-line--color .pill__lead {
    display: inline-flex;
    align-items: center;
}

.spokar-variation-line--color .pill__swatch--circle {
    width: 1.05rem;
    height: 1.05rem;
}

.spokar-variation-line--color .pill__swatch--silhouette {
    width: 0.8rem;
    height: 1.6rem;
}

.spokar-variation-line--color .pill__lead--multi .pill__swatch--circle + .pill__swatch--circle {
    margin-left: -0.35rem;
}

.spokar-variation-line--color .pill__lead--multi .pill__swatch--silhouette + .pill__swatch--silhouette {
    margin-left: 0.1rem;
}

/* Mobile: shrink the thumbnail box like the drawer (cart-drawer.css:380-393). */
@media (max-width: 480px) {
    .spokar-order-item {
        grid-template-columns: 64px 1fr;
    }

    .spokar-order-item__image {
        width: 64px;
        height: 96px;
    }
}

.spokar-order-totals {
    border-top: 1px solid var(--bm-color-border);
    padding-top: var(--bm-spacing-md);
}

.spokar-order-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: var(--bm-font-size-md);
    color: var(--bm-color-text);
}

.spokar-order-total-row--final {
    border-top: 1px solid var(--bm-color-border);
    margin-top: 8px;
    padding-top: 14px;
    font-size: var(--bm-font-size-xl);
    font-weight: 600;
    color: var(--slate);
}

/* USP strip inside sidebar */
.spokar-checkout-usp {
    list-style: none;
    margin: var(--bm-spacing-xl) 0 0;
    padding: var(--bm-spacing-xl) 0 0;
    border-top: 1px solid var(--bm-color-border);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bm-spacing-md);
}

.spokar-checkout-usp li {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--bm-spacing-sm);
    font-size: var(--bm-font-size-sm);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--bm-color-grey);
}

.spokar-checkout-usp svg {
    flex-shrink: 0;
}

/* ============================================================================
   MODAL (Forgot Password)
   ========================================================================== */
/* The `display: flex` rule on .spokar-modal would otherwise override [hidden]. */
.spokar-modal[hidden] {
    display: none !important;
}

.spokar-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.spokar-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.spokar-modal-content {
    position: relative;
    background: var(--white);
    max-width: 500px;
    width: 100%;
    padding: var(--bm-spacing-3xl) var(--bm-spacing-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border-radius: var(--bm-radius);
    z-index: 1;
}

.spokar-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--bm-color-light-grey);
    padding: 0;
    width: 30px;
    height: 30px;
}

.spokar-modal-close:hover {
    color: var(--bm-color-dark-grey);
}

.spokar-modal-title {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 15px;
    text-align: center;
}

.spokar-modal-description {
    text-align: center;
    color: var(--bm-color-grey);
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================================================
   EMPTY CART
   ========================================================================== */
.spokar-checkout-empty {
    text-align: center;
    padding: 60px 20px;
}

.spokar-checkout-empty__icon {
    margin: 0 auto 20px;
    color: var(--bm-color-light-grey);
}

.spokar-checkout-empty h2 {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 15px;
}

.spokar-checkout-empty p {
    color: var(--bm-color-grey);
    margin-bottom: 30px;
}

/* ============================================================================
   PENDING ORDER NOTICE
   ========================================================================== */
.spokar-pending-order {
    margin: var(--bm-spacing-2xl) auto;
    max-width: 720px;
}

.spokar-pending-order__card {
    background: var(--bm-color-amber-light);
    border: 1px solid var(--bm-color-amber);
    border-radius: var(--bm-radius);
    padding: var(--bm-spacing-2xl);
    text-align: center;
}

.spokar-pending-order__icon {
    color: var(--bm-color-amber);
    margin-bottom: var(--bm-spacing-md);
}

.spokar-pending-order__title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 var(--bm-spacing-sm);
    color: var(--bm-color-dark-grey);
}

.spokar-pending-order__lede {
    color: var(--bm-color-grey);
    margin: 0 0 var(--bm-spacing-xl);
    line-height: 1.5;
}

.spokar-pending-order__items {
    background: var(--white);
    border-radius: var(--bm-radius);
    padding: var(--bm-spacing-md) var(--bm-spacing-lg);
    margin-bottom: var(--bm-spacing-xl);
    text-align: left;
}

.spokar-pending-order__items-label {
    font-size: var(--bm-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bm-color-grey);
    margin: 0 0 var(--bm-spacing-sm);
}

.spokar-pending-order__item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--bm-font-size-md);
}

.spokar-pending-order__item--total {
    border-top: 1px solid var(--bm-color-border);
    margin-top: 8px;
    padding-top: 14px;
    font-weight: 600;
}

.spokar-pending-order__actions {
    display: flex;
    flex-direction: column;
    gap: var(--bm-spacing-md);
}

@media (min-width: 600px) {
    .spokar-pending-order__actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* ============================================================================
   THANK-YOU PAGE
   ========================================================================== */
.spokar-thankyou-page {
    background: var(--bm-color-off-white);
}

.spokar-thankyou-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--bm-spacing-4xl) var(--bm-spacing-md) var(--bm-spacing-5xl);
}

.spokar-thankyou-head {
    text-align: center;
    margin-bottom: var(--bm-spacing-2xl);
}

.spokar-thankyou-mark {
    color: var(--bm-color-green);
    margin-bottom: var(--bm-spacing-md);
}

.spokar-thankyou-title {
    font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
    font-weight: 600;
    margin: 0 0 var(--bm-spacing-sm);
    color: var(--slate);
}

.spokar-thankyou-lede {
    color: var(--bm-color-grey);
    font-size: var(--bm-font-size-lg);
    margin: 0;
}

.spokar-thankyou-card {
    background: var(--white);
    border-radius: var(--bm-radius);
    box-shadow: var(--shadow-1);
    padding: var(--bm-spacing-xl);
    margin-bottom: var(--bm-spacing-xl);
}

.spokar-thankyou-block {
    padding: var(--bm-spacing-md) 0;
    border-bottom: 1px solid var(--bm-color-border);
}

.spokar-thankyou-block:last-child {
    border-bottom: none;
}

.spokar-thankyou-block-title {
    font-family: var(--bm-font-primary);
    font-size: var(--bm-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 var(--bm-spacing-md);
    color: var(--bm-color-grey);
}

.spokar-thankyou-line {
    display: flex;
    gap: var(--bm-spacing-md);
    padding: var(--bm-spacing-sm) 0;
    align-items: center;
}

.spokar-thankyou-line__image {
    width: 60px;
    flex-shrink: 0;
}

.spokar-thankyou-line__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--bm-radius);
}

.spokar-thankyou-line__body {
    flex: 1;
    min-width: 0;
}

.spokar-thankyou-line__name {
    font-weight: 600;
    color: var(--slate);
    margin-bottom: 2px;
}

.spokar-thankyou-line__meta {
    font-size: var(--bm-font-size-sm);
    color: var(--bm-color-grey);
}

.spokar-thankyou-line__price {
    font-weight: 600;
    color: var(--slate);
    white-space: nowrap;
}

.spokar-thankyou-totals {
    margin-top: var(--bm-spacing-md);
}

.spokar-thankyou-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--bm-font-size-md);
}

.spokar-thankyou-total-row--final {
    border-top: 1px solid var(--bm-color-border);
    margin-top: 8px;
    padding-top: 12px;
    font-size: var(--bm-font-size-xl);
    font-weight: 600;
}

.spokar-thankyou-address__method {
    font-weight: 600;
    color: var(--slate);
    margin-bottom: 4px;
}

.spokar-thankyou-payment-cta {
    margin-top: var(--bm-spacing-md);
}

.spokar-thankyou-next {
    background: var(--white);
    border-radius: var(--bm-radius);
    box-shadow: var(--shadow-1);
    padding: var(--bm-spacing-xl);
    margin-bottom: var(--bm-spacing-xl);
}

.spokar-thankyou-next ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spokar-thankyou-next li {
    padding: 8px 0;
    color: var(--bm-color-text);
    border-bottom: 1px solid var(--bm-color-border);
}

.spokar-thankyou-next li:last-child {
    border-bottom: none;
}

.spokar-thankyou-actions {
    display: flex;
    flex-direction: column;
    gap: var(--bm-spacing-md);
    margin-bottom: var(--bm-spacing-2xl);
}

@media (min-width: 600px) {
    .spokar-thankyou-actions {
        flex-direction: row;
        justify-content: center;
    }
}

.spokar-thankyou-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--bm-spacing-lg);
    justify-content: center;
    color: var(--bm-color-grey);
    font-size: var(--bm-font-size-sm);
}

.spokar-thankyou-trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--bm-spacing-sm);
}

/* ============================================================================
   DESKTOP LAYOUT (2 columns)
   ========================================================================== */
@media (min-width: 992px) {
    .spokar-checkout-container {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 40px;
        align-items: start;
    }

    .spokar-checkout-sidebar {
        position: sticky;
        top: 20px;
    }

    .spokar-checkout-section {
        padding: 40px 30px;
    }
}

@media (min-width: 1200px) {
    .spokar-checkout-container {
        grid-template-columns: 1fr 450px;
        gap: 60px;
    }
}

@media (min-width: 768px) {
    .spokar-checkout-page {
        padding: clamp(6rem, 14vh, 9rem) 15px 60px;
    }

    .spokar-checkout-section {
        padding: 30px 20px;
    }

    .spokar-checkout-title {
        font-size: 28px;
    }

    .spokar-modal-content {
        padding: 40px 30px;
    }
}

/* ============================================================================
   MOBILE ORDER SUMMARY
   ========================================================================== */
.spokar-mobile-order-summary {
    display: block;
    border-bottom: 1px solid var(--bm-color-border);
    margin-bottom: 30px;
}

.spokar-toggle-summary {
    width: 100%;
    padding: var(--bm-spacing-xl) 0;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--bm-font-primary);
    font-size: var(--bm-font-size-md);
    font-weight: var(--bm-font-weight-normal);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bm-color-dark-grey);
    transition: color 0.2s ease;
}

.spokar-toggle-summary:hover {
    color: var(--bm-color-primary);
}

.spokar-mobile-summary-title {
    flex: 1;
    text-align: left;
}

.spokar-mobile-summary-total {
    margin: 0 var(--bm-spacing-md);
    font-family: var(--bm-font-primary);
    font-size: var(--bm-font-size-xl);
    font-weight: var(--bm-font-weight-normal);
    letter-spacing: 0;
    text-transform: none;
    color: var(--bm-color-gold);
}

.spokar-chevron-icon {
    transition: transform 0.3s ease;
    color: var(--bm-color-grey);
}

.spokar-mobile-summary-content {
    padding: 0 0 var(--bm-spacing-xl);
}

@media (min-width: 992px) {
    .spokar-mobile-order-summary {
        display: none;
    }
}

/* ============================================================================
   ACCORDION SECTIONS — bordered cards with 01/02/03 indexes
   ========================================================================== */
.spokar-accordion-section {
    display: block !important;
    background: var(--white);
    border: 1px solid var(--bm-color-border);
    margin-bottom: var(--bm-spacing-xl);
    padding: var(--bm-spacing-xl);
    transition: border-color 0.2s ease;
    border-radius: var(--bm-radius);
}

/* Active step: a slim olive accent down the left edge (inset shadow → no layout
   shift) plus a soft lift, echoing the cart-drawer's olive accent strip instead
   of ringing the whole card in yellow. */
.spokar-accordion-section.active {
    border-color: var(--grey-300);
    box-shadow: inset 3px 0 0 var(--olive), var(--shadow-1);
}

/* Badge ↔ title row — mirrors the PDP .group-label (sections.css): same tight
   0.6rem gap between the numbered badge and its label. Stays flex-start (not
   center like the PDP) because the collapsed state renders a multi-line summary
   below the title; the title's line-height (see .spokar-section-title) is what
   vertically centres it against the badge in both states. */
.spokar-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

/* Slate numbered badge — mirrors the PDP shop step badge (.group-step in
   sections.css) so the checkout steps and the variant-picker steps read as
   the same system. */
.spokar-section-index {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    background: var(--slate);
    color: var(--white);
    font-family: var(--bm-font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
    transition: background 0.2s ease;
}

.spokar-section-header-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

/* Step title — mirrors the PDP variant-picker .group-label-text (sections.css):
   the numbered checkout steps ("01 Přihlášení") share the same 0.82rem / 700 /
   uppercase / tracking-wide as the PDP option steps ("01 Tvrdost") so the two
   numbered-step systems read identically. The badge already matches via
   .spokar-section-index ↔ .group-step above. */
.spokar-section-header h3,
.spokar-section-title {
    font-family: var(--bm-font-primary);
    font-size: 0.82rem;
    /* line-height = badge height (1.85rem): with the header on flex-start, the
       title's line box matches the badge box, so the label centres against the
       numbered badge (like the PDP center layout) while any collapsed-state
       summary still flows directly beneath the title. */
    line-height: 1.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--slate);
    text-align: left;
    margin: 0;
    transition: color 0.2s ease;
}

.spokar-section-summary {
    display: none;
    margin-top: var(--bm-spacing-sm);
    font-size: var(--bm-font-size-md);
    font-weight: var(--bm-font-weight-normal);
    color: var(--bm-color-grey);
    line-height: 1.5;
    text-transform: none;
}

.spokar-section-summary .email-summary,
.spokar-section-summary .shipping-summary,
.spokar-section-summary .billing-summary,
.spokar-section-summary .payment-summary {
    display: block;
    line-height: 1.6;
    color: var(--bm-color-dark-grey);
    text-transform: none;
}

.spokar-section-content {
    display: none;
    margin-top: var(--bm-spacing-xl);
}

.spokar-btn-edit-section {
    display: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--bm-font-primary);
    font-size: var(--bm-font-size-base);
    font-weight: var(--bm-font-weight-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bm-color-grey);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
    align-self: flex-start;
}

.spokar-btn-edit-section:hover {
    color: var(--bm-color-primary);
}

.spokar-section-header:has(.spokar-btn-edit-section:not([style*="display: none"])) {
    cursor: pointer;
}

.spokar-section-header:has(.spokar-btn-edit-section:not([style*="display: none"])):hover .spokar-section-title {
    color: var(--bm-color-primary);
}

.spokar-section-header:has(.spokar-btn-edit-section:not([style*="display: none"])):hover .spokar-section-index {
    background: var(--slate-soft);
}

/* ============================================================================
   SECTION NAVIGATION BUTTONS
   ========================================================================== */
/* [hidden] must beat the display:flex below (same shim as .spokar-modal[hidden]),
   otherwise the account step's #email-section-nav ("Pokračovat na výběr dopravy")
   shows alongside #btn-continue-checkout before the e-mail is confirmed. */
.spokar-section-nav[hidden] {
    display: none !important;
}

.spokar-section-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--bm-color-border);
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 15px;
    margin: 30px -15px -20px;
    z-index: 100;
}

.spokar-section-nav .spokar-btn {
    flex: 1;
    min-width: 0;
}

.spokar-section-nav .btn-prev-section {
    max-width: none;
    order: 2;
}

@media (min-width: 768px) {
    .spokar-section-nav {
        flex-direction: row;
        gap: 15px;
        position: static;
        padding: 30px 0 0;
        margin: 30px 0 0;
    }
    .spokar-section-nav .btn-prev-section {
        max-width: 200px;
        order: 0;
    }
    .spokar-section-nav .btn-next-section,
    .spokar-section-nav button[type="submit"] {
        order: 0;
    }
}

/* ============================================================================
   SHIPPING ADDRESS SECTION (conditional)
   ========================================================================== */
.spokar-shipping-address-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid var(--bm-color-border);
}

/* ============================================================================
   FINAL SUMMARY SECTION
   ========================================================================== */
.spokar-checkout-final-summary {
    background: var(--bm-color-off-white);
    padding: var(--bm-spacing-xl);
    margin-bottom: var(--bm-spacing-xl);
    border-radius: var(--bm-radius);
}

.spokar-final-instructions {
    margin: 0;
    color: var(--bm-color-grey);
    font-size: 14px;
}

/* ============================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.spokar-toast-notice {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    bottom: 24px;
    background: var(--slate);
    color: var(--white);
    padding: 12px 20px;
    border-radius: var(--bm-radius);
    font-size: var(--bm-font-size-sm);
    box-shadow: var(--shadow-2);
    z-index: 10000;
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out-quint),
                transform var(--t-base) var(--ease-out-quint);
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}

.spokar-toast-notice.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.spokar-toast-notice.spokar-notice-error {
    background: var(--bm-color-red);
}

/* ============================================================================
   NOTICES (small WC notice replacement)
   ========================================================================== */
.spokar-notice {
    padding: var(--bm-spacing-md) var(--bm-spacing-lg);
    border-radius: var(--bm-radius);
    background: var(--bm-color-off-white);
    border: 1px solid var(--bm-color-border);
    color: var(--bm-color-grey);
    font-size: var(--bm-font-size-md);
    margin-bottom: var(--bm-spacing-md);
}

.spokar-notice-info {
    background: var(--bm-color-delft-blue-light);
    border-color: var(--bm-color-delft-blue);
    color: var(--bm-color-delft-blue);
}

/* ============================================================================
   WOOCOMMERCE NATIVE NOTICES — brand-aligned
   WC prints these unstyled via woocommerce_output_all_notices (add-to-cart
   message, validation errors). Align them with the spokar panel / notice
   language so they stop reading as stock WooCommerce.
   (The coupon toggle/form on woocommerce_before_checkout_form is detached in
   inc/woocommerce-checkout.php — no coupon styles needed here.)
   ========================================================================== */
.woocommerce-notices-wrapper:empty {
    display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    list-style: none;
    margin: 0 0 var(--bm-spacing-lg);
    padding: var(--bm-spacing-md) var(--bm-spacing-lg);
    border: 1px solid var(--bm-color-border);
    border-radius: var(--bm-radius);
    font-size: var(--bm-font-size-md);
    line-height: 1.5;
    color: var(--slate);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bm-spacing-sm) var(--bm-spacing-md);
}

/* success (product added to cart) → brand olive */
.woocommerce-message {
    background: var(--olive-soft);
    border-color: var(--olive);
}

/* info → neutral off-white */
.woocommerce-info {
    background: var(--bm-color-off-white);
    border-color: var(--bm-color-border);
    color: var(--bm-color-grey);
}

/* error (validation) → red */
.woocommerce-error {
    background: var(--bm-color-red-light);
    border-color: var(--bm-color-red);
    color: var(--bm-color-dark-grey);
}

.woocommerce-error li {
    width: 100%;
    margin: 0;
    padding: 2px 0;
}

/* WC focuses the message box (tabindex=-1) for screen-reader announce on load;
   suppress the browser focus ring — the olive panel already carries the cue. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
    outline: none;
}

/* the stock WC "button" inside a notice (e.g. "View cart" after add-to-cart)
   → spokar secondary look */
.woocommerce-message .button.wc-forward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.1rem;
    font-family: var(--bm-font);
    font-size: var(--bm-font-size-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--slate);
    background: var(--white);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--grey-300);
    border-radius: var(--bm-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease-out-quint);
    margin-left: auto;
}

.woocommerce-message .button.wc-forward:hover {
    background: var(--grey-100);
    color: var(--slate);
}