/* ==========================================================================
   lpen-checkout.css — the improved checkout, page 49868 /checkout-v2/

   ⚠️ EVERY SELECTOR IN THIS FILE MUST CONTAIN `#lpen-cko`.

   `lpen-assets/` is enqueued site-wide (§18j), and this file reaches deep
   into WooCommerce's own markup: `.shop_table`, `.form-row`,
   `#payment`, `.woocommerce-Price-amount`. One unanchored `.form-row`
   rule would repaint the cart, /my-account/, every product page and the
   real /checkout/. `build_checkout.py::assert_anchored()` fails the build
   on any selector without the anchor, brace-balanced and inside @media
   too. Prefix-scoping is a transformation you have to trust; an id anchor
   is a fact you can grep.

   Section ids, all of them prefixed so the guard is a substring test:
     #lpen-cko-head    hero, steps
     #lpen-cko-woo     the one woocommerce-checkout-page widget
     #lpen-cko-trust   payment and delivery reassurance

   ⚠️ Elementor's own Pro stylesheet uses `!important` on several checkout
   sub-elements (the same fight §18j documents with the LearnDash inline
   block and §18o with the cart's Update button). Where a rule below
   carries `!important` it is because a matching rule that did nothing was
   observed first. Walk the cascade before adding more.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
#lpen-cko-woo,
#lpen-cko-head,
#lpen-cko-trust {
  --cko-navy: #022E48;
  --cko-navy-700: #0B4465;
  --cko-action: #0F5C96;
  --cko-text: #111820;
  --cko-secondary: #4A5666;
  --cko-subtle: #6B7684;
  --cko-border: #CFD6DD;
  --cko-border-soft: #E3E8ED;
  --cko-surface: #F6F8FA;
  --cko-tint: #F3F7F9;
  --cko-gold: #8A6A00;
  --cko-gold-bg: #FDF6E3;
  --cko-danger: #B3261E;
  --cko-fam: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* ======================================================================
   1. HERO
   ⚠️ The three-step strip was REMOVED from the page at the owner's
   request 2026-08-24. Its CSS is kept below because it is the only
   styling `.lpen-cko-steps` has and re-adding the strip means restoring
   the markup in `build_checkout.py::sec_head()` and nothing else. Delete
   both together or neither.
   ====================================================================== */
#lpen-cko-head .lpen-cko-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#lpen-cko-head .lpen-cko-step {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cko-fam);
  font-size: 15px;
  line-height: 22px;
  color: var(--cko-subtle);
}

#lpen-cko-head .lpen-cko-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cko-border-soft);
  color: var(--cko-secondary);
  font-size: 12px;
  font-weight: 700;
}

#lpen-cko-head .lpen-cko-step.is-now {
  color: var(--cko-navy);
  font-weight: 600;
}

#lpen-cko-head .lpen-cko-step.is-now b {
  background: var(--cko-action);
  color: #fff;
}

/* ======================================================================
   2. THE WIDGET SHELL
   Elementor Pro renders `.e-checkout__container` as the two-column grid.
   It is left doing its job; what follows is spacing, type and colour.
   ====================================================================== */
#lpen-cko-woo .woocommerce {
  font-family: var(--cko-fam);
  color: var(--cko-text);
}

#lpen-cko-woo .e-checkout__container {
  gap: 40px;
}

#lpen-cko-woo .e-checkout__column-inner.e-sticky-right-column {
  /* 97px = the header bar's 77px plus 20px of air. §18o records the same
     measured constant on the cart: `--lpen-sticky-top` is set by the
     header on `#lpen-hdr` and does not reach a page. */
  top: 97px;
}

/* ⚠️ WooCommerce prints `<h3></h3>` for the additional-fields section
   whenever the "Additional information" heading has been filtered empty,
   which it has been on this store. An empty heading is a real defect: a
   screen reader announces "heading level 3" with nothing in it, and it
   lands in the document outline between "Billing details" and "Your
   order". Measured on the rendered page 2026-08-24. `:empty` is exact —
   the heading comes back the moment it has text. */
