/*
Theme Name:   Astra Child - The Basketball Warehouse
Theme URI:    https://thebballwarehouse.com
Description:  Custom child theme for The Basketball Warehouse with Bookly customizations
Author:       Bong Aquino
Author URI:   https://thebballwarehouse.com
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
*/

/* Custom styles can be added here */

/* ── Mobile fixes ────────────────────────────────────────────────────────── */
/* Fix 1: Hero bg-position. Phone (≤430px): 0px 0px clears hoop from text.
   Tablet (431-767px): right top + 55% width pins image to right side. */
@media (max-width: 430px) {
  .elementor-9 .elementor-element.elementor-element-7ae8eb8:not(.elementor-motion-effects-element-type-background),
  .elementor-9 .elementor-element.elementor-element-7ae8eb8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: 0px 0px !important;
  }
}
@media (min-width: 431px) and (max-width: 1024px) {
  .elementor-9 .elementor-element.elementor-element-7ae8eb8:not(.elementor-motion-effects-element-type-background),
  .elementor-9 .elementor-element.elementor-element-7ae8eb8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: right top !important;
    background-size: cover !important;
  }
}


/* Fix 2: Shop grid – clip thumbnail link so baller-card logo edge
   does not visually bleed at the card boundary. */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  overflow: hidden;
}

/* ── Global mobile improvements ─────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Fix 4a: Header logo 194×174px CSS px makes header 203px tall on mobile.
     Astra inline CSS uses "header .custom-logo-link img !important" — must match
     exact selector and appear after it in the cascade to win. */
  header .custom-logo-link img {
    max-width: 120px !important;
    width: 120px !important;
    height: auto !important;
  }


  /* Fix 4c: Skipped – .ast-woo-sidebar-widget.widget_block maps to Price Filter on
     production (different widget than staging's empty Hottest Deals). */
}

