/*
 * EventPassHero — WooCommerce /checkout/ page modernization (CSS-only).
 *
 * Targets WC's stable selectors (.woocommerce-checkout, .shop_table,
 * #payment, etc.) without touching plugin templates or markup, so a
 * future WC update doesn't break us.
 *
 * Loaded by meup-child/functions.php on is_checkout() pages — same
 * gate as the existing wc-checkout-overlay.{js,css}.
 *
 * Goals:
 *   * Card-style "Your order" panel (rounded, soft shadow, no harsh borders)
 *   * Modern typography + comfortable spacing
 *   * Cleaner payment-method block; tidy Stripe Elements wrapper
 *   * Mobile-first responsive layout
 *   * Match the new-cart palette (--eph-primary fallback to brand red)
 */

:root {
  --eph-checkout-primary: var(--eph-primary, #EE4B2A);
  --eph-checkout-primary-tint: rgba(238, 75, 42, 0.08);
  --eph-checkout-text: #1c1c1e;
  --eph-checkout-muted: #6e6e73;
  --eph-checkout-line: #e5e5ea;
  --eph-checkout-soft-bg: #f7f7f9;
  --eph-checkout-card-bg: #fff;
  --eph-checkout-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

/* ----- Page chrome ------------------------------------------------- */

body.woocommerce-checkout {
  background: #fafafc;
}

.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--eph-checkout-text);
  margin-bottom: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Coupon-form prompt strip */
.woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--eph-checkout-soft-bg) !important;
  border: 1px solid var(--eph-checkout-line) !important;
  border-radius: 10px !important;
  border-left: 4px solid var(--eph-checkout-primary) !important;
  color: var(--eph-checkout-text) !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}
.woocommerce-form-coupon-toggle .showcoupon {
  color: var(--eph-checkout-primary) !important;
  font-weight: 600 !important;
}

/* Coupon form when expanded */
form.checkout_coupon {
  background: var(--eph-checkout-card-bg) !important;
  border: 1px solid var(--eph-checkout-line) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: var(--eph-checkout-shadow) !important;
}

/* ----- "Your order" review panel ----------------------------------- */

#order_review_heading,
.woocommerce-checkout-review-order h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--eph-checkout-text);
  margin: 24px 0 12px;
}

.woocommerce-checkout-review-order,
#order_review {
  background: var(--eph-checkout-card-bg);
  border: 1px solid var(--eph-checkout-line);
  border-radius: 14px;
  padding: 4px;
  box-shadow: var(--eph-checkout-shadow);
}

/* WC's table rendering — soften it into a card layout */
.woocommerce-checkout table.shop_table {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100%;
}

.woocommerce-checkout table.shop_table thead th {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--eph-checkout-line) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--eph-checkout-muted) !important;
  padding: 14px 16px !important;
}

.woocommerce-checkout table.shop_table tbody td {
  border: 0 !important;
  border-bottom: 1px dashed var(--eph-checkout-line) !important;
  background: transparent !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  color: var(--eph-checkout-text) !important;
  line-height: 1.55;
}

.woocommerce-checkout table.shop_table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td {
  border: 0 !important;
  border-top: 1px solid var(--eph-checkout-line) !important;
  background: transparent !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--eph-checkout-text) !important;
}

.woocommerce-checkout table.shop_table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table tfoot tr.order-total td {
  font-size: 16px !important;
  font-weight: 700 !important;
  border-top: 2px solid var(--eph-checkout-text) !important;
}

.woocommerce-checkout table.shop_table tfoot tr.order-total .amount bdi {
  color: var(--eph-checkout-text) !important;
}

/* The ticket-detail block inside td.product-name uses bold "labels"
 * inline (Ticket Type, Date, Name, etc.) — bump them to a tidy
 * grid-feel via line-height + a leading dot. */
.woocommerce-checkout td.product-name strong {
  color: var(--eph-checkout-text);
  font-weight: 600;
}

