/* ==========================================================================
   Funnel checkout polish pass
   Matches "Checkout Draft 01 - Polish Pass" (Mat, Figma 271-2) as far as CSS
   alone can. Visual + trust content only - no change to steps, validation,
   payment or the Salesforce writes.

   SCOPED to html.jb-funnel-checkout, which is set only when the visitor
   arrived through the GLP-1 funnel (jbSession / jbFunnelIntent present).
   Ordinary store traffic is completely unaffected, and the whole pass is
   reverted by deleting this file from the enqueue.
   ========================================================================== */

html.jb-funnel-checkout {
  --fc-ink:      #262626;
  --fc-muted:    #6E6A63;
  --fc-line:     rgba(16,16,16,.14);
  --fc-card:     #FFFFFF;
  --fc-field:    #F7F6F3;
  --fc-accent:   #101010;
  --fc-yellow:   #F2F56B;
  --fc-radius:   16px;
}

/* ---- page frame ---------------------------------------------------------- */
html.jb-funnel-checkout body {
  background: #F4F2EE;
}
html.jb-funnel-checkout #mbm-checkout-ui,
html.jb-funnel-checkout .checkout-header-content {
  font-family: 'Basis Grotesque', Helvetica, Arial, sans-serif;
  color: var(--fc-ink);
}

/* Competing offers: the theme's LABS65 bar and the women's-collection
   cross-sell both pull against a GLP-1 purchase in progress. */
html.jb-funnel-checkout .global-promo-banner,
html.jb-funnel-checkout .checkout-promo-container { display: none !important; }

/* ---- steps as cards ------------------------------------------------------ */
html.jb-funnel-checkout .checkout-step {
  background: var(--fc-card);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 22px 20px;
  margin-bottom: 14px;
}
html.jb-funnel-checkout .step-header { align-items: center; }
html.jb-funnel-checkout .step-count {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fc-muted);
}
html.jb-funnel-checkout .step-title {
  font-family: 'Basis Grotesque', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--fc-ink);
}
html.jb-funnel-checkout .step-edit { color: var(--fc-muted); }

/* ---- fields -------------------------------------------------------------- */
html.jb-funnel-checkout #mbm-checkout-ui input[type="text"],
html.jb-funnel-checkout #mbm-checkout-ui input[type="email"],
html.jb-funnel-checkout #mbm-checkout-ui input[type="tel"],
html.jb-funnel-checkout #mbm-checkout-ui input[type="number"],
html.jb-funnel-checkout #mbm-checkout-ui input[type="date"],
html.jb-funnel-checkout #mbm-checkout-ui input[type="password"],
html.jb-funnel-checkout #mbm-checkout-ui select {
  background: var(--fc-field);
  border: 1px solid var(--fc-line);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 15px;
  color: var(--fc-ink);
}
html.jb-funnel-checkout #mbm-checkout-ui input:focus,
html.jb-funnel-checkout #mbm-checkout-ui select:focus {
  border-color: var(--fc-accent);
  outline: none;
}

/* Collapsed (saved) step summary. When a step is complete the theme disables
   its fields and shows them as 18px label/value rows, relying on
   `.step-content.saved .form-control:disabled` to strip the field box. The
   field rules above outrank that selector, so the boxes came back at full
   size inside 18px rows and overlapped. Restore the compact summary here. */
html.jb-funnel-checkout #mbm-checkout-ui .step-content.saved .form-control:disabled, html.jb-funnel-checkout #mbm-checkout-ui .step-content.saved input.form-control:-internal-autofill-selected {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 20px;
  font-size: 15px;
  height: 28px;
  line-height: 28px;
  transform: translateX(130px);
}
/* Rows at reading size (the theme's 18px/12px summary is too small here). */
html.jb-funnel-checkout #mbm-checkout-ui .step-content.saved .form-group {
  height: 28px;
  line-height: 28px;
}
html.jb-funnel-checkout #mbm-checkout-ui .step-content.saved .form-group > label {
  font-size: 11px;
  color: var(--fc-muted);
}
/* The select sits inside .custom-dropdown; the theme offsets the wrapper and
   the control separately (100px + 10px). Keep that split at 120px + 10px so it
   lands on the same 130px column as the text fields. */
html.jb-funnel-checkout #mbm-checkout-ui .step-content.saved .custom-dropdown {
  transform: translateX(120px) translateY(0);
}
html.jb-funnel-checkout #mbm-checkout-ui .step-content.saved .select-container .form-control:disabled {
  transform: translateX(10px);
}

/* Step 1 for a funnel customer is a summary of what the quiz collected, not a
   sign-up. funnel-checkout.js retitles it "Checkout"; here the theme's blue
   "Hi <name>! Not you? Log out" banner becomes a one-line note under the
   title, so the card reads: title + Edit, who this is, then the details. */