/* ── Book the Court – Mobile enhancements (page-id-6265) ────────────────── */
@media (max-width: 900px) {

  /* Fix 3a: Rates table – inline min-width:380px + table-layout:fixed overflow.
     Override both so all 3 columns render within the mobile viewport. */
  .page-id-6265 #tbw-court-info table {
    min-width: 0 !important;
    table-layout: auto !important;
    font-size: 11px !important;
    width: 100% !important;
  }
  .page-id-6265 #tbw-court-info table th,
  .page-id-6265 #tbw-court-info table td {
    padding: 8px 4px !important;
    width: auto !important;
  }

  /* Fix 3b: Icons/info bar – inline flex-wrap:nowrap scrolls items off-screen.
     Wrap into 2-column grid instead. */
  #tbw-court-info > div:nth-child(3) {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  #tbw-court-info > div:nth-child(3) > div {
    flex: 0 0 calc(50% - 4px) !important;
    background: #f8fafd;
    border: 1px solid #e2eaf5;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    box-sizing: border-box;
  }

  /* Fix 3c: How It Works steps – measured container is 232px; gap:24px + min-width:140px
     forces single column. Reduce content padding + gap, use calc(50%) flex basis. */
  #tbw-court-info > div:nth-child(1) > div:last-child {
    padding: 16px 12px !important;
  }
  #tbw-court-info > div:nth-child(1) > div:last-child > div {
    gap: 16px !important;
  }
  #tbw-court-info > div:nth-child(1) > div > div > div {
    flex: 0 0 calc(50% - 8px) !important;
    min-width: 0 !important;
  }

  /* Fix 3d: Bookly progress steps – shrink font so all 5 labels fit one row. */
  .page-id-6265 .bookly-progress-tracker {
    font-size: 9px !important;
  }
  .page-id-6265 .bookly-progress-tracker > div {
    padding: 6px 2px !important;
    font-size: 9px !important;
  }

  /* Fix 3e: Bookly form block – break out of article's ~14px horizontal padding
     so the booking widget uses full content column width (~310px vs 282px). */
  .page-id-6265 .wp-block-bookly-form {
    margin-left: -14px !important;
    margin-right: -14px !important;
    width: calc(100% + 28px) !important;
  }

  /* Fix 3f: Bookly Step 2 – "I'm available on or after" label and weekday
     checkboxes are in a flex-row, pushing checkboxes off-screen on 390px.
     Stack them vertically so checkboxes get full width. */
  .page-id-6265 .bookly-left.bookly-mobile-float-none {
    flex-direction: column !important;
  }

  /* Fix 3g: Weekday checkboxes – allow wrapping as safety net on narrow viewports. */
  .page-id-6265 .bookly-week-days {
    flex-wrap: wrap !important;
  }

  /* Fix 3h: Map section – inline min-width:280px overflows 235px inner content area.
     Map block is outside #tbw-court-info; target via .entry-content ancestor. */
  .page-id-6265 .entry-content [style*="min-width: 280px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  .page-id-6265 .entry-content iframe[src*="maps.google"],
  .page-id-6265 .entry-content iframe[src*="google.com/maps"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── Book the Court – Tablet fixes (769px–1024px) ───────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Force step-2 visible — Bookly hides it via display:none at max-width:768px,
     but iPad Mini sits exactly at 768px and must see the tablet layout. */
  .page-id-6265 .bookly-service-step .bookly-mobile-step-2 {
    display: block !important;
  }

  /* The availability row container has inline style="display:table" which forces
     children into horizontal table-cells. Override to block so children stack. */
  .page-id-6265 .bookly-service-step .bookly-mobile-step-2 > .bookly-box {
    display: block !important;
  }

  /* Now children can be stacked vertically. */
  .page-id-6265 .bookly-service-step .bookly-mobile-float-none {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* Weekday checkboxes row. */
  .page-id-6265 .bookly-service-step .bookly-week-days {
    width: 100% !important;
  }
  .page-id-6265 .bookly-service-step .bookly-week-days > div {
    display: table-cell;
  }

  /* Time from/to side by side within the stacked time-range. */
  .page-id-6265 .bookly-service-step .bookly-time-to,
  .page-id-6265 .bookly-service-step .bookly-time-from {
    display: inline-block;
    width: 48% !important;
  }
  .page-id-6265 .bookly-service-step .bookly-time-to {
    float: right !important;
  }
  .page-id-6265 .bookly-service-step .bookly-time-range select {
    width: 100% !important;
  }

  /* Hide mobile-step-1 nav (has duplicate mobile NEXT button) at tablet.
     The real NEXT button lives in mobile-step-2. */
  .page-id-6265 .bookly-service-step .bookly-mobile-step-1 .bookly-nav-steps {
    display: none !important;
  }


  /* Progress tracker – shrink font so all 5 labels fit. */
  .page-id-6265 .bookly-progress-tracker {
    font-size: 10px !important;
  }
  .page-id-6265 .bookly-progress-tracker > div {
    padding: 6px 3px !important;
    font-size: 10px !important;
  }

  /* Map section – min-width:280px overflows narrow tablets. */
  .page-id-6265 .entry-content [style*="min-width: 280px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  .page-id-6265 .entry-content iframe[src*="maps.google"],
  .page-id-6265 .entry-content iframe[src*="google.com/maps"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── Book the Court – NEXT button always right-aligned (all screen sizes) ── */
/* float:right fails inside Bookly's overflow:hidden BFC on tablet viewports.
   Flex with margin-left:auto is robust across all widths. */
.page-id-6265 .bookly-service-step .bookly-mobile-step-2 .bookly-nav-steps {
  display: flex !important;
  align-items: center !important;
}
.page-id-6265 .bookly-service-step .bookly-mobile-step-2 .bookly-nav-steps .bookly-right {
  float: none !important;
  margin-left: auto !important;
}

/* ── Mobile (<768px): step-1 NEXT button right-aligned ── */
/* On mobile, bookly-mobile-step-2 is hidden; step-1 nav is the visible nav.
   space-between with one child = left. flex-end pushes it right. */
.page-id-6265 .bookly-service-step .bookly-mobile-step-1 .bookly-nav-steps {
  justify-content: flex-end !important;
}

/* ── Waiver terms link — obviously clickable ───────────────────── */
.bookly-form .bookly-checkbox-group label a {
    color: #0052A5 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #0052A5 !important;
    cursor: pointer !important;
}
.bookly-form .bookly-checkbox-group label a:hover {
    color: #003d7a !important;
    text-decoration-color: #003d7a !important;
}
/* ── END Waiver terms link ─────────────────────────────────────── */

/* ── My Account — Premium Styling ─────────────────────────────── */
.woocommerce-MyAccount-navigation ul {
    padding: 0;
    margin: 0;
    border: 1px solid #e8edf5;
    border-radius: 10px;
    overflow: hidden;
}
.woocommerce-MyAccount-navigation ul li {
    list-style: none;
    border-bottom: 1px solid #f0f3f8;
    margin: 0;
}
.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 13px 20px;
    color: #3d4461;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    background: #f4f7fc;
    color: #0052A5;
    border-left-color: #0052A5;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: #eef3fb;
    color: #0052A5;
    font-weight: 700;
    border-left-color: #0052A5;
}
.woocommerce-orders-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e8edf5 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,82,165,0.07) !important;
    width: 100% !important;
}
.woocommerce-orders-table thead th {
    background: #003d7a !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 14px 16px !important;
    border: none !important;
}
.woocommerce-orders-table tbody tr { transition: background 0.15s; }
.woocommerce-orders-table tbody tr:hover td { background: #f4f7fc !important; }
.woocommerce-orders-table tbody td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f0f3f8 !important;
    vertical-align: middle !important;
    color: #3d4461 !important;
}
.woocommerce-orders-table tbody tr:last-child td { border-bottom: none !important; }
.woocommerce-orders-table .order-status,
.woocommerce-orders-table mark {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background: #e8edf5 !important;
    color: #3d4461 !important;
}
.woocommerce-orders-table mark.pending-payment,
.woocommerce-orders-table mark.pending { background: #fff3cd !important; color: #7d5a00 !important; }
.woocommerce-orders-table mark.processing { background: #d1e7ff !important; color: #004085 !important; }
.woocommerce-orders-table mark.completed { background: #d4edda !important; color: #155724 !important; }
.woocommerce-orders-table mark.cancelled,
.woocommerce-orders-table mark.failed { background: #f8d7da !important; color: #721c24 !important; }
.woocommerce-Address {
    border: 1px solid #e8edf5 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,82,165,0.07) !important;
}
.woocommerce-Address header.woocommerce-Address-title {
    background: #0052A5 !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.woocommerce-Address header.woocommerce-Address-title h3 {
    color: #fff !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.woocommerce-Address header.woocommerce-Address-title .edit { color: rgba(255,255,255,0.8) !important; font-size: 12px !important; }
.woocommerce-Address address {
    padding: 20px !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #3d4461 !important;
    margin: 0 !important;
}
/* ── END My Account Premium ─────────────────────────────────────── */

/* ── My Account — Address Header Alignment Fix ─────────────────── */
.woocommerce-Address header.woocommerce-Address-title {
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.woocommerce-Address header.woocommerce-Address-title .edit {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
/* ── END Address Header Fix ─────────────────────────────────────── */

/* ── WooCommerce Login — Remember Me Checkbox Fix ────────────────── */
.woocommerce-form-login__rememberme .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 8px !important;
    cursor: pointer;
}
.woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
}
/* ── END Login Checkbox Fix ──────────────────────────────────────── */

/* ── Address Header — Column Layout Fix ─────────────────────────── */
.woocommerce-Address header.woocommerce-Address-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 14px 20px !important;
    flex-wrap: nowrap !important;
}
.woocommerce-Address header.woocommerce-Address-title .edit {
    color: rgba(255,255,255,0.8) !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    white-space: nowrap !important;
    flex-shrink: unset !important;
}
/* ── END Address Header Fix ──────────────────────────────────────── */


/* ── NEXT Button — Waiver Lock State ────────────────────────────── */
.bookly-details-step .bookly-btn.tbw-next-locked,
.bookly-details-step .bookly-next-step.tbw-next-locked {
    background: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.bookly-details-step .bookly-next-step:not(.tbw-next-locked) {
    background: #0052A5 !important;
    border-color: #0052A5 !important;
}
@keyframes tbw-shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-8px); }
    40%     { transform: translateX(8px); }
    60%     { transform: translateX(-5px); }
    80%     { transform: translateX(5px); }
}
@keyframes tbw-flash {
    0%,100% { background: transparent; }
    40%     { background: #fee2e2; border-radius: 4px; }
}
.tbw-shake       { animation: tbw-shake 0.45s ease; }
.tbw-flash-error { animation: tbw-flash 0.65s ease; }
/* ── END NEXT Button Lock ────────────────────────────────────────── */

/* ── Bookly Validation Errors — Red Override ─────────────────────── */
.bookly-form .bookly-label-error {
    color: #c0392b !important;
}

/* ── Hide single "Uncategorized" category dropdown ───────────────── */
.bookly-service-step .bookly-service-parts > .bookly-column:first-child {
    display: none !important;
}
/* ── END Bookly Error / Category Fixes ───────────────────────────── */




/* ── WooCommerce Checkout — Premium Payment Section ──────────────── */
#payment {
    background: #fff !important;
    border: 1px solid #e0e8f4 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,82,165,0.07) !important;
    padding: 0 !important;
}
#payment ul.wc_payment_methods {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* li = flex row: [radio][label] with payment_box wrapping full-width below */
#payment ul.wc_payment_methods li.wc_payment_method {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    border-bottom: 1px solid #f0f3f8 !important;
    border-left: 3px solid transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: border-left-color 0.15s, background 0.15s !important;
}
#payment ul.wc_payment_methods li.wc_payment_method:last-of-type {
    border-bottom: none !important;
}
#payment ul.wc_payment_methods li.wc_payment_method:hover {
    background: #f4f7fc !important;
}
#payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
    border-left-color: #0052A5 !important;
    background: #f0f5ff !important;
}
#payment ul.wc_payment_methods li.wc_payment_method:has(input:checked):hover {
    background: #eef3fb !important;
}

