/**
 * XSHIELD1 — CartFlows Checkout Form Reskin
 * ---------------------------------------------------------------------------
 * Targets the real markup CartFlows renders for this checkout step
 * (confirmed via direct DOM inspection, not assumption): the step is built
 * with CartFlows' "modern checkout, two-column" skin inside an Elementor
 * "Full Width" Container, not by our theme's own page-custom-checkout.php.
 *
 * Rewritten clean (previous version had accumulated duplicate/conflicting
 * rule blocks from several rounds of edits — some stale blocks were
 * silently winning the cascade over newer fixes). Every selector below
 * appears exactly once now.
 *
 * Nothing here changes markup, element IDs/names, or JS bindings — every
 * WooCommerce/CartFlows/ngenius script continues to target the exact same
 * nodes it always has.
 * ------------------------------------------------------------------------ */

.wcf-embed-checkout-form,
.wcf-embed-checkout-form .woocommerce {
  font-family: var(--xs-font-sans) !important;
  color: var(--xs-color-text);
}

/* ---------------------------------------------------------------------------
 * Width — confirmed via direct DOM inspection
 * ---------------------------------------------------------------------------
 * Everything on this step sits inside a single Elementor Container
 * (elementor-element-281861df) already set to Full Width, then a Spectra/
 * UAGB block chain, then CartFlows' own form wrapper. All scoped to
 * body.page-id-9 (this specific checkout step only) so it's safe to be
 * aggressive without affecting other pages.
 * ------------------------------------------------------------------------ */
body.page-id-9 .uagb-block-07123a48,
body.page-id-9 .wp-block-uagb-container.uagb-is-root-container,
body.page-id-9 .uagb-container-inner-blocks-wrap,
body.page-id-9 .wcf-gb-checkout-form,
body.page-id-9 .cartflows-gutenberg__checkout-form {
  max-width: none !important;
  width: 100% !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.page-id-9 .wcf-gb-checkout-form {
  display: flex !important;
  justify-content: center !important;
  padding: var(--xs-space-6) var(--xs-space-5) !important;
  background-color: var(--xs-color-surface) !important;
}

body.page-id-9 #wcf-embed-checkout-form.wcf-embed-checkout-form {
  width: 100% !important;
  max-width: 1360px !important;
}

