/**
 * Snack Clinic — WooCommerce checkout
 * Distraction-free DTC checkout aligned with the Clinical Hydrate landing.
 * Tokens match assets/clinical-hydrate.css (Karla, charcoal, chalk).
 */

body.woocommerce-checkout,
body.woocommerce-order-pay,
body.woocommerce-order-received {
  --sc-chalk: #f5f2eb;
  --sc-chalk-soft: #efe8dc;
  --sc-card: #faf7f2;
  --sc-charcoal: #1f1c19;
  --sc-charcoal-soft: #2c2723;
  --sc-clay: #b55a2b;
  --sc-muted: #665e57;
  --sc-border: #d9d0c4;
  --sc-font: "Karla", ui-sans-serif, system-ui, sans-serif;
}

/* -------------------------------------------------------------------------- */
/* Canvas + type                                                                */
/* -------------------------------------------------------------------------- */

body.woocommerce-checkout,
body.woocommerce-order-pay,
body.woocommerce-order-received {
  background: var(--sc-chalk) !important;
  color: var(--sc-charcoal) !important;
  font-family: var(--sc-font) !important;
  -webkit-font-smoothing: antialiased;
}

body.woocommerce-checkout .template-container,
body.woocommerce-checkout .template-content,
body.woocommerce-checkout .page-wrapper,
body.woocommerce-checkout .page-content,
body.woocommerce-checkout #content,
body.woocommerce-checkout .container,
body.woocommerce-checkout .content-page,
body.woocommerce-checkout .woocommerce {
  background: transparent !important;
  font-family: var(--sc-font) !important;
}

body.woocommerce-checkout,
body.woocommerce-checkout *,
body.woocommerce-checkout .woocommerce-checkout,
body.woocommerce-checkout .woocommerce form .form-row label,
body.woocommerce-checkout .woocommerce form .form-row input,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .cart-order-details,
body.woocommerce-checkout .order-review,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .woocommerce-checkout-payment,
body.woocommerce-checkout .shop_table {
  font-family: var(--sc-font) !important;
}

body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-checkout .step-title,
body.woocommerce-checkout .step-title span {
  font-family: var(--sc-font) !important;
  color: var(--sc-charcoal) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.woocommerce-checkout .woocommerce form .form-row label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sc-charcoal) !important;
  margin-bottom: 6px;
}

/* -------------------------------------------------------------------------- */
/* Hide clutter: red header, footer, timer, points, coupon                      */
/* -------------------------------------------------------------------------- */

body.woocommerce-checkout #header,
body.woocommerce-checkout .site-header,
body.woocommerce-checkout .header-wrapper,
body.woocommerce-checkout .header-main-wrapper,
body.woocommerce-checkout .mobile-header-wrapper,
body.woocommerce-checkout .top-bar,
body.woocommerce-checkout .et-mobile-panel,
body.woocommerce-checkout .page-heading,
body.woocommerce-checkout .et-footers-wrapper,
body.woocommerce-checkout footer.footer,
body.woocommerce-checkout footer.prefooter,
body.woocommerce-checkout footer.footer-bottom,
body.woocommerce-checkout .footer-copyright,
body.woocommerce-checkout .copyrights,
body.woocommerce-checkout .back-top,
body.woocommerce-checkout #etheme-popup,
body.woocommerce-checkout .sales-booster-cart-countdown,
body.woocommerce-checkout .cart-countdown-message,
body.woocommerce-checkout .cart-countdown-expired-message,
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout .woocommerce-form-coupon,
body.woocommerce-checkout .checkout_coupon,
body.woocommerce-checkout [class*="ywpar"],
body.woocommerce-checkout [id*="ywpar"],
body.woocommerce-checkout [class*="yith-par"],
body.woocommerce-checkout [class*="yith-ywpar"],
body.woocommerce-checkout .yith-par-message-cart,
body.woocommerce-checkout #sales-booster-popup,
body.woocommerce-checkout .sales-booster-popup,
body.woocommerce-checkout .woocommerce-checkout .woocommerce-message:not(.woocommerce-error) {
  display: none !important;
}

