/**
 * Restyle for the MemberPress ReadyLaunch checkout page (classic
 * single-product checkout at /zahlung/mitglied, not the cart/shop flow --
 * that isn't used on this site). Loaded as a dependent of MemberPress's own
 * "mp-pro-theme"/"mp-pro-checkout" styles (see
 * class-mepr-readylaunch-overrides.php) so it always loads after them in
 * the cascade.
 *
 * Unlike the login/thank-you overrides, there is NO copied view file here
 * on purpose: checkout/form.php wires up Stripe Elements
 * (".mepr-stripe-card-element", populated at runtime by
 * gateways/stripe/form.js from its "data-*" attributes) and the PayPal
 * payment-method radio ("[data-payment-method-type]") directly by class and
 * id. Copying and re-touching that file would risk silently breaking a
 * payment method with no visual indication until a real transaction fails.
 * This file only restyles MemberPress's own existing classes
 * (".mepr-checkout-container", ".form-wrapper", ".invoice-wrapper",
 * ".mepr-payment-method-*", etc.) -- nothing with a payment-processing role
 * is renamed, resized to 0, hidden, or reparented.
 *
 * Tokens below are copied 1:1 from frontend-next's own design system
 * (frontend-next/src/app/globals.css) rather than approximated, so this
 * page reads as the same product instead of "brand-adjacent":
 *   --text-primary   #0f172a   --surface-base     #ffffff
 *   --text-secondary #334155   --surface-elevated #eeece9 (page backdrop,
 *   --text-muted     #64748b    same role as PricingSection's tone="elevated")
 *   --border          rgba(16, 24, 40, 0.10)
 *   --shadow-md       0 18px 40px rgba(15, 23, 42, 0.12)   (card elevation)
 *   --shadow-xs       0 1px 2px rgba(15, 23, 42, 0.06)
 *   radius: 0.75rem (buttons/inputs, Tailwind's rounded-xl) / 1rem (cards,
 *   rounded-2xl) -- the same two steps MarketingButton.jsx and
 *   PricingSection.jsx use.
 *   brand: --brand-primary #f59e0b, --brand-primary-strong #d97706,
 *   --brand-on-primary #1a1205, --brand-secondary #2271b1.
 *
 * MemberPress's own checkout.css leans on "!important" for a few layout
 * properties inside its ">=1024px" breakpoint (.invoice-wrapper's
 * padding-left/border-bottom). Where this file needs to win against one of
 * those specific declarations it matches with "!important" too -- noted
 * inline each time, never used as a blanket hammer.
 */

/*
 * Page backdrop: the same muted/elevated surface PricingSection.jsx uses
 * behind its (white, shadow-md) pricing cards, so the form/invoice cards
 * read as "elevated" rather than floating on plain white.
 */
body.single-memberpressproduct {
  background: #eeece9;
}

#primary .mepr-checkout-container {
  display: flex;
  /* column-reverse, not column: DOM order is form-wrapper then
     invoice-wrapper, and MemberPress's own base rule (no media query, so
     this is also what narrow screens get) already reverses that to show
     the price/heading summary above the form. Set explicitly here (rather
     than just leaving their rule unchallenged) so this page's intended
     order doesn't silently depend on an unrelated stylesheet keeping a
     property we never asked it to keep. */
  flex-direction: column-reverse;
  gap: 20px;
  max-width: 1040px;
  margin: 40px auto;
  padding: 0 16px;
  height: auto;
}

@media (min-width: 1024px) {
  #primary .mepr-checkout-container {
    /* row-reverse keeps MemberPress's own order (summary left, form right)
       rather than fighting it -- only the chrome changes here, not the
       layout logic. */
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 24px;
  }

  #primary .mepr-checkout-container .form-wrapper {
    flex: 1 1 56%;
  }

  #primary .mepr-checkout-container .invoice-wrapper {
    flex: 1 1 36%;
    max-width: 360px;
    position: sticky;
    top: 24px;
  }
}

/* --- Cards ---------------------------------------------------------------- */

#primary .mepr-checkout-container .form-wrapper {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  padding: 32px 28px;
  /* Beats their ">=1024px" ".form-wrapper { border-left: 1px solid #ccc }" --
     equal specificity, later in the cascade, no !important needed since
     theirs isn't !important either. */
  border-left: none;
  /*
   * display:flex + "order" on specific rows below reorders the form
   * visually (username/email/password to the top) without touching the
   * DOM at all -- no view copy, nothing re-parented, Stripe/PayPal markup
   * completely untouched. "gap" replaces spacing, since it follows VISUAL
   * order; their own DOM-order-based ".form-wrapper > * + * { margin-top }"
   * rule is neutralized just below so the two don't stack.
   */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#primary .mepr-checkout-container .form-wrapper > * + * {
  margin-top: 0;
}

