/*
 * MemberPress cart checkout (/checkout/) + cart (/cart/) — Aphasia Studio skin.
 *
 * Matches the /workbooks/ shop: warm paper, sand borders, green action
 * button, bigger type and 48px targets. MemberPress's cart CSS reads its
 * --mepr-cart-* tokens, so most of this is re-pointing those tokens; the
 * rest raises the hard-coded rem sizes in mp-pro-cart-checkout.css.
 *
 * Scoped to body.as-cart-checkout (added by Workbook_Bundle::cart_body_class).
 * Loaded through the mepr_design_style_handles whitelist — ReadyLaunch
 * dequeues every non-MemberPress stylesheet on its pro-template pages.
 * The Stripe card fields are an iframe: Stripe styles those, not this file.
 */

body.as-cart-checkout {
  --as-ink: #26221C;
  --as-paper: #FBF8F3;
  --as-sand: #F0E9DD;
  --as-action: #1E7A46;
  --as-action-dark: #175E36;
  --as-cyan: #0E7C92;
  --as-soft: #6B6257;
  --as-line: #E2D9CC;

  --mepr-cart-color-primary: var(--as-action);
  --mepr-cart-color-primary-hover: var(--as-action-dark);
  --mepr-cart-color-primary-soft: #E3F1E8;
  --mepr-cart-color-surface-subtle: var(--as-paper);
  --mepr-cart-color-border: var(--as-line);
  --mepr-cart-color-border-subtle: var(--as-line);
  --mepr-cart-color-divider: var(--as-line);
  --mepr-cart-color-text: var(--as-ink);
  --mepr-cart-color-text-secondary: var(--as-ink);
  --mepr-cart-color-text-muted: var(--as-soft);
  --mepr-cart-badge-brand-text: var(--as-action);
  --mepr-cart-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mepr-cart-font-size-sm: 1rem;
  --mepr-cart-font-size-base: 1.0625rem;
  --mepr-cart-font-size-md: 1.125rem;
  --mepr-cart-font-size-lg: 1.375rem;
  --mepr-cart-radius-md: 10px;
  --mepr-cart-radius-lg: 18px;
  --mepr-cart-focus-ring: 0 0 0 3px rgba(14, 124, 146, 0.45);
  --mepr-payment-accent: var(--as-action);

  background-color: var(--as-paper);
  color: var(--as-ink);
}

body.as-cart-checkout .mepr-cart-checkout {
  max-width: 1040px;
  padding-top: 32px;
  font-family: var(--mepr-cart-font-family);
  font-size: 1.125rem;
  line-height: 1.55;
}

/* Cards: the step(s) and the order summary */
body.as-cart-checkout .mepr-cart-checkout .mepr-checkout-step,
body.as-cart-checkout .mepr-cart-checkout .mepr-checkout-sidebar {
  border-width: 2px;
  box-shadow: 0 6px 18px rgba(38, 34, 28, 0.06);
}

body.as-cart-checkout .mepr-cart-checkout .mepr-checkout-step {
  padding: 28px;
}

body.as-cart-checkout .mepr-checkout-step__title,
body.as-cart-checkout .mepr-checkout-sidebar__title,
body.as-cart-checkout .mepr-checkout-sidebar__heading {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--as-ink);
  margin-bottom: 20px;
}

/* Fields */
body.as-cart-checkout .mepr-checkout-field {
  margin-bottom: 20px;
}

body.as-cart-checkout .mepr-checkout-label {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--as-ink);
  margin-bottom: 6px;
}

body.as-cart-checkout .mepr-checkout-field .mepr-checkout-input,
body.as-cart-checkout .mepr-checkout-field input.mepr-form-input,
body.as-cart-checkout .mepr-checkout-field select.mepr-form-input {
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--as-line);
  border-radius: 10px;
  font-size: 1.125rem;
  color: var(--as-ink);
}

body.as-cart-checkout .mepr-checkout-field .mepr-checkout-input:focus,
body.as-cart-checkout .mepr-checkout-field input.mepr-form-input:focus,
body.as-cart-checkout .mepr-checkout-field select.mepr-form-input:focus {
  border-color: var(--as-action);
  box-shadow: 0 0 0 3px rgba(30, 122, 70, 0.18);
}

body.as-cart-checkout .mepr-checkout-field__error {
  font-size: 1rem;
  font-weight: 600;
}

body.as-cart-checkout .mepr-checkout-checkbox-label {
  font-size: 1.0625rem;
  color: var(--as-ink);
}

body.as-cart-checkout .mepr-checkout-checkbox {
  width: 22px;
  height: 22px;
}

/* Buttons — Pay / Continue in Aphasia Studio green, full-width and tall */
body.as-cart-checkout .mepr-cart-checkout .mepr-btn {
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 12px;
  font-size: 1.1875rem;
  font-weight: 700;
}

