/**
 * TechVersa Marketplace — Dark Controls Layer
 * ────────────────────────────────────────────────────────────────────────────
 * ONE source of truth for dark-theming every form control / dropdown / popover
 * that WooCommerce, WooCommerce Blocks, Dokan, Select2 or TomSelect can render.
 *
 * Why this file exists
 * --------------------
 * Earlier we had three places fighting each other:
 *   1. `theme.css`   — scattered .woocommerce form rules
 *   2. `dokan-modern.css` — comprehensive but body-class scoped to
 *      `.tv-dokan-dashboard` (so it does nothing on /checkout/ or /my-account/)
 *   3. `functions.php` inline `<style id="tv-force-dark-mode">` — partial WC
 *      Blocks coverage with stale selectors.
 *
 * That structure caused “random white fields”: a control would be themed on
 * the dashboard but render white on checkout, or a new WC selector
 * (`.wc-block-components-select-input`) would slip past the old combobox rules.
 *
 * This file consolidates *all* form-control styling under one cascade so:
 *   • new pages automatically inherit dark mode
 *   • plugin updates that introduce new class variants only need additions here
 *   • we never have to remember three locations again
 *
 * Loading order (see functions.php `techversa_marketplace_assets`):
 *   theme.css  →  dokan-modern.css (vendor pages only)  →  dark-controls.css
 *
 * That ordering, combined with `!important` on visual properties only, lets us
 * win the cascade against:
 *   • WooCommerce core CSS              (`woocommerce.css`)
 *   • WooCommerce Blocks                (`packages-style.css`, `checkout.css`)
 *   • Dokan layout bundle               (`vendor-dashboard/layout/index.css`)
 *   • Select2 default theme             (`select2.min.css`)
 *   • TomSelect default theme           (Dokan Vue admin pages only)
 *   • Gutenberg @wordpress/components   (popovers / dropdowns)
 *
 * Anything specific to a single page that needs layout (sizing, grid) lives in
 * `theme.css` or page templates. This file is restricted to *colors, borders,
 * radii, focus rings* — never layout — so it never breaks page structure.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   § 0  TOKENS
   ─────────────────────────────────────────────────────────────────────────
   Reuses the brand tokens already defined at the top of theme.css. Adds a
   control-scoped layer (`--tv-ctrl-*`) and a popover-scoped layer (`--tv-pop-*`)
   so the rest of the file references intent, not raw colors.
   ─────────────────────────────────────────────────────────────────────── */
