/* ============================================================
   WAJ Shop — premium WooCommerce polish for What a Jazz.
   Targets: TH Variation Swatches (.thwvsf-*), WCPA product
   add-ons (.wcpa_*), cart, and checkout. Brand: dark + orange
   + cream, all via waj-skin.css variables.
   ============================================================ */

/* ── Variation swatches (TH Variation Swatches) ───────────── */
.thwvsf-wrapper { display: flex; flex-wrap: wrap; gap: 10px; margin: 0.5rem 0 0; }
.thwvsf-wrapper-item-li.thwvsf-checkbox,
.thwvsf-wrapper-item-li {
  margin: 0 !important;
}
.thwvsf-wrapper-item-li .thwvsf-label,
.thwvsf-wrapper-item-li label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--waj-border);
  border-radius: var(--radius-md);
  background: var(--waj-surface-2);
  color: var(--waj-text);
  font-size: 0.9rem; font-weight: 500; line-height: 1.2;
  cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.thwvsf-wrapper-item-li:hover .thwvsf-label,
.thwvsf-wrapper-item-li:hover label { border-color: var(--waj-accent); color: var(--waj-accent); }
.thwvsf-wrapper-item-li.thwvsf-selected .thwvsf-label,
.thwvsf-wrapper-item-li.thwvsf-selected label,
.thwvsf-wrapper-item-li.selected .thwvsf-label {
  background: var(--waj-accent); border-color: var(--waj-accent); color: var(--waj-on-accent); font-weight: 600;
}

/* ── WCPA product add-ons ─────────────────────────────────── */
.wcpa_form_outer { margin-top: 1.2rem; }
.wcpa_field_wrap {
  margin-bottom: 1.4rem !important;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--waj-border);
}
.wcpa_field_wrap:last-child { border-bottom: 0; }

.wcpa_field_label, .wcpa_field_wrap label.wcpa_label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--waj-text);
  margin-bottom: 0.4rem !important;
}
.wcpa_field_desc {
  font-size: 0.82rem; color: var(--waj-muted);
  margin: 0 0 0.7rem !important; line-height: 1.5;
}

/* Checkbox / radio group options → clean selectable rows */
.wcpa_group_field .wcpa_checkbox,
.wcpa_group_field .wcpa_radio,
.wcpa_field_wrap .wcpa_checkbox,
.wcpa_field_wrap .wcpa_radio {
  display: block; margin: 0 0 8px !important;
}
.wcpa_group_field .wcpa_checkbox > label,
.wcpa_group_field .wcpa_radio > label,
.wcpa_field_wrap .wcpa_checkbox > label,
.wcpa_field_wrap .wcpa_radio > label {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--waj-border); border-radius: var(--radius-md);
  background: var(--waj-surface-2);
  color: var(--waj-text); font-size: 0.9rem; font-weight: 500;
  cursor: pointer; transition: border-color 150ms ease, background 150ms ease;
  margin: 0 !important;
}
.wcpa_group_field .wcpa_checkbox > label:hover,
.wcpa_group_field .wcpa_radio > label:hover,
.wcpa_field_wrap .wcpa_checkbox > label:hover,
.wcpa_field_wrap .wcpa_radio > label:hover { border-color: var(--waj-accent); }
/* Keep the native checkbox/radio vertically centered with multi-line labels */
.wcpa_group_field .wcpa_checkbox > label,
.wcpa_group_field .wcpa_radio > label,
.wcpa_field_wrap .wcpa_checkbox > label,
.wcpa_field_wrap .wcpa_radio > label { align-items: center !important; }

.wcpa_group_field input[type="checkbox"],
.wcpa_group_field input[type="radio"],
.wcpa_field_wrap input[type="checkbox"],
.wcpa_field_wrap input[type="radio"] {
  width: 18px; height: 18px; flex: 0 0 auto;
  accent-color: var(--waj-accent);
  margin: 0;
}
/* Selected row highlight (when the input is checked) */
.wcpa_checkbox > label:has(input:checked),
.wcpa_radio > label:has(input:checked) {
  border-color: var(--waj-accent);
  background: rgba(232, 114, 36, 0.08);
}