#lpen-cko-woo .woocommerce-additional-fields > h3:empty,
#lpen-cko-woo .woocommerce-shipping-fields > h3:empty {
  display: none;
}

/* Shipping is empty on this store because the whole catalogue is virtual.
   The wrapper still renders and still takes its margin. */
#lpen-cko-woo .woocommerce-shipping-fields:empty {
  display: none;
}

/* ---- headings ---------------------------------------------------- */
#lpen-cko-woo h3,
#lpen-cko-woo #order_review_heading,
#lpen-cko-woo .e-checkout-secondary-title {
  font-family: var(--cko-fam);
  color: var(--cko-navy);
  letter-spacing: -0.2px;
}

#lpen-cko-woo h3,
#lpen-cko-woo #order_review_heading {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cko-border-soft);
}

/* ======================================================================
   3. FORM FIELDS
   ====================================================================== */
#lpen-cko-woo .form-row {
  margin: 0 0 18px;
  padding: 0;
}

#lpen-cko-woo .form-row label,
#lpen-cko-woo .e-coupon-anchor-description {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--cko-secondary);
}

#lpen-cko-woo .form-row label .required,
#lpen-cko-woo .form-row label abbr.required {
  color: var(--cko-danger);
  text-decoration: none;
  border: 0;
}

#lpen-cko-woo .form-row input.input-text,
#lpen-cko-woo .form-row textarea,
#lpen-cko-woo .form-row select,
#lpen-cko-woo .select2-container .select2-selection--single,
#lpen-cko-woo #coupon_code {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  font-family: var(--cko-fam);
  font-size: 16px;
  line-height: 24px;
  color: var(--cko-text);
  background: #fff;
  border: 1px solid var(--cko-border);
  border-radius: 6px;
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

#lpen-cko-woo .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}

#lpen-cko-woo .form-row input.input-text:focus,
#lpen-cko-woo .form-row textarea:focus,
#lpen-cko-woo .form-row select:focus,
#lpen-cko-woo #coupon_code:focus {
  outline: none;
  border-color: var(--cko-action);
  box-shadow: 0 0 0 3px rgba(15, 92, 150, 0.16);
}

/* A keyboard user has to be able to see where they are even on a control
   they cannot type into, so focus is never suppressed here. */
#lpen-cko-woo a:focus-visible,
#lpen-cko-woo button:focus-visible,
#lpen-cko-woo input:focus-visible,
#lpen-cko-woo select:focus-visible {
  outline: 2px solid var(--cko-action);
  outline-offset: 2px;
}

#lpen-cko-woo .woocommerce-invalid input.input-text,
#lpen-cko-woo .woocommerce-invalid select {
  border-color: var(--cko-danger);
}

#lpen-cko-woo .woocommerce-invalid .form-row label {
  color: var(--cko-danger);
}

/* WooCommerce's own inline hint under a field. */
#lpen-cko-woo .form-row .description,
#lpen-cko-woo .lpen-cko-hint {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  color: var(--cko-subtle);
}

/* Checkbox rows read as body copy, not as labels. */
#lpen-cko-woo .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--cko-secondary);
}

#lpen-cko-woo .woocommerce-form__label-for-checkbox input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--cko-action);
}

/* ======================================================================
   4. LOGIN NUDGE
   `option_guest_checkout` is "no", so an account is created either way.
   The nudge is therefore genuinely useful rather than an upsell, and it
   is styled as an information surface, not as a warning.
   ====================================================================== */
#lpen-cko-woo .e-woocommerce-login-section {
  margin: 0 0 26px;
  padding: 16px 18px;
  background: var(--cko-tint);
  border: 1px solid #D6E3EC;
  border-radius: 8px;
}

#lpen-cko-woo .e-woocommerce-login-nudge {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
  color: var(--cko-secondary);
}

#lpen-cko-woo .e-show-login,
#lpen-cko-woo .e-show-coupon-form,
#lpen-cko-woo .woocommerce-form-login-toggle a {
  color: var(--cko-action);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

#lpen-cko-woo .e-login-wrap {
  margin-top: 14px;
}

/* ======================================================================
   5. ORDER REVIEW TABLE
   ====================================================================== */