/* ---------------------------------------------------------------- *
 * Order-card layout (injected by wc-checkout-restructure.js)        *
 *   .eph-order-card                  — wraps the rebuilt block      *
 *   .eph-order-card__event           — event title                  *
 *   .eph-order-card__section         — one of 4 grouped sections    *
 *   .eph-order-card__section-label   — "Tickets" / "Event Date" /…  *
 *   .eph-order-card__section-body    — the section's items          *
 *   .eph-order-card__line            — generic label/value line     *
 *   .eph-order-card__ticket          — ticket-row variant           *
 * ---------------------------------------------------------------- */

.eph-order-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

.eph-order-card__event {
  font-size: 17px;
  font-weight: 700;
  color: var(--eph-checkout-text);
  letter-spacing: -0.2px;
  line-height: 1.3;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--eph-checkout-line);
}

.eph-order-card__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--eph-checkout-line);
}

.eph-order-card__section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.eph-order-card__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--eph-checkout-muted);
}

.eph-order-card__section-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eph-order-card__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--eph-checkout-text);
}

.eph-order-card__line-label {
  flex: 0 0 auto;
  color: var(--eph-checkout-muted);
  font-weight: 500;
  min-width: 60px;
}

.eph-order-card__line-value {
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
}

/* Ticket rows render the value alone — name + qty + seat all wrapped
 * in a single readable string. We give them their own muted-tinted
 * card to visually distinguish from the prose Customer/Date sections. */
.eph-order-card__ticket {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  background: var(--eph-checkout-soft-bg);
  border: 1px solid var(--eph-checkout-line);
  border-radius: 8px;
  padding: 10px 12px;
}

.eph-order-card__ticket-name {
  color: var(--eph-checkout-text);
}

/* Date section — a touch larger so it reads at a glance. */
.eph-order-card__section--date .eph-order-card__line-value {
  font-weight: 600;
  font-size: 14px;
}

/* Event-questions section: each line is one custom-field answer.
 * Don't show the raw label (which is often ugly e.g.
 * "Exhibit Hall Tables - INDIVIDUAL SEAT Ticket #1 - My TShirt")
 * any heavier than the rest — keep label muted, value bold. */
.eph-order-card__section--questions .eph-order-card__line-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--eph-checkout-muted);
  min-width: 0;
  display: block;
  width: 100%;
  margin-bottom: 0;
}
.eph-order-card__section--questions .eph-order-card__line {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--eph-checkout-line);
  border-radius: 6px;
}
.eph-order-card__section--questions .eph-order-card__line-value {
  font-weight: 600;
}

@media (max-width: 600px) {
  .eph-order-card__event { font-size: 15px; }
  .eph-order-card__line  { font-size: 13px; }
  .eph-order-card__line-label { min-width: 0; }
  .eph-order-card__ticket { font-size: 13px; padding: 9px 10px; }
}

/* ----- Payment methods block --------------------------------------- */

#payment {
  background: var(--eph-checkout-card-bg) !important;
  border: 1px solid var(--eph-checkout-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--eph-checkout-shadow) !important;
  padding: 8px !important;
  margin-top: 16px !important;
}

#payment ul.payment_methods {
  background: transparent !important;
  border: 0 !important;
  padding: 4px !important;
  margin: 0 !important;
}

#payment ul.payment_methods > li {
  background: var(--eph-checkout-card-bg) !important;
  border: 1px solid var(--eph-checkout-line) !important;
  border-radius: 10px !important;
  margin: 8px 0 !important;
  padding: 12px 16px !important;
  list-style: none !important;
  transition: border-color 100ms ease, background 100ms ease;
}

#payment ul.payment_methods > li:has(input:checked),
#payment ul.payment_methods > li.payment_method_active {
  border-color: var(--eph-checkout-primary) !important;
  background: var(--eph-checkout-primary-tint) !important;
}