/* Custom radio — inline left */
#payment ul.wc_payment_methods li.wc_payment_method input[type="radio"] {
    position: static !important;
    opacity: 1 !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    margin: 0 0 0 14px !important;
    padding: 0 !important;
    pointer-events: auto !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 2px solid #c8d0df !important;
    border-radius: 50% !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: border-color 0.15s, background 0.15s !important;
}
#payment ul.wc_payment_methods li.wc_payment_method input[type="radio"]:checked {
    border-color: #0052A5 !important;
    background: #0052A5 !important;
    box-shadow: inset 0 0 0 3px #fff !important;
}

/* Label fills row, logo pushed right */
#payment ul.wc_payment_methods li.wc_payment_method label {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 16px 11px 10px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #3d4461 !important;
    margin: 0 !important;
    gap: 12px !important;
}
#payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) label {
    color: #0052A5 !important;
    font-weight: 600 !important;
}

/* Logos uniform */
#payment ul.wc_payment_methods li.wc_payment_method label img {
    max-height: 22px !important;
    max-width: 80px !important;
    width: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* Short hint text injected by JS */
.tbw-pm-hint {
    flex: 0 0 100% !important;
    padding: 0 16px 8px 41px !important;
    margin: -4px 0 0 !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
}

/* Payment box — full-width, wraps below radio+label */
#payment .payment_box {
    flex: 0 0 100% !important;
    background: #f8fafc !important;
    border-top: 1px solid #e8edf5 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}