/* ---------------------------------------------------------------------------
 * Two-column layout — .wcf-customer-info-main-wrapper and .wcf-order-wrap
 * are the two direct children of <form class="checkout woocommerce-checkout">.
 * CartFlows applies its own float/fixed-width rules to these; overriding
 * with an explicit grid removes that dependency entirely.
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form .woocommerce-checkout {
  display: grid !important;
  grid-template-columns: 1fr 440px !important;
  gap: var(--xs-space-8) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
}

.wcf-embed-checkout-form .wcf-customer-info-main-wrapper,
.wcf-embed-checkout-form .wcf-order-wrap {
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

.wcf-embed-checkout-form .wcf-order-wrap {
  position: sticky !important;
  top: var(--xs-space-5) !important;
}

/* ---------------------------------------------------------------------------
 * Card-based sections — matching the Capsule reference structure
 * ---------------------------------------------------------------------------
 * Each logical section (Customer info + Billing, Shipping method, Payment,
 * Order summary) as its own distinct white bordered card on the light gray
 * page background set above — straight corners, consistent padding/gap.
 *
 * Confirmed real wrapper elements (not assumed):
 *   #customer_details          → Customer info + Billing details + notes
 *   .wcf-customer-shipping     → the visible Shipping-METHOD list
 *   .wcf-payment-option-heading + #payment → the Payment section
 *                                 (two separate sibling elements — merged
 *                                 visually into one card below)
 *   .wcf-order-wrap            → Order summary
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form #customer_details,
.wcf-embed-checkout-form .wcf-customer-shipping,
.wcf-embed-checkout-form .wcf-payment-option-heading,
.wcf-embed-checkout-form #payment,
.wcf-embed-checkout-form .wcf-order-wrap {
  background-color: var(--xs-color-bg) !important;
  border: var(--xs-border-width) solid var(--xs-color-border) !important;
  border-radius: 0 !important;
  padding: var(--xs-space-6) !important;
}

.wcf-embed-checkout-form #customer_details,
.wcf-embed-checkout-form .wcf-customer-shipping {
  margin-bottom: var(--xs-space-5) !important;
}

.wcf-embed-checkout-form .wcf-payment-option-heading {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.wcf-embed-checkout-form .wcf-payment-option-heading h3 {
  margin-bottom: 0 !important;
}

.wcf-embed-checkout-form #payment {
  border-top: none !important;
  padding-top: var(--xs-space-4) !important;
}

.wcf-embed-checkout-form ul#shipping_method {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wcf-embed-checkout-form ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: var(--xs-space-1);
  padding-block: var(--xs-space-2);
  font-size: var(--xs-fs-sm);
  border-bottom: var(--xs-border-width) solid var(--xs-color-border);
}

.wcf-embed-checkout-form ul#shipping_method li:last-child {
  border-bottom: none;
}

/* ---------------------------------------------------------------------------
 * Shipping dropdown — full width, centered in the .wcf-customer-shipping
 * card
 * ---------------------------------------------------------------------------
 * Neither the <details>/<summary> widget checkout.js wraps ul#shipping_method
 * in (.xs-shipping-dropdown, multi-rate packages) nor the plain <ul> it
 * leaves untouched (single-rate packages — see checkout.js's
 * enhanceShippingMethods()) had an explicit width/display rule scoped to
 * this form, so either could end up shrinking to its content's width
 * instead of the card's full content box, leaving uneven dead space on the
 * right instead of matching the card's own left/right padding. Forcing
 * block + 100% width here (scoped to this form, !important per this file's
 * convention — see header comment) makes it always span edge-to-edge
 * within .wcf-customer-shipping's padding, which is symmetric already, so
 * this alone gives it even left/right spacing.
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form .xs-shipping-dropdown,
.wcf-embed-checkout-form ul#shipping_method {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-inline: auto !important;
}

.wcf-embed-checkout-form .xs-shipping-dropdown__summary,
.wcf-embed-checkout-form ul#shipping_method li {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------------------------
 * Correction from an earlier pass: the shipping method here is NOT a
 * native <select> — checkout.js wraps ul#shipping_method in a <details>/
 * <summary> widget (.xs-shipping-dropdown, styled in cart-checkout.css).
 * The actual cause of the reported right-side gap was table-layout:fixed
 * on the review-order table above squeezing that row's cell down to the
 * product-total column's width — fixed above. Left the defensive <select>
 * rule below in place in case a shipping/tax plugin ever does render a
 * literal <select> somewhere in this form; harmless no-op otherwise since
 * it won't match anything that doesn't exist.
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form .wcf-customer-shipping select,
.wcf-embed-checkout-form select#shipping_method,
.wcf-embed-checkout-form select[name^="shipping_method"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  border: var(--xs-border-width) solid var(--xs-color-border) !important;
  background-color: var(--xs-color-bg) !important;
  font-family: var(--xs-font-sans) !important;
  font-size: var(--xs-fs-sm) !important;
  height: 44px !important;
}

/* ---------------------------------------------------------------------------
 * Section headings
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form h3,
.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #order_review_heading {
  font-family: var(--xs-font-sans) !important;
  font-weight: var(--xs-fw-bold) !important;
  font-size: var(--xs-fs-lg) !important;
  color: var(--xs-color-text) !important;
  margin: 0 0 var(--xs-space-5) !important;
}

/* ---------------------------------------------------------------------------
 * Form fields — straight corners, brand focus ring, consistent height
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form .woocommerce form .form-row input.input-text,
.wcf-embed-checkout-form .woocommerce form .form-row select,
.wcf-embed-checkout-form .woocommerce form .form-row textarea,
.wcf-embed-checkout-form .select2-container--default .select2-selection--single {
  border-radius: 0 !important;
  border: var(--xs-border-width) solid var(--xs-color-border) !important;
  background-color: var(--xs-color-bg) !important;
  font-family: var(--xs-font-sans) !important;
  font-size: var(--xs-fs-sm) !important;
  height: 44px !important;
}

.wcf-embed-checkout-form .woocommerce form .form-row textarea {
  height: auto !important;
  min-height: 90px !important;
  padding-top: var(--xs-space-3) !important;
}

.wcf-embed-checkout-form .woocommerce form .form-row input.input-text:focus,
.wcf-embed-checkout-form .woocommerce form .form-row select:focus,
.wcf-embed-checkout-form .woocommerce form .form-row textarea:focus {
  outline: 2px solid var(--xs-color-focus-ring) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}

.wcf-embed-checkout-form .woocommerce form p.form-row label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  font-family: var(--xs-font-sans) !important;
  font-size: var(--xs-fs-sm) !important;
  font-weight: var(--xs-fw-semibold) !important;
  color: var(--xs-color-text) !important;
  margin-bottom: var(--xs-space-2) !important;
  display: block !important;
}

.wcf-embed-checkout-form .woocommerce form .form-row .required {
  color: var(--xs-color-brand) !important;
}

.wcf-embed-checkout-form .woocommerce form .form-row {
  margin-bottom: var(--xs-space-3) !important;
}

/* ---------------------------------------------------------------------------
 * Order review table — WooCommerce wraps every attribute value in a <p>,
 * which is block-level by default and was forcing each Year/Make/Model
 * onto its own line; unwrapping it collapses the list into normal
 * wrapping text flow instead. Vehicle is hidden since it's just Years +
 * Make + Model concatenated again as one redundant string.
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table {
  border-collapse: collapse !important;
  width: 100% !important;
  /*
   * table-layout: fixed removed. WooCommerce renders cart items (tbody)
   * AND the Subtotal/Shipping/Total rows (tfoot) inside this one same
   * table. With fixed layout, the browser locks in each column's width
   * using ONLY the first row and then applies that same width to every
   * other row in that column position, regardless of that cell's own
   * class or content — so the Shipping row's value cell was silently
   * being squeezed down to whatever .product-total's 28% happened to be,
   * which is almost certainly the reported "gap on the right" (the
   * shipping dropdown correctly fills 100% of its cell — that cell just
   * wasn't as wide as the row visually suggested it should be). Reverting
   * to the default auto layout lets every row size its own cells again.
   */
}

.wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table .product-name {
  width: auto !important;
}

.wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table .product-total {
  width: 1% !important;
  white-space: nowrap !important;
}

/* Defensive, in case any other totals row (Subtotal, a coupon line, etc.)
   ever picked up an unwanted width from the above in some browser's auto-
   layout width distribution — auto layout only /suggests/ widths from
   content, it doesn't lock them the way fixed layout did, but this keeps
   every tfoot row free to size on its own regardless. */
.wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table tfoot td {
  width: auto !important;
}

.wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table td,
.wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table th {
  padding-block: var(--xs-space-2) !important;
  border-bottom: var(--xs-border-width) solid var(--xs-color-border) !important;
  font-size: var(--xs-fs-sm) !important;
  text-align: left !important;
}

.wcf-embed-checkout-form .product-name dl {
  margin: var(--xs-space-1) 0 0 !important;
  font-weight: var(--xs-fw-regular) !important;
}

.wcf-embed-checkout-form .product-name dl dt,
.wcf-embed-checkout-form .product-name dl dd {
  display: inline !important;
  margin: 0 !important;
  font-size: var(--xs-fs-xs) !important;
  color: var(--xs-color-text-muted) !important;
}

.wcf-embed-checkout-form .product-name dl dd p {
  display: inline !important;
  margin: 0 !important;
}

.wcf-embed-checkout-form .product-name dl dd::after {
  content: '  ';
}