html.jb-funnel-checkout #step_1 { display: flex; flex-direction: column; }
html.jb-funnel-checkout #step_1 .step-header { order: 0; }
html.jb-funnel-checkout #step_1 .auth-header,
html.jb-funnel-checkout #step_1 .auth-header-perm { order: 1; }
html.jb-funnel-checkout #step_1 .step-content { order: 2; }
html.jb-funnel-checkout #step_1 .auth-header-perm {
  flex-direction: row;
  justify-content: flex-start;
  gap: 6px;
  height: auto;
  background: transparent;
  border-radius: 0;
  margin: -14px 0 16px;
  font-size: 13px;
  color: var(--fc-muted);
}
html.jb-funnel-checkout #step_1 .auth-header-perm .logout-link {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fc-muted);
}
html.jb-funnel-checkout #step_1 .auth-header-perm a { color: var(--fc-ink); }

/* Editable fields: floating labels. The theme floats a filled field's label to
   top:0 of the group, which for an underline-style input is clear space but for
   the boxed fields above is the top border. Give each group 16px of headroom so
   the floated label sits above the box, and start the empty label where the
   value will be typed (inside the box, past its 14px padding). Both states are
   restated here because these selectors outrank every theme rule. */
html.jb-funnel-checkout #mbm-checkout-ui .step-content:not(.saved) .form-group:not(.has-checkbox-container) {
  padding-top: 16px;
}
html.jb-funnel-checkout #mbm-checkout-ui .step-content:not(.saved) .form-group > label {
  transform: translate(14px, 33px);
}
html.jb-funnel-checkout #mbm-checkout-ui .step-content:not(.saved) .form-group > .form-control:focus ~ label,
html.jb-funnel-checkout #mbm-checkout-ui .step-content:not(.saved) .form-group > .form-control:not(:placeholder-shown) ~ label,
html.jb-funnel-checkout #mbm-checkout-ui .step-content:not(.saved) .form-group > .custom-dropdown.has-value ~ label,
html.jb-funnel-checkout #mbm-checkout-ui .step-content:not(.saved) .form-group:has(select option:not([value=""]):checked) > label,
html.jb-funnel-checkout #mbm-checkout-ui .step-content:not(.saved) .form-group.saved-w-label > label {
  transform: translate(0, 0);
  font-size: 10px;
}

/* ---- buttons ------------------------------------------------------------- */
html.jb-funnel-checkout .btn-submit {
  background: var(--fc-accent);
  color: #FFFEF2;
  border: 0;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: .06em;
  padding: 16px 28px;
}
html.jb-funnel-checkout .btn-submit:hover:not(:disabled) { background: #000; }
html.jb-funnel-checkout .btn-submit:disabled { background: #C9C6C0; color: #fff; }

/* ---- order summary ------------------------------------------------------- */
html.jb-funnel-checkout .mbm-cart-items,
html.jb-funnel-checkout .order-lg-2 .sticky,
html.jb-funnel-checkout .col-lg-6.order-lg-2 {
  background: var(--fc-card);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding-right: 0;
}
html.jb-funnel-checkout .mbm-cart-item {
  border-radius: var(--fc-radius);
  .price:has(.strikethru) {
    top: 60px;
  }
}
html.jb-funnel-checkout .mbm-cart-subtotal-label,
html.jb-funnel-checkout .mbm-cart-discount-label-b { color: var(--fc-muted); }

/* The summary column above is already the card. checkout.css paints this inner
   wrapper #ededed, which stacked a grey panel inside that white card. */
html.jb-funnel-checkout .checkout-column-content {
  background: transparent;
}

/* "Total due today" is the number the design leads with. */
html.jb-funnel-checkout .jb-total-due {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--fc-accent); color: #FFFEF2;
  border-radius: 12px; padding: 16px 18px; margin: 14px 0 6px;
  font-size: 17px; font-weight: 500;
}

/* ---- injected trust blocks ---------------------------------------------- */
html.jb-funnel-checkout .jb-fc-block {
  background: var(--fc-card);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 20px; margin-bottom: 14px;
}
html.jb-funnel-checkout .jb-fc-block h3 {
  font-size: 15px; font-weight: 500; margin: 0 0 12px; color: var(--fc-ink);
}
html.jb-funnel-checkout .jb-fc-list { list-style: none; margin: 0; padding: 0; }
html.jb-funnel-checkout .jb-fc-list li {
  position: relative; padding: 5px 0 5px 26px;
  font-size: 14px; line-height: 1.45; color: var(--fc-ink);
}
html.jb-funnel-checkout .jb-fc-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #CDD9F9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px 9px no-repeat;
}
html.jb-funnel-checkout .jb-fc-steps { counter-reset: s; }
html.jb-funnel-checkout .jb-fc-steps li {
  padding-left: 34px; padding-bottom: 12px;
}
html.jb-funnel-checkout .jb-fc-steps li::before {
  counter-increment: s; content: counter(s);
  background: var(--fc-accent); color: #FFFEF2;
  width: 22px; height: 22px; top: 4px;
  font-size: 12px; line-height: 22px; text-align: center;
}
html.jb-funnel-checkout .jb-fc-note {
  font-size: 13px; line-height: 1.5; color: var(--fc-muted); margin: 10px 0 0;
}
html.jb-funnel-checkout .jb-fc-reassure {
  background: var(--fc-yellow); color: #101010;
  border-radius: 12px; padding: 13px 16px; margin: 14px 0;
  font-size: 13.5px; line-height: 1.45; text-align: center;
}
html.jb-funnel-checkout .jb-fc-methods {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 12px; color: var(--fc-muted); letter-spacing: .04em;
}