/*
 * WooCommerce Product Page Styling — myCard.golf
 * Inherits epcore.css custom properties for seamless light/dark mode.
 * v1.0.0
 */

/* ── Global WooCommerce overrides ── */
.woocommerce,
.woocommerce-page {
    font-family: var(--font-body, "Inter", "Segoe UI", system-ui, sans-serif);
    color: var(--color-text, #171923);
    background-color: var(--color-bg, #ffffff);
}

/* ── Product title ── */
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-body);
    color: var(--color-text);
    font-weight: 700;
}

/* ── Price ── */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: var(--eps-site-green, #4D969B);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.35em;
}

/* ── Primary buttons (Add to Cart, Place Order, etc.) ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--color-accent, #3b82f6) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-md, 8px) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    padding: 0.7em 1.4em !important;
    transition: background-color var(--transition-fast, 0.2s ease), box-shadow var(--transition-fast, 0.2s ease), color 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 1.4 !important;
    font-size: 1em !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--color-accent-hover, #60a5fa) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-soft, 0 6px 16px rgba(15,23,42,0.15)) !important;
}

.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ── Cart "Proceed to Checkout" — extra specificity override ── */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--color-accent, #3b82f6) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-md, 8px) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 1em !important;
    padding: 0.85em 1.6em !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
body .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--color-accent-hover, #60a5fa) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-soft, 0 6px 16px rgba(15,23,42,0.15)) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:visited,
body .wc-proceed-to-checkout a.checkout-button:visited {
    color: #ffffff !important;
}

/* ── Form inputs (checkout, account) ── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
    background-color: var(--color-surface, #f5f6f8);
    color: var(--color-text);
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-body);
    padding: 0.6em 0.8em;
    transition: border-color var(--transition-fast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--color-accent) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

/* ── Labels ── */
.woocommerce form .form-row label {
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 500;
}