#payment .payment_box input[type="text"],
#payment .payment_box input[type="tel"],
#payment .payment_box input[type="number"],
#payment .payment_box input[type="password"] {
    border: 1px solid #d1d9e6 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background: #fff !important;
    color: #3d4461 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#payment .payment_box input:focus {
    border-color: #0052A5 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,82,165,0.1) !important;
}

/* Pay button */
#payment #place_order {
    background: #0052A5 !important;
    border-color: #0052A5 !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 13px 20px !important;
    width: 100% !important;
    margin-top: 16px !important;
    transition: background 0.2s !important;
}
#payment #place_order:hover {
    background: #003d7a !important;
    border-color: #003d7a !important;
}
/* ── END Premium Payment Section ─────────────────────────────────── */


/* ── Card Form — Expiry + CVC same row, equal width ─────────────── */
#payment .payment_box .form-row-first {
    float: left !important;
    width: 48% !important;
    clear: none !important;
    display: block !important;
    box-sizing: border-box !important;
    padding-right: 6px !important;
}
#payment .payment_box .form-row-last {
    float: right !important;
    width: 48% !important;
    clear: none !important;
    display: block !important;
    box-sizing: border-box !important;
    padding-left: 6px !important;
}
#payment .payment_box .form-row-first input,
#payment .payment_box .form-row-last input {
    width: 100% !important;
    box-sizing: border-box !important;
}
#payment .payment_box .clear {
    clear: both !important;
    display: block !important;
    height: 0 !important;
}

/* ── Maya Logo — wider allowance for horizontal text logo ────────── */
/* ── END Card + Maya Fixes ───────────────────────────────────────── */

/* ── Compact Card Form — reduce Astra label padding inflation ─── */
#payment .payment_box label {
    padding: 0 0 3px 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    display: block !important;
    font-weight: 600 !important;
}
#payment .payment_box .form-row {
    margin-bottom: 8px !important;
    padding: 0 !important;
}
#payment .payment_box input[type="text"],
#payment .payment_box input[type="tel"],
#payment .payment_box input[type="number"],
#payment .payment_box input[type="password"] {
    padding: 6px 10px !important;
    height: auto !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
}
#payment .payment_box > p,
#payment .payment_box > .tbw-card-body-text {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}
/* ── END Compact Card Form ──────────────────────────────────────── */