:root {
    /* Control surfaces */
    --tv-ctrl-bg:            rgba(255, 255, 255, 0.06);
    --tv-ctrl-bg-hover:      rgba(255, 255, 255, 0.09);
    --tv-ctrl-bg-active:     rgba(255, 255, 255, 0.12);
    --tv-ctrl-bg-disabled:   rgba(255, 255, 255, 0.03);

    /* Control borders */
    --tv-ctrl-border:        rgba(255, 255, 255, 0.12);
    --tv-ctrl-border-hover:  rgba(255, 255, 255, 0.22);
    --tv-ctrl-border-focus:  rgba(225, 6, 42, 0.55);

    /* Control typography */
    --tv-ctrl-text:          #ffffff;
    --tv-ctrl-text-muted:    rgba(255, 255, 255, 0.55);
    --tv-ctrl-placeholder:   rgba(255, 255, 255, 0.45);

    /* Control geometry */
    --tv-ctrl-radius:        12px;
    --tv-ctrl-radius-sm:     8px;
    --tv-ctrl-radius-pill:   999px;
    --tv-ctrl-ring:          0 0 0 3px rgba(200, 16, 46, 0.18);
    --tv-ctrl-shadow:        0 1px 2px rgba(0, 0, 0, 0.2);

    /* Popover surfaces (dropdowns, calendar, ellipsis menu, etc.) */
    --tv-pop-bg:             #161616;
    --tv-pop-bg-alt:         #1a1a1a;
    --tv-pop-border:         #2a2a2a;
    --tv-pop-shadow:         0 12px 30px rgba(0, 0, 0, 0.45);
    --tv-pop-hover-bg:       rgba(255, 255, 255, 0.06);
    --tv-pop-active-bg:      var(--red, #C8102E);
    --tv-pop-active-text:    #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 1  NATIVE FORM CONTROLS (sitewide baseline)
   ─────────────────────────────────────────────────────────────────────────
   Covers every native input/select/textarea on the front-end except for our
   own auth pages (`.tv-auth-input` etc.) which already have custom styling.
   ─────────────────────────────────────────────────────────────────────── */
body:not(.wp-admin) input[type="text"],
body:not(.wp-admin) input[type="email"],
body:not(.wp-admin) input[type="password"],
body:not(.wp-admin) input[type="search"],
body:not(.wp-admin) input[type="tel"],
body:not(.wp-admin) input[type="url"],
body:not(.wp-admin) input[type="number"],
body:not(.wp-admin) input[type="date"],
body:not(.wp-admin) input[type="datetime-local"],
body:not(.wp-admin) input[type="month"],
body:not(.wp-admin) input[type="week"],
body:not(.wp-admin) input[type="time"],
body:not(.wp-admin) select,
body:not(.wp-admin) textarea {
    background-color: var(--tv-ctrl-bg);
    color: var(--tv-ctrl-text);
    border: 1px solid var(--tv-ctrl-border);
    border-radius: var(--tv-ctrl-radius);
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Don’t double-style our bespoke auth/cursor and decorative inputs */
body:not(.wp-admin) .tv-auth-input,
body:not(.wp-admin) .tv-search,
body:not(.wp-admin) .wp-block-search__input {
    /* Owners: page-access.php, site-header.php — leave their custom styling alone */
    background-color: initial;
    border: initial;
}

body:not(.wp-admin) input:hover,
body:not(.wp-admin) select:hover,
body:not(.wp-admin) textarea:hover {
    border-color: var(--tv-ctrl-border-hover);
}

body:not(.wp-admin) input:focus,
body:not(.wp-admin) select:focus,
body:not(.wp-admin) textarea:focus {
    background-color: var(--tv-ctrl-bg-active);
    border-color: var(--tv-ctrl-border-focus);
    box-shadow: var(--tv-ctrl-ring);
    outline: none;
}

body:not(.wp-admin) input::placeholder,
body:not(.wp-admin) textarea::placeholder {
    color: var(--tv-ctrl-placeholder);
    opacity: 1;
    -webkit-text-fill-color: var(--tv-ctrl-placeholder);
}

body:not(.wp-admin) input[disabled],
body:not(.wp-admin) select[disabled],
body:not(.wp-admin) textarea[disabled] {
    background-color: var(--tv-ctrl-bg-disabled);
    color: var(--tv-ctrl-text-muted);
    cursor: not-allowed;
}

/* Native <select> options: browsers paint these with OS chrome, but most
   modern browsers honor `background-color` + `color` on the option element. */
body:not(.wp-admin) select option {
    background-color: var(--tv-pop-bg);
    color: var(--tv-ctrl-text);
}

/* Number input spinners + date picker indicators */
body:not(.wp-admin) input[type="number"]::-webkit-inner-spin-button,
body:not(.wp-admin) input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1) brightness(0.85);
}

body:not(.wp-admin) input[type="date"]::-webkit-calendar-picker-indicator,
body:not(.wp-admin) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body:not(.wp-admin) input[type="time"]::-webkit-calendar-picker-indicator,
body:not(.wp-admin) input[type="month"]::-webkit-calendar-picker-indicator,
body:not(.wp-admin) input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.85);
    cursor: pointer;
}

/* Password show/hide eye (theme ui.js + Woo + Dokan) */
body:not(.wp-admin) .tv-password-toggle {
    color: var(--tv-ctrl-text-muted) !important;
}