/* Hidden now that "gap" provides the vertical rhythm -- these were a
   decorative " " div for spacing under the original block layout,
   and would otherwise add an extra, inconsistent gap of their own. */
#primary .mepr-checkout-container .form-wrapper .mepr_spacer {
  display: none;
}

#primary .form-wrapper .mp-form-row.mepr_username {
  order: -5;
}

#primary .form-wrapper .mp-form-row.mepr_email {
  order: -4;
}

#primary .form-wrapper .mp-form-row.mepr_password {
  order: -3;
}

#primary .form-wrapper .mp-form-row.mepr_password_confirm {
  order: -2;
}

/*
 * The zxcvbn strength meter (MeprZxcvbnCtrl::display_meter()) renders as
 * its own ".mp-form-row" sibling, not inside the password-confirm row --
 * without its own "order" it fell back to the default (0) and drifted
 * down to wherever the unordered rows start, away from the password field
 * it describes.
 */
#primary .form-wrapper .mp-form-row.mp-password-strength-area {
  order: -1;
}

#primary .mepr-checkout-container .invoice-wrapper {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.10);
  border-radius: 16px;
  /* Their ">=1024px" rule sets padding-left/border-bottom with !important;
     match both so no gap or stray divider line survives at that
     breakpoint. */
  padding: 28px 24px !important;
  border-bottom: none !important;
}

#primary .mepr-checkout-container .invoice-wrapper.thankyou {
  border-top: none;
}

/* --- Headings / general text tokens --------------------------------------- */

#primary .mepr-checkout-container h1,
#primary .mepr-checkout-container h3 {
  color: #0f172a;
  font-weight: 600;
}

#primary .mepr-checkout-container .invoice-wrapper .invoice-heading {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* --brand-primary-ink, not raw --brand-primary (#f59e0b): the surface
     amber only reaches ~2.3:1 as text and fails WCAG AA, per
     frontend-next's own globals.css comment on that token. This is the
     same ink frontend-next uses whenever amber needs to be *read* rather
     than sat on (e.g. .em-mk-accent-amber). */
  color: #a3560a;
  margin: 0 0 6px;
}

#primary .mepr-checkout-container .invoice-wrapper .invoice-amount {
  font-size: 1.5rem;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.2;
}

#primary .mepr-checkout-container .invoice-wrapper .mepr_price {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.10);
}

/* --- Coupon link/field ------------------------------------------------------ */

#primary .have-coupon-link {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #2271b1;
  text-decoration: none;
}

#primary .have-coupon-link:hover {
  color: #1b5c91;
  text-decoration: underline;
}

/* --- Invoice line items (.mp-cart-item / .mp-cart-footer, rendered even on
   this classic single-product checkout -- not just the cart/shop flow) --- */

#primary .invoice-wrapper .mp-cart-item {
  color: #334155;
  align-items: center;
}

#primary .invoice-wrapper .mp-cart-item-image img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

#primary .invoice-wrapper .mp-cart-item-details p {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 600;
}

#primary .invoice-wrapper .mp-cart-item-details .desc {
  color: #64748b;
  font-weight: 400;
  font-size: 0.8rem;
}

#primary .invoice-wrapper .mp-currency-cell {
  color: #0f172a;
  font-weight: 600;
  font-size: 0.9rem;
}

#primary .invoice-wrapper .mp-cart-footer {
  border-top: none;
  color: #334155;
}

#primary .invoice-wrapper .mp-cart-footer > div {
  padding: 6px 0;
}

#primary .invoice-wrapper .bt,
#primary .invoice-wrapper .bb {
  border-color: rgba(16, 24, 40, 0.10) !important;
}

#primary .invoice-wrapper .total_cell,
#primary .invoice-wrapper .mp-cart-footer .bt {
  color: #0f172a;
  font-weight: 650;
  font-size: 1rem;
}

#primary .invoice-wrapper .mepr-tax-invoice {
  color: #64748b;
}