/* ── Compact Card Form v2 — boost specificity to beat Astra ────── */
#payment ul.wc_payment_methods li.wc_payment_method .payment_box label,
#payment ul.wc_payment_methods li.wc_payment_method .payment_box .form-row label {
    padding-top: 0 !important;
    padding-bottom: 3px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    display: block !important;
    height: auto !important;
    font-weight: 600 !important;
}
#payment ul.wc_payment_methods li.wc_payment_method .payment_box .form-row {
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="text"],
#payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="tel"],
#payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="number"],
#payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="password"] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}
/* ── END Compact Card Form v2 ──────────────────────────────────── */

/* ── Card form max-width — prevent full-bleed on desktop ─────── */
#payment ul.wc_payment_methods li.wc_payment_method .payment_box {
    max-width: 460px !important;
}
/* ── END Card form max-width ─────────────────────────────────── */

/* ── Payment section — frame the ul as a single card ────────────── */
#payment ul.wc_payment_methods {
    border: 1px solid #dde3ef !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
#payment ul.wc_payment_methods li.wc_payment_method {
    border-left-width: 4px !important;
    padding: 10px 14px !important;
}
#payment ul.wc_payment_methods li.wc_payment_method:last-of-type {
    border-bottom: none !important;
}

/* ── Hide redundant card form description text ───────────────────── */
#payment .payment_method_paymongo .payment_box > p {
    display: none !important;
}

/* ── Order summary table ─────────────────────────────────────────── */
table.shop_table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #dde3ef !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    font-size: 13px !important;
}
table.shop_table thead tr th {
    background: #f1f5f9 !important;
    color: #374151 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #dde3ef !important;
}
/* Hide Qty column — irrelevant for court booking */
table.shop_table th.product-quantity,
table.shop_table td.product-quantity {
    display: none !important;
}
table.shop_table tbody tr td,
table.shop_table tbody tr th {
    padding: 10px 16px !important;
    border-bottom: 1px solid #f0f3f8 !important;
    vertical-align: middle !important;
}
table.shop_table tfoot tr th,
table.shop_table tfoot tr td {
    padding: 12px 16px !important;
    border-top: 2px solid #dde3ef !important;
    font-size: 14px !important;
}
table.shop_table tfoot tr.order-total th,
table.shop_table tfoot tr.order-total td {
    background: #f8fafc !important;
    font-weight: 700 !important;
    color: #0052A5 !important;
    font-size: 15px !important;
}
/* ── END All Fixes ───────────────────────────────────────────────── */

/* ── Center payment_box within full-width row ───────────────────── */
#payment ul.wc_payment_methods li.wc_payment_method .payment_box {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ── END center ─────────────────────────────────────────────────── */

/* ── Constrain payment ul container width ───────────────────────── */
#payment ul.wc_payment_methods {
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ── END ─────────────────────────────────────────────────────────── */

/* ── Constrain #payment outer wrapper ───────────────────────────── */
#payment {
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ── END ─────────────────────────────────────────────────────────── */

/* ── Order-pay: two-column layout ───────────────────────────────── */
form#order_review {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px 36px;
    align-items: start;
}
form#order_review table.shop_table {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    margin-bottom: 0 !important;
}
form#order_review #tbw-billing-form {
    grid-column: 1;
    grid-row: 2;
}
form#order_review #payment {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 100% !important;
    margin: 0 !important;
    position: sticky;
    top: 24px;
}
form#order_review #payment ul.wc_payment_methods {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
form#order_review #payment .payment_box {
    max-width: 100% !important;
}

/* ── Order total — prominent amount ─────────────────────────────── */
table.shop_table tfoot tr.order-total th,
table.shop_table tfoot tr.order-total td {
    background: #eef3fb !important;
    border-top: 2px solid #0052A5 !important;
    padding: 16px !important;
}
table.shop_table tfoot tr.order-total td .woocommerce-Price-amount {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0052A5 !important;
    letter-spacing: -0.5px !important;
}
table.shop_table tfoot tr.order-total th {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0052A5 !important;
}

/* ── Mobile: stack vertically ───────────────────────────────────── */
@media (max-width: 768px) {
    form#order_review {
        display: block !important;
    }
    form#order_review #payment {
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: static !important;
    }
    form#order_review #payment ul.wc_payment_methods {
        max-width: 460px !important;
    }
}
/* ── END two-column layout ──────────────────────────────────────── */