/* Text / textarea / select add-on fields */
.wcpa_form_outer input[type="text"],
.wcpa_form_outer input[type="email"],
.wcpa_form_outer input[type="number"],
.wcpa_form_outer textarea,
.wcpa_form_outer select {
  width: 100%; box-sizing: border-box;
  background: var(--waj-bg); color: var(--waj-text);
  border: 1px solid var(--waj-border); border-radius: var(--radius-md);
  padding: 11px 13px; font-size: 0.92rem;
}
.wcpa_form_outer input:focus, .wcpa_form_outer textarea:focus, .wcpa_form_outer select:focus {
  border-color: var(--waj-accent); outline: none;
}

/* Price suffix on options (e.g. +€40) */
.wcpa_price, .wcpa-price-text { color: var(--waj-accent); font-weight: 600; }

/* ── Variation default dropdown (fallback, non-swatch) ───── */
.woocommerce div.product form.cart .variations select {
  background: var(--waj-bg); color: var(--waj-text);
  border: 1px solid var(--waj-border); border-radius: var(--radius-md);
  padding: 11px 13px; min-height: 46px;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { padding: 0.4rem 0; }
.woocommerce div.product form.cart .reset_variations { color: var(--waj-muted); font-size: 0.8rem; }

/* Selected-variation price box */
.woocommerce div.product .woocommerce-variation-price .price { color: var(--waj-accent); font-weight: 700; }

/* ── Cart page ────────────────────────────────────────────── */
.woocommerce-cart .woocommerce table.shop_table {
  border: 1px solid var(--waj-border); border-radius: var(--radius-lg);
  background: var(--waj-surface); overflow: hidden; border-collapse: separate;
}
.woocommerce-cart table.shop_table th {
  color: var(--waj-muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--waj-border);
}
.woocommerce-cart table.shop_table td {
  border-top: 1px solid var(--waj-border); color: var(--waj-text); padding: 1rem 1.1rem;
}
.woocommerce-cart table.shop_table .product-name a { color: var(--waj-text); font-weight: 600; }
.woocommerce-cart table.shop_table .product-name a:hover { color: var(--waj-accent); }
.woocommerce-cart .wcpa_order_meta_item, .woocommerce-cart .variation { color: var(--waj-muted); font-size: 0.84rem; }
.woocommerce-cart .cart_totals h2 { font-family: var(--font-heading); }
.woocommerce-cart .cart_totals table {
  border: 1px solid var(--waj-border); border-radius: var(--radius-lg);
  background: var(--waj-surface); overflow: hidden;
}
.woocommerce-cart .cart_totals th, .woocommerce-cart .cart_totals td {
  border-top: 1px solid var(--waj-border); color: var(--waj-text);
}
.woocommerce-cart .cart_totals .order-total .amount { color: var(--waj-accent); }
.woocommerce a.remove { color: var(--waj-muted) !important; }
.woocommerce a.remove:hover { color: var(--waj-accent) !important; background: transparent !important; }

/* Coupon + update row */
.woocommerce-cart .actions .coupon input { background: var(--waj-bg); border: 1px solid var(--waj-border); color: var(--waj-text); }

/* ── Checkout ─────────────────────────────────────────────── */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }

.woocommerce-checkout h3 { font-family: var(--font-heading); letter-spacing: 0.02em; }

.woocommerce-checkout .form-row label { color: var(--waj-muted); font-size: 0.82rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select,
.woocommerce form .form-row .select2-selection {
  background: var(--waj-bg) !important; color: var(--waj-text) !important;
  border: 1px solid var(--waj-border) !important; border-radius: var(--radius-md) !important;
  min-height: 48px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--waj-accent) !important; }
.select2-dropdown { background: var(--waj-surface-2); border-color: var(--waj-border); color: var(--waj-text); }
.select2-results__option--highlighted { background: var(--waj-accent) !important; color: var(--waj-on-accent) !important; }

/* Order review + payment box → premium card */
.woocommerce-checkout #order_review {
  border: 1px solid var(--waj-border); border-radius: var(--radius-lg);
  background: var(--waj-surface); padding: 1.5rem; overflow: hidden;
}
.woocommerce-checkout #order_review_heading { font-family: var(--font-heading); }
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  border-top: 1px solid var(--waj-border); color: var(--waj-text);
}
.woocommerce-checkout .order-total .amount { color: var(--waj-accent); font-size: 1.15rem; }