.wcf-embed-checkout-form .product-name dl dt.variation-Vehicle,
.wcf-embed-checkout-form .product-name dl dd.variation-Vehicle {
  display: none !important;
}

.wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: none !important;
  padding-top: var(--xs-space-4) !important;
  font-size: var(--xs-fs-lg) !important;
  font-weight: var(--xs-fw-bold) !important;
}

/* ---------------------------------------------------------------------------
 * Payment methods (ngenius) — straight-edged, consistent with the rest
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form ul.wc_payment_methods {
  list-style: none !important;
  margin: 0 0 var(--xs-space-5) !important;
  padding: 0 !important;
}

.wcf-embed-checkout-form li.wc_payment_method {
  border-radius: 0 !important;
  border: var(--xs-border-width) solid var(--xs-color-border) !important;
  padding: var(--xs-space-4) !important;
  margin-bottom: var(--xs-space-3) !important;
}

.wcf-embed-checkout-form li.wc_payment_method label {
  font-weight: var(--xs-fw-semibold) !important;
  font-size: var(--xs-fs-sm) !important;
}

.wcf-embed-checkout-form .payment_box {
  border-radius: 0 !important;
  font-size: var(--xs-fs-sm) !important;
}

/* ---------------------------------------------------------------------------
 * Radio buttons — shipping methods + payment method selector were only
 * getting a proper circular appearance on the :checked item; unchecked
 * radios fell back to an unstyled square.
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: radio !important;
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--xs-color-brand) !important;
  margin-right: var(--xs-space-2) !important;
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Place order button — brand red, straight corners, full width
 * ------------------------------------------------------------------------ */
.wcf-embed-checkout-form #payment #place_order {
  background-color: var(--xs-color-brand) !important;
  border-color: var(--xs-color-brand) !important;
  border-radius: 0 !important;
  color: var(--xs-color-on-brand) !important;
  font-weight: var(--xs-fw-semibold) !important;
  font-size: var(--xs-fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--xs-space-2) !important;
  white-space: nowrap !important;
  width: 100% !important;
  padding-block: var(--xs-space-4) !important;
}

.wcf-embed-checkout-form #payment #place_order:hover {
  background-color: var(--xs-color-brand-hover) !important;
  border-color: var(--xs-color-brand-hover) !important;
}

/* ---------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  body.page-id-9 .wcf-gb-checkout-form {
    padding: var(--xs-space-5) var(--xs-space-4) !important;
  }
  .wcf-embed-checkout-form .woocommerce-checkout {
    grid-template-columns: 1fr !important;
    gap: var(--xs-space-6) !important;
  }
  .wcf-embed-checkout-form .wcf-order-wrap {
    position: static !important;
  }
  .wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table .product-name {
    width: 65% !important;
  }
  .wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table .product-total {
    width: 35% !important;
  }
  .wcf-embed-checkout-form h3 {
    font-size: var(--xs-fs-md) !important;
  }
  .wcf-embed-checkout-form .woocommerce form .form-row-first,
  .wcf-embed-checkout-form .woocommerce form .form-row-last {
    width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
  }
  .wcf-embed-checkout-form #customer_details,
  .wcf-embed-checkout-form .wcf-customer-shipping,
  .wcf-embed-checkout-form .wcf-payment-option-heading,
  .wcf-embed-checkout-form #payment,
  .wcf-embed-checkout-form .wcf-order-wrap {
    padding: var(--xs-space-5) var(--xs-space-4) !important;
  }
  .wcf-embed-checkout-form #payment #place_order {
    padding-block: var(--xs-space-3) !important;
  }
}

@media (max-width: 480px) {
  .wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table .product-name {
    width: 58% !important;
  }
  .wcf-embed-checkout-form table.shop_table.woocommerce-checkout-review-order-table .product-total {
    width: 42% !important;
  }
  .wcf-embed-checkout-form .product-name dl dt,
  .wcf-embed-checkout-form .product-name dl dd {
    font-size: 10.5px !important;
  }
}