/*
Theme Name: Soul Thai Child
Theme URI: https://soulthai.co.za
Description: Child theme for Soul Thai Spa — restyles the WooCommerce cart & checkout to match the revamped site ("The Good Luck Spa"). Near-white base, brand red #ED1F24, Cormorant Garamond + Manrope.
Author: Soul Thai Spa
Template: uncode
Version: 1.4.0
Text Domain: soulthai-child
*/

/* ─────────────────────────────────────────────────────────────
   Design tokens — mirrors app/globals.css (Direction A "Good Luck")
   ───────────────────────────────────────────────────────────── */
:root {
  --st-bg: #fdfbf6;
  --st-bg-soft: #f6f1e4;
  --st-card: #ffffff;
  --st-cream: #f7f1e3;
  --st-ink: #2a271f;
  --st-ink-soft: #6f6653;
  --st-ink-faint: #a2987f;
  --st-brand: #ed1f24;
  --st-brand-deep: #c4151a;
  --st-gold: #b8923e;
  --st-line: #eae2d0;
  --st-font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --st-font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── Base (cart + checkout pages) ─────────────────────────── */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-page,
body.woocommerce-order-received {
  background: var(--st-bg) !important;
  color: var(--st-ink);
  font-family: var(--st-font-sans);
  -webkit-font-smoothing: antialiased;
}

.wc-block-cart,
.wc-block-checkout {
  font-family: var(--st-font-sans);
  color: var(--st-ink);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Headings ─────────────────────────────────────────────── */
.wc-block-checkout h1,
.wc-block-checkout h2,
.wc-block-checkout h3,
.wc-block-checkout h4,
.wc-block-cart h1,
.wc-block-cart h2,
.wc-block-cart h3,
.wc-block-cart h4,
.wc-block-components-title,
.woocommerce-checkout h3,
.woocommerce-cart h2 {
  font-family: var(--st-font-display);
  color: var(--st-ink) !important;
  font-weight: 600;
  letter-spacing: 0;
}

/* ── Buttons — brand red pill ─────────────────────────────── */
.wc-block-components-button:not(.wc-block-components-checkout-return-to-cart-button):not(.wc-block-components-quantity-selector__button),
.wc-block-components-checkout-place-order-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--st-brand) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--st-font-sans) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 0.78rem !important;
  padding: 1em 1.8em !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
}
.wc-block-components-button:not(.wc-block-components-checkout-return-to-cart-button):not(.wc-block-components-quantity-selector__button):hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--st-brand-deep) !important;
  color: #ffffff !important;
}

/* Secondary / outline buttons */
.wc-block-components-button.wc-block-components-checkout-return-to-cart-button {
  color: var(--st-brand) !important;
  background: transparent !important;
  font-weight: 600;
  text-decoration: underline;
}

/* ── Inputs ───────────────────────────────────────────────── */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-textarea,
.wc-block-components-select select,
.wc-block-components-country-input input,
.wc-block-components-combobox input,
.wc-block-components-state-input select,
.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 {
  border: 1px solid var(--st-line) !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  color: var(--st-ink) !important;
  font-family: var(--st-font-sans) !important;
  padding: 0.85em 1em !important;
  box-shadow: none !important;
  min-height: 48px;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--st-brand) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(237, 31, 36, 0.15) !important;
}

/* ── Labels ───────────────────────────────────────────────── */
.wc-block-components-text-input label,
.wc-block-components-textarea label,
.woocommerce form .form-row label {
  font-family: var(--st-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--st-ink-faint);
}

/* ── Panels / order summary — cards ───────────────────────── */
.wc-block-components-order-summary,
.wc-block-components-panel,
.wc-block-components-order-summary__content,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--st-card) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.wc-block-components-panel__content {
  background: var(--st-card) !important;
}

/* Order summary rows */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__meta {
  color: var(--st-ink-soft);
}