.woocommerce-checkout #payment {
  background: var(--waj-surface-2) !important;
  border: 1px solid var(--waj-border); border-radius: var(--radius-md);
}
.woocommerce-checkout #payment ul.payment_methods {
  border: 0 !important; padding: 0 !important; margin: 0 0 1rem !important;
  display: grid; gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods > li {
  color: var(--waj-text);
  border: 1px solid var(--waj-border) !important;
  border-radius: var(--radius-md);
  background: var(--waj-bg);
  padding: 14px 16px !important;
  transition: border-color 150ms ease, background 150ms ease;
}
.woocommerce-checkout #payment ul.payment_methods > li:hover { border-color: var(--waj-accent); }
.woocommerce-checkout #payment ul.payment_methods > li label {
  font-weight: 600; color: var(--waj-text); display: inline-flex; align-items: center; gap: 8px;
}
.woocommerce-checkout #payment ul.payment_methods > li input[type="radio"] { accent-color: var(--waj-accent); }
/* Selected method highlight */
.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) {
  border-color: var(--waj-accent); background: rgba(232, 114, 36, 0.06);
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--waj-bg); color: var(--waj-muted);
  border-radius: var(--radius-md);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--waj-bg); }
.woocommerce-checkout #place_order { width: 100%; padding: 15px; font-size: 1rem; font-weight: 600; }

/* Notices on brand */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--waj-accent) !important;
  background: var(--waj-surface-2) !important; color: var(--waj-text) !important;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--waj-accent) !important; }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-cart table.shop_table td { padding: 0.7rem 0.6rem; }
  .thwvsf-wrapper-item-li .thwvsf-label, .thwvsf-wrapper-item-li label { padding: 9px 14px; font-size: 0.85rem; }
}

/* ============================================================
   OVERRIDES (diagnosed from live page) — later rules win.
   ============================================================ */

/* ── Product wrapper: donor made .product a 2-col grid that capped the
   layout to ~707px and left a 565px empty column. Force single column. ── */
.woocommerce div.product,
div.product.type-product,
.wcpa_has_options.product {
  display: block !important;
}

/* ── Wider product layout, more room for summary + description ── */
.single-product-layout {
  grid-template-columns: 340px minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 2.5rem !important;
  max-width: 100% !important;
  align-items: start;
}
@media (max-width: 1024px) {
  .single-product-layout { grid-template-columns: 300px minmax(0, 1fr) !important; }
  .single-product-aside { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .single-product-layout { grid-template-columns: 1fr !important; gap: 1.6rem !important; }
}

/* ── Purchase box: kill the hardcoded white, go dark ── */
.product-purchase-box {
  background: var(--waj-surface) !important;
  border: 1px solid var(--waj-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem !important;
}
.product-purchase-box .quantity { display: none; } /* classes/tickets are single qty */

/* ── PAYMENT swatches (TH Variation Swatches) — the <li> IS the button ── */
.thwvsf_fields { display: flex; flex-wrap: wrap; gap: 10px; }
.thwvsf-wrapper-item-li.thwvsf-checkbox,
li.thwvsf-wrapper-item-li {
  list-style: none !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  min-width: 0 !important; width: auto !important; height: auto !important;
  border: 1px solid var(--waj-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--waj-surface-2) !important;
  color: var(--waj-text) !important;
  font-size: 0.9rem !important; font-weight: 500 !important;
  line-height: 1.2 !important; text-align: center;
  cursor: pointer; transition: all 150ms ease;
  box-shadow: none !important;
}
li.thwvsf-wrapper-item-li:hover {
  border-color: var(--waj-accent) !important; color: var(--waj-accent) !important;
}
li.thwvsf-wrapper-item-li[aria-selected="true"],
li.thwvsf-wrapper-item-li.thwvsf-selected {
  background: var(--waj-accent) !important;
  border-color: var(--waj-accent) !important;
  color: var(--waj-on-accent) !important;
  font-weight: 600 !important;
}

/* ── WCPA option label TEXT — beat the plugin's #4a4a4a ── */
.wcpa_form_outer label,
.wcpa_field_wrap label,
.wcpa_checkbox label,
.wcpa_radio label,
.wcpa_field_label { color: var(--waj-text) !important; }
.wcpa_field_desc { color: var(--waj-muted) !important; }

/* Custom checkbox box from WCPA — give it brand styling */
.wcpa_checkbox label .wcpa_checkbox_custom,
.wcpa_radio label .wcpa_radio_custom {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 1.5px solid var(--waj-border); border-radius: 4px;
  background: var(--waj-bg); display: inline-block; position: relative;
}
.wcpa_radio label .wcpa_radio_custom { border-radius: 50%; }
.wcpa_checkbox label input:checked + .wcpa_checkbox_custom,
.wcpa_radio label input:checked + .wcpa_radio_custom {
  background: var(--waj-accent); border-color: var(--waj-accent);
}
.wcpa_checkbox label input:checked + .wcpa_checkbox_custom::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--waj-on-accent);
}
.wcpa_checkbox label, .wcpa_radio label { gap: 12px !important; }