/*
 * Checkbox + hint text injected by checkout.js right above the address
 * fieldset, and the hidden state it toggles on the optional fields' own
 * ".mp-form-row" (address line 1/2, city, state, zip -- never the country
 * row, which stays visible and required). Only country is actually
 * required by default (see relax_address_field_requirements() in
 * class-mepr-readylaunch-overrides.php); collapsing the rest behind a
 * checkbox means a shopper isn't shown five fields only to leave them
 * blank. JS-injected rather than a checkout/form.php copy, consistent
 * with this file staying CSS/JS-only.
 */
#primary .mp-address-group {
  position: relative;
  /* Their own ".form-wrapper .mp-address-group" rule sets margin-top:15px
     margin-bottom:2rem -- fine for the old DOM-order block layout, but
     stacks on top of "gap" now that the form is reordered via flex, as an
     oversized gap after whichever row ends up next to this one. */
  margin: 0;
}

#primary .em-mepr-address-hidden {
  display: none;
}

#primary .em-mepr-address-toggle {
  margin-bottom: 14px;
}

#primary .em-mepr-address-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

#primary .em-mepr-address-toggle-label:has(input:disabled) {
  cursor: default;
  color: #64748b;
}

#primary .em-mepr-address-toggle-checkbox {
  accent-color: #f59e0b;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}


/*
 * checkout.js toggles this class on address-one/city/zip's ".mp-form-row"
 * when "Business" + a non-Germany country are both selected, mirroring the
 * same rule PHP enforces server-side. A generated asterisk rather than editing the
 * server-rendered label text, consistent with how the rest of this file
 * avoids touching the view.
 */
#primary .em-mepr-dynamic-required .mp-form-label label::after {
  content: " *";
}

/* --- Form fields ------------------------------------------------------------ */

#primary .mepr-checkout-container .mp-form-label label,
#primary .mepr-checkout-container legend:not(.screen-reader-text) {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

#primary .form-wrapper .mp-form-row input[type="text"],
#primary .form-wrapper .mp-form-row input[type="email"],
#primary .form-wrapper .mp-form-row input[type="url"],
#primary .form-wrapper .mp-form-row input[type="tel"],
#primary .form-wrapper .mp-form-row input[type="password"],
#primary .form-wrapper .mp-form-row select {
  box-sizing: border-box;
  height: auto;
  padding: 12px 16px;
  border: 1px solid rgba(16, 24, 40, 0.10);
  border-radius: 12px;
  font-size: 0.95rem;
  color: #0f172a;
  background: #ffffff;
  /* Their own base rule (checkout.css) puts a drop shadow on every text
     field by default; this cancels it so fields read flat, matching the
     rest of the site's inputs. */
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#primary .form-wrapper .mp-form-row input[type="text"]:focus-visible,
#primary .form-wrapper .mp-form-row input[type="email"]:focus-visible,
#primary .form-wrapper .mp-form-row input[type="url"]:focus-visible,
#primary .form-wrapper .mp-form-row input[type="tel"]:focus-visible,
#primary .form-wrapper .mp-form-row input[type="password"]:focus-visible,
#primary .form-wrapper .mp-form-row select:focus-visible {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}

#primary .mepr-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #334155;
}

#primary .mepr-checkbox-field input[type="checkbox"] {
  accent-color: #f59e0b;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

#primary .mepr-checkbox-field a {
  color: #2271b1;
}

/*
 * Password-strength meter: same pill redesign as login.css, just rescoped
 * to "#primary" since this page has no "#mepr-template-login" wrapper. The
 * markup (.mp-password-strength-area > .mp-password-strength-display.mp-*)
 * is JS-injected (zxcvbn-async.js), not something this page's view
 * controls -- see the matching comment in login.css.
 */
#primary .mp-password-strength-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 16px;
}

#primary .mp-password-strength-display {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

#primary .mp-password-strength-display br,
#primary .mp-password-strength-display small {
  display: none;
}

#primary .mp-password-strength-area > span:not(.mp-password-strength-display) {
  font-size: 0.8rem;
  color: #64748b;
}

#primary .mp-password-strength-area > span:not(.mp-password-strength-display) small {
  display: inline;
}

#primary .mp-nopass {
  background: #eeece9;
  color: #64748b;
}

#primary .mp-weakpass {
  background: #fde2e2;
  color: #b42318;
}

#primary .mp-mediumpass {
  background: #fef3e2;
  color: #92400e;
}

#primary .mp-strongpass {
  background: #e5f2e9;
  color: #1e7a42;
}

