/* VibeSlash — Woo form fields dark cathedral (Bach, 2026-10-05).
 * Stock Woo 10.x paints `.woocommerce form .form-row .input-text` #fff / #000 on the black
 * cathedral while the select2 Country/State already use the jivatma form family
 * (#121212 fill, #fff text, 2px solid #fff, radius 0). This patch pulls every checkout /
 * cart / account text field, textarea and native select into that same family, darkens the
 * light #dcd7e2 payment box + #f7f7f7 checkout coupon form, and un-clips the cart coupon.
 * Auto-enqueued by functions.php patch glob (no functions.php edit). Select2 untouched. Soft follow-up: text/qty/coupon inputs height-matched to select2 (72px).
 */

/* Feed Woo's own form tokens from the theme family (covers anything we don't list). */
.woocommerce,
.woocommerce-page {
  --wc-form-color-background: var(--jivatma--form-background-color, #121212);
  --wc-form-color-text: var(--jivatma--form-text-color, #fff);
  --wc-form-border-color: var(--jivatma--form-border-color, #fff);
  --wc-form-border-width: var(--jivatma--form-border-width, 2px);
  --wc-form-border-radius: var(--jivatma--form-border-radius, 0);
}

/* 1 + 2. Text inputs, textarea, native selects — same family as select2 Country. */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .input-text,
.woocommerce form textarea.input-text,
.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout_coupon .input-text,
.woocommerce-checkout #payment input.input-text,
.woocommerce-checkout #payment .phone-input,
.woocommerce-cart .woocommerce-cart-form .input-text,
.woocommerce-cart .woocommerce-cart-form input.qty,
.woocommerce-cart .woocommerce-cart-form #coupon_code,
.woocommerce .quantity input.qty {
  background-color: var(--jivatma--form-background-color, #121212) !important;
  background-image: none !important;
  color: var(--jivatma--form-text-color, #fff) !important;
  border-style: solid !important;
  border-width: var(--jivatma--form-border-width, 2px) !important;
  border-color: var(--jivatma--form-border-color, #fff) !important;
  border-radius: var(--jivatma--form-border-radius, 0) !important;
  box-shadow: none !important;
  color-scheme: dark; /* native number spinners / pickers render dark, not white */
}

/* Text fields get the theme padding so they sit like the select2 field.
 * (WooPay phone keeps its inline padding-left for the +1 dial-code flag.) */
.woocommerce form .form-row .input-text:not(.phone-input),
.woocommerce form .form-row textarea,
.woocommerce-checkout form.checkout_coupon .input-text {
  padding: var(--jivatma--form-padding-top, 0.8rem) var(--jivatma--form-padding-right, 1rem)
           var(--jivatma--form-padding-bottom, 0.8rem) var(--jivatma--form-padding-left, 1rem) !important;
  line-height: 1.4 !important;
}

/* Placeholders: muted bone so hints don't read as typed values. */
.woocommerce form .input-text::placeholder,
.woocommerce form textarea::placeholder,
.woocommerce-cart .woocommerce-cart-form #coupon_code::placeholder,
.woocommerce-checkout #payment .phone-input::placeholder {
  color: rgba(232, 220, 200, 0.6) !important;
  opacity: 1;
}

/* Focus: purple tip (patch 15 family). */
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .input-text:focus,
.woocommerce .quantity input.qty:focus,
.woocommerce-cart .woocommerce-cart-form #coupon_code:focus,
.woocommerce-checkout #payment .phone-input:focus {
  background-color: var(--jivatma--form-background-color, #121212) !important;
  color: var(--jivatma--form-text-color, #fff) !important;
  border-color: #9b5cff !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(155, 92, 255, 0.45) !important;
}

/* Keep Woo validation legible on dark. */
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection {
  border-color: #ff5c7a !important;
}
.woocommerce form .form-row.woocommerce-validated .input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: var(--jivatma--form-border-color, #fff) !important;
}

/* Chrome autofill: no pale-blue slab. */
.woocommerce form .input-text:-webkit-autofill,
.woocommerce form .input-text:-webkit-autofill:hover,
.woocommerce form .input-text:-webkit-autofill:focus,
.woocommerce form select:-webkit-autofill {
  -webkit-text-fill-color: var(--jivatma--form-text-color, #fff) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--jivatma--form-background-color, #121212) inset !important;
  caret-color: var(--jivatma--form-text-color, #fff);
  transition: background-color 9999s ease-out 0s;
}

/* 3. Payment box (stock #dcd7e2 / #515151) → dark panel, bone type, purple hairline. */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
#add_payment_method #payment div.payment_box {
  background-color: #12131a !important;
  color: #e8dcc8 !important;
  border: 1px solid rgba(155, 92, 255, 0.35);
  border-radius: 4px;
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
#add_payment_method #payment div.payment_box::before {
  border-color: #12131a !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
}
.woocommerce-checkout #payment div.payment_box p,
.woocommerce-checkout #payment div.payment_box .testmode-info,
.woocommerce-checkout #payment div.payment_box span.help {
  color: #e8dcc8 !important;
}
.woocommerce-checkout #payment div.payment_box a {
  color: #b47cff !important;
}
.woocommerce-checkout #payment div.payment_box .js-woopayments-copy-test-number {
  background: transparent !important;
  color: #e8dcc8 !important;
  border: 0 !important;
}

/* WooPay save-info phone: dial code + arrow legible on dark. */
.woocommerce-checkout #payment .iti__selected-dial-code {
  color: #e8dcc8 !important;
}
.woocommerce-checkout #payment .iti__arrow {
  border-top-color: #e8dcc8 !important;
}
.woocommerce-checkout #payment .iti__arrow--up {
  border-bottom-color: #e8dcc8 !important;
}

/* Checkout "Have a coupon?" reveal form: wpkoi paints #f7f7f7. */
.woocommerce-page form.checkout_coupon,
.woocommerce form.checkout_coupon {
  background: #12131a !important;
  color: #e8dcc8 !important;
  border: 1px solid rgba(155, 92, 255, 0.35) !important;
  border-radius: 4px;
}

/* 4. Cart coupon: stock 80px width clipped the placeholder to "Coup". */
.woocommerce-cart .woocommerce-cart-form td.actions .coupon #coupon_code,
.woocommerce-page .woocommerce-cart-form #coupon_code {
  width: 13em !important;
  min-width: 13em !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-overflow: clip;
  overflow: visible;
}
.woocommerce-cart .woocommerce-cart-form td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5em;
}
.woocommerce-cart .woocommerce-cart-form td.actions .coupon .button {
  margin: 0 !important;
}
@media (max-width: 768px) {
  .woocommerce-cart .woocommerce-cart-form td.actions .coupon #coupon_code,
  .woocommerce-page .woocommerce-cart-form #coupon_code {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 1 1 100%;
  }
  .woocommerce-cart .woocommerce-cart-form td.actions .coupon .button {
    flex: 1 1 100%;
    width: 100% !important;
  }
}