/* ── Checkout: kill the white card backgrounds ── */
.woocommerce-billing-fields,
.woocommerce-additional-fields {
  background: var(--waj-surface) !important;
  border: 1px solid var(--waj-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem !important;
}
/* Shipping/account fields are empty for virtual class & ticket products —
   never render an empty card. */
.woocommerce-shipping-fields,
.woocommerce-account-fields {
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
.woocommerce-shipping-fields:empty { display: none !important; }
/* The col wrappers must NOT also be cards (avoids the empty nested box). */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
.woocommerce-checkout .col2-set { display: grid; gap: 1.2rem; }
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 { color: var(--waj-text); margin-top: 0; }
.woocommerce-checkout .form-row label { color: var(--waj-text) !important; font-weight: 500; }
.woocommerce-checkout .form-row .optional { color: var(--waj-muted); }
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout label { color: var(--waj-text); }

/* ============================================================
   ROUND 3 — checkbox blue fix + vertical payment options
   ============================================================ */

/* WCPA hides the native input and shows its own .wcpa_*_custom box, which
   turns blue when checked. Reverse that: show the native input (orange accent),
   hide the plugin's box. Cleaner and fully on-brand. */
.wcpa_form_outer input[type="checkbox"],
.wcpa_form_outer input[type="radio"],
.wcpa_field_wrap input[type="checkbox"],
.wcpa_field_wrap input[type="radio"] {
  position: static !important;
  opacity: 1 !important;
  width: 18px !important; height: 18px !important;
  margin: 0 !important; flex: 0 0 auto; align-self: center !important;
  accent-color: var(--waj-accent) !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  pointer-events: auto !important;
}
.wcpa_checkbox_custom,
.wcpa_radio_custom { display: none !important; }

/* ── Classes "Payment" swatches → vertical, full-width list ──
   The actual flex row is ul.thwvsf-wrapper-ul (not .thwvsf_fields). */
.thwvsf_fields,
ul.thwvsf-wrapper-ul {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
li.thwvsf-wrapper-item-li {
  width: 100% !important;
  text-align: left !important;
  padding: 13px 18px !important;
}

/* WCPA text/textarea/number/select fields — plugin forces white bg; override. */
.wcpa_form_outer textarea.wcpa_field,
.wcpa_form_outer input.wcpa_field,
.wcpa_form_outer select.wcpa_field,
.wcpa_field_wrap textarea,
.wcpa_field_wrap input[type="text"],
.wcpa_field_wrap input[type="email"],
.wcpa_field_wrap input[type="number"],
.wcpa_field_wrap select {
  background: var(--waj-bg) !important;
  color: var(--waj-text) !important;
  border: 1px solid var(--waj-border) !important;
  border-radius: var(--radius-md) !important;
}
.wcpa_field_wrap textarea:focus,
.wcpa_field_wrap input:focus,
.wcpa_field_wrap select:focus { border-color: var(--waj-accent) !important; }

/* Add-to-cart message: distinct buttons.
   Checkout = orange primary; View cart = lighter ghost/secondary. */
.woocommerce-message a.button { vertical-align: middle; }
.woocommerce-message .waj-msg-checkout {
  margin-left: 8px;
  background: var(--waj-accent) !important;
  color: #fff !important;
  border: 1px solid var(--waj-accent) !important;
  font-weight: 600 !important;
}
.woocommerce-message .waj-msg-checkout:hover { background: var(--waj-accent-2, #F28A4B) !important; }

.woocommerce-message a.button.wc-forward:not(.waj-msg-checkout) {
  background: transparent !important;
  color: var(--waj-text) !important;
  border: 1px solid var(--waj-border) !important;
  font-weight: 400 !important;
}
.woocommerce-message a.button.wc-forward:not(.waj-msg-checkout):hover {
  border-color: var(--waj-accent) !important;
  color: var(--waj-accent) !important;
}

/* Sold-out variation swatches — dimmed + struck through, not selectable */
li.thwvsf-wrapper-item-li.waj-soldout {
  opacity: 0.4 !important;
  text-decoration: line-through !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  background: var(--waj-surface) !important;
  border-style: dashed !important;
}