/* =========================================================
   PEPPERLABZ CHECKOUT — v1
   Paste as its own CSS/WPCode snippet. If you also add a WPCode
   page-restriction condition, use exactly ONE condition (e.g.
   "Page is Checkout" or the checkout-2 URL) — never several URL
   conditions ANDed together. CLAUDE.md already documents a past
   bug where an overlapping conditional rule leaked onto the
   wrong page (the .ast-container incident behind the sticky-
   header saga); this file doesn't actually depend on the WPCode
   condition being right, because every rule below is already
   scoped by selector to the real CartFlows checkout wrapper —
   the page-restriction condition is just a belt-and-suspenders
   extra, not the thing doing the work.

   The checkout page is a CartFlows "Instant Checkout" funnel
   step embedding the real WooCommerce checkout shortcode. All
   its current green comes from CartFlows' own CSS custom
   properties (--wcf-primary-color / --wcf-btn-bg-color /
   --wcf-btn-bg-hover-color / --ast-global-color-0 / -1) plus a
   few hardcoded #8bc34a border/box-shadow accents — confirmed
   from the live stylesheet, not guessed. Every override below is
   scoped under .wcf-embed-checkout-form-instant-checkout (with
   .wcf-embed-checkout-form as a fallback wrapper, matching
   CartFlows' own selector pattern) — NEVER on :root, html, or
   body — so nothing here can recolor Astra elements elsewhere on
   the site that happen to read the same custom properties.
   !important is used only on the property redefinitions and the
   couple of hardcoded-hex overrides below, so this file's intent
   wins regardless of WPCode snippet load order relative to
   CartFlows' own inline <style>, without needing to chase a
   longer, more brittle selector chain to win on specificity
   alone.

   Palette matches pepperlabz-account.css / pepperlabz-cart.css:
   #111/#fff black-white, #fafafa/#f3f3f4 light neutral surfaces,
   #e4e5e8 borders, #9aa9bd/#6d7280 muted text.

   Payment fields (Stripe UPE) are hosted iframes — nothing in
   this file targets #wc-stripe-upe-form's internals, only the
   wrapper/border/padding around it.
========================================================= */

/* ---------------------------------------------------------
   1. COLOR SYSTEM — scoped custom-property overrides
--------------------------------------------------------- */

.wcf-embed-checkout-form-instant-checkout,
.wcf-embed-checkout-form {
  --wcf-primary-color: #111 !important;
  --wcf-btn-bg-color: #111 !important;
  --wcf-btn-bg-hover-color: #333 !important;
  --wcf-btn-text-color: #fff !important;
  --wcf-gcp-primary-color: #111 !important;
  --wcf-gcp-secondary-color: #333 !important;
  --wcf-gcp-accent-color: #111 !important;
  --ast-global-color-0: #111 !important;
  --ast-global-color-1: #333 !important;
}

/* Hardcoded #8bc34a accents that don't read the variables above —
   same selectors CartFlows itself uses, just repointed. */
.wcf-embed-checkout-form .woocommerce form #payment button,
.wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button,
.wcf-embed-checkout-form .woocommerce #order_review .wcf-custom-coupon-field .wcf-submit-coupon.button,
.wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button,
.wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button {
  border-color: #111 !important;
}

.wcf-embed-checkout-form .woocommerce #payment #place_order:hover,
.wcf-embed-checkout-form .woocommerce #payment #place_order:focus {
  border-color: #333 !important;
}

.wcf-embed-checkout-form .woocommerce #payment input[type="checkbox"]:focus,
.wcf-embed-checkout-form .woocommerce #payment input[type="radio"]:focus {
  box-shadow: 0 0 2px rgba(17, 17, 17, 0.8) !important;
}

/* ---------------------------------------------------------
   2. LOG IN AFFORDANCES
   Made intentional rather than incidental — most logged-out
   traffic won't reach this page at all once the account gate
   (pepperlabz-account.php) is live, but the rare direct hit
   should still look like PepperLabz, not a green plugin default.
--------------------------------------------------------- */

.wcf-embed-checkout-form-instant-checkout .woocommerce-form-login-toggle .woocommerce-info,
.wcf-embed-checkout-form-instant-checkout .woocommerce-billing-fields__customer-login-label {
  background: #fafafa;
  border: 1px solid #e4e5e8;
  color: #111;
  border-radius: 10px;
}

.wcf-embed-checkout-form-instant-checkout .showlogin,
.wcf-embed-checkout-form-instant-checkout .wcf-customer-login-url {
  color: #111;
  font-weight: 700;
  text-decoration: underline;
}

/* ---------------------------------------------------------
   3. BILLING FIELDS
--------------------------------------------------------- */

.wcf-embed-checkout-form-instant-checkout .woocommerce-checkout .input-text,
.wcf-embed-checkout-form-instant-checkout .woocommerce-checkout select,
.wcf-embed-checkout-form-instant-checkout .woocommerce-checkout textarea {
  border: 1px solid #e4e5e8;
  border-radius: 10px;
  background: #fff;
  color: #111;
}

.wcf-embed-checkout-form-instant-checkout .woocommerce-checkout .input-text:focus,
.wcf-embed-checkout-form-instant-checkout .woocommerce-checkout select:focus,
.wcf-embed-checkout-form-instant-checkout .woocommerce-checkout textarea:focus {
  border-color: #111;
  outline: none;
}

.wcf-embed-checkout-form-instant-checkout .select2-container--default .select2-selection--single {
  border: 1px solid #e4e5e8;
  border-radius: 10px;
}

.wcf-embed-checkout-form-instant-checkout .woocommerce-account-fields,
.wcf-embed-checkout-form-instant-checkout .wcf-create-account-section {
  background: #fafafa;
  border: 1px solid #e4e5e8;
  border-radius: 10px;
}

/* ---------------------------------------------------------
   4. ORDER SUMMARY
--------------------------------------------------------- */

.wcf-embed-checkout-form-instant-checkout .instant-checkout-order-review-table,
.wcf-embed-checkout-form-instant-checkout #order_review {
  background: #fff;
  border: 1px solid #e4e5e8;
  border-radius: 12px;
}

.wcf-embed-checkout-form-instant-checkout .wcf-product-name {
  color: #111;
  font-weight: 700;
}

.wcf-embed-checkout-form-instant-checkout .instant-checkout-batch {
  background: #111;
  color: #fff;
}

.wcf-embed-checkout-form-instant-checkout .wcf-order-review-total,
.wcf-embed-checkout-form-instant-checkout .order-total .woocommerce-Price-amount {
  color: #111;
  font-weight: 900;
}

/* ---------------------------------------------------------
   5. PLACE ORDER
   Payment fields themselves (Stripe UPE iframe) are untouched —
   this only styles the wrapper/button around them.
--------------------------------------------------------- */

.wcf-embed-checkout-form-instant-checkout .woocommerce-checkout-payment {
  background: #fafafa;
  border: 1px solid #e4e5e8;
  border-radius: 12px;
}

.wcf-embed-checkout-form-instant-checkout #place_order {
  background: #111 !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 900;
}

.wcf-embed-checkout-form-instant-checkout #place_order:hover,
.wcf-embed-checkout-form-instant-checkout #place_order:focus {
  background: #333 !important;
}