/* ── Order-pay total row fix — no .order-total class on this template ── */
table.shop_table tfoot tr th {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0052A5 !important;
    background: #eef3fb !important;
    border-top: 2px solid #0052A5 !important;
    padding: 14px 16px !important;
}
table.shop_table tfoot tr td {
    background: #eef3fb !important;
    border-top: 2px solid #0052A5 !important;
    padding: 14px 16px !important;
}
table.shop_table tfoot tr td .woocommerce-Price-amount {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0052A5 !important;
    letter-spacing: -0.3px !important;
}
/* ── END total row fix ──────────────────────────────────────────── */

/* ── Fully collapse qty column — prevent ghost 3rd column ───────── */
table.shop_table th.product-quantity,
table.shop_table td.product-quantity {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
/* ── END qty collapse ───────────────────────────────────────────── */

/* ── Total row: remove background, keep border + blue text ──────── */
table.shop_table tfoot tr th,
table.shop_table tfoot tr td {
    background: transparent !important;
}
/* ── END total row bg fix ───────────────────────────────────────── */

/* ── Total row: fix font size + alignment ───────────────────────── */
table.shop_table tfoot tr th,
table.shop_table tfoot tr td {
    vertical-align: middle !important;
    padding: 12px 16px !important;
}
table.shop_table tfoot tr td .woocommerce-Price-amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0052A5 !important;
    letter-spacing: 0 !important;
}
table.shop_table tfoot tr th {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0052A5 !important;
}
/* ── END total row font/alignment fix ───────────────────────────── */

/* ── Billing form: match order table card style ──────────────────── */
#tbw-billing-form {
    border: 1px solid #dde3ef !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
#tbw-billing-form h3 {
    background: #f1f5f9 !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #374151 !important;
    border-bottom: 1px solid #dde3ef !important;
}
#tbw-billing-form .tbw-row {
    padding: 0 16px !important;
}
#tbw-billing-form .tbw-row:first-of-type {
    padding-top: 12px !important;
}
#tbw-billing-form .tbw-row:last-of-type {
    padding-bottom: 16px !important;
}
/* ── END billing form card ───────────────────────────────────────── */
/* ── Mobile UX: card alignment + tap targets + iOS no-zoom ──────── */
/* Equalize Expiry / CVC label heights so inputs bottom-align */
#payment .payment_box .form-row-first label,
#payment .payment_box .form-row-last label {
    min-height: 32px !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* ── Phone (≤430px): iPhone 17 / 17 Pro Max ────────────────────── */
@media (max-width: 430px) {
    /* Billing form — override inline styles */
    #tbw-billing-form input[type="text"],
    #tbw-billing-form input[type="email"],
    #tbw-billing-form input[type="tel"] {
        padding: 12px !important;
        font-size: 16px !important;     /* prevents iOS auto-zoom */
        min-height: 44px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    #tbw-billing-form label {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    /* Payment method rows */
    #payment ul.wc_payment_methods li.wc_payment_method {
        min-height: 52px !important;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* Card form inputs */
    #payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="text"],
    #payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="tel"],
    #payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="password"],
    #payment .payment_box input {
        padding: 12px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* PAY button */
    #payment #place_order,
    .woocommerce #payment #place_order {
        min-height: 52px !important;
        font-size: 16px !important;
        letter-spacing: 0.4px !important;
    }

    /* Card form side-by-side: tighter on phone */
    #payment .payment_box .form-row-first {
        width: 47% !important;
        padding-right: 4px !important;
    }
    #payment .payment_box .form-row-last {
        width: 47% !important;
        padding-left: 4px !important;
    }

    /* Billing form gap reduce on small screens */
    #tbw-billing-form .tbw-row {
        gap: 8px !important;
    }
}

/* ── iPad Pro 11-inch M5 (769–1024px) ──────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    form#order_review {
        gap: 24px 28px !important;
    }
    #payment .payment_box input[type="text"],
    #payment .payment_box input[type="tel"],
    #payment .payment_box input[type="password"],
    #tbw-billing-form input {
        padding: 10px 12px !important;
        font-size: 15px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    #payment ul.wc_payment_methods li.wc_payment_method {
        min-height: 48px !important;
    }
}
/* ── END Mobile UX ──────────────────────────────────────────────── */
/* ── iPad mini gap (431–768px): tap targets + iOS font ──────────── */
@media (min-width: 431px) and (max-width: 768px) {
    #tbw-billing-form input[type="text"],
    #tbw-billing-form input[type="email"],
    #tbw-billing-form input[type="tel"] {
        padding: 10px 12px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    #payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="text"],
    #payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="tel"],
    #payment ul.wc_payment_methods li.wc_payment_method .payment_box input[type="password"],
    #payment .payment_box input {
        padding: 10px 12px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    #payment ul.wc_payment_methods li.wc_payment_method {
        min-height: 48px !important;
    }
    #payment #place_order {
        min-height: 48px !important;
        font-size: 15px !important;
    }
}
/* ── END iPad mini gap fix ──────────────────────────────────────── */
/* ── FAQ accordion: 44px min tap target ──────────────────────────── */
.c-accordion__title {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}
/* ── END FAQ accordion ───────────────────────────────────────────── */

