/*
 * Keeping Vert Dead — cart / checkout / order-confirmation legibility.
 *
 * The site runs a DARK theme (--kvd-bg #111). Cart + Checkout are WooCommerce
 * BLOCK pages and the order-confirmation is the classic thankyou template; none
 * of them were styled for the dark theme, so labels, placeholders, input text,
 * section headings and order-summary text rendered near-invisible (dark on
 * dark, or the Blocks default light-grey on dark).
 *
 * Fix: force HIGH-CONTRAST light text on every text element, and give the form
 * controls a solid dark field background with light text + a visible border, so
 * what you type is clearly readable. Uses the KVD palette.
 *
 * NB: we deliberately do NOT touch .woocommerce-info / .woocommerce-message /
 * .woocommerce-error — those notice banners are intentionally white-with-dark-
 * text (see main.css), so they must keep their own colours.
 *
 * Brighter local tokens (the brand --kvd-text-muted #999 is a bit dim for form
 * labels, so we use lighter greys here).
 */
:root {
  --kvd-co-text: #f0f0f0;        /* primary readable text */
  --kvd-co-label: #d8d8d8;       /* labels / secondary text */
  --kvd-co-placeholder: #aeaeae; /* placeholder text */
  --kvd-co-field-bg: #1e1e1e;    /* input background */
  --kvd-co-border: #555555;      /* input / table border */
}

/* ===========================================================================
 * 1. BLOCK cart + checkout — form controls (inputs, selects, textareas)
 * ======================================================================== */
.wc-block-checkout input:not([type="checkbox"]):not([type="radio"]),
.wc-block-checkout textarea,
.wc-block-checkout select,
.wc-block-cart input:not([type="checkbox"]):not([type="radio"]),
.wc-block-cart select,
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-textarea,
.wc-block-components-select select,
.wc-block-components-select__container,
.wc-block-components-combobox input,
.wc-block-components-combobox-control input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
  background-color: var(--kvd-co-field-bg) !important;
  color: var(--kvd-co-text) !important;
  border-color: var(--kvd-co-border) !important;
}

/* Floating field labels (inside the input frame). */
.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox-control label,
.wc-block-components-checkout-step__description label,
.wc-block-components-form .wc-block-components-text-input label {
  color: var(--kvd-co-label) !important;
}

/* Placeholders. */
.wc-block-checkout input::placeholder,
.wc-block-cart input::placeholder,
.wc-block-components-text-input input::placeholder,
.wc-block-components-textarea::placeholder {
  color: var(--kvd-co-placeholder) !important;
  opacity: 1;
}

/* Combobox / select dropdown option lists. */
.wc-block-components-combobox-control__suggestions-container,
.wc-block-components-form .wc-block-components-combobox-control .components-form-token-field__suggestions-list li {
  background-color: var(--kvd-co-field-bg) !important;
  color: var(--kvd-co-text) !important;
}

/* ===========================================================================
 * 2. BLOCK section headings, step titles, descriptions, labels
 * ======================================================================== */
.wc-block-checkout .wc-block-components-title,
.wc-block-checkout .wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__description,
.wc-block-components-checkbox__label,
.wc-block-components-address-card,
.wc-block-components-address-card *,
.wc-block-checkout__add-note .wc-block-components-textarea,
.wc-block-components-validation-error {
  color: var(--kvd-co-text) !important;
}

/* Radio controls (payment method + shipping option names/descriptions). */
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
  color: var(--kvd-co-text) !important;
}

/* ===========================================================================
 * 3. BLOCK order summary (cart + checkout sidebar)
 * ======================================================================== */
.wc-block-components-order-summary,
.wc-block-components-order-summary__content,
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__total-price,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata *,
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__description,
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-cart__totals-title,
.wc-block-cart-item__product,
.wc-block-cart-item__product-name,
.wc-block-cart-item__prices,
.wc-block-cart-item__quantity,
.wc-block-cart-items__header,
.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
  color: var(--kvd-co-text) !important;
}

/* Quantity stepper text/buttons. */
.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector__input {
  background-color: var(--kvd-co-field-bg) !important;
  color: var(--kvd-co-text) !important;
  border-color: var(--kvd-co-border) !important;
}

/* ===========================================================================
 * 4. CLASSIC order-confirmation (thankyou) page
 * ---------------------------------------------------------------------------
 * The receipt box (order number / date / email / total / payment method) and
 * the order-details + customer-details tables render with a LIGHT background by
 * default (Storefront), which clashes with the dark theme and hid the light
 * text (light-on-light). Invert these boxes to the KVD dark surface with light
 * text and visible borders so they're clearly readable and on-theme. The
 * backgrounds are set explicitly, so it no longer matters what Storefront's
 * default was.
 * ======================================================================== */

/* Box backgrounds -> dark surface. Cover the table AND every row/cell, because
   Storefront paints the th/td (and zebra-striped rows) with their own light
   backgrounds that otherwise show through the container. */
.woocommerce-order ul.woocommerce-order-overview,
.woocommerce-order ul.order_details,
.woocommerce-order .order_details,
.woocommerce-table--order-details,
.woocommerce-table--order-details thead,
.woocommerce-table--order-details tbody,
.woocommerce-table--order-details tfoot,
.woocommerce-table--order-details tr,
.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--order-details tbody tr:nth-child(2n) td,
.woocommerce-table--order-details tbody tr:nth-child(2n) th,
.woocommerce-customer-details,
.woocommerce-customer-details .woocommerce-columns,
.woocommerce-customer-details .col2-set,
.woocommerce-customer-details .col2-set .col-1,
.woocommerce-customer-details .col2-set .col-2,
.woocommerce-customer-details .woocommerce-column,
.woocommerce-customer-details .woocommerce-column--billing-address,
.woocommerce-customer-details .woocommerce-column--shipping-address,
.woocommerce-customer-details .woocommerce-table--customer-details,
.woocommerce-customer-details address {
  background-color: var(--kvd-co-field-bg) !important;
  border-color: var(--kvd-co-border) !important;
}

/* All text inside the receipt + detail + customer boxes -> light. */
.woocommerce-order,
.woocommerce-order p,
.woocommerce-order h1,
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-thankyou-order-received,
.woocommerce-order-overview,
.woocommerce-order-overview li,
.woocommerce-order-overview li strong,
.woocommerce-customer-details,
.woocommerce-customer-details h2,
.woocommerce-customer-details address,
.woocommerce-column__title,
.woocommerce-table--order-details,
.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--order-details td a,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details .product-name a {
  color: var(--kvd-co-text) !important;
  border-color: var(--kvd-co-border) !important;
}

/* <mark> elements (email, total) default to a light highlight — strip it so
   the value reads in the brand accent on the dark box. */
.woocommerce-order mark,
.woocommerce-order-overview mark {
  background: transparent !important;
  color: var(--kvd-accent) !important;
}