/**
 * Brand styling for WooCommerce's native checkout / order-pay / order-received pages.
 * The /checkout/ page renders the classic [woocommerce_checkout] (one page, inline Stripe
 * Payment Element) via tc-wc-checkout.php. This maps WooCommerce's default markup onto the
 * TintingClass prototype design language — pulled from the prototype's own CSS:
 *   .reg-input  → bg rgba(255,255,255,.05), 1.5px border, 10px radius, 12px 14px pad, white
 *   .reg-label  → 11px, 700, uppercase, 0.12em tracking, rgba(255,255,255,.7)
 *   .btn-red    → #a70000 gradient + inset highlights + red glow shadow
 * Scoped to the WC page body classes so it never leaks onto the prototype pages.
 */

/* ---- Page shell + hero (matches the prototype's big "CHECKOUT" heading) ---- */
.tc-wc-checkout {
  background: #000;
  color: #fff;
  min-height: 70vh;
  padding: 2.5rem 1.25rem 4.5rem;
}
.tc-wc-checkout__inner {
  max-width: 1140px;
  margin: 0 auto;
}
.tc-wc-checkout__eyebrow {
  color: #e60000;
  font-family: "Oswald", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}
.tc-wc-checkout__title {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 2.25rem;
  color: #fff;
  text-transform: uppercase;
}