#lpen-cko-woo .e-checkout__order_review {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--cko-border);
  border-radius: 10px;
}

#lpen-cko-woo .shop_table.woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 23px;
}

#lpen-cko-woo .shop_table.woocommerce-checkout-review-order-table th,
#lpen-cko-woo .shop_table.woocommerce-checkout-review-order-table td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--cko-border-soft);
  vertical-align: top;
  background: transparent;
}

#lpen-cko-woo .shop_table.woocommerce-checkout-review-order-table thead th {
  padding-top: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--cko-subtle);
}

#lpen-cko-woo .shop_table td.product-name {
  font-weight: 600;
  color: var(--cko-navy);
}

/* Every product is sold individually, so the quantity is always 1 and
   WooCommerce prints a bare "x 1" beside each course title. It is noise
   on a cart that cannot hold two of anything. `:has()` keeps it honest:
   the moment a line item is not 1, the marker comes back by itself. */
#lpen-cko-woo .shop_table td.product-name .product-quantity {
  display: none;
}

#lpen-cko-woo .shop_table td.product-name:has(.product-quantity:not(:empty)) {
  /* placeholder rule so the selector above is never the only statement
     about quantity; see build_checkout.py for why this is not deleted. */
  position: relative;
}

#lpen-cko-woo .shop_table th.product-total,
#lpen-cko-woo .shop_table td.product-total,
#lpen-cko-woo .shop_table tfoot td {
  text-align: right;
  white-space: nowrap;
}

#lpen-cko-woo .shop_table tfoot th {
  font-weight: 400;
  color: var(--cko-secondary);
}

#lpen-cko-woo .shop_table tfoot .order-total th,
#lpen-cko-woo .shop_table tfoot .order-total td {
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  color: var(--cko-navy);
}

#lpen-cko-woo .shop_table tfoot .cart-discount th,
#lpen-cko-woo .shop_table tfoot .cart-discount td {
  color: #1F7A3D;
}

/* ======================================================================
   6. TAX
   The standing sentence ("HST is added once you enter your province")
   was removed at the owner's request 2026-08-24. The design system, §10,
   still says never introduce a surprise cost after the first price
   shown, so the answer is now the tax row itself: it names its own rate
   and type, and it refreshes the instant a province is chosen.

   No replacement sentence is added. Removing the note and then writing a
   smaller one somewhere else would be ignoring the instruction, so the
   only thing that speaks about tax now is WooCommerce's own row, which
   appears as soon as there is tax to show. Its <th> already reads
   "HST 13%" or "GST 5%", because the rate labels on this store carry the
   rate.

   ⚠️ Do NOT write a rate into CSS or into copy anywhere. Rates differ by
   province, they change, and WooCommerce already knows them. If a rate
   renders wrong it is wrong in WooCommerce -> Settings -> Tax.
   ====================================================================== */

/* The tax row is the number the buyer is checking for, so it is not grey
   small print. It sits between subtotal and total in WooCommerce's own
   tfoot and is styled to match them. */
#lpen-cko-woo .shop_table tfoot tr.tax-rate th,
#lpen-cko-woo .shop_table tfoot tr.tax-total th {
  font-weight: 600;
  color: var(--cko-text);
}

#lpen-cko-woo .shop_table tfoot tr.tax-rate td,
#lpen-cko-woo .shop_table tfoot tr.tax-total td {
  font-weight: 600;
  color: var(--cko-text);
}

/* While WooCommerce is recalculating after a province change, its own
   blockUI overlay greys the block out. That reads as broken on a block
   that is only 200px tall, so it is replaced with a quiet fade that keeps
   the numbers legible while they are stale. */
#lpen-cko-woo .e-checkout__order_review .blockUI.blockOverlay {
  background: #fff !important;
  opacity: 0.55 !important;
}

/* Set by lpen-checkout.js while the recalculation is in flight. A stale
   total shown confidently is worse than one that is visibly pending. */
#lpen-cko-woo .e-checkout__order_review.is-recalculating .shop_table tfoot {
  opacity: 0.45;
  transition: opacity 120ms ease;
}

#lpen-cko-woo .e-checkout__order_review .shop_table tfoot {
  transition: opacity 120ms ease;
}