/* Added-to-cart flash + points notices injected as Woo info banners */
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-checkout .woocommerce > .woocommerce-message {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Checkout stepper                                                             */
/* -------------------------------------------------------------------------- */

body.woocommerce-checkout .cart-checkout-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 28px 16px 8px;
  margin: 0 auto 24px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .cart-checkout-nav a {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--sc-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
}

body.woocommerce-checkout .cart-checkout-nav a.active {
  color: var(--sc-charcoal) !important;
}

body.woocommerce-checkout .cart-checkout-nav a:before,
body.woocommerce-checkout .cart-checkout-nav a:after {
  background: var(--sc-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Billing inputs                                                               */
/* -------------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce form .form-row .select2-container .select2-selection--single,
body.woocommerce-checkout #customer_details input.input-text,
body.woocommerce-checkout #customer_details textarea,
body.woocommerce-checkout #customer_details select,
body.woocommerce-checkout .woocommerce-billing-fields input.input-text,
body.woocommerce-checkout .woocommerce-shipping-fields input.input-text,
body.woocommerce-checkout .woocommerce-additional-fields textarea,
body.woocommerce-checkout .woocommerce-input-wrapper input.input-text,
body.woocommerce-checkout .woocommerce-input-wrapper textarea,
body.woocommerce-checkout .woocommerce-input-wrapper select {
  background: #fff !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 12px 14px !important;
  min-height: 46px !important;
  height: auto !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--sc-charcoal) !important;
  line-height: 1.4 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce-additional-fields textarea {
  min-height: 96px !important;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-checkout .woocommerce-input-wrapper input.input-text:focus,
body.woocommerce-checkout .woocommerce-input-wrapper textarea:focus,
body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--sc-charcoal) !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .select2-container .select2-selection--single {
  display: flex !important;
  align-items: center;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sc-charcoal) !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  font-family: var(--sc-font) !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 8px !important;
}

body.woocommerce-checkout .woocommerce form .form-row.woocommerce-validated input.input-text,
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text {
  box-shadow: none !important;
}

body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid select {
  border-color: #c2410c !important;
}

/* -------------------------------------------------------------------------- */
/* Your Order column                                                            */
/* -------------------------------------------------------------------------- */

body.woocommerce-checkout .cart-order-details,
body.woocommerce-checkout .order-review {
  background: var(--sc-card) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 8px !important;
  padding: 24px 22px 20px !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .cart-order-details .order-review {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

body.woocommerce-checkout .order-review .step-title,
body.woocommerce-checkout .woocommerce-billing-fields .step-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .shop_table {
  border: 0 !important;
  background: transparent !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  border-color: var(--sc-border) !important;
  padding: 12px 0 !important;
  font-size: 14px !important;
  color: var(--sc-charcoal) !important;
  background: transparent !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 16px !important;
  font-weight: 800 !important;
  border-top: 1px solid var(--sc-charcoal) !important;
  padding-top: 16px !important;
}

body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 0 0 !important;
}

body.woocommerce-checkout #payment ul.payment_methods {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body.woocommerce-checkout #payment .payment_box {
  background: #fff !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

body.woocommerce-checkout #payment .place-order {
  padding: 16px 0 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Place Order — charcoal / chalk, matching landing primary buttons            */
/* -------------------------------------------------------------------------- */

body.woocommerce-checkout #place_order,
body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout #payment .place-order #place_order.button,
body.woocommerce-checkout button#place_order.button.alt,
.woocommerce-checkout #place_order.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background: var(--sc-charcoal) !important;
  background-color: var(--sc-charcoal) !important;
  background-image: none !important;
  border: 1px solid var(--sc-charcoal) !important;
  color: var(--sc-chalk) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--sc-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 16px 28px !important;
  min-height: 52px !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #payment #place_order:hover,
body.woocommerce-checkout #payment .place-order #place_order.button:hover,
body.woocommerce-checkout button#place_order.button.alt:hover,
.woocommerce-checkout #place_order.button:hover {
  background: var(--sc-charcoal-soft) !important;
  background-color: var(--sc-charcoal-soft) !important;
  background-image: none !important;
  border-color: var(--sc-charcoal-soft) !important;
  color: var(--sc-chalk) !important;
}

body.woocommerce-checkout #place_order:focus,
body.woocommerce-checkout #place_order:active {
  background: var(--sc-charcoal-soft) !important;
  color: var(--sc-chalk) !important;
  outline: 2px solid var(--sc-clay) !important;
  outline-offset: 2px !important;
}

/* -------------------------------------------------------------------------- */
/* Layout breathing room                                                        */
/* -------------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce {
  padding-bottom: 64px;
}

@media (max-width: 767px) {
  body.woocommerce-checkout .cart-order-details,
  body.woocommerce-checkout .order-review {
    margin-top: 24px;
    padding: 20px 16px !important;
  }

  body.woocommerce-checkout .cart-checkout-nav {
    padding-top: 16px;
  }
}

/* -------------------------------------------------------------------------- */
/* Amazon Pay + MCF shipping methods                                            */
/* -------------------------------------------------------------------------- */

body.woocommerce-checkout #payment .payment_method_amazon_payments_advanced,
body.woocommerce-checkout #payment .payment_method_amazon_payments_advanced_express {
  border: 1px solid var(--sc-border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  margin: 0 0 10px !important;
}

body.woocommerce-checkout #payment .payment_method_amazon_payments_advanced > label,
body.woocommerce-checkout #payment .payment_method_amazon_payments_advanced_express > label {
  font-weight: 700 !important;
  color: var(--sc-charcoal) !important;
}

body.woocommerce-checkout ul#shipping_method {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

body.woocommerce-checkout ul#shipping_method li {
  border: 1px solid var(--sc-border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 0 0 8px !important;
  background: #fff !important;
}

body.woocommerce-checkout ul#shipping_method li label {
  font-weight: 700 !important;
  color: var(--sc-charcoal) !important;
  font-family: var(--sc-font) !important;
}

body.woocommerce-checkout #amazon_customer_details,
body.woocommerce-checkout .wc-amazon-payments-advanced-info,
body.woocommerce-checkout #pay_with_amazon,
body.woocommerce-checkout .amazon-pay-button,
body.woocommerce-checkout #amazon_pay_button {
  font-family: var(--sc-font) !important;
}