/**
 * Dark template overrides for Storefront parent theme.
 *
 * Loaded conditionally on dark-themed pages to override Storefront's
 * inline customizer styles. All rules use !important because they must
 * beat Storefront's own inline !important declarations.
 */

/* Reset Storefront table backgrounds */
table th,
table td,
table tbody td,
table tbody tr:nth-child(2n) td {
  background-color: transparent !important;
}

/* Reset Storefront input/form backgrounds */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select,
.input-text,
.select2-container .select2-selection,
.select2-container .select2-selection__rendered {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Select2 dropdown results panel */
.select2-dropdown,
.select2-results__option {
  background-color: var(--bg1) !important;
  color: var(--text) !important;
}

.select2-results__option--highlighted,
.select2-results__option:hover {
  background-color: var(--glow-06) !important;
  color: var(--text) !important;
}

.select2-search__field {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Dark color-scheme for native form controls (checkboxes, radios) */
:root { color-scheme: dark; }

/* Force native selects to respect dark background
   (appearance: none needed so browsers honor background-color) */
select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23a2acba%27 d=%27M6 8L1 3h10z%27/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 12px !important;
  padding-right: 2rem !important;
}

/* Firefox: option elements inside styled selects need explicit colors */
select option {
  background-color: var(--bg1) !important;
  color: var(--text) !important;
}

/* Reset Storefront WooCommerce container backgrounds */
#order_review {
  background-color: var(--bg1) !important;
  color: var(--text) !important;
}

#payment {
  background-color: var(--glow-03) !important;
  color: var(--text) !important;
}

#payment .place-order {
  background-color: transparent !important;
}

#payment .payment_methods > li,
#payment .payment_methods > li:hover {
  background-color: transparent !important;
  color: var(--text) !important;
}

#payment .payment_box {
  background-color: var(--glow-04) !important;
  color: var(--muted) !important;
}

#payment .payment_box p {
  color: var(--muted) !important;
}

#payment .payment_box input,
#payment .payment_box select,
#payment .payment_box textarea,
#payment .wc-credit-card-form input,
#payment .wc-credit-card-form select {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

#payment .wc-stripe-elements-field,
#payment .stripe-card-group {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
}

#payment input::placeholder,
#payment textarea::placeholder {
  color: var(--muted) !important;
  opacity: 0.6 !important;
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
}