/* Cart qty: keep width readable with the dark spinner. */
.woocommerce .quantity input.qty {
  min-width: 4.5em;
  text-align: center;
}


/* 5. Soft follow-up (Ludwig): unify text input height to Country/State select2 (72px).
 * Keep fill / text / border / radius from §1. Do NOT restyle select2 or Stripe iframes. */
.woocommerce form .form-row .input-text:not(textarea),
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .input-text:not(textarea),
.woocommerce-checkout form.checkout .input-text:not(textarea),
.woocommerce-checkout form.checkout_coupon .input-text,
.woocommerce-checkout #payment input.input-text,
.woocommerce-checkout #payment .phone-input,
.woocommerce-cart .woocommerce-cart-form .input-text:not(textarea),
.woocommerce-cart .woocommerce-cart-form input.qty,
.woocommerce-cart .woocommerce-cart-form #coupon_code,
.woocommerce .quantity input.qty {
  height: 72px !important;
  min-height: 72px !important;
  box-sizing: border-box !important;
}

/* Textareas: floor at select2 height; leave them free to grow for order notes. */
.woocommerce form .form-row textarea,
.woocommerce form textarea.input-text,
.woocommerce-checkout form.checkout textarea.input-text {
  min-height: 72px !important;
  box-sizing: border-box !important;
}