/* ──────────────────────────────────────────────────────────────────────────
   Baiscope WooCommerce screens (v1.8.0): Booking Cart + Booking Checkout.
   Uses the same tokens as the seat-booking stages so it looks like one flow.
   ────────────────────────────────────────────────────────────────────────── */

.bai-wc {
  --bai-wc-primary: var(--baiscope-primary, #e23636);
  --bai-wc-primary-dark: var(--baiscope-primary-dark, #b52b2b);
  --bai-wc-accent: var(--baiscope-accent, #00bcd4);
  font-family: var(--baiscope-font, 'Inter', system-ui, sans-serif);
  color: var(--baiscope-text, #fff);
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.bai-wc *, .bai-wc *::before, .bai-wc *::after { box-sizing: border-box; }

/* layout */
@media (max-width: 899px) {
  /* on phones the order summary comes first, so the total is seen before paying */
  .bai-wc--checkout .bai-wc-aside { order: -1; }
  .bai-wc--checkout .bai-wc-line--seat { display: none; }
  .bai-wc--checkout .bai-wc-card--sticky { padding: 18px 16px; }
  .bai-wc--checkout .bai-wc-secure { display: none; }
}
.bai-wc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 900px) { .bai-wc-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.bai-wc-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bai-wc-aside { min-width: 0; }

.bai-wc-card {
  background: var(--baiscope-dark-card, #1a1a2e);
  border: 1px solid var(--baiscope-border, rgba(255,255,255,.08));
  border-radius: var(--baiscope-radius, 12px);
  padding: 20px;
}
@media (min-width: 640px) { .bai-wc-card { padding: 28px; } }
@media (min-width: 900px) { .bai-wc-card--sticky { position: sticky; top: 90px; } }

.bai-wc-title {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--baiscope-border, rgba(255,255,255,.08));
  font: 700 20px/1.2 var(--baiscope-font-heading, 'Poppins', sans-serif);
  color: var(--baiscope-text, #fff);
}
.bai-wc-title i { color: var(--bai-wc-accent); font-size: 18px; }
.bai-wc-step {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--bai-wc-accent); color: #04222a;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--baiscope-font, sans-serif);
}
.bai-wc-subtitle { margin: 24px 0 12px; font-size: 14px; font-weight: 700; color: var(--baiscope-text, #fff); }

/* timer re-uses the booking-step look; just make sure it works standalone */
.bai-wc .baiscope-hold-timer--confirm {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px;
}
.bai-wc .baiscope-hold-timer__left { flex: 1 1 0; min-width: 160px; }
.bai-wc .baiscope-hold-timer__left small { display: block; opacity: .75; font-weight: 400; margin-top: 2px; font-size: 11.5px; }

/* customer details (read-only) */
.bai-wc-details {
  background: var(--baiscope-dark-3, #13131f);
  border: 1px solid var(--baiscope-border, rgba(255,255,255,.08));
  border-radius: 12px; padding: 6px 18px;
}
.bai-wc-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.bai-wc-row:last-child { border-bottom: 0; }
.bai-wc-row span { color: var(--baiscope-text-muted, #8899aa); flex-shrink: 0; }
.bai-wc-row strong { text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* movie block */
.bai-wc-movie { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.bai-wc-movie img { width: 72px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--baiscope-dark-3, #13131f); }
.bai-wc-movie h3 { margin: 0 0 6px; font: 700 16px/1.25 var(--baiscope-font-heading, 'Poppins', sans-serif); color: var(--baiscope-text, #fff); overflow-wrap: anywhere; }
.bai-wc-movie__info { min-width: 0; }
.bai-wc-movie__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--baiscope-text-muted, #8899aa); }
.bai-wc-movie__meta i { margin-right: 4px; }
.bai-wc-movie__cinema { margin-top: 6px; font-size: 12.5px; color: var(--baiscope-text-dim, #aabbcc); }
.bai-wc-movie__cinema i { color: var(--bai-wc-primary); margin-right: 4px; }
.bai-wc-card > .bai-wc-movie:first-child { margin-top: 0; }
.bai-wc-movie--compact { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--baiscope-border, rgba(255,255,255,.08)); }
.bai-wc-movie--compact img { width: 60px; }

/* seats */
.bai-wc-seats { display: flex; flex-wrap: wrap; gap: 8px; }
.bai-wc-seat {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 12px; border-radius: 9px;
  background: rgba(0,188,212,.1); border: 1px solid rgba(0,188,212,.28);
}
.bai-wc-seat strong { font-size: 15px; font-weight: 800; }
.bai-wc-seat em { font-style: normal; font-size: 11px; color: var(--baiscope-text-muted, #8899aa); }

/* totals */
.bai-wc-lines { margin-bottom: 18px; }
.bai-wc-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; }
.bai-wc-line span { color: var(--baiscope-text-muted, #8899aa); }
.bai-wc-line span em { font-style: normal; opacity: .75; }
.bai-wc-line strong { font-weight: 600; white-space: nowrap; }
.bai-wc-line--total { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--baiscope-border-light, rgba(255,255,255,.15)); align-items: baseline; }
.bai-wc-line--total span { color: var(--baiscope-text, #fff); font-weight: 700; font-size: 14px; }
.bai-wc-line--total strong { font: 800 24px/1 var(--baiscope-font-heading, 'Poppins', sans-serif); color: var(--bai-wc-accent); }

/* buttons */
.bai-wc-btn {
  appearance: none; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px; margin-top: 10px;
  border-radius: 10px; border: 1.5px solid transparent;
  font: 600 15px/1.2 var(--baiscope-font, 'Inter', sans-serif);
  transition: background .2s, border-color .2s, transform .15s;
}
.bai-wc-btn:hover { transform: translateY(-1px); }
.bai-wc-btn--primary { background: var(--bai-wc-primary); border-color: var(--bai-wc-primary); color: #fff; }
.bai-wc-btn--primary:hover { background: var(--bai-wc-primary-dark); border-color: var(--bai-wc-primary-dark); color: #fff; }
.bai-wc-btn--ghost { background: transparent; border-color: var(--baiscope-border-light, rgba(255,255,255,.15)); color: var(--baiscope-text-dim, #aabbcc); }
.bai-wc-btn--ghost:hover { border-color: var(--bai-wc-accent); color: var(--bai-wc-accent); }
.bai-wc-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.bai-wc-secure { margin: 14px 0 0; text-align: center; font-size: 11.5px; color: var(--baiscope-text-muted, #8899aa); }
.bai-wc-secure i { margin-right: 4px; }

/* ── Payment box (WooCommerce's own markup, restyled) ────────────────────── */
.bai-wc-pay #payment { background: transparent; border-radius: 0; }
.bai-wc-pay ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.bai-wc-pay ul.wc_payment_methods li {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  background: var(--baiscope-dark-3, #13131f);
  border: 1.5px solid var(--baiscope-border-light, rgba(255,255,255,.15));
  border-radius: 12px; overflow: hidden;
  transition: border-color .2s, background .2s;
}
.bai-wc-pay ul.wc_payment_methods li:has(input[type="radio"]:checked) { border-color: var(--bai-wc-accent); background: rgba(0,188,212,.08); }
.bai-wc-pay ul.wc_payment_methods li > label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 18px 16px 48px; margin: 0; cursor: pointer; min-height: 52px;
  font-size: 14px; font-weight: 600; color: var(--baiscope-text, #fff);
}
.bai-wc-pay ul.wc_payment_methods li > label img { max-height: 24px; width: auto; margin-left: auto; }
.bai-wc-pay input[type="radio"].input-radio { position: absolute; left: 18px; top: 17px; z-index: 1; accent-color: var(--bai-wc-accent); width: 17px; height: 17px; margin: 0; }
.bai-wc-pay .payment_box {
  margin: 0; padding: 0 18px 18px 48px; background: transparent !important;
  color: var(--baiscope-text-dim, #aabbcc); font-size: 13px; border: 0;
}
.bai-wc-pay .payment_box::before { display: none !important; }
.bai-wc-pay .payment_box p { margin: 0 0 10px; }
.bai-wc-pay .payment_box fieldset { border: 0; padding: 0; margin: 0; }
.bai-wc-pay .payment_box input[type="text"],
.bai-wc-pay .payment_box input[type="tel"],
.bai-wc-pay .payment_box input[type="email"],
.bai-wc-pay .payment_box input[type="number"],
.bai-wc-pay .payment_box select,
.bai-wc-pay .payment_box textarea {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  background: var(--baiscope-dark, #0a0a0f); color: #fff;
  border: 1px solid var(--baiscope-border-light, rgba(255,255,255,.15));
  font: 14px var(--baiscope-font, sans-serif);
}
.bai-wc-pay .payment_box input:focus, .bai-wc-pay .payment_box select:focus { outline: none; border-color: var(--bai-wc-accent); }
.bai-wc-pay .payment_box label { color: var(--baiscope-text-dim, #aabbcc); font-size: 12.5px; }
.bai-wc-pay .payment_box .wc-credit-card-form { padding: 0; }
.bai-wc-pay .woocommerce-info, .bai-wc-pay .woocommerce-error, .bai-wc-pay .woocommerce-message {
  list-style: none; margin: 0; padding: 14px 16px; border-radius: 10px;
  background: rgba(255,152,0,.1); border: 1px solid rgba(255,152,0,.3); color: #ffcc80; font-size: 13px;
}
.bai-wc-pay .woocommerce-info::before, .bai-wc-pay .woocommerce-error::before { display: none; }

/* terms + place order */
.bai-wc-pay .form-row { margin: 0; padding: 0; }
.bai-wc-pay .place-order { margin-top: 18px; padding: 0; }
.bai-wc-pay .woocommerce-terms-and-conditions-wrapper .form-row { display: block; }
.bai-wc-pay .woocommerce-terms-and-conditions-wrapper abbr.required { color: var(--bai-wc-primary); text-decoration: none; }
.bai-wc-pay .woocommerce-terms-and-conditions-wrapper { margin: 14px 0 16px; font-size: 12.5px; color: var(--baiscope-text-muted, #8899aa); }
.bai-wc-pay .woocommerce-terms-and-conditions-wrapper a { color: var(--bai-wc-accent); }
.bai-wc-pay .woocommerce-privacy-policy-text { margin-bottom: 10px; }
.bai-wc-pay .woocommerce-form__label-for-checkbox { display: flex; gap: 10px; align-items: flex-start; color: var(--baiscope-text-dim, #aabbcc); }
.bai-wc-pay .woocommerce-form__label-for-checkbox input { margin-top: 3px; accent-color: var(--bai-wc-accent); }
.bai-wc-pay #place_order {
  appearance: none; cursor: pointer; float: none !important;
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 16px 20px; margin: 0;
  border-radius: 10px; border: 1.5px solid var(--bai-wc-primary);
  background: var(--bai-wc-primary); color: #fff;
  font: 700 16px/1.2 var(--baiscope-font, 'Inter', sans-serif);
  transition: background .2s, transform .15s;
}
.bai-wc-pay #place_order:hover { background: var(--bai-wc-primary-dark); border-color: var(--bai-wc-primary-dark); transform: translateY(-1px); }

/* WooCommerce notices (errors above the form) */
.bai-wc-notices:empty { display: none; }
.bai-wc-notices { margin-bottom: 16px; }
.bai-wc .woocommerce-error, .bai-wc .woocommerce-message, .bai-wc .woocommerce-info {
  list-style: none; margin: 0 0 12px; padding: 14px 18px; border-radius: 10px;
  font-size: 13.5px; border: 1px solid; background: rgba(226,54,54,.1); border-color: rgba(226,54,54,.4); color: #ff8a80;
}
.bai-wc .woocommerce-message { background: rgba(0,188,212,.1); border-color: rgba(0,188,212,.35); color: #80deea; }
.bai-wc .woocommerce-error::before, .bai-wc .woocommerce-message::before, .bai-wc .woocommerce-info::before { display: none; }
.bai-wc .woocommerce-error li { margin: 4px 0; list-style: none; }
.bai-wc .blockUI.blockOverlay { background: rgba(10,10,15,.65) !important; border-radius: 12px; }

/* ── States (empty / expired / login / confirmed) ────────────────────────── */
.bai-wc-state { text-align: center; padding: 40px 22px; max-width: 560px; margin: 0 auto; }
.bai-wc-state h2, .bai-wc-done__head h2 { margin: 0 0 8px; font: 700 22px/1.25 var(--baiscope-font-heading, 'Poppins', sans-serif); color: var(--baiscope-text, #fff); }
.bai-wc-state p, .bai-wc-done__head p { margin: 0 0 6px; color: var(--baiscope-text-muted, #8899aa); font-size: 14px; }
.bai-wc-state__icon {
  width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: rgba(0,188,212,.12); color: var(--bai-wc-accent);
}
.bai-wc-state--bad .bai-wc-state__icon { background: rgba(226,54,54,.12); color: var(--bai-wc-primary); }
.bai-wc-state__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.bai-wc-state__actions .bai-wc-btn { width: auto; min-width: 190px; margin-top: 0; }

.bai-wc-done { max-width: 780px; margin: 0 auto; }
.bai-wc-done__head { text-align: center; margin-bottom: 26px; }
.bai-wc-done__head .bai-wc-state__icon { background: rgba(0,200,83,.14); color: #00e676; }
.bai-wc-done__head.is-pending .bai-wc-state__icon { background: rgba(255,152,0,.14); color: #ffb74d; }
.bai-wc-ref {
  display: inline-block; margin-top: 10px; padding: 7px 16px; border-radius: 999px;
  background: var(--baiscope-dark-card, #1a1a2e); border: 1px solid var(--baiscope-border-light, rgba(255,255,255,.15));
  font-size: 12.5px; color: var(--baiscope-text-muted, #8899aa);
}
.bai-wc-ref strong { color: #fff; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; }
.bai-wc-done [data-bai-done-actions] { margin-top: 26px; }
.bai-wc-done [hidden] { display: none !important; }

@media (max-width: 480px) {
  .bai-wc-card { padding: 18px 16px; }
  .bai-wc-title { font-size: 18px; }
  .bai-wc-row { flex-direction: column; gap: 2px; }
  .bai-wc-row strong { text-align: left; }
  .bai-wc-state__actions .bai-wc-btn { width: 100%; }
}

/* v1.9.1 — coupon code */
.bai-wc-line--discount strong { color: #4ade80; }
.bai-wc-line--discount em { font-style: normal; font-weight: 700; letter-spacing: .04em; }
.bai-wc-coupon__remove { background: none; border: 0; padding: 0 4px; margin-left: 4px; color: inherit; opacity: .7; cursor: pointer; font-size: 16px; line-height: 1; }
.bai-wc-coupon__remove:hover { opacity: 1; }
.bai-wc-coupon { margin-top: 14px; }
.bai-wc-coupon__row { display: flex; gap: 8px; }
.bai-wc-coupon__input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--baiscope-border-light, rgba(255,255,255,.15)); background: rgba(255,255,255,.05); color: var(--baiscope-text, #fff); font-size: 14px; text-transform: uppercase; }
.bai-wc-coupon__apply { width: auto; flex: none; padding: 10px 16px; margin: 0; }
.bai-wc-coupon__msg { min-height: 18px; margin-top: 6px; font-size: 12px; color: #4ade80; }
.bai-wc-coupon__msg.is-error { color: #f87171; }

/* v1.9.3 — Pay button under the Total in the checkout sidebar: same bold red as the Pay button in the payment box */
.bai-wc-aside .bai-wc-side-pay {
  appearance: none; background: var(--bai-wc-primary, #e23636); border: 1.5px solid var(--bai-wc-primary, #e23636); color: #fff;
  font: 700 16px/1.2 var(--baiscope-font, 'Inter', sans-serif); padding: 16px 20px; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(226,54,54,.32); margin-top: 14px;
}
.bai-wc-aside .bai-wc-side-pay:hover { background: var(--bai-wc-primary-dark, #b52b2b); border-color: var(--bai-wc-primary-dark, #b52b2b); color: #fff; }
.bai-wc-aside .bai-wc-side-pay:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.bai-wc-aside a.bai-wc-btn--primary { font-weight: 700; font-size: 16px; padding: 16px 20px; box-shadow: 0 4px 14px rgba(226,54,54,.32); }

/* v1.9.3 (final) — filled red buttons on the cart / checkout summary (theme button styles can't override these) */
.bai-wc-aside .bai-wc-btn--primary,
.bai-wc-aside button.bai-wc-side-pay,
.bai-wc-aside a.bai-wc-btn--primary {
  background: var(--bai-wc-primary, #e23636) !important; background-color: var(--bai-wc-primary, #e23636) !important;
  background-image: none !important;
  border: 1.5px solid var(--bai-wc-primary, #e23636) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  font: 700 16px/1.2 var(--baiscope-font, 'Inter', sans-serif) !important; text-transform: none !important; letter-spacing: 0 !important;
  padding: 16px 20px !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(226,54,54,.32) !important;
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; cursor: pointer;
}
.bai-wc-aside .bai-wc-btn--primary:hover,
.bai-wc-aside button.bai-wc-side-pay:hover:not(:disabled),
.bai-wc-aside a.bai-wc-btn--primary:hover {
  background: var(--bai-wc-primary-dark, #b52b2b) !important; border-color: var(--bai-wc-primary-dark, #b52b2b) !important; color: #fff !important;
}
.bai-wc-aside button.bai-wc-side-pay:disabled { opacity: .5 !important; cursor: not-allowed !important; box-shadow: none !important; }
.bai-wc-aside .bai-wc-btn--ghost {
  background: transparent !important; border: 1.5px solid rgba(255,255,255,.3) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-weight: 600 !important; border-radius: 10px !important;
}