body.as-cart-checkout .mepr-checkout-step__nav .mepr-btn--primary,
body.as-cart-checkout .mepr-checkout-step__nav .mepr-btn:only-child {
  width: 100%;
}

body.as-cart-checkout .mepr-cart-checkout .mepr-btn:focus-visible {
  outline: 3px solid var(--as-cyan);
  outline-offset: 3px;
  box-shadow: none;
}

/* Order summary */
body.as-cart-checkout .mepr-sidebar-item__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--as-ink);
}

body.as-cart-checkout .mepr-sidebar-item__billing-byline {
  font-size: 0.9375rem;
  color: var(--as-soft);
}

body.as-cart-checkout .mepr-sidebar-item__total {
  font-size: 1.0625rem;
  font-weight: 700;
}

/* "Remove" stays available but quiet — not a red alarm next to every item */
body.as-cart-checkout .mepr-sidebar-item__remove {
  font-size: 0.9375rem;
  color: var(--as-soft);
  text-decoration: underline;
}

body.as-cart-checkout .mepr-sidebar-item__remove:hover,
body.as-cart-checkout .mepr-sidebar-item__remove:focus-visible {
  color: var(--as-ink);
}

body.as-cart-checkout .mepr-totals-row__label,
body.as-cart-checkout .mepr-totals-row__value {
  font-size: 1.0625rem;
}

body.as-cart-checkout .mepr-totals-row--grand .mepr-totals-row__label,
body.as-cart-checkout .mepr-totals-row--grand .mepr-totals-row__value {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--as-ink);
}

body.as-cart-checkout .mepr-coupon-toggle {
  font-size: 1rem;
  color: var(--as-soft);
}

/* Small phones: tighter cards, same big targets */
@media (max-width: 767px) {
  body.as-cart-checkout .mepr-cart-checkout {
    padding-top: 16px;
  }

  body.as-cart-checkout .mepr-cart-checkout .mepr-checkout-step {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.as-cart-checkout .mepr-cart-checkout * {
    transition: none;
  }
}

/* ------------------------------------------------------------------
 * Cart thank-you page (/thank-you/?order_id=…)
 * ------------------------------------------------------------------ */

/* WordPress swaps emoji for <img class="emoji">; its sizing CSS is one of
   the styles ReadyLaunch strips, so each emoji rendered page-wide. */
body.as-cart-checkout img.emoji {
  display: inline;
  width: 1em;
  height: 1em;
  margin: 0 0.07em;
  vertical-align: -0.1em;
  border: none;
  box-shadow: none;
  background: none;
  padding: 0;
}

/* Print / View Order → replaced by the one "Open my workbooks" button */
body.as-cart-checkout .mepr-checkout-container .invoice-wrapper.thankyou.mepr-thankyou-cart .mepr-thankyou-actions {
  display: none;
}

/* Each product's thank-you message carries its own "Open my workbooks →"
   line; the one big button below the receipt replaces them. */
body.as-cart-checkout .mepr-thankyou-item-message p:has(> a[href*="/your-workbooks/"]) {
  display: none;
}

body.as-cart-checkout .mepr-thankyou-item-message {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--as-ink);
}

body.as-cart-checkout .mepr-thankyou-item-message a {
  color: var(--as-action);
  font-weight: 700;
}

body.as-cart-checkout .as-thankyou-next {
  margin: 28px 0 8px;
  text-align: center;
}

body.as-cart-checkout .as-thankyou-next__btn {
  display: inline-block;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 12px;
  background: var(--as-action);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

body.as-cart-checkout .as-thankyou-next__btn:hover {
  background: var(--as-action-dark);
  color: #fff;
}

body.as-cart-checkout .as-thankyou-next__btn:focus-visible {
  outline: 3px solid var(--as-cyan);
  outline-offset: 3px;
}

body.as-cart-checkout .as-thankyou-next__note {
  margin: 12px 0 0;
  font-size: 1.0625rem;
  color: var(--as-soft);
}

/* ReadyLaunch sizes the receipt as half of a two-column checkout layout
   (width 50% + right padding) — on the thank-you page there is no second
   column, so the receipt squeezed into a narrow strip. One wide card. */
body.as-cart-checkout .mepr-signup-form:has(.mepr-thankyou-cart) {
  max-width: 680px;
  margin-inline: auto;
}

body.as-cart-checkout .mepr-checkout-container.thankyou .invoice-wrapper {
  width: 100%;
  padding: 0;
}

body.as-cart-checkout .mepr-thankyou-cart .mp_invoice {
  max-width: none;
}

@media (max-width: 767px) {
  body.as-cart-checkout .mepr-signup-form:has(.mepr-thankyou-cart) {
    padding: 20px 16px;
  }
}