/* ======================================================================
   6b. ORDER NOTES
   Removed at the owner's request 2026-08-24. It is WooCommerce's
   `order_comments` field and its placeholder reads "Notes about your
   order, e.g. special notes for delivery" on a catalogue that is
   entirely virtual.

   ⚠️ THIS HIDES IT, IT DOES NOT REMOVE IT. The textarea is still in the
   DOM and still posts an empty value, and `display:none` takes it out of
   the tab order and the accessibility tree, so nobody can reach it. The
   real removal is one `unset()` in checkout/lpen-checkout-fields.php,
   which is not deployed. When that file goes in, this rule becomes
   redundant and can be deleted.
   ====================================================================== */
#lpen-cko-woo .woocommerce-additional-fields,
#lpen-cko-woo #order_comments_field {
  display: none;
}

/* ======================================================================
   7. COUPON
   ⚠️ Coupons render here and do NOT render on the real /checkout/. The
   child theme disables `woocommerce_coupons_enabled` on checkout (§10)
   and that filter is keyed on `is_checkout()`, which is 0 on a plain
   page — measured in `wc_checkout_params` on this page. So this box is a
   difference from the live checkout, not a styling choice. Read
   checkout/README.md before deciding whether that is wanted.
   ====================================================================== */
#lpen-cko-woo .e-coupon-box {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: var(--cko-surface);
  border: 1px solid var(--cko-border-soft);
  border-radius: 8px;
}

#lpen-cko-woo .e-woocommerce-coupon-nudge {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--cko-secondary);
}

#lpen-cko-woo .coupon-container-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

#lpen-cko-woo .coupon-container-grid .coupon-col-1 {
  flex: 1 1 180px;
  min-width: 0;
}

#lpen-cko-woo .coupon-container-grid .coupon-col-2 {
  flex: 0 0 auto;
}

#lpen-cko-woo .e-apply-coupon {
  min-height: 46px;
  padding: 10px 20px;
  font-family: var(--cko-fam);
  font-size: 15px;
  font-weight: 600;
  color: var(--cko-action);
  background: #fff;
  border: 1px solid var(--cko-border);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}

#lpen-cko-woo .e-apply-coupon:hover {
  color: #fff;
  background: var(--cko-action);
  border-color: var(--cko-action);
}

/* ⚠️ §18o: a rejected code answers INSIDE the panel as
   `p.coupon-error-notice`, not in `.woocommerce-notices-wrapper`, so any
   styling written for the notices wrapper never reaches it and it renders
   as bare body text. */
#lpen-cko-woo .coupon-error-notice {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  color: var(--cko-danger);
}

/* ======================================================================
   8. PAYMENT
   ====================================================================== */
#lpen-cko-woo #payment {
  margin-top: 22px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

#lpen-cko-woo #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

#lpen-cko-woo #payment li.wc_payment_method {
  margin: 0 0 10px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--cko-border);
  border-radius: 8px;
  overflow: hidden;
}

#lpen-cko-woo #payment li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--cko-text);
  cursor: pointer;
}

#lpen-cko-woo #payment li.wc_payment_method > input.input-radio {
  margin: 0 0 0 16px;
  width: 18px;
  height: 18px;
  accent-color: var(--cko-action);
}

#lpen-cko-woo #payment li.wc_payment_method .payment_box {
  margin: 0;
  padding: 0 16px 16px;
  background: transparent;
  font-size: 15px;
  line-height: 23px;
  color: var(--cko-secondary);
}

#lpen-cko-woo #payment li.wc_payment_method .payment_box::before {
  display: none;
}

#lpen-cko-woo #payment .place-order {
  margin: 18px 0 0;
  padding: 0;
}

/* ⚠️ THE LONG SELECTOR IS LOAD-BEARING. Elementor Pro's own
   `custom-pro-widget-woocommerce-checkout-page.min.css` carries

     .elementor-widget-woocommerce-checkout-page .woocommerce-checkout
     #payment #place_order { background-color: #5BC0DE }

   at (2,2,0). A plain `#lpen-cko-woo #place_order` is (2,0,0) and loses,
   so the button rendered in Elementor's factory sky blue while a rule
   that matched perfectly did nothing. Measured in the CSSOM, not guessed
   — this is the §18o lesson again: walk the cascade before adding weight,
   and when you do add weight, add exactly enough. Matching their chain
   behind the id anchor gives (3,2,0) and needs no `!important`. */