/* ---- Readable text everywhere on the WC checkout-family pages ---- */
body.woocommerce-checkout, body.woocommerce-order-pay, body.woocommerce-order-received { background: #000; }
body.woocommerce-checkout .tc-main,
body.woocommerce-order-pay .tc-main,
body.woocommerce-order-received .tc-main { color: #fff; }
body.woocommerce-checkout h1, body.woocommerce-checkout h2, body.woocommerce-checkout h3,
body.woocommerce-order-pay h1, body.woocommerce-order-pay h2, body.woocommerce-order-pay h3,
body.woocommerce-order-received h1, body.woocommerce-order-received h2, body.woocommerce-order-received h3 {
  color: #fff;
  font-family: "Oswald", sans-serif;
}
body.woocommerce-checkout p, body.woocommerce-checkout li, body.woocommerce-checkout legend,
body.woocommerce-checkout td, body.woocommerce-checkout th,
body.woocommerce-order-pay p, body.woocommerce-order-pay li, body.woocommerce-order-pay td, body.woocommerce-order-pay th,
body.woocommerce-order-received p, body.woocommerce-order-received li,
body.woocommerce-order-received td, body.woocommerce-order-received th { color: #fff; }
/* Links match the rest of the site: white by default, brand red on hover/active —
   NOT a blanket red. (Links inside the light Stripe card panel are handled below.) */
body.woocommerce-checkout a:not(.button):not(#place_order),
body.woocommerce-order-pay a:not(.button):not(#place_order),
body.woocommerce-order-received a:not(.button) { color: #fff; transition: color 0.15s ease; }
body.woocommerce-checkout a:not(.button):not(#place_order):hover,
body.woocommerce-checkout a:not(.button):not(#place_order):focus,
body.woocommerce-order-pay a:not(.button):not(#place_order):hover,
body.woocommerce-order-received a:not(.button):hover { color: #e60000; }

/* ---- Section headings ("Billing details", "Additional information", "Your order") ---- */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: #fff;
}

/* ---- Two-column layout (billing left, order review + payment right) ----
   Float-based (like WooCommerce's native layout) rather than CSS grid: grid was
   distributing the tall billing column's extra height into the right column's rows,
   leaving big empty gaps below "Your order" and below Place Order. Floats size to content. */
.woocommerce-checkout form.checkout.woocommerce-checkout { display: block; }
.woocommerce-checkout form.checkout.woocommerce-checkout::after { content: ""; display: block; clear: both; }
@media (min-width: 769px) {
  .woocommerce-checkout #customer_details { float: left; width: 56%; }
  .woocommerce-checkout #order_review_heading { float: right; width: 40%; clear: right; margin-top: 0; }
  .woocommerce-checkout #order_review { float: right; width: 40%; clear: right; }
}
/* Stack billing + "Additional information" (order notes) vertically in the LEFT column,
   instead of WooCommerce's default side-by-side col-1 / col-2. (#customer_details itself
   carries the .col2-set class, so the cols are its direct children.) */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #customer_details .woocommerce-additional-fields,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 0 1.5rem !important;
}

/* ---- Form rows + fields = prototype .reg-label / .reg-input ---- */
.woocommerce-checkout .form-row { margin: 0 0 1rem; padding: 0; }
.woocommerce-checkout .form-row label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}
.woocommerce-checkout .required { color: #a70000; border: 0; }
.woocommerce-checkout .optional { color: rgba(255, 255, 255, 0.4); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 16px;          /* prevents iOS auto-zoom; >=16 */
  line-height: 1.3;
  padding: 12px 14px;
  min-height: 46px;
  font-family: inherit;
  transition: all 0.2s;
}
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: #a70000;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(167, 0, 0, 0.25);
}
/* Select2 (country / state dropdowns) */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 46px;
  display: flex;
  align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; padding-left: 0; }
.woocommerce-checkout .select2-dropdown { background: #161616; color: #fff; border-color: rgba(255,255,255,0.15); }
.woocommerce-checkout .select2-results__option--highlighted { background: #a70000; }

/* ---- Coupon row ---- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: rgba(255, 255, 255, 0.03);
  border-top: 3px solid #a70000;
  border-radius: 10px;
  color: #fff;
}
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1.25rem;
}

/* ---- "Your order" card panel (matches the prototype's bordered order card) ---- */
.woocommerce-checkout #order_review {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
}
.woocommerce-checkout table.shop_table { border: 0; border-collapse: collapse; width: 100%; }
.woocommerce-checkout table.shop_table thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 0 0.75rem;
}
.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table th {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.85rem 0;
  color: #fff;
}
.woocommerce-checkout table.shop_table .product-name { font-weight: 600; }
.woocommerce-checkout table.shop_table .cart-subtotal th,
.woocommerce-checkout table.shop_table .cart-subtotal td { color: rgba(255, 255, 255, 0.8); font-weight: 500; }
.woocommerce-checkout table.shop_table .order-total th { color: #fff; font-family: "Oswald", sans-serif; font-size: 1.05rem; }
.woocommerce-checkout table.shop_table .order-total td,
.woocommerce-checkout table.shop_table .order-total .woocommerce-Price-amount {
  color: #e60000;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
}

/* ---- Payment methods: styled like the prototype's option cards ----
   (The card fields themselves render inside Stripe's cross-origin iframe and are themed by
   the gateway from the page — we style the WooCommerce chrome around them.) */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.wc_payment_methods { background: transparent; border: 0; padding: 0; margin: 0; }
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
  list-style: none;
  margin: 0 0 0.6rem;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
/* Highlight the selected method (modern :has — graceful fallback to the plain border). */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  border-color: #a70000;
  background: rgba(167, 0, 0, 0.06);
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0.95rem 0.6rem 0.95rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: transparent;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"]:checked { border-color: #a70000; }
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #a70000;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label {
  display: inline-block;
  vertical-align: middle;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.9rem 1rem 0.9rem 0;
  margin: 0;
  cursor: pointer;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label img {
  height: 22px;
  width: auto;
  vertical-align: middle;
  margin: 0 0 0 8px;
  display: inline-block;
}
/* The Stripe card panel — a clean, intentional white "payment card" on the dark page. */
.woocommerce-checkout #payment .payment_box {
  background: #fff;
  color: #30313d;
  border-radius: 0;
  margin: 0;
  padding: 1.1rem 1rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #payment .payment_box * { color: #30313d; }
.woocommerce-checkout #payment .payment_box::before { display: none; } /* drop WC's little arrow */

/* ---- Place Order / Pay button = prototype .btn-red ---- */
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
.woocommerce-order-pay #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  background: linear-gradient(180deg, #a70000 0%, #a70000 100%);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 1.25rem;
  min-height: 52px;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 10px 28px -6px rgba(167, 0, 0, 0.55),
    0 4px 12px -2px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: linear-gradient(180deg, #c80000 0%, #b80000 100%);
}

/* ---- Notices ---- */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-order-received .woocommerce-info,
.woocommerce-order-received .woocommerce-message {
  background: rgba(167, 0, 0, 0.12);
  border-top: 3px solid #a70000;
  border-radius: 10px;
  color: #fff;
}
.woocommerce-checkout .woocommerce-error { background: rgba(167, 0, 0, 0.18); border-top: 3px solid #e60000; border-radius: 10px; color: #fff; }
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a { color: #fff; }
.woocommerce-checkout .woocommerce-info a:hover,
.woocommerce-checkout .woocommerce-message a:hover { color: #e60000; }
/* Links inside the light Stripe card panel must stay dark, not white-on-white. */
.woocommerce-checkout #payment .payment_box a { color: #30313d !important; }

/* ---- Order received (thank-you) ---- */
.woocommerce-order-received .woocommerce-order .order_details,
.woocommerce-order-received .woocommerce-order .order_details li { color: #fff; }

/* ---- Pin the brand color hierarchy so nothing flattens it to plain white
   (STM's injected #273044, or the broad readability rules above) ---- */
.tc-wc-checkout .tc-wc-checkout__eyebrow { color: #e60000 !important; }
.tc-wc-checkout .tc-wc-checkout__title { color: #fff !important; }
body.woocommerce-checkout .form-row label { color: rgba(255, 255, 255, 0.7) !important; }
body.woocommerce-checkout .form-row .optional { color: rgba(255, 255, 255, 0.4) !important; }
body.woocommerce-checkout #order_review .cart-subtotal th,
body.woocommerce-checkout #order_review .cart-subtotal td,
body.woocommerce-checkout #order_review .product-name .quantity { color: rgba(255, 255, 255, 0.7) !important; }
body.woocommerce-checkout #order_review .order-total .woocommerce-Price-amount { color: #e60000 !important; }