body:not(.wp-admin) .tv-password-toggle:hover,
body:not(.wp-admin) .tv-password-toggle:focus-visible {
    color: var(--red, #C8102E) !important;
}

body:not(.wp-admin) .show-password-input,
body:not(.wp-admin) button.show-password-input,
body:not(.wp-admin) .password-input .show-password-input {
    background: transparent !important;
    color: var(--tv-ctrl-text-muted) !important;
    border: none !important;
    padding: 0 8px !important;
    height: auto !important;
    box-shadow: none !important;
}

body:not(.wp-admin) .show-password-input:hover {
    color: var(--red, #C8102E) !important;
}

body:not(.wp-admin) .show-password-input::after,
body:not(.wp-admin) .show-password-input.display-password::after {
    filter: invert(1) brightness(0.9);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 2  WOOCOMMERCE SHORTCODE / LEGACY FORMS
   ─────────────────────────────────────────────────────────────────────────
   Classic .woocommerce wrappers (form-row, input-text, woocommerce-Input, etc.)
   Used by My Account, Lost Password, classic checkout shortcode and some
   Dokan templates that haven’t migrated to blocks yet.
   ─────────────────────────────────────────────────────────────────────── */
.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,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce-Input,
.woocommerce-Input.input-text {
    background-color: var(--tv-ctrl-bg) !important;
    color: var(--tv-ctrl-text) !important;
    border: 1px solid var(--tv-ctrl-border) !important;
    border-radius: var(--tv-ctrl-radius) !important;
    box-shadow: none !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input.input-text:focus,
.woocommerce-Input:focus {
    border-color: var(--tv-ctrl-border-focus) !important;
    box-shadow: var(--tv-ctrl-ring) !important;
    outline: none !important;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce-form-row label {
    color: var(--tv-ctrl-text) !important;
}

.woocommerce form .form-row .required {
    color: var(--red, #C8102E) !important;
    text-decoration: none !important;
}

.woocommerce form .form-row .description,
.woocommerce form .form-row em,
.woocommerce form .form-row small {
    color: var(--tv-ctrl-text-muted) !important;
}

/* My Account inline edit-account / password-change fieldset */
.woocommerce-EditAccountForm fieldset,
.woocommerce-EditAccountForm legend,
.woocommerce-account .woocommerce-MyAccount-content fieldset,
.woocommerce-account .woocommerce-MyAccount-content legend {
    color: var(--tv-ctrl-text) !important;
    border-color: var(--tv-ctrl-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 3  WOOCOMMERCE BLOCKS (Cart & Checkout block-based)
   ─────────────────────────────────────────────────────────────────────────
   WC ≥ 8 renders Cart/Checkout as React components. Class inventory taken
   from /assets/client/blocks/wc-cart-checkout-base-frontend.js:
     wc-block-components-text-input               — every text field wrapper
     wc-block-components-text-input__wrapper
     wc-block-components-select-input             — legacy select wrapper
     wc-block-components-country-input            — country picker
     wc-block-components-state-input              — state picker
     wc-blocks-components-select                  — WC ≥ 9 select (note extra "s")
     wc-blocks-components-select__container       — white box unless themed
     wc-blocks-components-select__select          — native <select>
     wc-blocks-components-select__label           — floating label
     wc-blocks-components-select__expand          — chevron icon
     wc-block-components-address-form             — billing/shipping section
     wc-block-components-address-form-wrapper
     wc-block-components-address-form__password
     wc-block-components-checkout-step            — step wrapper
     wc-block-components-button                   — primary/secondary buttons
     wc-block-components-totals-coupon            — coupon row
     wc-block-components-form
   Older class names (kept as aliases): combobox, select-control.
   ─────────────────────────────────────────────────────────────────────── */

/* CSS variables WC Blocks consume internally — re-theme at the source */
.wc-block-checkout,
.wc-block-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
    --wc-block-components-combobox-background-color: var(--tv-ctrl-bg);
    --wc-block-components-select-control-background-color: var(--tv-ctrl-bg);
    --wc-block-components-input-background-color: var(--tv-ctrl-bg);
    --wc-block-components-text-input-background-color: var(--tv-ctrl-bg);
    --wc-block-color-link: var(--red, #C8102E);
}

/* 3.1 — Text inputs */
.wc-block-components-text-input,
.wc-block-components-text-input__wrapper,
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"] {
    background-color: var(--tv-ctrl-bg) !important;
    color: var(--tv-ctrl-text) !important;
    border-color: var(--tv-ctrl-border) !important;
    border-radius: var(--tv-ctrl-radius) !important;
    box-shadow: none !important;
}

.wc-block-components-text-input input:focus {
    border-color: var(--tv-ctrl-border-focus) !important;
    box-shadow: var(--tv-ctrl-ring) !important;
    outline: none !important;
}

/* The floating label that doubles as a placeholder */
.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label {
    color: var(--tv-ctrl-placeholder) !important;
}

/* 3.2 — Select inputs (country, state, generic select) */
.wc-block-components-select-input,
.wc-block-components-country-input,
.wc-block-components-state-input {
    background-color: var(--tv-ctrl-bg) !important;
    color: var(--tv-ctrl-text) !important;
    border: 1px solid var(--tv-ctrl-border) !important;
    border-radius: var(--tv-ctrl-radius) !important;
    box-shadow: none !important;
}

.wc-block-components-select-input select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tv-ctrl-text) !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.wc-block-components-select-input label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
    color: var(--tv-ctrl-placeholder) !important;
}

.wc-block-components-select-input.is-active label,
.wc-block-components-country-input.is-active label,
.wc-block-components-state-input.is-active label {
    color: var(--tv-ctrl-text-muted) !important;
}

/* Caret/chevron SVGs inside the select wrappers */
.wc-block-components-select-input svg,
.wc-block-components-country-input svg,
.wc-block-components-state-input svg {
    fill: var(--tv-ctrl-text-muted) !important;
}

.wc-block-components-select-input select option,
.wc-block-components-country-input select option,
.wc-block-components-state-input select option {
    background-color: var(--tv-pop-bg) !important;
    color: var(--tv-ctrl-text) !important;
}

/* 3.2b — WC ≥ 9 country/state select (new BEM: wc-blocks-components-select*)
   checkout.css hard-codes `.wc-blocks-components-select__container { background:#fff }`.
   WC only flips it when `.has-dark-controls` is on an ancestor (we add that on body
   in functions.php). These rules align the new markup with our text-input tokens. */
.wc-blocks-components-select .wc-blocks-components-select__container {
    background-color: var(--tv-ctrl-bg) !important;
    background: var(--tv-ctrl-bg) !important;
    color: var(--tv-ctrl-text) !important;
    border-radius: var(--tv-ctrl-radius) !important;
}

.wc-blocks-components-select .wc-blocks-components-select__select {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tv-ctrl-text) !important;
    border-color: var(--tv-ctrl-border) !important;
    border-radius: var(--tv-ctrl-radius) !important;
}

.wc-blocks-components-select .wc-blocks-components-select__select:focus {
    border-color: var(--tv-ctrl-border-focus) !important;
    box-shadow: var(--tv-ctrl-ring) !important;
    outline: none !important;
}

.wc-blocks-components-select .wc-blocks-components-select__label {
    color: var(--tv-ctrl-placeholder) !important;
}

.wc-blocks-components-select .wc-blocks-components-select__expand {
    fill: var(--tv-ctrl-text-muted) !important;
}

.wc-blocks-components-select .wc-blocks-components-select__select option {
    background-color: var(--tv-pop-bg) !important;
    color: var(--tv-ctrl-text) !important;
}

/* Country/state wrappers still carry the legacy class on the outer div */
.wc-block-components-country-input .wc-blocks-components-select__container,
.wc-block-components-state-input .wc-blocks-components-select__container,
.wc-block-components-select-input .wc-blocks-components-select__container {
    background-color: var(--tv-ctrl-bg) !important;
    background: var(--tv-ctrl-bg) !important;
}

/* 3.3 — Legacy combobox names (kept for older WC builds + plugins that still emit them) */
.wc-block-components-combobox,
.wc-block-components-combobox-control,
.wc-block-components-combobox__input,
.wc-block-components-combobox__input-wrapper,
.wc-block-components-select-control,
.wc-block-components-select-control__input,
.wc-block-components-select-control__input-wrapper,
.wc-block-components-select-control select,
.wc-block-components-form-field {
    background-color: var(--tv-ctrl-bg) !important;
    color: var(--tv-ctrl-text) !important;
    border: 1px solid var(--tv-ctrl-border) !important;
    border-radius: var(--tv-ctrl-radius) !important;
}

.wc-block-components-combobox__menu,
.wc-block-components-combobox__menu-container {
    background-color: var(--tv-pop-bg) !important;
    color: var(--tv-ctrl-text) !important;
    border: 1px solid var(--tv-pop-border) !important;
    box-shadow: var(--tv-pop-shadow) !important;
    z-index: 9999 !important;
}

.wc-block-components-combobox__option {
    background-color: transparent !important;
    color: var(--tv-ctrl-text) !important;
}

.wc-block-components-combobox__option:hover,
.wc-block-components-combobox__option--is-focused {
    background-color: var(--tv-pop-active-bg) !important;
    color: var(--tv-pop-active-text) !important;
}

.wc-block-components-combobox__option[aria-selected="true"],
.wc-block-components-combobox__option--is-selected {
    background-color: rgba(200, 16, 46, 0.2) !important;
    color: var(--tv-ctrl-text) !important;
}

/* 3.4 — Buttons inside checkout (so they don’t inherit the inputs treatment) */
.wc-block-components-button {
    border-radius: var(--tv-ctrl-radius) !important;
}

.wc-block-components-button.is-primary,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
    background-color: var(--red, #C8102E) !important;
    color: #ffffff !important;
    border: 1px solid var(--red, #C8102E) !important;
}

.wc-block-components-button.is-primary:hover {
    background-color: var(--red-h, #A50C24) !important;
    border-color: var(--red-h, #A50C24) !important;
}

/* 3.5 — Checkout step chrome */
.wc-block-components-checkout-step {
    background: transparent !important;
    color: var(--tv-ctrl-text) !important;
}

.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading-content {
    color: var(--tv-ctrl-text) !important;
}

.wc-block-components-checkout-step__description {
    color: var(--tv-ctrl-text-muted) !important;
}

/* 3.6 — Coupon row */
.wc-block-components-totals-coupon,
.wc-block-components-totals-coupon__input-wrapper input {
    background-color: var(--tv-ctrl-bg) !important;
    color: var(--tv-ctrl-text) !important;
    border-color: var(--tv-ctrl-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 4  SELECT2  (sitewide — WooCommerce + Dokan front-end + checkout-block-fallback)
   ─────────────────────────────────────────────────────────────────────────
   WooCommerce loads Select2 (re-branded as “SelectWoo”) on:
     • Classic checkout shortcode (country, state)
     • My Account → Addresses
     • Dokan product editor (categories, tags, brand attribute)
     • Dokan vendor settings (multi-select)
   The dropdown panel portals into <body>, so it is NOT inside any scope class.
   These rules therefore have to be global; scoping them to vendor pages broke
   them on checkout/account.
   ─────────────────────────────────────────────────────────────────────── */

/* Selection box (closed state) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container .select2-selection {
    background-color: var(--tv-ctrl-bg) !important;
    color: var(--tv-ctrl-text) !important;
    border: 1px solid var(--tv-ctrl-border) !important;
    border-radius: var(--tv-ctrl-radius-sm) !important;
    min-height: 40px !important;
    box-shadow: none !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--tv-ctrl-border-focus) !important;
    box-shadow: var(--tv-ctrl-ring) !important;
}

/* Rendered value text inside the closed pill */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--tv-ctrl-text) !important;
    line-height: 38px !important;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--tv-ctrl-placeholder) !important;
}

/* Arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--tv-ctrl-text) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--tv-ctrl-text) transparent !important;
}

/* Selected chips inside a multi-select */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--tv-ctrl-border) !important;
    color: var(--tv-ctrl-text) !important;
    border-radius: 4px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--tv-ctrl-text-muted) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--red, #C8102E) !important;
}

/* Dropdown panel (portaled to <body> — selectors must NOT be scoped) */
.select2-dropdown,
.select2-container--default .select2-dropdown,
.select2-container--default .select2-dropdown--above,
.select2-container--default .select2-dropdown--below {
    background-color: var(--tv-pop-bg) !important;
    border: 1px solid var(--tv-pop-border) !important;
    color: var(--tv-ctrl-text) !important;
    box-shadow: var(--tv-pop-shadow) !important;
    z-index: 9999 !important;
}

/* Search input inside dropdown */
.select2-dropdown .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field {
    background-color: var(--tv-ctrl-bg) !important;
    border: 1px solid var(--tv-ctrl-border) !important;
    color: var(--tv-ctrl-text) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.select2-dropdown .select2-search__field::placeholder {
    color: var(--tv-ctrl-placeholder) !important;
}

/* Results list */
.select2-dropdown .select2-results__option,
.select2-container--default .select2-results__option {
    color: var(--tv-ctrl-text) !important;
    background-color: transparent !important;
}

.select2-dropdown .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tv-pop-active-bg) !important;
    color: var(--tv-pop-active-text) !important;
}

.select2-dropdown .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(200, 16, 46, 0.18) !important;
    color: var(--tv-ctrl-text) !important;
}

.select2-dropdown .select2-results__message,
.select2-container--default .select2-results__message {
    color: var(--tv-ctrl-text-muted) !important;
}

/* Loading state */
.select2-container--default .select2-results__option.loading-results {
    color: var(--tv-ctrl-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 5  TOMSELECT  (occasionally used in front-end search widgets)
   ─────────────────────────────────────────────────────────────────────────
   Dokan vue-admin uses TomSelect, but that is wp-admin only. We include front-end
   defaults here for any third-party plugin that ships it. Cheap insurance — only
   matches if the markup is actually present.
   ─────────────────────────────────────────────────────────────────────── */
.ts-wrapper .ts-control {
    background-color: var(--tv-ctrl-bg) !important;
    border: 1px solid var(--tv-ctrl-border) !important;
    color: var(--tv-ctrl-text) !important;
    border-radius: var(--tv-ctrl-radius-sm) !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--tv-ctrl-border-focus) !important;
    box-shadow: var(--tv-ctrl-ring) !important;
}

.ts-wrapper input::placeholder {
    color: var(--tv-ctrl-placeholder) !important;
}

.ts-dropdown {
    background-color: var(--tv-pop-bg) !important;
    border: 1px solid var(--tv-pop-border) !important;
    color: var(--tv-ctrl-text) !important;
    box-shadow: var(--tv-pop-shadow) !important;
}

.ts-dropdown .option {
    color: var(--tv-ctrl-text) !important;
    background-color: transparent !important;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: var(--tv-pop-active-bg) !important;
    color: var(--tv-pop-active-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 6  GUTENBERG / @wordpress/components POPOVERS (sitewide)
   ─────────────────────────────────────────────────────────────────────────
   Used by WC Admin, Dokan SPA, and any modern block-editor-style UI. Popovers
   portal into the <body> root, so scope must be global.
   ─────────────────────────────────────────────────────────────────────── */
.components-popover,
.components-popover__content,
.components-dropdown,
.components-dropdown__content,
.components-menu-group,
.components-menu-items-choice {
    background-color: var(--tv-pop-bg) !important;
    color: var(--tv-ctrl-text) !important;
    border: 1px solid var(--tv-pop-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--tv-pop-shadow) !important;
}

.components-popover *,
.components-popover__content *,
.components-dropdown__content *,
.components-menu-group * {
    color: var(--tv-ctrl-text);
}

.components-menu-item__button {
    color: var(--tv-ctrl-text) !important;
}

.components-menu-item__button:hover {
    background-color: var(--tv-pop-hover-bg) !important;
    color: var(--tv-ctrl-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 7  PRINT-FRIENDLY DEFAULTS — defeat any accidental light overrides
   ─────────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
    /* Respect OS-level high-contrast mode; user’s OS wins, not us */
    .select2-dropdown,
    .components-popover {
        forced-color-adjust: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 8  PRODUCT REVIEWS
   ───────────────────────────────────────────────────────────────────────── */
#reviews #comments h2 {
    color: var(--tv-ctrl-text);
    font-family: var(--head);
    font-weight: 800;
}

#reviews .commentlist {
    padding: 0;
    list-style: none;
}

#reviews .commentlist li {
    background: var(--tv-pop-bg) !important;
    border: 1px solid var(--tv-ctrl-border) !important;
    border-radius: var(--tv-ctrl-radius) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

#reviews .commentlist li .meta {
    color: var(--tv-ctrl-text-muted) !important;
}

#reviews .commentlist li .description {
    color: var(--tv-ctrl-text) !important;
}

#review_form_wrapper {
    background: var(--tv-pop-bg) !important;
    border: 1px solid var(--tv-ctrl-border) !important;
    border-radius: var(--tv-ctrl-radius) !important;
    padding: 25px !important;
}

#review_form_wrapper .comment-reply-title {
    color: var(--tv-ctrl-text) !important;
    font-family: var(--head);
    font-weight: 700;
}

#review_form_wrapper .comment-notes {
    color: var(--tv-ctrl-text-muted) !important;
}

#review_form_wrapper label {
    color: var(--tv-ctrl-text) !important;
}

#review_form_wrapper .stars a {
    color: var(--tv-ctrl-text-muted) !important;
}

#review_form_wrapper .stars a::before {
    color: #f59e0b !important; /* Warning / Gold */
}

#review_form_wrapper .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

#review_form_wrapper .comment-form-cookies-consent label {
    margin: 0 !important;
    font-weight: 400 !important;
    color: var(--tv-ctrl-text-muted) !important;
    font-size: 0.85rem !important;
}

#review_form_wrapper .form-submit input[type="submit"] {
    background-color: var(--red, #C8102E) !important;
    color: #ffffff !important;
    border-radius: 99px !important;
    padding: 10px 30px !important;
    font-family: var(--head);
    font-weight: 800;
    text-transform: uppercase;
    border: none !important;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#review_form_wrapper .form-submit input[type="submit"]:hover {
    transform: translateY(-2px);
    background-color: var(--red-h, #A50C24) !important;
}