/*
 * Payment method selector (Stripe / PayPal): MemberPress renders each as a
 * ".mepr-payment-option-label" radio row. Only spacing/border/accent-color
 * are touched here -- the radio input, its "data-payment-method-type"
 * attribute, and the Stripe Elements mount point inside
 * ".mepr-payment-method-stripe" are left completely alone. The radio stays
 * visible rather than being visually hidden behind a custom control (which
 * would be closer to PricingSection's segmented toggle) -- this is a
 * payment form, and a native, always-visible control is the safer choice
 * over a prettier one of uncertain a11y/JS impact.
 */
#primary .mepr-payment-methods-wrapper {
  border: none;
  padding: 0;
  /* "gap" on .form-wrapper already spaces this from its neighbours now --
     a margin here would stack on top of that. */
  margin: 0;
}

#primary .mepr-payment-methods-wrapper legend {
  padding: 0;
  margin-bottom: 10px;
}

#primary .mepr-payment-methods-icons {
  margin-bottom: 12px;
}

#primary .mepr-payment-methods-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#primary .mepr-payment-option-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 140px;
  margin: 0;
  /* Right padding reserves room for MemberPress's own gateway wordmark,
     which ".payment-option-stripe"/".payment-option-paypal" place as a
     right-aligned "background-image" (checkout.css) -- not an <img> in the
     markup, so it can't be targeted directly, only left alone. */
  padding: 12px 70px 12px 14px;
  border: 1px solid rgba(16, 24, 40, 0.10);
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

#primary .mepr-payment-option-label:has(input:checked) {
  border-color: #f59e0b;
  /* "background-color", not the "background" shorthand: the shorthand
     would reset background-image/-position/-size to their initial value,
     wiping the gateway wordmark set above the moment a method is
     selected -- exactly the bug this comment is here to prevent
     regressing again. */
  background-color: rgba(245, 158, 11, 0.08);
  color: #0f172a;
}

#primary .mepr-payment-option-label input[type="radio"] {
  accent-color: #f59e0b;
  width: 16px;
  height: 16px;
  margin: 0;
}

#primary .mepr-payment-methods-wrapper hr {
  border: none;
  border-top: 1px solid rgba(16, 24, 40, 0.10);
  margin: 16px 0;
}

/*
 * The box chrome goes on ".mepr-payment-method-desc-text", not its parent
 * ".mepr-payment-method-stripe"/"-paypal" wrapper: signup.js keeps BOTH
 * gateway wrappers in the DOM at all times and only ever slideUp()/
 * slideDown()s the inner ".mepr-payment-method-desc-text" (matched via its
 * ".mp-pm-desc-<id>" class) when the selection changes. Styling the outer,
 * always-present wrapper instead would leave an empty bordered box behind
 * for whichever gateway isn't currently selected.
 */
#primary .mepr-payment-method {
  margin-top: 12px;
}

#primary .mepr-payment-method-desc-text {
  border: 1px solid rgba(16, 24, 40, 0.10);
  border-radius: 12px;
  padding: 16px;
  background: #ffffff;
}

/* --- Submit button: same visual language as MarketingButton's "primary"
   variant (rounded-xl, font-semibold, dark ink on amber, white on hover). */

#primary .mepr-checkout-container .form-wrapper input[type="submit"],
#primary .mp-form-submit input.mepr-submit {
  width: 100%;
  background: #f59e0b;
  border: none;
  color: #1a1205;
  border-radius: 12px;
  padding: 14px 24px;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#primary .mepr-checkout-container .form-wrapper input[type="submit"]:hover,
#primary .mp-form-submit input.mepr-submit:hover {
  background: #d97706;
  color: #ffffff;
}

#primary .mepr-checkout-container .form-wrapper input[type="submit"]:focus-visible,
#primary .mp-form-submit input.mepr-submit:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

/*
 * Hidden by default via MemberPress's own ".mp_wrapper .mepr-form-has-errors
 * { display: none }" (signup.css) and toggled to display:block by validate.js
 * on an actual validation failure -- only cosmetic properties here, no
 * "display", so that show/hide behavior is untouched.
 */
#primary .mepr-form-has-errors {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #dc2626;
  text-align: center;
}

@media (max-width: 480px) {
  #primary .mepr-checkout-container .form-wrapper,
  #primary .mepr-checkout-container .invoice-wrapper {
    padding: 24px 20px !important;
  }
}