/* VitaeCharm checkout branding — matches the body-oil landing page.
   Overrides next-core.css design tokens: Plus Jakarta Sans + brand blue (#0f75ff). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Typography — match landing (base-landing.html loads Plus Jakarta Sans) */
  --_text---font-family--primary: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --_text---font-family--heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Brand blue — match landing tokens.css --brand-primary: #0f75ff */
  --brand--color--primary: #0f75ff;
  --brand--color--primary-dark: #0a4fb0;
  --brand--color--primary-light: #e6f0ff;
  --brand--color--primary-lighter: #f5f9ff;
  --brand--color--primary-foreground: #ffffff;

  /* Make the primary CTA (submit button) the bright landing blue, not the default navy */
  --brand--color--cta-primary: #0f75ff;
}

/* Ensure the font applies even where next-core sets it on the element directly */
body,
.checkout--shop,
.form-section__title,
.submit-button {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   Shopify-checkout skin — match vitaecharm.com Shopify checkout.
   Skin/CSS only: no SDK hooks, Spreedly fields, or cart-summary
   token templates are altered. See plan + build/polish doctrine.
   ============================================================ */

/* --- Primary CTA: green "Pay now" button (Shopify) --- */
.submit-button {
  background-color: #2ec01a;
  border-color: #2ec01a;
  min-height: 3.25rem;        /* Shopify single-line button height */
}
.submit-button:hover {
  background-color: #28a817;
  border-color: #28a817;
}
.submit-button__main-text {
  font-size: var(--font-size--base);
  font-weight: 600;
  letter-spacing: 0;
}

/* --- Express checkout title (Shopify: muted, centered, regular) --- */
.express-checkout__title {
  color: #545454;
  font-weight: 500;
  font-size: var(--font-size--sm);
}

/* --- Section titles: Shopify uses a calm ~1.125rem weight-600 heading --- */
.form-section__title {
  font-weight: 600;
}

/* --- Order summary panel → Shopify layout --- */
/* Shopify shows no "Order Summary" heading in the panel */
[data-next-cart-summary] .order-summary__title {
  display: none;
}
/* Stack panel children so the discount-code row can sit at the top.
   coupon-section lives OUTSIDE [data-next-cart-summary] (the SDK render
   target) so it survives CartSummaryEnhancer innerHTML rebuilds. */
.order-summary-wrap {
  display: flex;
  flex-direction: column;
}
.order-summary-wrap .coupon-section {
  order: -1;
  margin-bottom: 1.25rem;
}

/* Discount code row — Shopify: input + neutral grey "Apply" button */
.coupon-button {
  background-color: #e5e5e5;
  border-color: #e5e5e5;
  color: #333;
  font-weight: 600;
}
.coupon-button:hover {
  background-color: #d8d8d8;
  border-color: #d8d8d8;
}

/* Total row — Shopify shows "USD" in a smaller muted style before the amount */
.summary-total__coin {
  color: #545454;
  font-size: var(--font-size--sm);
  font-weight: 500;
  margin-right: .35rem;
}

/* TOTAL SAVINGS row — Shopify green emphasis */
.order-totals__savings,
.order-totals__savings-text {
  color: #2ca01c;
  font-weight: 600;
}
.order-totals__savings-icon { color: #2ca01c; }

/* Recurring vs one-time labels + subscription terms line under cart items.
   Visibility is driven by the {item.isRecurring} token ("true"/"false") rendered
   into the class name — data-next-show does not evaluate item.* tokens inside
   data-summary-lines templates in this SDK build. Matches Shopify checkout. */
.cart-item__freq,
.cart-item__sub-terms { display: none; }
.cart-item__freq--true { display: inline; }
.cart-item__sub-terms--true { display: block; }
.cart-item__onetime--true { display: none; }
.cart-item__onetime--false { display: inline; }
.cart-item__sub-terms {
  margin-top: 2px;
  line-height: 1.35;
}
.cart-item__sub-freq {
  text-transform: lowercase;
}

/* Mobile: stop the checkout grid from blowing past the viewport.
   next-core collapses to a single column at <=991px with `grid-template-columns: 1fr`,
   but a `1fr` track keeps an implicit min-content floor, so a wide child (the
   express-checkout / Apple Pay button) forces the column to ~544px and overflows.
   minmax(0,1fr) drops the floor to 0 so the single column shrinks to the viewport. */
@media screen and (max-width: 991px) {
  .checkout--shop .checkout__layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Side-cart line order. The SDK renders summary lines by ascending package id,
   which puts a free gift (Mitt, id 3) above the main product and the free bonus
   bottle (id 12) last. [data-summary-lines] is the direct parent of the line
   elements, so flex `order` reflows them: main product -> free bonus -> gifts.
   The <template> child is display:none and does not participate in flex layout. */
[data-summary-lines] {
  display: flex;
  flex-direction: column;
}
/* Main paid Body Oil packages lead (subscribe: 2/4/5, one-time: 9/10/11) */
[data-summary-lines] [data-package-id="2"],
[data-summary-lines] [data-package-id="4"],
[data-summary-lines] [data-package-id="5"],
[data-summary-lines] [data-package-id="9"],
[data-summary-lines] [data-package-id="10"],
[data-summary-lines] [data-package-id="11"] { order: 0; }
/* Free bonus Body Oil bottle directly under the main product */
[data-summary-lines] [data-package-id="12"] { order: 1; }
/* Free gifts last (Mitt 3, Sleep Mask 6, Nail Oil 7, Collagen 8) */
[data-summary-lines] [data-package-id="3"],
[data-summary-lines] [data-package-id="6"],
[data-summary-lines] [data-package-id="7"],
[data-summary-lines] [data-package-id="8"] { order: 2; }

/* Footer policy links wrap on narrow screens. next-core sets flex-wrap: nowrap,
   so on mobile "Terms of service" and "Cancellations" were clipped off the right
   edge (unreachable). Wrapping lets all five links flow onto a second line; no-op
   on desktop where they already fit on one row. */
.checkout-footer-links { flex-wrap: wrap; }

/* Estimated-taxes info tooltip. The SDK TooltipEnhancer only enhances nodes
   present at init; CartSummaryEnhancer re-renders the summary innerHTML
   afterwards, so [data-next-tooltip] inside the summary never attaches.
   Pure-CSS tooltip survives re-renders; tabindex on the icon makes it work
   for keyboard focus and mobile tap, not just hover. Scoped to .order-totals
   so SDK-managed tooltips elsewhere are untouched. */
.order-totals .info-icons[data-next-tooltip] { position: relative; cursor: help; outline: none; }
.order-totals .info-icons[data-next-tooltip]::after {
  content: attr(data-next-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  padding: 8px 10px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 6px;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 30;
  pointer-events: none;
}
.order-totals .info-icons[data-next-tooltip]:hover::after,
.order-totals .info-icons[data-next-tooltip]:focus::after {
  opacity: 1;
  visibility: visible;
}