/* ── Totals ───────────────────────────────────────────────── */
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item__label {
  color: var(--st-ink-soft);
  font-weight: 500;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-item__value-price {
  color: var(--st-ink);
  font-weight: 600;
}
.wc-block-components-totals-footer-item__value {
  font-family: var(--st-font-display);
  font-size: 1.5rem;
  color: var(--st-ink);
}

/* ── Links ────────────────────────────────────────────────── */
.wc-block-checkout a,
.wc-block-cart a,
.woocommerce-checkout a,
.woocommerce-cart a {
  color: var(--st-brand);
  text-decoration: none;
}
.wc-block-checkout a:hover,
.wc-block-cart a:hover {
  text-decoration: underline;
}

/* ── Payment method radio cards ───────────────────────────── */
.wc-block-components-radio-control__input:checked + .wc-block-components-radio-control__label,
.wc-block-checkout__payment-method .wc-block-components-radio-control {
  border-radius: 12px;
}
.wc-block-components-radio-control__label {
  font-family: var(--st-font-sans);
  color: var(--st-ink);
}

/* ── Radio control (selected highlight) ───────────────────── */
.wc-block-components-radio-control__input[type="radio"]:checked {
  accent-color: var(--st-brand);
}
.wc-block-components-radio-control__label:has(input:checked) {
  border-color: var(--st-brand);
}

/* ── Shipping / discount panels ───────────────────────────── */
.wc-block-components-totals-coupon__input {
  border: 1px solid var(--st-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
}

/* ── Error / notice styling ───────────────────────────────── */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  border-radius: 12px !important;
  font-family: var(--st-font-sans);
  border-top-color: var(--st-brand) !important;
}
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--st-brand) !important;
}

/* ── Cart table (classic) ─────────────────────────────────── */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
  border: 1px solid var(--st-line) !important;
  border-radius: 16px !important;
  background: var(--st-card) !important;
  overflow: hidden;
}
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
  font-family: var(--st-font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--st-ink-faint);
  border-bottom: 1px solid var(--st-line) !important;
}
.woocommerce table.shop_table td {
  border-color: var(--st-line) !important;
  color: var(--st-ink);
}

/* Quantity input (classic) */
.woocommerce .quantity .qty {
  border: 1px solid var(--st-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--st-ink) !important;
  padding: 0.5em !important;
}

/* Remove link */
.woocommerce a.remove {
  color: var(--st-brand) !important;
}

/* ─────────────────────────────────────────────────────────────
   Bare mode (`body.st-bare`) — cart / checkout / my-account.

   Hides the old Uncode header, top bar, nav bar and mobile menu so the
   transactional pages are not wrapped in the old site's navigation,
   then shows the slim on-brand header + footer injected by functions.php.
   Everything is scoped under .st-bare so the rest of the site is untouched.
   ───────────────────────────────────────────────────────────── */

/* Hide the Uncode header / nav / top bar / mobile menu on transaction pages. */
body.st-bare .menu-wrapper,
body.st-bare #masthead,
body.st-bare header.navbar,
body.st-bare .menu-container,
body.st-bare .menu-primary,
body.st-bare .navbar-header,
body.st-bare .main-menu-container,
body.st-bare .menu-horizontal,
body.st-bare .menu-horizontal-inner,
body.st-bare .navbar-main,
body.st-bare .navbar-extra-icons,
body.st-bare .mobile-menu-button,
body.st-bare .mobile-menu,
body.st-bare .menu-accordion-secondary,
body.st-bare .uncode-close-offcanvas-mobile,
body.st-bare .topbar-container,
body.st-bare .top-menu,
body.st-bare .row-menu,
body.st-bare .row-menu-inner,
body.st-bare .row-navigation {
  display: none !important;
}

/* Hide the old Uncode footer on transaction pages (the bare footer replaces it). */
body.st-bare footer#colophon,
body.st-bare .site-footer,
body.st-bare .footer-last,
body.st-bare .footer-scroll-top {
  display: none !important;
}

/* The main content no longer needs Uncode's header offset. */
body.st-bare {
  --st-header-height: 0px;
}
body.st-bare .main-container {
  padding-top: 0 !important;
}
body.st-bare #main-content {
  padding-top: 0 !important;
}

/* Slim on-brand header injected at the top of <body>. */
body.st-bare .st-bare-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: var(--st-bg);
  border-bottom: 1px solid var(--st-line);
  position: sticky;
  top: 0;
  z-index: 100;
}
body.st-bare .st-bare-header__brand {
  display: inline-flex;
  align-items: center;
}
body.st-bare .st-bare-header__logo {
  height: 38px;
  width: auto;
}
body.st-bare .st-bare-header__back {
  font-family: var(--st-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--st-brand);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  transition: border-color 0.2s, color 0.2s;
}
body.st-bare .st-bare-header__back:hover {
  border-color: var(--st-brand);
  color: var(--st-brand-deep);
}

/* Slim on-brand footer for transaction pages. */
body.st-bare .st-bare-footer {
  margin-top: 3rem;
  padding: 1.4rem 1.5rem;
  border-top: 1px solid var(--st-line);
  background: var(--st-bg);
  text-align: center;
  font-family: var(--st-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-ink-faint);
}

/* Give the WooCommerce content a card-like, on-brand wrapper. */
body.st-bare .woocommerce,
body.st-bare .woocommerce-checkout,
body.st-bare .woocommerce-account {
  background: var(--st-bg);
}