/* ── WPForms: 16px font (iOS no-zoom) + 44px tap targets ─────────── */
@media (max-width: 768px) {
    .wpforms-field input[type="text"],
    .wpforms-field input[type="email"],
    .wpforms-field input[type="tel"],
    .wpforms-field input[type="number"],
    .wpforms-field input[type="url"],
    .wpforms-field input[type="password"] {
        font-size: 16px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    .wpforms-field textarea {
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    .wpforms-field select {
        font-size: 16px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    .wpforms-submit-container button[type="submit"],
    .wpforms-submit {
        min-height: 48px !important;
        font-size: 15px !important;
    }
}
/* ── END WPForms ─────────────────────────────────────────────────── */

/* Fix 4b: RFQ name fields – stack First/Last only on phones (not iPad) */
@media (max-width: 430px) {
  .wpforms-field-row { flex-direction: column !important; }
  .wpforms-field-row-block.wpforms-one-half {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Fix: Testimonials – full logo visible, faces show from top */
.elementor-9 .elementor-element.elementor-element-0c921b4 > .elementor-widget-wrap {
  background-size: contain !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}
.elementor-9 .elementor-element.elementor-element-5c2ef84 > .elementor-widget-wrap,
.elementor-9 .elementor-element.elementor-element-117b190 > .elementor-widget-wrap {
  background-position: top center !important;
}


/* Fix 1b: Hero heading – scale font at 768-1024px for 2-line wrap like desktop */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-9 .elementor-element.elementor-element-291db26 .elementor-heading-title {
    font-size: 65px !important;
    line-height: 1.15 !important;
  }
}

/* Fix 1c: Hero headings – left-align + constrain text to left side on tablet
   (834-1023px) so hoop image stays visible on right. Verified at 834px. */
@media (min-width: 834px) and (max-width: 1023px) {
  .elementor-9 .elementor-element-e734523 {
    padding-right: 40% !important;
  }
  .elementor-9 .elementor-element-291db26 .elementor-heading-title,
  .elementor-9 .elementor-element-fb0d4ec .elementor-heading-title {
    text-align: left !important;
  }
}

/* Fix: Announcement bar – visible on mobile/tablet (Astra hides #ast-desktop-header
   below its mobile breakpoint, taking the above-header bar with it). */
@media (max-width: 921px) {
  #ast-desktop-header { display: block !important; }
  #ast-desktop-header .ast-main-header-wrap,
  #ast-desktop-header .ast-below-header-wrap { display: none !important; }
}

/* Fix 1d: Hero headings – left-align + 30% padding for mid-range tablets/large phones
   (600-833px). Avoids mid-word breaks seen below 600px. Complements Fix 1c (834-1023px). */
@media (min-width: 600px) and (max-width: 833px) {
  .elementor-9 .elementor-element-e734523 {
    padding-right: 30% !important;
  }
  .elementor-9 .elementor-element-291db26 .elementor-heading-title,
  .elementor-9 .elementor-element-fb0d4ec .elementor-heading-title {
    text-align: left !important;
  }
}

/* Fix 1e: Hero bg – push hoop to right edge at 431-599px (landscape phones).
   bg 0px 0px shows net on right edge, text readable, same feel as ≤430px. */
@media (min-width: 431px) and (max-width: 599px) {
  .elementor-9 .elementor-element.elementor-element-7ae8eb8:not(.elementor-motion-effects-element-type-background),
  .elementor-9 .elementor-element.elementor-element-7ae8eb8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: 0px 0px !important;
  }
}

/* Order overview alignment — all viewports */
/* Desktop (769px+): single row, remove trailing right border */
.woocommerce-order-overview.woocommerce-thankyou-order-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 1.5em;
  padding: 0;
  list-style: none;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details::before,
.woocommerce-order-overview.woocommerce-thankyou-order-details::after {
  display: none !important;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details li {
  border-right: 1px solid #d3ced2;
  padding: 0 1em 0 0;
  margin: 0 1em 0.5em 0;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details li:last-child {
  border-right: none;
  margin-right: 0;
}

/* Tablet (600–768px): 2-column grid, bottom borders only */
@media (max-width: 768px) {
  .woocommerce-order-overview.woocommerce-thankyou-order-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .woocommerce-order-overview.woocommerce-thankyou-order-details li {
    float: none !important;
    border-right: none;
    border-bottom: 1px solid #e0ddd9;
    padding: 0.6em 0.5em;
    margin: 0;
  }
  .woocommerce-order-overview.woocommerce-thankyou-order-details li:last-child,
  .woocommerce-order-overview.woocommerce-thankyou-order-details li:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }
}

/* Mobile (<480px): single column stack, clean bottom borders */
@media (max-width: 479px) {
  .woocommerce-order-overview.woocommerce-thankyou-order-details {
    display: flex;
    flex-direction: column;
  }
  .woocommerce-order-overview.woocommerce-thankyou-order-details li {
    float: none !important;
    border-right: none;
    border-bottom: 1px solid #e0ddd9;
    padding: 0.5em 0;
    margin: 0;
    width: 100%;
  }
  .woocommerce-order-overview.woocommerce-thankyou-order-details li:last-child {
    border-bottom: none;
  }
}

/* Center order-received header section — all viewports */
.woocommerce-thankyou-order-received {
  text-align: center !important;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details li {
  text-align: center;
}

/* Footer alignment fixes — all viewports */
/* Mobile (<768px): stacked columns — center everything */
@media (max-width: 900px) {
  .site-primary-footer-wrap .footer-widget-area {
    text-align: center !important;
  }
  .site-primary-footer-wrap .footer-widget-area .widget_nav_menu ul {
    padding: 0;
    list-style: none;
  }
  .site-primary-footer-wrap .footer-widget-area .widget_nav_menu a {
    display: block;
  }
  .footer-social-inner-wrap {
    text-align: center !important;
  }
  .site-footer-primary-section-2 .footer-widget-area {
    text-align: center !important;
  }
}

/* Tablet (768px–1023px): force stack like mobile — center everything */
@media (min-width: 768px) and (max-width: 1023px) {
  .ast-builder-footer-grid-columns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .site-primary-footer-wrap .footer-widget-area,
  .site-footer-primary-section-1,
  .site-footer-primary-section-2,
  .site-footer-primary-section-3 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .site-primary-footer-wrap .footer-widget-area a {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .footer-social-inner-wrap {
    text-align: center !important;
  }
  .site-footer-primary-section-2 .footer-widget-area {
    text-align: center !important;
  }
}

/* Court Rates table — center first column all viewports */
.page-id-6265 #tbw-court-info table td:first-child,
.page-id-6265 #tbw-court-info table th:first-child {
  text-align: center !important;
  padding: 8px 14px !important;
  vertical-align: middle !important;
}

/* Center HOW IT WORKS and COURT RATES section headers — all viewports */
#tbw-court-info > div > div[style*=linear-gradient] {
  text-align: center !important;
}

/* Copyright bar — center all viewports */
.ast-footer-copyright,
.ast-footer-copyright p {
  text-align: center !important;
}

/* How It Works — 4 steps single row at tablet portrait (768px) */
@media (max-width: 800px) {
  #tbw-court-info [style*="min-width:140px"] {
    min-width: 110px !important;
  }
  #tbw-court-info [style*="gap:24px"][style*="flex-wrap:wrap"] {
    gap: 12px !important;
  }
}

/* Hero hoop — nudge left on mobile */
@media (max-width: 900px) {
  .elementor-9 .elementor-element.elementor-element-7ae8eb8:not(.elementor-motion-effects-element-type-background) {
    background-position: 70% 0px !important;
  }
}

/* Hero text — force center on tablet */
@media (max-width: 900px) {
  .elementor-9 .elementor-element.elementor-element-fb0d4ec,
  .elementor-9 .elementor-element.elementor-element-291db26,
  .elementor-9 .elementor-element.elementor-element-12ad138 {
    text-align: center !important;
  }
  .elementor-9 .elementor-element.elementor-element-fb0d4ec .elementor-heading-title,
  .elementor-9 .elementor-element.elementor-element-291db26 .elementor-heading-title {
    text-align: center !important;
  }
  .elementor-9 .elementor-element.elementor-element-12ad138 .elementor-button-wrapper {
    text-align: center !important;
  }
}



/* Hero — center text on iPad portrait */
@media (min-width: 768px) and (max-width: 900px) {
  .elementor-9 .elementor-element.elementor-element-e734523 {
    padding-left: calc(50% - 226px) !important;
    box-sizing: border-box !important;
  }
}