#payment ul.payment_methods > li label {
  font-weight: 600 !important;
  color: var(--eph-checkout-text) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
}

#payment ul.payment_methods > li label img {
  vertical-align: middle !important;
  max-height: 22px !important;
  width: auto !important;
  margin-left: 6px !important;
}

#payment ul.payment_methods > li input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--eph-checkout-primary) !important;
  margin-right: 6px !important;
}

/* The expanded payment-method box (Stripe Elements wrapper) */
.payment_box {
  background: var(--eph-checkout-soft-bg) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  color: var(--eph-checkout-text) !important;
}

.payment_box::before {
  display: none !important;       /* WC's notch arrow — ditch it */
}

.payment_box p { margin: 6px 0; }

/* Stripe Elements iframes get rounded corners + soft shadow on the
 * wrapper. The iframe content is rendered by Stripe so we can't
 * style it directly; we just clean up the wrapper. */
.payment_box .StripeElement,
.payment_box .wc-stripe-elements-field,
.payment_box .form-row > .input-text {
  border: 1px solid var(--eph-checkout-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}

.payment_box .StripeElement--focus,
.payment_box .wc-stripe-elements-field--focus,
.payment_box .form-row > .input-text:focus {
  border-color: var(--eph-checkout-primary) !important;
  box-shadow: 0 0 0 3px rgba(238, 75, 42, 0.15) !important;
  outline: none !important;
}

/* "Place order" button — make it a real CTA */
#place_order,
.woocommerce-checkout #payment #place_order {
  background: var(--eph-checkout-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  padding: 14px 22px !important;
  width: 100% !important;
  margin-top: 12px !important;
  box-shadow: 0 6px 16px rgba(238, 75, 42, 0.25) !important;
  cursor: pointer !important;
  transition: filter 120ms ease, transform 120ms ease;
}

#place_order:hover,
#place_order:focus {
  filter: brightness(0.94) !important;
  outline: none !important;
}

#place_order:active {
  transform: translateY(1px);
}

/* T&C / privacy block above place-order */
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-privacy-policy-text {
  font-size: 12px !important;
  color: var(--eph-checkout-muted) !important;
  margin: 12px 0 !important;
}

.woocommerce-terms-and-conditions-wrapper a {
  color: var(--eph-checkout-primary) !important;
  font-weight: 600 !important;
}

/* ----- Notices (errors, success) ----------------------------------- */

.woocommerce-NoticeGroup ul.woocommerce-error,
.woocommerce-NoticeGroup ul.woocommerce-message,
.woocommerce > .woocommerce-error,
.woocommerce > .woocommerce-message {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  border: 1px solid !important;
  list-style: none !important;
}

.woocommerce-NoticeGroup ul.woocommerce-error,
.woocommerce > .woocommerce-error {
  background: #fff5f5 !important;
  border-color: #ffd1d1 !important;
  color: #b00020 !important;
}

.woocommerce-NoticeGroup ul.woocommerce-message,
.woocommerce > .woocommerce-message {
  background: #f0fdf4 !important;
  border-color: #b9f0c9 !important;
  color: #1f7a53 !important;
}

/* ----- Mobile tweaks ----------------------------------------------- */

@media (max-width: 600px) {
  body.woocommerce-checkout h1 {
    font-size: 22px;
  }
  .woocommerce-checkout-review-order,
  #order_review,
  #payment {
    border-radius: 12px !important;
  }
  .woocommerce-checkout table.shop_table thead th,
  .woocommerce-checkout table.shop_table tbody td,
  .woocommerce-checkout table.shop_table tfoot th,
  .woocommerce-checkout table.shop_table tfoot td {
    padding: 12px !important;
    font-size: 13px !important;
  }
  #place_order {
    padding: 13px 18px !important;
    font-size: 15px !important;
  }
}

/* ----- Reduced-motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #place_order { transition: none; }
}