/**
 * COD Express Checkout - Frontend Styles
 *
 * Styles for the express checkout form on product pages.
 *
 * @package COD_Express_Checkout
 */

/* ==========================================================================
   Form Container - Base styles (Auto/Inherit from Theme)
   ========================================================================== */

.cod-express-checkout-form {
    margin: 20px 0;
    padding: 20px;
    /* Auto mode: transparent/inherit from theme */
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 8px;
    box-sizing: border-box;
    /* Inherit text color from theme */
    color: inherit;
}

.cod-express-checkout-form * {
    box-sizing: border-box;
}

/* Header */
.cod-express-header {
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 4px solid currentColor;
}

.cod-express-header h3 {
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    color: inherit;
    line-height: 1.3;
}

.cod-express-header .cod-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #4caf50;
    color: #fff;
    border-radius: 3px;
}

/* ==========================================================================
   Form Fields
   ========================================================================== */

.cod-express-fields {
    margin-bottom: 15px;
}

.cod-express-field {
    margin-bottom: 15px;
}

.cod-express-field:last-child {
    margin-bottom: 0;
}

/* Labels - inherit from theme */
.cod-express-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
}

.cod-express-field label .required {
    color: #e74c3c;
    margin-left: 3px;
}

/* Input Fields - inherit from theme */
.cod-express-field input[type="text"],
.cod-express-field input[type="email"],
.cod-express-field input[type="tel"],
.cod-express-field textarea,
.cod-express-field select {
    width: 100%;
    padding: 12px 15px;
    font-size: 15px;
    line-height: 1.4;
    color: inherit;
    background: inherit;
    border: 1px solid currentColor;
    border-radius: 5px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.cod-express-field input[type="text"]:focus,
.cod-express-field input[type="email"]:focus,
.cod-express-field input[type="tel"]:focus,
.cod-express-field textarea:focus,
.cod-express-field select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.cod-express-field textarea {
    min-height: 80px;
    resize: vertical;
}

/* Placeholder styles */
.cod-express-field input::placeholder,
.cod-express-field textarea::placeholder {
    color: inherit;
    opacity: 0.6;
}

/* ==========================================================================
   Quantity Stepper  (− value +)
   ========================================================================== */

.cod-express-field-quantity label {
    display: block;
    margin-bottom: 8px;
}

/* Stepper row */
.cod-express-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    height: 44px;
    background: transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cod-express-qty-stepper:focus-within {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

/* − and + buttons */
.cod-express-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s ease;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    -webkit-user-select: none;
}

.cod-express-qty-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.cod-express-qty-btn:active {
    background: rgba(0, 0, 0, 0.1);
}

/* Dividers between btn | input | btn */
.cod-express-qty-minus {
    border-right: 1.5px solid #d1d5db;
}
.cod-express-qty-plus {
    border-left: 1.5px solid #d1d5db;
}

/* Number display */
.cod-express-input-quantity {
    width: 56px;
    min-width: 56px;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    color: inherit;
    padding: 0 4px;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
    cursor: default;
}

/* Hide native browser spinner arrows */
.cod-express-input-quantity::-webkit-inner-spin-button,
.cod-express-input-quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Disabled state */
.cod-express-qty-btn:disabled,
.cod-express-qty-btn[data-disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.cod-express-qty-btn:disabled:hover,
.cod-express-qty-btn[data-disabled]:hover {
    background: transparent;
}

/* ==========================================================================
   Theme overrides for stepper borders / colors
   ========================================================================== */

/* Dark themes — lighter border */
[class*="cod-express-scheme-dark"] .cod-express-qty-stepper,
[class*="cod-express-scheme-obsidian"] .cod-express-qty-stepper,
[class*="cod-express-scheme-space"] .cod-express-qty-stepper,
[class*="cod-express-scheme-crypto"] .cod-express-qty-stepper,
[class*="cod-express-scheme-luxury"] .cod-express-qty-stepper,
[class*="cod-express-scheme-terminal"] .cod-express-qty-stepper,
[class*="cod-express-scheme-midnight"] .cod-express-qty-stepper,
[class*="cod-express-scheme-neon"] .cod-express-qty-stepper,
[class*="cod-express-scheme-synthwave"] .cod-express-qty-stepper,
[class*="cod-express-scheme-ruby"] .cod-express-qty-stepper,
[class*="cod-express-scheme-cyberpunk"] .cod-express-qty-stepper,
[class*="cod-express-scheme-slatepro"] .cod-express-qty-stepper {
    border-color: rgba(255, 255, 255, 0.18);
}

[class*="cod-express-scheme-dark"] .cod-express-qty-minus,
[class*="cod-express-scheme-dark"] .cod-express-qty-plus,
[class*="cod-express-scheme-obsidian"] .cod-express-qty-minus,
[class*="cod-express-scheme-obsidian"] .cod-express-qty-plus,
[class*="cod-express-scheme-space"] .cod-express-qty-minus,
[class*="cod-express-scheme-space"] .cod-express-qty-plus,
[class*="cod-express-scheme-crypto"] .cod-express-qty-minus,
[class*="cod-express-scheme-crypto"] .cod-express-qty-plus,
[class*="cod-express-scheme-luxury"] .cod-express-qty-minus,
[class*="cod-express-scheme-luxury"] .cod-express-qty-plus,
[class*="cod-express-scheme-terminal"] .cod-express-qty-minus,
[class*="cod-express-scheme-terminal"] .cod-express-qty-plus,
[class*="cod-express-scheme-midnight"] .cod-express-qty-minus,
[class*="cod-express-scheme-midnight"] .cod-express-qty-plus,
[class*="cod-express-scheme-neon"] .cod-express-qty-minus,
[class*="cod-express-scheme-neon"] .cod-express-qty-plus,
[class*="cod-express-scheme-synthwave"] .cod-express-qty-minus,
[class*="cod-express-scheme-synthwave"] .cod-express-qty-plus,
[class*="cod-express-scheme-ruby"] .cod-express-qty-minus,
[class*="cod-express-scheme-ruby"] .cod-express-qty-plus,
[class*="cod-express-scheme-cyberpunk"] .cod-express-qty-minus,
[class*="cod-express-scheme-cyberpunk"] .cod-express-qty-plus,
[class*="cod-express-scheme-slatepro"] .cod-express-qty-minus,
[class*="cod-express-scheme-slatepro"] .cod-express-qty-plus {
    border-color: rgba(255, 255, 255, 0.18);
}

[class*="cod-express-scheme-dark"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-obsidian"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-space"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-crypto"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-luxury"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-terminal"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-midnight"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-neon"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-synthwave"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-ruby"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-cyberpunk"] .cod-express-qty-btn:hover,
[class*="cod-express-scheme-slatepro"] .cod-express-qty-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Brutal themes — squared + thick border matching scheme */
[class*="cod-express-scheme-brutal"] .cod-express-qty-stepper {
    border-radius: 0;
    border-width: 2px;
    border-color: currentColor;
}
[class*="cod-express-scheme-brutal"] .cod-express-qty-minus,
[class*="cod-express-scheme-brutal"] .cod-express-qty-plus {
    border-color: currentColor;
    border-width: 2px;
}


/* Security notice */
.cod-express-security-notice {
    color: inherit;
    opacity: 0.8;
}

/* ==========================================================================
   Field Validation States
   ========================================================================== */

/* Error State */
.cod-express-field.has-error input,
.cod-express-field.has-error textarea,
.cod-express-field.has-error select {
    border-color: #e74c3c;
    background-color: rgba(231, 76, 60, 0.05);
}

.cod-express-field.has-error input:focus,
.cod-express-field.has-error textarea:focus,
.cod-express-field.has-error select:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.cod-express-field-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #e74c3c;
    line-height: 1.4;
}

.cod-express-field-error:empty {
    display: none;
}

/* Success State */
.cod-express-field.has-success input,
.cod-express-field.has-success textarea,
.cod-express-field.has-success select {
    border-color: #28a745;
}

.cod-express-field.has-success input:focus,
.cod-express-field.has-success textarea:focus,
.cod-express-field.has-success select:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* ==========================================================================
   Honeypot Field (Spam Protection)
   ========================================================================== */

.cod-express-hp-wrapper,
.cod-express-hp-field {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Screen Reader Text (Accessibility)
   ========================================================================== */

.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.cod-express-submit-btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
    /* Theme-inherit defaults */
    color: inherit;
    background-color: transparent;
    border: 2px solid currentColor;
}

/* Default fallback styling when no custom color is set */
.cod-express-submit-btn:not([style*="background"]) {
    /* Let the button use the CSS variable or fallback to WooCommerce/theme */
    background-color: var(--btn-bg, var(--wc-primary, var(--primary-color, #0073aa)));
    border-color: var(--btn-bg, var(--wc-primary, var(--primary-color, #0073aa)));
    color: var(--btn-text, #fff);
}

.cod-express-submit-btn:hover {
    transform: translateY(-1px);
    filter: brightness(90%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cod-express-submit-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.cod-express-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Loading State */
.cod-express-submit-btn.loading {
    position: relative;
    color: #fff;
}

.cod-express-submit-btn .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cod-express-spin 0.8s linear infinite;
    vertical-align: middle;
}

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

/* ==========================================================================
   Messages
   ========================================================================== */

.cod-express-message {
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.5;
}

.cod-express-message.hidden {
    display: none;
}

.cod-express-message.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.cod-express-message.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.cod-express-message p {
    margin: 0;
}

/* ==========================================================================
   Order Success State
   ========================================================================== */

.cod-express-order-success {
    text-align: center;
    padding: 20px;
}

.cod-express-order-success .order-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    font-size: 30px;
    color: #fff;
    background: #4caf50;
    border-radius: 50%;
}

.cod-express-order-success h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: inherit;
}

.cod-express-order-success .order-number {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: inherit;
    opacity: 0.8;
}

.cod-express-order-success .view-order-btn {
    display: inline-block;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #0073aa;
    background: #fff;
    border: 2px solid #0073aa;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.cod-express-order-success .view-order-btn:hover {
    color: #fff;
    background: #0073aa;
}

/* ==========================================================================
   Form Submitting State
   ========================================================================== */

.cod-express-checkout-form.submitting .cod-express-fields {
    opacity: 0.6;
    pointer-events: none;
}

/* ==========================================================================
   Large Screen Optimization
   ========================================================================== */

/* Limit form width on larger screens for better readability */
@media (min-width: 768px) {
    .cod-express-checkout-form {
        max-width: 450px;
    }
}

/* ==========================================================================
   Two-Column Layout (for larger screens)
   ========================================================================== */

@media (min-width: 600px) {
    .cod-express-fields-row {
        display: flex;
        gap: 15px;
    }

    .cod-express-fields-row .cod-express-field {
        flex: 1;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
    .cod-express-checkout-form {
        padding: 15px;
        margin: 15px 0;
    }

    .cod-express-header h3 {
        font-size: 16px;
    }

    .cod-express-field input[type="text"],
    .cod-express-field input[type="email"],
    .cod-express-field input[type="tel"],
    .cod-express-field textarea,
    .cod-express-field select {
        padding: 10px 12px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .cod-express-submit-btn {
        padding: 14px 18px;
        font-size: 15px;
    }
}

/* ==========================================================================
   Theme Compatibility
   ========================================================================== */

/* Reset common theme overrides */
.cod-express-checkout-form input,
.cod-express-checkout-form textarea,
.cod-express-checkout-form select,
.cod-express-checkout-form button {
    font-family: inherit;
    margin: 0;
}

/* Ensure form displays properly in flex containers */
.cod-express-checkout-form {
    flex-shrink: 0;
}

/* Fix for themes that style all buttons */
.cod-express-checkout-form .cod-express-submit-btn {
    background-image: none;
    text-shadow: none;
    box-sizing: border-box;
}

/* ==========================================================================
   Color Schemes — 40 Premium Themes
   Applied via .cod-express-scheme-{name} on the form element.
   CSS variable architecture: override --cod-* and --btn-* per scheme.
   ========================================================================== */

/* Shared CSS variable defaults (auto/inherit mode) */
.cod-express-checkout-form {
    --cod-bg:           transparent;
    --cod-text:         inherit;
    --cod-border-color: currentColor;
    --cod-input-bg:     inherit;
    --cod-input-border: 1px solid currentColor;
    --cod-input-text:   inherit;
    --cod-shadow:       none;
    --cod-theme-primary:         var(--wc-primary, var(--primary-color, #0073aa));
    --cod-theme-text-on-primary: #fff;
    --btn-bg:   var(--cod-custom-btn-bg, var(--cod-theme-primary));
    --btn-text: var(--cod-custom-btn-text, var(--cod-theme-text-on-primary));
}

/* Apply variables to elements */
.cod-express-scheme-light,
.cod-express-scheme-dark,
.cod-express-scheme-ocean,
.cod-express-scheme-emerald,
.cod-express-scheme-brutal,
.cod-express-scheme-brutal-blue,
.cod-express-scheme-brutal-pink,
.cod-express-scheme-brutal-mint,
.cod-express-scheme-brutal-orange,
.cod-express-scheme-brutal-dark,
.cod-express-scheme-brutal-white,
.cod-express-scheme-sakura,
.cod-express-scheme-space,
.cod-express-scheme-sand,
.cod-express-scheme-neon,
.cod-express-scheme-crimson,
.cod-express-scheme-chrome,
.cod-express-scheme-peach,
.cod-express-scheme-aurora,
.cod-express-scheme-synthwave,
.cod-express-scheme-obsidian,
.cod-express-scheme-ghost,
.cod-express-scheme-terracotta,
.cod-express-scheme-lavender,
.cod-express-scheme-rosegold,
.cod-express-scheme-fintech,
.cod-express-scheme-crypto,
.cod-express-scheme-luxury,
.cod-express-scheme-terminal,
.cod-express-scheme-coral,
.cod-express-scheme-mustard,
.cod-express-scheme-slatepro,
.cod-express-scheme-bubblegum,
.cod-express-scheme-vintage,
.cod-express-scheme-toxic,
.cod-express-scheme-midnight-glass,
.cod-express-scheme-ruby,
.cod-express-scheme-matcha,
.cod-express-scheme-lavender-glass,
.cod-express-scheme-cyberpunk,
.cod-express-scheme-frost,
.cod-express-scheme-sunset-glass {
    background: var(--cod-bg);
    color: var(--cod-text);
    border-color: var(--cod-border-color);
    box-shadow: var(--cod-shadow);
    backdrop-filter: var(--cod-backdrop, none);
    -webkit-backdrop-filter: var(--cod-backdrop, none);
}

[class*="cod-express-scheme-"] .cod-express-header {
    border-left-color: var(--btn-bg);
}
[class*="cod-express-scheme-"] .cod-badge {
    background: var(--btn-bg);
    color: var(--btn-text);
}
[class*="cod-express-scheme-"] .cod-express-field label {
    color: var(--cod-text);
}
[class*="cod-express-scheme-"] .cod-express-field input[type="text"],
[class*="cod-express-scheme-"] .cod-express-field input[type="email"],
[class*="cod-express-scheme-"] .cod-express-field input[type="tel"],
[class*="cod-express-scheme-"] .cod-express-field textarea,
[class*="cod-express-scheme-"] .cod-express-field select {
    background: var(--cod-input-bg);
    border: var(--cod-input-border);
    color: var(--cod-input-text);
}
[class*="cod-express-scheme-"] .cod-express-field input[type="text"]:focus,
[class*="cod-express-scheme-"] .cod-express-field input[type="email"]:focus,
[class*="cod-express-scheme-"] .cod-express-field input[type="tel"]:focus,
[class*="cod-express-scheme-"] .cod-express-field textarea:focus,
[class*="cod-express-scheme-"] .cod-express-field select:focus {
    border-color: var(--btn-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-bg) 20%, transparent);
    outline: none;
}
[class*="cod-express-scheme-"] .cod-express-field input::placeholder,
[class*="cod-express-scheme-"] .cod-express-field textarea::placeholder {
    color: var(--cod-input-text);
    opacity: 0.5;
}
[class*="cod-express-scheme-"] .cod-express-submit-btn {
    background: var(--btn-bg);
    color: var(--btn-text);
    border-color: var(--btn-bg);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-bg) 35%, transparent);
}
[class*="cod-express-scheme-"] .cod-express-security-notice {
    color: var(--cod-text);
    opacity: 0.7;
}

/* ── 1. Classic Light ──────────────────────────────────────── */
.cod-express-scheme-light {
    --cod-theme-primary: #0f172a; --cod-theme-text-on-primary: #fff;
    --cod-bg: #fff; --cod-border-color: #e2e8f0; --cod-text: #0f172a;
    --cod-shadow: 0 10px 15px -3px rgba(0,0,0,.05);
    --cod-input-bg: #f8fafc; --cod-input-border: 1px solid #cbd5e1; --cod-input-text: #334155;
}
/* ── 2. Midnight Dark ──────────────────────────────────────── */
.cod-express-scheme-dark {
    --cod-theme-primary: #3b82f6; --cod-theme-text-on-primary: #fff;
    --cod-bg: #0f172a; --cod-border-color: #1e293b; --cod-text: #f8fafc;
    --cod-shadow: 0 10px 25px rgba(0,0,0,.5);
    --cod-input-bg: #1e293b; --cod-input-border: 1px solid #334155; --cod-input-text: #f1f5f9;
}
/* ── 3. Ocean Glass ────────────────────────────────────────── */
.cod-express-scheme-ocean {
    --cod-theme-primary: #0284c7; --cod-theme-text-on-primary: #fff;
    --cod-bg: linear-gradient(135deg,rgba(224,242,254,.8) 0%,rgba(186,230,253,.9) 100%);
    --cod-border-color: rgba(255,255,255,.6); --cod-text: #082f49;
    --cod-shadow: 0 8px 32px rgba(2,132,199,.15); --cod-backdrop: blur(10px);
    --cod-input-bg: rgba(255,255,255,.7); --cod-input-border: 1px solid rgba(255,255,255,.8); --cod-input-text: #0c4a6e;
}
/* ── 4. Emerald Eco ────────────────────────────────────────── */
.cod-express-scheme-emerald {
    --cod-theme-primary: #16a34a; --cod-theme-text-on-primary: #fff;
    --cod-bg: #f0fdf4; --cod-border-color: #bbf7d0; --cod-text: #14532d;
    --cod-shadow: 0 10px 15px -3px rgba(22,163,74,.1);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #86efac; --cod-input-text: #166534;
}
/* ── 5. Brutal Yellow ──────────────────────────────────────── */
.cod-express-scheme-brutal {
    --cod-theme-primary: #000; --cod-theme-text-on-primary: #fff;
    --cod-bg: #fde047; --cod-border-color: #000; --cod-text: #000;
    --cod-shadow: 6px 6px 0 #000;
    --cod-input-bg: #fff; --cod-input-border: 2px solid #000; --cod-input-text: #000;
    border-width: 3px;
}
.cod-express-scheme-brutal:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 #000; }
/* ── 6. Brutal Blue ────────────────────────────────────────── */
.cod-express-scheme-brutal-blue {
    --cod-theme-primary: #000; --cod-theme-text-on-primary: #fff;
    --cod-bg: #60a5fa; --cod-border-color: #000; --cod-text: #000;
    --cod-shadow: 6px 6px 0 #000;
    --cod-input-bg: #fff; --cod-input-border: 2px solid #000; --cod-input-text: #000;
    border-width: 3px;
}
.cod-express-scheme-brutal-blue:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 #000; }
/* ── 7. Brutal Pink ────────────────────────────────────────── */
.cod-express-scheme-brutal-pink {
    --cod-theme-primary: #000; --cod-theme-text-on-primary: #fff;
    --cod-bg: #f472b6; --cod-border-color: #000; --cod-text: #000;
    --cod-shadow: 6px 6px 0 #000;
    --cod-input-bg: #fff; --cod-input-border: 2px solid #000; --cod-input-text: #000;
    border-width: 3px;
}
.cod-express-scheme-brutal-pink:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 #000; }
/* ── 8. Brutal Mint ────────────────────────────────────────── */
.cod-express-scheme-brutal-mint {
    --cod-theme-primary: #000; --cod-theme-text-on-primary: #fff;
    --cod-bg: #6ee7b7; --cod-border-color: #000; --cod-text: #000;
    --cod-shadow: 6px 6px 0 #000;
    --cod-input-bg: #fff; --cod-input-border: 2px solid #000; --cod-input-text: #000;
    border-width: 3px;
}
.cod-express-scheme-brutal-mint:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 #000; }
/* ── 9. Brutal Orange ──────────────────────────────────────── */
.cod-express-scheme-brutal-orange {
    --cod-theme-primary: #000; --cod-theme-text-on-primary: #fff;
    --cod-bg: #fb923c; --cod-border-color: #000; --cod-text: #000;
    --cod-shadow: 6px 6px 0 #000;
    --cod-input-bg: #fff; --cod-input-border: 2px solid #000; --cod-input-text: #000;
    border-width: 3px;
}
.cod-express-scheme-brutal-orange:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 #000; }
/* ── 10. Brutal Inverted ───────────────────────────────────── */
.cod-express-scheme-brutal-dark {
    --cod-theme-primary: #fff; --cod-theme-text-on-primary: #000;
    --cod-bg: #000; --cod-border-color: #fff; --cod-text: #fff;
    --cod-shadow: 6px 6px 0 #fff;
    --cod-input-bg: #111; --cod-input-border: 2px solid #fff; --cod-input-text: #fff;
    border-width: 3px;
}
.cod-express-scheme-brutal-dark:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 #fff; }
/* ── 11. Brutal Minimal ────────────────────────────────────── */
.cod-express-scheme-brutal-white {
    --cod-theme-primary: #000; --cod-theme-text-on-primary: #fff;
    --cod-bg: #fff; --cod-border-color: #000; --cod-text: #000;
    --cod-shadow: 6px 6px 0 #000;
    --cod-input-bg: #fff; --cod-input-border: 2px solid #000; --cod-input-text: #000;
    border-width: 3px;
}
.cod-express-scheme-brutal-white:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 #000; }
/* ── 12. Sakura Minimal ────────────────────────────────────── */
.cod-express-scheme-sakura {
    --cod-theme-primary: #db2777; --cod-theme-text-on-primary: #fff;
    --cod-bg: #fdf2f8; --cod-border-color: #fbcfe8; --cod-text: #831843;
    --cod-shadow: 0 10px 20px rgba(219,39,119,.05);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #f9a8d4; --cod-input-text: #9d174d;
}
/* ── 13. Deep Space ────────────────────────────────────────── */
.cod-express-scheme-space {
    --cod-theme-primary: #a855f7; --cod-theme-text-on-primary: #fff;
    --cod-bg: linear-gradient(145deg,#18181b 0%,#271c35 100%);
    --cod-border-color: #3f3f46; --cod-text: #f3e8ff;
    --cod-shadow: 0 15px 30px rgba(0,0,0,.6);
    --cod-input-bg: rgba(0,0,0,.4); --cod-input-border: 1px solid #5b21b6; --cod-input-text: #e9d5ff;
}
/* ── 14. Minimal Sand ──────────────────────────────────────── */
.cod-express-scheme-sand {
    --cod-theme-primary: #d97706; --cod-theme-text-on-primary: #fff;
    --cod-bg: #fefce8; --cod-border-color: #fef08a; --cod-text: #713f12;
    --cod-shadow: 0 4px 6px rgba(217,119,6,.05);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #fde047; --cod-input-text: #854d0e;
}
/* ── 15. Neon Matrix ───────────────────────────────────────── */
.cod-express-scheme-neon {
    --cod-theme-primary: #39ff14; --cod-theme-text-on-primary: #000;
    --cod-bg: #050505; --cod-border-color: #1a1a1a; --cod-text: #39ff14;
    --cod-shadow: 0 0 20px rgba(57,255,20,.1);
    --cod-input-bg: #0a0a0a; --cod-input-border: 1px solid #222; --cod-input-text: #fff;
}
/* ── 16. Crimson Gradient ──────────────────────────────────── */
.cod-express-scheme-crimson {
    --cod-theme-primary: #e11d48; --cod-theme-text-on-primary: #fff;
    --cod-bg: linear-gradient(to bottom right,#fff1f2,#ffe4e6);
    --cod-border-color: #fecdd3; --cod-text: #881337;
    --cod-shadow: 0 10px 15px rgba(225,29,72,.1);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #fda4af; --cod-input-text: #be123c;
}
/* ── 17. Chrome Metallic ───────────────────────────────────── */
.cod-express-scheme-chrome {
    --cod-theme-primary: #475569; --cod-theme-text-on-primary: #fff;
    --cod-bg: linear-gradient(135deg,#f8fafc 0%,#cbd5e1 100%);
    --cod-border-color: #e2e8f0; --cod-text: #334155;
    --cod-shadow: 0 10px 20px rgba(71,85,105,.15);
    --cod-input-bg: #f1f5f9; --cod-input-border: 1px solid #94a3b8; --cod-input-text: #0f172a;
}
/* ── 18. Soft Peach ────────────────────────────────────────── */
.cod-express-scheme-peach {
    --cod-theme-primary: #f97316; --cod-theme-text-on-primary: #fff;
    --cod-bg: #fff7ed; --cod-border-color: #ffedd5; --cod-text: #9a3412;
    --cod-shadow: 0 10px 15px rgba(249,115,22,.1);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #fed7aa; --cod-input-text: #c2410c;
}
/* ── 19. Aurora Borealis ───────────────────────────────────── */
.cod-express-scheme-aurora {
    --cod-theme-primary: #10b981; --cod-theme-text-on-primary: #fff;
    --cod-bg: linear-gradient(135deg,#10b981 0%,#3b82f6 100%);
    --cod-border-color: transparent; --cod-text: #fff;
    --cod-shadow: 0 15px 30px rgba(16,185,129,.3); --cod-backdrop: blur(10px);
    --cod-input-bg: rgba(255,255,255,.15); --cod-input-border: 1px solid rgba(255,255,255,.3); --cod-input-text: #fff;
}
/* ── 20. Retro Synthwave ───────────────────────────────────── */
.cod-express-scheme-synthwave {
    --cod-theme-primary: #06b6d4; --cod-theme-text-on-primary: #000;
    --cod-bg: linear-gradient(180deg,#2e1065 0%,#db2777 100%);
    --cod-border-color: #f472b6; --cod-text: #fff;
    --cod-shadow: 0 0 20px rgba(219,39,119,.5);
    --cod-input-bg: rgba(0,0,0,.3); --cod-input-border: 1px solid #f472b6; --cod-input-text: #fff;
    border-width: 2px;
}
/* ── 21. Obsidian Black ────────────────────────────────────── */
.cod-express-scheme-obsidian {
    --cod-theme-primary: #f8fafc; --cod-theme-text-on-primary: #000;
    --cod-bg: #020617; --cod-border-color: #1e293b; --cod-text: #94a3b8;
    --cod-shadow: 0 20px 40px rgba(0,0,0,.8);
    --cod-input-bg: #0f172a; --cod-input-border: 1px solid #334155; --cod-input-text: #fff;
}
/* ── 22. Ghost Translucent ─────────────────────────────────── */
.cod-express-scheme-ghost {
    --cod-theme-primary: #1e293b; --cod-theme-text-on-primary: #fff;
    --cod-bg: rgba(255,255,255,.3); --cod-border-color: rgba(255,255,255,.4); --cod-text: #0f172a;
    --cod-shadow: 0 4px 30px rgba(0,0,0,.05); --cod-backdrop: blur(15px);
    --cod-input-bg: rgba(255,255,255,.5); --cod-input-border: 1px solid rgba(255,255,255,.6); --cod-input-text: #0f172a;
}
/* ── 23. Warm Terracotta ───────────────────────────────────── */
.cod-express-scheme-terracotta {
    --cod-theme-primary: #7c2d12; --cod-theme-text-on-primary: #fff;
    --cod-bg: #ffedd5; --cod-border-color: #fed7aa; --cod-text: #7c2d12;
    --cod-shadow: 0 10px 15px rgba(124,45,18,.05);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #fdba74; --cod-input-text: #431407;
}
/* ── 24. Soft Lavender ─────────────────────────────────────── */
.cod-express-scheme-lavender {
    --cod-theme-primary: #7c3aed; --cod-theme-text-on-primary: #fff;
    --cod-bg: #f5f3ff; --cod-border-color: #ede9fe; --cod-text: #4c1d95;
    --cod-shadow: 0 10px 20px rgba(124,58,237,.05);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #ddd6fe; --cod-input-text: #5b21b6;
}
/* ── 25. Rose Gold ─────────────────────────────────────────── */
.cod-express-scheme-rosegold {
    --cod-theme-primary: #be185d; --cod-theme-text-on-primary: #fff;
    --cod-bg: linear-gradient(135deg,#fdf2f8 0%,#fce7f3 100%);
    --cod-border-color: #fbcfe8; --cod-text: #831843;
    --cod-shadow: 0 10px 25px rgba(190,24,93,.1);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #f9a8d4; --cod-input-text: #9d174d;
}
/* ── 26. Fintech Blue ──────────────────────────────────────── */
.cod-express-scheme-fintech {
    --cod-theme-primary: #2563eb; --cod-theme-text-on-primary: #fff;
    --cod-bg: #fff; --cod-border-color: #eff6ff; --cod-text: #1e3a8a;
    --cod-shadow: 0 20px 40px rgba(37,99,235,.08);
    --cod-input-bg: #f8fafc; --cod-input-border: 1px solid #bfdbfe; --cod-input-text: #1e40af;
}
/* ── 27. Crypto Dark ───────────────────────────────────────── */
.cod-express-scheme-crypto {
    --cod-theme-primary: #6366f1; --cod-theme-text-on-primary: #fff;
    --cod-bg: #0b0f19; --cod-border-color: #1e293b; --cod-text: #e2e8f0;
    --cod-shadow: 0 0 30px rgba(99,102,241,.15);
    --cod-input-bg: #111827; --cod-input-border: 1px solid #374151; --cod-input-text: #f8fafc;
}
/* ── 28. Luxury Gold ───────────────────────────────────────── */
.cod-express-scheme-luxury {
    --cod-theme-primary: #eab308; --cod-theme-text-on-primary: #000;
    --cod-bg: #000; --cod-border-color: #422006; --cod-text: #fef08a;
    --cod-shadow: 0 15px 35px rgba(234,179,8,.1);
    --cod-input-bg: #141006; --cod-input-border: 1px solid #854d0e; --cod-input-text: #fef9c3;
}
/* ── 29. Hacker Terminal ───────────────────────────────────── */
.cod-express-scheme-terminal {
    --cod-theme-primary: #22c55e; --cod-theme-text-on-primary: #000;
    --cod-bg: #052e16; --cod-border-color: #14532d; --cod-text: #4ade80;
    --cod-shadow: 0 10px 20px rgba(22,197,94,.1);
    --cod-input-bg: #022c22; --cod-input-border: 1px solid #166534; --cod-input-text: #86efac;
}
/* ── 30. Vibrant Coral ─────────────────────────────────────── */
.cod-express-scheme-coral {
    --cod-theme-primary: #fff; --cod-theme-text-on-primary: #f43f5e;
    --cod-bg: #f43f5e; --cod-border-color: transparent; --cod-text: #fff;
    --cod-shadow: 0 10px 20px rgba(244,63,94,.3);
    --cod-input-bg: rgba(255,255,255,.1); --cod-input-border: 1px solid rgba(255,255,255,.3); --cod-input-text: #fff;
}
/* ── 31. Mustard Flat ──────────────────────────────────────── */
.cod-express-scheme-mustard {
    --cod-theme-primary: #171717; --cod-theme-text-on-primary: #fff;
    --cod-bg: #eab308; --cod-border-color: transparent; --cod-text: #171717;
    --cod-shadow: 0 10px 20px rgba(234,179,8,.3);
    --cod-input-bg: #ca8a04; --cod-input-border: 1px solid #a16207; --cod-input-text: #fff;
}
/* ── 32. Slate Professional ────────────────────────────────── */
.cod-express-scheme-slatepro {
    --cod-theme-primary: #0ea5e9; --cod-theme-text-on-primary: #fff;
    --cod-bg: #334155; --cod-border-color: #475569; --cod-text: #f8fafc;
    --cod-shadow: 0 10px 25px rgba(0,0,0,.2);
    --cod-input-bg: #1e293b; --cod-input-border: 1px solid #64748b; --cod-input-text: #fff;
}
/* ── 33. Bubblegum Pop ─────────────────────────────────────── */
.cod-express-scheme-bubblegum {
    --cod-theme-primary: #06b6d4; --cod-theme-text-on-primary: #fff;
    --cod-bg: #fbcfe8; --cod-border-color: #f472b6; --cod-text: #be185d;
    --cod-shadow: 0 10px 20px rgba(244,114,182,.2);
    --cod-input-bg: #fff; --cod-input-border: 2px solid #f9a8d4; --cod-input-text: #9d174d;
    border-width: 2px;
}
/* ── 34. Vintage Paper ─────────────────────────────────────── */
.cod-express-scheme-vintage {
    --cod-theme-primary: #78716c; --cod-theme-text-on-primary: #fff;
    --cod-bg: #f5f5f4; --cod-border-color: #e7e5e4; --cod-text: #44403c;
    --cod-shadow: 0 8px 16px rgba(0,0,0,.05);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #d6d3d1; --cod-input-text: #292524;
}
/* ── 35. Toxic Lime ────────────────────────────────────────── */
.cod-express-scheme-toxic {
    --cod-theme-primary: #000; --cod-theme-text-on-primary: #bef264;
    --cod-bg: #bef264; --cod-border-color: transparent; --cod-text: #1a2e05;
    --cod-shadow: 0 10px 25px rgba(190,242,100,.4);
    --cod-input-bg: #a3e635; --cod-input-border: 1px solid #65a30d; --cod-input-text: #1a2e05;
}
/* ── 36. Midnight Glass ────────────────────────────────────── */
.cod-express-scheme-midnight-glass {
    --cod-theme-primary: #6366f1; --cod-theme-text-on-primary: #fff;
    --cod-bg: rgba(15,23,42,.7); --cod-border-color: rgba(255,255,255,.1); --cod-text: #f1f5f9;
    --cod-shadow: 0 8px 32px rgba(0,0,0,.5); --cod-backdrop: blur(12px);
    --cod-input-bg: rgba(0,0,0,.5); --cod-input-border: 1px solid rgba(255,255,255,.1); --cod-input-text: #fff;
}
/* ── 37. Ruby Deep ─────────────────────────────────────────── */
.cod-express-scheme-ruby {
    --cod-theme-primary: #e11d48; --cod-theme-text-on-primary: #fff;
    --cod-bg: linear-gradient(135deg,#9f1239 0%,#4c0519 100%);
    --cod-border-color: #e11d48; --cod-text: #ffe4e6;
    --cod-shadow: 0 15px 30px rgba(159,18,57,.4);
    --cod-input-bg: rgba(0,0,0,.3); --cod-input-border: 1px solid #be123c; --cod-input-text: #fff;
}
/* ── 38. Matcha Green ──────────────────────────────────────── */
.cod-express-scheme-matcha {
    --cod-theme-primary: #4d7c0f; --cod-theme-text-on-primary: #fff;
    --cod-bg: #ecfccb; --cod-border-color: #d9f99d; --cod-text: #3f6212;
    --cod-shadow: 0 10px 15px rgba(132,204,22,.1);
    --cod-input-bg: #fff; --cod-input-border: 1px solid #bef264; --cod-input-text: #365314;
}
/* ── 39. Lavender Glass ────────────────────────────────────── */
.cod-express-scheme-lavender-glass {
    --cod-theme-primary: #9333ea; --cod-theme-text-on-primary: #fff;
    --cod-bg: rgba(233,213,255,.7); --cod-border-color: rgba(255,255,255,.8); --cod-text: #4c1d95;
    --cod-shadow: 0 8px 32px rgba(147,51,234,.15); --cod-backdrop: blur(10px);
    --cod-input-bg: rgba(255,255,255,.8); --cod-input-border: 1px solid #d8b4fe; --cod-input-text: #5b21b6;
}
/* ── 40. Cyberpunk 2077 ────────────────────────────────────── */
.cod-express-scheme-cyberpunk {
    --cod-theme-primary: #fde047; --cod-theme-text-on-primary: #000;
    --cod-bg: #27272a; --cod-border-color: #fde047; --cod-text: #fde047;
    --cod-shadow: 0 10px 30px rgba(253,224,71,.1);
    --cod-input-bg: #000; --cod-input-border: 1px solid #fde047; --cod-input-text: #fde047;
    border-width: 2px;
}
.cod-express-scheme-cyberpunk .cod-express-field input:focus,
.cod-express-scheme-cyberpunk .cod-express-field textarea:focus,
.cod-express-scheme-cyberpunk .cod-express-field select:focus {
    box-shadow: 0 0 10px rgba(253,224,71,.3);
}
/* ── 41. Arctic Frost ──────────────────────────────────────── */
.cod-express-scheme-frost {
    --cod-theme-primary: #0284c7; --cod-theme-text-on-primary: #fff;
    --cod-bg: rgba(255,255,255,.9); --cod-border-color: #e0f2fe; --cod-text: #0369a1;
    --cod-shadow: 0 20px 40px rgba(14,165,233,.05); --cod-backdrop: blur(20px);
    --cod-input-bg: #f0f9ff; --cod-input-border: 1px solid #bae6fd; --cod-input-text: #075985;
}
/* ── 42. Sunset Glass ──────────────────────────────────────── */
.cod-express-scheme-sunset-glass {
    --cod-theme-primary: #e11d48; --cod-theme-text-on-primary: #fff;
    --cod-bg: linear-gradient(135deg,rgba(254,215,170,.8) 0%,rgba(253,164,175,.8) 100%);
    --cod-border-color: rgba(255,255,255,.6); --cod-text: #9f1239;
    --cod-shadow: 0 10px 30px rgba(244,63,94,.2); --cod-backdrop: blur(10px);
    --cod-input-bg: rgba(255,255,255,.7); --cod-input-border: 1px solid rgba(255,255,255,.9); --cod-input-text: #881337;
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] .cod-express-header {
    padding-left: 0;
    padding-right: 15px;
    border-left: none;
    border-right: 4px solid currentColor;
}

[dir="rtl"] .cod-express-field label .required {
    margin-left: 0;
    margin-right: 3px;
}

[dir="rtl"] .cod-express-submit-btn .spinner {
    margin-right: 0;
    margin-left: 8px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .cod-express-checkout-form {
        display: none;
    }
}

/* ==========================================================================
   In-form Variation Selectors (Swatches & Pills)
   ========================================================================== */

/* Hide the native WooCommerce variation table when COD form is on the page.
   The COD form has its own variation UI, so we don't need duplicates. */
.single-product.cod-express-active form.variations_form .variations {
    display: none !important;
}

/* Wrapper for all variation rows */
.cod-express-variations {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cod-express-variation-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cod-express-variation-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cod-label-color, #374151);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cod-express-required {
    color: #ef4444;
    font-size: 0.75rem;
}

/* --- Size / text PILLS --- */
.cod-express-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cod-express-pill-btn {
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    border: 1.5px solid var(--cod-border-color, #d1d5db);
    background: var(--cod-input-bg, #ffffff);
    color: var(--cod-text-color, #374151);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
    line-height: 1.4;
    user-select: none;
}

.cod-express-pill-btn:hover {
    border-color: var(--cod-btn-bg, #1f2937);
    transform: translateY(-1px);
}

.cod-express-pill-btn.selected {
    background: var(--cod-btn-bg, #1f2937);
    color: var(--cod-btn-text, #ffffff);
    border-color: var(--cod-btn-bg, #1f2937);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.cod-express-pill-btn:focus-visible {
    outline: 2px solid var(--cod-btn-bg, #1f2937);
    outline-offset: 2px;
}

/* --- Color SWATCHES --- */
.cod-express-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.cod-express-swatch-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    position: relative;
    padding: 0;
    outline: none;
}

.cod-express-swatch-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.cod-express-swatch-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.cod-express-swatch-btn.selected {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--cod-btn-bg, #1f2937);
}

.cod-express-swatch-btn:focus-visible::after {
    border-color: var(--cod-btn-bg, #1f2937);
}

/* Validation error */
.cod-express-variation-error {
    font-size: 0.75rem;
    color: #ef4444;
    margin: 0.125rem 0 0;
}