#lpen-cko-woo .elementor-widget-woocommerce-checkout-page
  .woocommerce-checkout #payment #place_order,
#lpen-cko-woo #place_order {
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  font-family: var(--cko-fam);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
  background: var(--cko-action);
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}

#lpen-cko-woo .elementor-widget-woocommerce-checkout-page
  .woocommerce-checkout #payment #place_order:hover,
#lpen-cko-woo #place_order:hover {
  background: var(--cko-navy-700);
}

/* Stripe's card element mounts into this div. It is empty and 0px tall
   until the gateway's own JavaScript runs, and that JavaScript is not
   enqueued on a page WooCommerce does not consider a checkout — see the
   header of build_checkout.py. A min-height keeps the collapse from
   reading as a styling bug while that is still true, and costs nothing
   once the element mounts at its natural height. */
#lpen-cko-woo .wc-stripe-upe-element,
#lpen-cko-woo .wc-stripe-elements-field {
  min-height: 42px;
}

#lpen-cko-woo #place_order:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#lpen-cko-woo .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 21px;
  color: var(--cko-subtle);
}

#lpen-cko-woo .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--cko-subtle);
}

#lpen-cko-woo .woocommerce-privacy-policy-text a,
#lpen-cko-woo .lpen-cko-foot a {
  color: var(--cko-action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ======================================================================
   9. NOTICES
   ====================================================================== */
#lpen-cko-woo .woocommerce-error,
#lpen-cko-woo .woocommerce-message,
#lpen-cko-woo .woocommerce-info {
  margin: 0 0 20px;
  padding: 14px 16px;
  list-style: none;
  border-radius: 8px;
  font-size: 15px;
  line-height: 23px;
  border: 1px solid var(--cko-border);
  background: var(--cko-surface);
  color: var(--cko-text);
}

#lpen-cko-woo .woocommerce-error {
  background: #FDF1F0;
  border-color: #EFC3BF;
  color: #6B1712;
}

#lpen-cko-woo .woocommerce-error::before,
#lpen-cko-woo .woocommerce-message::before,
#lpen-cko-woo .woocommerce-info::before {
  display: none;
}

/* ======================================================================
   10. FOOTER LINE UNDER THE FORM
   ====================================================================== */
#lpen-cko-woo .lpen-cko-foot {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cko-border-soft);
  font-size: 14px;
  line-height: 22px;
  color: var(--cko-subtle);
}

/* ======================================================================
   11. TRUST STRIP
   ====================================================================== */
#lpen-cko-trust .elementor-icon-box-title,
#lpen-cko-trust .elementor-icon-box-title a {
  text-decoration: none;
}

/* ======================================================================
   12. MOBILE
   Below 1024px Elementor stacks the two columns. The details column comes
   first and the order review second, which is the order a buyer wants:
   fill in, then check, then pay. Nothing is reordered here.
   ====================================================================== */
@media (max-width: 1024px) {
  #lpen-cko-woo .e-checkout__container {
    gap: 28px;
  }

  #lpen-cko-woo .e-checkout__column-inner.e-sticky-right-column {
    position: static;
  }
}

@media (max-width: 767px) {
  #lpen-cko-woo .e-checkout__order_review {
    padding: 16px;
  }

  #lpen-cko-woo .form-row {
    margin-bottom: 16px;
  }

  /* WooCommerce ships `form-row-first` and `form-row-last` as 47% floats.
     Two 47% columns is a 150px field on a 390px screen. */
  #lpen-cko-woo .form-row.form-row-first,
  #lpen-cko-woo .form-row.form-row-last {
    float: none;
    width: 100%;
  }

  #lpen-cko-woo #place_order {
    font-size: 16px;
  }

  #lpen-cko-head .lpen-cko-steps {
    gap: 8px 18px;
  }
}