/* ── Notices / messages ── */
.woocommerce .woocommerce-message {
    border-top-color: var(--color-success, #2b8a3e);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.woocommerce .woocommerce-error {
    border-top-color: var(--color-error, #b23a48);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.woocommerce .woocommerce-info {
    border-top-color: var(--color-accent);
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* ── Tables (cart, order details) ── */
.woocommerce table.shop_table {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    background-color: var(--color-bg);
}

.woocommerce table.shop_table th {
    background-color: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
}

.woocommerce table.shop_table td {
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

/* ── Breadcrumbs ── */
.woocommerce .woocommerce-breadcrumb {
    color: var(--color-text);
    font-family: var(--font-body);
    opacity: 0.7;
    font-size: 0.85em;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--color-accent);
}

/* ── Tabs (Description, Reviews) ── */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: var(--color-bg);
    border-bottom-color: var(--color-bg);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 500;
}

.woocommerce div.product .woocommerce-tabs .panel {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
}

/* ── Hide elements not needed for subscription-only products ── */
.woocommerce .product_meta,
.woocommerce .woocommerce-product-rating,
.woocommerce .related.products,
.woocommerce .up-sells {
    display: none !important;
}

/* ── Quantity selector (hide for subscriptions — always 1) ── */
.woocommerce div.product form.cart .quantity {
    display: none !important;
}

/* ── Product images ── */
.woocommerce div.product div.images {
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
}

/* ── Shop page product cards ── */
.woocommerce ul.products li.product {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1em;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

/* ── Links ── */
.woocommerce a {
    color: var(--color-accent);
    transition: color var(--transition-fast);
}

.woocommerce a:hover {
    color: var(--color-accent-hover);
}

/* ══════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════ */

html.theme-dark .woocommerce,
html.theme-dark .woocommerce-page,
[data-theme="dark"] .woocommerce,
[data-theme="dark"] .woocommerce-page {
    color: var(--color-text);
    background-color: var(--color-bg);
}

html.theme-dark .woocommerce div.product .product_title,
html.theme-dark .woocommerce ul.products li.product .woocommerce-loop-product__title,
[data-theme="dark"] .woocommerce div.product .product_title,
[data-theme="dark"] .woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--color-text);
}

html.theme-dark .woocommerce form .form-row input.input-text,
html.theme-dark .woocommerce form .form-row textarea,
html.theme-dark .woocommerce form .form-row select,
[data-theme="dark"] .woocommerce form .form-row input.input-text,
[data-theme="dark"] .woocommerce form .form-row textarea,
[data-theme="dark"] .woocommerce form .form-row select {
    background-color: var(--color-surface, #111827) !important;
    color: var(--color-text, #e5e7eb) !important;
    border-color: var(--color-border) !important;
}

/* Dark mode autofill fix (matches epcore login fix) */
html.theme-dark .woocommerce input:-webkit-autofill,
html.theme-dark .woocommerce input:-webkit-autofill:hover,
html.theme-dark .woocommerce input:-webkit-autofill:focus,
[data-theme="dark"] .woocommerce input:-webkit-autofill,
[data-theme="dark"] .woocommerce input:-webkit-autofill:hover,
[data-theme="dark"] .woocommerce input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface, #111827) inset !important;
    -webkit-text-fill-color: var(--color-text, #e5e7eb) !important;
    transition: background-color 99999s ease-in-out 0s !important;
}

html.theme-dark .woocommerce table.shop_table,
[data-theme="dark"] .woocommerce table.shop_table {
    background-color: var(--bg-elev, #111827);
    border-color: var(--color-border) !important;
}

html.theme-dark .woocommerce table.shop_table th,
[data-theme="dark"] .woocommerce table.shop_table th {
    background-color: var(--bg-elev-alt, #020617);
    color: var(--color-text);
    border-color: var(--color-border);
}

html.theme-dark .woocommerce table.shop_table td,
[data-theme="dark"] .woocommerce table.shop_table td {
    color: var(--color-text);
    border-color: var(--color-border);
}

html.theme-dark .woocommerce ul.products li.product,
[data-theme="dark"] .woocommerce ul.products li.product {
    background-color: var(--bg-elev, #111827);
    border-color: var(--color-border);
}

html.theme-dark .woocommerce div.product .woocommerce-tabs ul.tabs li,
[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: var(--bg-elev-alt);
    border-color: var(--color-border);
}

html.theme-dark .woocommerce div.product .woocommerce-tabs ul.tabs li.active,
[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: var(--color-bg);
}

html.theme-dark .woocommerce div.product .woocommerce-tabs .panel,
[data-theme="dark"] .woocommerce div.product .woocommerce-tabs .panel {
    background-color: var(--color-bg);
    color: var(--color-text);
}

html.theme-dark .woocommerce .woocommerce-message,
html.theme-dark .woocommerce .woocommerce-error,
html.theme-dark .woocommerce .woocommerce-info,
[data-theme="dark"] .woocommerce .woocommerce-message,
[data-theme="dark"] .woocommerce .woocommerce-error,
[data-theme="dark"] .woocommerce .woocommerce-info {
    background-color: var(--bg-elev, #111827);
    color: var(--color-text);
}

/* ── Checkout payment box (gateway form area) ── */
.woocommerce-checkout-payment,
.woocommerce .payment_box,
.woocommerce #payment,
.woocommerce #payment .payment_methods,
.woocommerce #payment .payment_methods li,
.woocommerce-checkout #payment,
.woocommerce .woocommerce-checkout-payment {
    background-color: var(--color-surface, #f5f6f8);
    color: var(--color-text);
}

.woocommerce #payment .payment_box {
    background-color: var(--color-surface, #f5f6f8);
    color: var(--color-text);
}

/* Payment box arrow (the triangle pointer) */
.woocommerce #payment .payment_box::before {
    border-bottom-color: var(--color-surface, #f5f6f8);
}

/* Payment box inputs (card number, expiry, CVV — including iframe fallbacks) */
.woocommerce #payment .payment_box input,
.woocommerce #payment .payment_box select,
.woocommerce #payment .payment_box textarea,
.woocommerce #payment .payment_box .input-text {
    background-color: var(--color-bg, #ffffff);
    color: var(--color-text);
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    border-radius: var(--radius-sm, 4px);
}

/* Order review / pay-for-order page */
.woocommerce-order-pay #order_review,
.woocommerce-order-pay .woocommerce-checkout-payment,
.woocommerce .order_details,
.woocommerce ul.order_details {
    background-color: var(--color-surface, #f5f6f8);
    color: var(--color-text);
}

/* ── Dark mode: checkout payment box ── */
html.theme-dark .woocommerce-checkout-payment,
html.theme-dark .woocommerce #payment,
html.theme-dark .woocommerce #payment .payment_methods,
html.theme-dark .woocommerce #payment .payment_methods li,
html.theme-dark .woocommerce .payment_box,
html.theme-dark .woocommerce #payment .payment_box,
html.theme-dark .woocommerce-checkout #payment,
html.theme-dark .woocommerce .woocommerce-checkout-payment,
[data-theme="dark"] .woocommerce-checkout-payment,
[data-theme="dark"] .woocommerce #payment,
[data-theme="dark"] .woocommerce #payment .payment_methods,
[data-theme="dark"] .woocommerce #payment .payment_methods li,
[data-theme="dark"] .woocommerce .payment_box,
[data-theme="dark"] .woocommerce #payment .payment_box,
[data-theme="dark"] .woocommerce-checkout #payment,
[data-theme="dark"] .woocommerce .woocommerce-checkout-payment {
    background-color: var(--bg-elev, #111827) !important;
    color: var(--color-text, #e5e7eb) !important;
    border-color: var(--color-border) !important;
}

html.theme-dark .woocommerce #payment .payment_box::before,
[data-theme="dark"] .woocommerce #payment .payment_box::before {
    border-bottom-color: var(--bg-elev, #111827) !important;
}

html.theme-dark .woocommerce #payment .payment_box input,
html.theme-dark .woocommerce #payment .payment_box select,
html.theme-dark .woocommerce #payment .payment_box textarea,
html.theme-dark .woocommerce #payment .payment_box .input-text,
[data-theme="dark"] .woocommerce #payment .payment_box input,
[data-theme="dark"] .woocommerce #payment .payment_box select,
[data-theme="dark"] .woocommerce #payment .payment_box textarea,
[data-theme="dark"] .woocommerce #payment .payment_box .input-text {
    background-color: var(--color-surface, #111827) !important;
    color: var(--color-text, #e5e7eb) !important;
    border-color: var(--color-border) !important;
}

html.theme-dark .woocommerce #payment .payment_box label,
html.theme-dark .woocommerce #payment .payment_methods label,
[data-theme="dark"] .woocommerce #payment .payment_box label,
[data-theme="dark"] .woocommerce #payment .payment_methods label {
    color: var(--color-text, #e5e7eb) !important;
}

/* Dark mode: order review / pay-for-order page */
html.theme-dark .woocommerce-order-pay #order_review,
html.theme-dark .woocommerce-order-pay .woocommerce-checkout-payment,
html.theme-dark .woocommerce .order_details,
html.theme-dark .woocommerce ul.order_details,
[data-theme="dark"] .woocommerce-order-pay #order_review,
[data-theme="dark"] .woocommerce-order-pay .woocommerce-checkout-payment,
[data-theme="dark"] .woocommerce .order_details,
[data-theme="dark"] .woocommerce ul.order_details {
    background-color: var(--bg-elev, #111827) !important;
    color: var(--color-text, #e5e7eb) !important;
}

/* Dark mode: payment box checkbox labels (e.g. "Securely Save to Account") */
html.theme-dark .woocommerce #payment .payment_box p,
html.theme-dark .woocommerce #payment .payment_box span,
[data-theme="dark"] .woocommerce #payment .payment_box p,
[data-theme="dark"] .woocommerce #payment .payment_box span {
    color: var(--color-text, #e5e7eb) !important;
}

/* Dark mode: ALL checkout selects, inputs, textareas (broad catch-all) */
html.theme-dark .woocommerce select,
html.theme-dark .woocommerce input[type="text"],
html.theme-dark .woocommerce input[type="email"],
html.theme-dark .woocommerce input[type="tel"],
html.theme-dark .woocommerce input[type="number"],
html.theme-dark .woocommerce input[type="password"],
html.theme-dark .woocommerce textarea,
html.theme-dark .woocommerce-page select,
html.theme-dark .woocommerce-page input[type="text"],
html.theme-dark .woocommerce-page input[type="email"],
html.theme-dark .woocommerce-page input[type="tel"],
html.theme-dark .woocommerce-page input[type="number"],
html.theme-dark .woocommerce-page input[type="password"],
html.theme-dark .woocommerce-page textarea,
[data-theme="dark"] .woocommerce select,
[data-theme="dark"] .woocommerce input[type="text"],
[data-theme="dark"] .woocommerce input[type="email"],
[data-theme="dark"] .woocommerce input[type="tel"],
[data-theme="dark"] .woocommerce input[type="number"],
[data-theme="dark"] .woocommerce input[type="password"],
[data-theme="dark"] .woocommerce textarea,
[data-theme="dark"] .woocommerce-page select,
[data-theme="dark"] .woocommerce-page input[type="text"],
[data-theme="dark"] .woocommerce-page input[type="email"],
[data-theme="dark"] .woocommerce-page input[type="tel"],
[data-theme="dark"] .woocommerce-page input[type="number"],
[data-theme="dark"] .woocommerce-page input[type="password"],
[data-theme="dark"] .woocommerce-page textarea {
    background-color: var(--color-surface, #111827) !important;
    color: var(--color-text, #e5e7eb) !important;
    border-color: var(--color-border) !important;
}

/* Dark mode: Select2 dropdowns (country/state pickers) */
html.theme-dark .woocommerce .select2-container--default .select2-selection--single,
html.theme-dark .woocommerce .select2-container--default .select2-selection--multiple,
[data-theme="dark"] .woocommerce .select2-container--default .select2-selection--single,
[data-theme="dark"] .woocommerce .select2-container--default .select2-selection--multiple {
    background-color: var(--color-surface, #111827) !important;
    color: var(--color-text, #e5e7eb) !important;
    border-color: var(--color-border) !important;
}

html.theme-dark .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text, #e5e7eb) !important;
}

html.theme-dark .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b,
[data-theme="dark"] .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text, #e5e7eb) transparent transparent transparent !important;
}

/* Select2 dropdown panel (renders outside .woocommerce at body level) */
html.theme-dark .select2-dropdown,
[data-theme="dark"] .select2-dropdown {
    background-color: var(--color-surface, #111827) !important;
    color: var(--color-text, #e5e7eb) !important;
    border-color: var(--color-border) !important;
}

html.theme-dark .select2-results__option,
[data-theme="dark"] .select2-results__option {
    color: var(--color-text, #e5e7eb) !important;
}

html.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected],
html.theme-dark .select2-container--default .select2-results__option--highlighted,
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background-color: var(--color-accent, #3b82f6) !important;
    color: #ffffff !important;
}

html.theme-dark .select2-search--dropdown .select2-search__field,
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-elev, #111827) !important;
    color: var(--color-text, #e5e7eb) !important;
    border-color: var(--color-border) !important;
}

/* ── Dark mode: Cart "Proceed to Checkout" button ── */
html.theme-dark .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
html.theme-dark .wc-proceed-to-checkout a.checkout-button,
html.theme-dark body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
[data-theme="dark"] .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
[data-theme="dark"] .wc-proceed-to-checkout a.checkout-button,
[data-theme="dark"] body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--color-accent, #3b82f6) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-md, 8px) !important;
}

html.theme-dark .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
html.theme-dark .wc-proceed-to-checkout a.checkout-button:hover,
[data-theme="dark"] .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
[data-theme="dark"] .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--color-accent-hover, #93c5fd) !important;
    color: #ffffff !important;
}

html.theme-dark .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:visited,
[data-theme="dark"] .wc-proceed-to-checkout a.checkout-button:visited {
    color: #ffffff !important;
}

/* Dark mode button accent stays consistent — already using CSS vars */

/* ══════════════════════════════════════
   prefers-color-scheme fallback
   ══════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    html:not(.theme-light):not([data-theme="light"]) .woocommerce form .form-row input.input-text,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce form .form-row textarea,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce form .form-row select {
        background-color: var(--color-surface) !important;
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .woocommerce table.shop_table {
        background-color: var(--bg-elev);
        border-color: var(--color-border) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .woocommerce ul.products li.product {
        background-color: var(--bg-elev);
        border-color: var(--color-border);
    }

    html:not(.theme-light):not([data-theme="light"]) .woocommerce-checkout-payment,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_methods,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_methods li,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce .payment_box,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_box {
        background-color: var(--bg-elev, #111827) !important;
        color: var(--color-text, #e5e7eb) !important;
        border-color: var(--color-border) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_box::before {
        border-bottom-color: var(--bg-elev, #111827) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_box input,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_box select,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_box textarea {
        background-color: var(--color-surface, #111827) !important;
        color: var(--color-text, #e5e7eb) !important;
        border-color: var(--color-border) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_box label,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_methods label,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_box p,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce #payment .payment_box span {
        color: var(--color-text, #e5e7eb) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .woocommerce-order-pay #order_review,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce-order-pay .woocommerce-checkout-payment {
        background-color: var(--bg-elev, #111827) !important;
        color: var(--color-text, #e5e7eb) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .woocommerce select,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce input[type="text"],
    html:not(.theme-light):not([data-theme="light"]) .woocommerce input[type="email"],
    html:not(.theme-light):not([data-theme="light"]) .woocommerce input[type="tel"],
    html:not(.theme-light):not([data-theme="light"]) .woocommerce input[type="number"],
    html:not(.theme-light):not([data-theme="light"]) .woocommerce input[type="password"],
    html:not(.theme-light):not([data-theme="light"]) .woocommerce textarea {
        background-color: var(--color-surface, #111827) !important;
        color: var(--color-text, #e5e7eb) !important;
        border-color: var(--color-border) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .select2-container--default .select2-selection--single,
    html:not(.theme-light):not([data-theme="light"]) .select2-dropdown,
    html:not(.theme-light):not([data-theme="light"]) .select2-search--dropdown .select2-search__field {
        background-color: var(--color-surface, #111827) !important;
        color: var(--color-text, #e5e7eb) !important;
        border-color: var(--color-border) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .select2-container--default .select2-selection--single .select2-selection__rendered,
    html:not(.theme-light):not([data-theme="light"]) .select2-results__option {
        color: var(--color-text, #e5e7eb) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .wc-proceed-to-checkout a.checkout-button,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
        background-color: var(--color-accent, #3b82f6) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: var(--radius-md, 8px) !important;
    }

    html:not(.theme-light):not([data-theme="light"]) .wc-proceed-to-checkout a.checkout-button:hover,
    html:not(.theme-light):not([data-theme="light"]) .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
        background-color: var(--color-accent-hover, #93c5fd) !important;
        color: #ffffff !important;
    }
}