/**
 * Academia SSDN — MemberPress checkout (checkout-proposal.html)
 * ===============================================================
 * Restyles the ReadyLaunch checkout (readylaunch/checkout/form.php) on
 * product pages. Loaded by inc/checkout/assets.php.
 *
 * Appearance only: nothing here hides, renames or moves a field, the
 * Stripe box, an error message or the loading spinner.
 * Plan: .claude/docs/checkout-plan.md — built up one step at a time.
 *
 * Selectors include .form-wrapper / .mp-form-submit so they outrank
 * ReadyLaunch's own checkout.css whatever order the two files print in.
 *
 * Sections (by page area):
 *   0. Page tokens + font
 *   1. Sign Up button
 *   2. Fields and labels
 *   3. Summary card / layout
 *   4. Card contents: heading, price, coupon, invoice
 *   5. Terms checkbox and errors
 *   6. Tablet and phone (below 1024px)
 *   7. Theme headings: top strip, title, section headings
 *      (printed by inc/checkout/headings.php)
 */


/* =================================================================
   0. Page tokens + font
   Colours the mockup uses that academy-tokens.css doesn't define —
   kept on the checkout only, so nothing else on the site changes.
   ================================================================= */

.mepr-checkout-container {
  --field-border:  rgba(17, 34, 65, 0.50);
  --divider-light: rgba(17, 34, 65, 0.09);
  --danger:        #B3261E;

  font-family: var(--font-ui);
  color: var(--text-1-light);
}


/* =================================================================
   1. Sign Up button — orange, navy label (replaces ReadyLaunch #1d1d1d)
   ================================================================= */

.mepr-checkout-container .form-wrapper .mp-form-submit input.mepr-submit {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 22px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: var(--ssdn-orange);
  color: var(--ssdn-navy); /* navy on orange 4.67:1; white is 3.38:1 */
  font: 700 15px/1 var(--font-ui);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.mepr-checkout-container .form-wrapper .mp-form-submit input.mepr-submit:hover {
  background: #F47A55; /* same hover as .ssdn-btn--primary */
}
.mepr-checkout-container .form-wrapper .mp-form-submit input.mepr-submit:focus-visible {
  outline: 2px solid var(--ssdn-navy);
  outline-offset: 2px;
}
.mepr-checkout-container .form-wrapper .mp-form-submit input.mepr-submit:disabled {
  opacity: .6;
  cursor: progress;
}


/* =================================================================
   2. Fields and labels — 48px fields, 10px radius, navy border
   Excludes the terms checkbox, radios, hidden inputs and the
   honeypot (.mepr-visuallyhidden), which are styled elsewhere or not
   at all. Error states (.invalid, .cc-error) are section 5.
   ================================================================= */

/* Labels */
.mepr-checkout-container .form-wrapper .mp-form-label label {
  font: 600 13px/1.3 var(--font-ui);
  color: var(--text-1-light);
}

/* Text inputs, dropdowns, textareas. This selector has to outrank
   ReadyLaunch's address-group rules, so the dropdown and password
   rules below widen the right padding through --field-pad-right
   instead of competing with it. */
.mepr-checkout-container .form-wrapper .mp-form-row :is(input.mepr-form-input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.mepr-visuallyhidden) {
  width: 100%;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 12px var(--field-pad-right, 14px) 12px 14px;
  font: 400 16px/1.3 var(--font-ui); /* 16px: iPhones don't zoom in on focus */
  color: var(--text-1-light);
  background-color: #fff;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}
.mepr-checkout-container .form-wrapper .mp-form-row :is(input.mepr-form-input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.mepr-visuallyhidden):hover {
  border-color: var(--text-1-light);
}
.mepr-checkout-container .form-wrapper .mp-form-row :is(input.mepr-form-input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.mepr-visuallyhidden):focus {
  border: 1px solid var(--text-1-light);
  outline: 2px solid var(--text-1-light);
  outline-offset: 1px;
}
.mepr-checkout-container .form-wrapper .mp-form-row .mepr-form-input::placeholder {
  color: var(--text-3-light);
  opacity: 1;
}

/* Dropdowns (Country, State): navy arrow */
.mepr-checkout-container .form-wrapper .mp-form-row select:not([multiple]) {
  --field-pad-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23112241' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
}

/* Address: ReadyLaunch joins these into one stacked box with shared
   borders; here they are separate fields like the rest. Same order. */
.mepr-checkout-container .form-wrapper .mp-form-row.mp-address-group {
  box-shadow: none;
}
.mepr-checkout-container .form-wrapper .mp-address-group .mp-form-row {
  margin: 0 0 16px;
}

/* Name row: First / Last side by side. ReadyLaunch joins the two inputs
   into one box; here they are separate fields with a gap. */
.mepr-checkout-container .form-wrapper .mp-form-row .mp-form-row-group {
  gap: 14px;
}
.mepr-checkout-container .form-wrapper .mp-form-row .mp-form-row-group-wrapper {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* Name + address labels: MemberPress (ui/theme.css) draws these inside
   the field in grey and floats them up in blue when signup.js adds
   .active. Here they sit above the field like every other label, the
   same whether the field is filled or not. !important only to cancel
   MemberPress's own !important on font-size. */
.mepr-checkout-container .form-wrapper .mp-address-group .mp-form-row .mp-form-label label.placeholder-text,
.mepr-checkout-container .form-wrapper .mp-form-row .mp-form-row-group .mp-form-label label.placeholder-text {
  position: static;
  z-index: auto;
  transform: none;
  transition: none;
  padding: 0;
  background: none;
  pointer-events: auto;
  font: 600 13px/1.3 var(--font-ui);
  font-size: 13px !important;
  color: var(--text-1-light);
}

/* Password: MemberPress's own show/hide button, with "Mostrar" /
   "Ocultar" in place of the eye icon. login.js swaps the icon class to
   .dashicons-hidden while the password is shown. */
.mepr-checkout-container .form-wrapper div.mp-hide-pw {
  position: relative;
}
.mepr-checkout-container .form-wrapper div.mp-hide-pw input.mepr-form-input {
  --field-pad-right: 84px; /* room for "Mostrar" */
}
.mepr-checkout-container .form-wrapper button.mp-hide-pw {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-height: 32px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font: 600 12px/1 var(--font-ui);
  color: var(--text-2-light);
  cursor: pointer;
}
.mepr-checkout-container .form-wrapper button.mp-hide-pw:hover {
  background: var(--ssdn-off-white);
  color: var(--text-1-light);
}
.mepr-checkout-container .form-wrapper button.mp-hide-pw:focus-visible {
  outline: 2px solid var(--text-1-light);
  outline-offset: 1px;
}
.mepr-checkout-container .form-wrapper button.mp-hide-pw .dashicons {
  display: none; /* decorative icon only (aria-hidden) */
}
.mepr-checkout-container .form-wrapper button.mp-hide-pw::after {
  content: "Mostrar";
}
.mepr-checkout-container .form-wrapper button.mp-hide-pw:has(.dashicons-hidden)::after {
  content: "Ocultar";
}


/* =================================================================
   3. Summary card / layout
   ReadyLaunch prints .form-wrapper, then .invoice-wrapper, and on
   desktop flips them (row-reverse) so the invoice sits on the left at
   50% with a grey divider. Here: form left, a 360px sage card right.
   Below 1024px ReadyLaunch stacks the summary above the form; that
   order is left alone until step 1f. The card's contents (heading,
   price, invoice, coupon) are section 4.
   ================================================================= */

/* The card — every width */
.mepr-form .mepr-checkout-container .invoice-wrapper {
  background: var(--ssdn-sage);
  border-radius: 20px;
  border-bottom: 0;
  padding: 26px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .mepr-form .mepr-checkout-container {
    flex-direction: row;          /* ReadyLaunch: row-reverse */
    align-items: flex-start;      /* lets the card stick */
    gap: 44px;
    max-width: calc(520px + 44px + 360px);
  }

  .mepr-form .mepr-checkout-container .form-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
    padding: 3rem 0 4rem;
    border-left: 0;               /* ReadyLaunch's grey divider */
  }

  /* padding-left needs !important only because ReadyLaunch sets it to
     0 !important at this width. */
  .mepr-form .mepr-checkout-container .invoice-wrapper {
    flex: 0 0 360px;
    width: 360px;
    margin-top: 3rem;             /* lines up with the form's top */
    padding: 26px;
    padding-left: 26px !important;
    position: sticky;
    top: 24px;                    /* stays in view while the form scrolls */
  }
}


/* =================================================================
   4. Card contents: heading, price, coupon, invoice
   All of it is MemberPress's markup (readylaunch/checkout/form.php +
   invoice.php). Applying a coupon reloads the price and invoice by
   AJAX with the same classes, so these rules carry over. The loaders
   (.mepr-coupon-loader, .mepr-invoice-loader) are left alone.
   ================================================================= */

/* Heading ("Pay …") as the eyebrow; wording comes from the MemberPress
   translation. */
.mepr-form .mepr-checkout-container .invoice-wrapper .invoice-heading {
  margin: 0;
  font: 600 10px/1.35 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2-sage);
}

/* Price: white panel */
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr_price {
  margin: 14px 0 0;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr_price .invoice-amount {
  margin: 0;
  font: 600 17px/1.25 var(--font-display);
  color: var(--text-1-light);
  font-variant-numeric: tabular-nums;
}

/* Coupon link */
.mepr-form .mepr-checkout-container .invoice-wrapper .have-coupon-link {
  display: inline-block;
  margin-top: 14px;
  font: 600 13px/1.3 var(--font-ui);
  color: var(--text-1-light);
  text-decoration: underline;
  text-decoration-color: rgba(17, 34, 65, .35);
  text-underline-offset: 4px;
}
.mepr-form .mepr-checkout-container .invoice-wrapper .have-coupon-link:hover {
  text-decoration-color: var(--text-1-light);
}

/* Coupon field (MemberPress shows/hides it; same look as section 2) */
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr_coupon {
  margin-top: 14px;
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr_coupon .mp-form-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 8px;
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr_coupon .mp-form-label label {
  font: 600 13px/1.3 var(--font-ui);
  color: var(--text-1-light);
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr_coupon .cc-error,
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr_coupon .cc-success {
  font: 500 12px/1.35 var(--font-ui);
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr_coupon .cc-error   { color: var(--danger); }
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr_coupon .cc-success { color: #1E6B43; }
.mepr-form .mepr-checkout-container .invoice-wrapper input.mepr-coupon-code {
  width: 100%;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  font: 400 16px/1.3 var(--font-ui);
  color: var(--text-1-light);
  background-color: #fff;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  box-shadow: none;
  box-sizing: border-box;
}
.mepr-form .mepr-checkout-container .invoice-wrapper input.mepr-coupon-code:hover {
  border-color: var(--text-1-light);
}
.mepr-form .mepr-checkout-container .invoice-wrapper input.mepr-coupon-code:focus {
  border-color: var(--text-1-light);
  outline: 2px solid var(--text-1-light);
  outline-offset: 1px;
}
/* Accepted coupon: green border on white (MemberPress: green fill) */
.mepr-form .mepr-checkout-container .invoice-wrapper input.mepr-coupon-code.valid {
  border: 1.5px solid #1E6B43;
  background-color: #fff;
}

/* Invoice. The 10px top padding is an inline style on the element,
   hence the one !important. */
.mepr-form .mepr-checkout-container .invoice-wrapper .mepr-transaction-invoice-wrapper {
  margin-top: 20px;
  padding-top: 0 !important;
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp_invoice {
  font-variant-numeric: tabular-nums;
}

/* Line items (product, applied coupon) */
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-item,
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-coupon {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 10px;
  font: 400 14px/1.45 var(--font-ui);
  color: var(--text-2-light);
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-item-image {
  display: none; /* MemberPress's generic product icon (role=presentation) */
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-item-details p {
  margin: 0;
  font: 400 14px/1.45 var(--font-ui);
  color: var(--text-1-light);
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-item-details p.desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3-light);
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-coupon-desc {
  margin: 0 auto 0 0;
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-currency-cell {
  margin-left: auto;
  white-space: nowrap;
  text-align: right;
}

/* Footer rows (sub-total / tax when present), then the total */
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-footer {
  margin: 14px 0 0;
  padding: 0;
  border-top: 0;
  font: 400 14px/1.45 var(--font-ui);
  color: var(--text-2-light);
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-footer > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-footer > div:last-child {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  font: 600 15px/1.2 var(--font-ui);
  color: var(--text-1-light);
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-footer > div:last-child .mp-currency-cell {
  font: 600 30px/1 var(--font-display);
  color: var(--text-1-light);
}
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-footer .bt,
.mepr-form .mepr-checkout-container .invoice-wrapper .mp-cart-footer .bb {
  border: 0;
}


/* =================================================================
   5. Terms checkbox and errors
   MemberPress and Stripe still decide what is an error and when it
   shows: validate.js toggles .invalid on the field and shows/hides
   .cc-error and .mepr-form-has-errors with inline styles. Nothing
   here sets their display, except the address rule below, which only
   follows that inline style.
   The !importants answer MemberPress's own !importants (ui/theme.css:
   red fill on .invalid, label width, the address-error hide, and the
   .mepr_error box).
   ================================================================= */

/* Label row: label left, its error text right (mockup). MemberPress
   forces every label in .mp_wrapper to width: 100% !important. */
.mepr-checkout-container .form-wrapper .mp-form-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 8px;
}
.mepr-checkout-container .form-wrapper .mp-form-label label {
  width: auto !important;
}

/* Error text beside the label */
.mepr-checkout-container .form-wrapper .cc-error {
  padding: 0;
  font: 500 12px/1.35 var(--font-ui);
  color: var(--danger);
  text-align: right;
}

/* Address errors: MemberPress hides these with display:none !important
   (for its old inside-the-field labels). Shown here only while
   validate.js has set an inline display:inline on them, so it still
   decides when each appears and disappears. */
.mepr-checkout-container .form-wrapper .mp-address-group .mp-form-label .cc-error[style*="inline"] {
  display: inline !important;
}

/* Failed field: thin red border on white (MemberPress: 2px red +
   #ff6666 fill, both !important). Covers the coupon field too. */
.mepr-form .mepr-checkout-container :is(input, select, textarea).invalid:not([type="checkbox"]):not([type="radio"]) {
  border: 1.5px solid var(--danger) !important;
  background-color: #fff !important;
}
/* !important: section 2's focus rule is more specific */
.mepr-form .mepr-checkout-container :is(input, select, textarea).invalid:not([type="checkbox"]):not([type="radio"]):focus {
  outline-color: var(--danger) !important;
}

/* Terms / privacy checkbox (only printed when switched on in
   MemberPress › Settings). The label carries .mepr-form-input. */
.mepr-checkout-container .form-wrapper .mepr_tos {
  margin-top: 20px;
}
.mepr-checkout-container .form-wrapper label.mepr-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: 400 13px/1.5 var(--font-ui);
  color: var(--text-2-light);
  cursor: pointer;
}
.mepr-checkout-container .form-wrapper label.mepr-checkbox-field input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ssdn-navy);
}
.mepr-checkout-container .form-wrapper label.mepr-checkbox-field a {
  color: var(--text-1-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Unticked when required: red text + outline on the box only */
.mepr-form .mepr-checkout-container .form-wrapper label.mepr-checkbox-field.invalid {
  border: 0 !important;
  background-color: transparent !important;
  color: var(--danger);
}
.mepr-form .mepr-checkout-container .form-wrapper label.mepr-checkbox-field.invalid a {
  color: var(--danger);
}
.mepr-checkout-container .form-wrapper label.mepr-checkbox-field.invalid input[type="checkbox"] {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* "Please fix the errors above", under the button */
.mepr-checkout-container .form-wrapper .mepr-form-has-errors {
  margin: 10px 0 0;
  padding: 0;
  text-align: center;
  font: 500 12px/1.35 var(--font-ui);
  color: var(--danger);
}

/* Stripe's message under the card box (the box itself: Step 2) */
.mepr-checkout-container .form-wrapper .mepr-stripe-card-errors:not(:empty) {
  margin-top: 10px;
  font: 500 12px/1.35 var(--font-ui);
  color: var(--danger);
}

/* Errors after submitting ("username taken", "card declined").
   MemberPress may print its classic .mepr_error box or ReadyLaunch's
   .mepr_pro_error — both get the same pale-red card. */
body.mepr-pro-template .mepr_error {
  max-width: calc(520px + 44px + 360px);
  margin: 24px auto !important;
  padding: 14px 16px !important;
  background-color: #FBEDEC !important;
  border: 1px solid rgba(179, 38, 30, 0.25) !important;
  border-radius: 12px;
  font: 400 14px/1.5 var(--font-ui);
  color: #B3261E;
}
body.mepr-pro-template .mepr_error ul {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
}
body.mepr-pro-template .mp_wrapper .mepr_pro_error {
  max-width: calc(520px + 44px + 360px);
  margin: 24px auto;
  padding: 14px 16px;
  align-items: flex-start;
  gap: 10px;
  background: #FBEDEC;
  border: 1px solid rgba(179, 38, 30, 0.25);
  border-radius: 12px;
  box-sizing: border-box;
  font: 400 14px/1.5 var(--font-ui);
  color: #B3261E;
}
body.mepr-pro-template .mp_wrapper .mepr_pro_error > * + * {
  margin-left: 0;
}
body.mepr-pro-template .mp_wrapper .mepr_pro_error svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #B3261E;
}
body.mepr-pro-template .mp_wrapper .mepr_pro_error ul {
  margin: 0;
  padding: 0;
}


/* =================================================================
   6. Tablet and phone (below 1024px)
   ReadyLaunch stacks the columns here with the summary on top
   (column-reverse) and 3rem side padding. Here: form first, card
   under it (the HTML's own order, so Tab and screen readers already
   follow it), one centred column up to 520px, narrower gutters.
   The address block stays where MemberPress prints it.
   ================================================================= */

@media (max-width: 1023px) {
  .mepr-form .mepr-checkout-container {
    flex-direction: column;       /* ReadyLaunch: column-reverse */
    max-width: calc(520px + 64px);
    margin: 0 auto;
    padding: 0 32px 48px;
  }

  .mepr-form .mepr-checkout-container .form-wrapper {
    width: 100%;
    padding: 2rem 0 2rem;         /* ReadyLaunch: 3rem on three sides */
  }

  .mepr-form .mepr-checkout-container .invoice-wrapper {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 560px) {
  .mepr-form .mepr-checkout-container {
    padding: 0 20px 40px;
  }

  .mepr-form .mepr-checkout-container .form-wrapper {
    padding-top: 1.5rem;
  }

  .mepr-form .mepr-checkout-container .invoice-wrapper {
    padding: 22px;
    border-radius: 18px;
  }

  /* First / Last name: one under the other */
  .mepr-checkout-container .form-wrapper .mp-form-row .mp-form-row-group {
    flex-direction: column;
    gap: 16px;
  }
  .mepr-checkout-container .form-wrapper .mp-form-row .mp-form-row-group-wrapper {
    flex: none;
    width: 100%;
  }
}


/* =================================================================
   7. Theme headings: top strip, title, section headings
   Printed by inc/checkout/headings.php at MemberPress's hooks; wording
   in library/checkout.php.
   ================================================================= */

/* Strip above the form (in ReadyLaunch's .mepr-before-signup-form,
   outside the header): "Pago seguro" left, "¿Ya es miembro? Entrar"
   right. Same width as the two columns below. */
.mepr-before-signup-form .ssdn-co__strip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  max-width: calc(520px + 44px + 360px);
  margin: 0 auto;
  padding: 22px 0 18px;
  border-bottom: 1px solid rgba(17, 34, 65, 0.09);
  font: 500 13px/1.3 var(--font-ui);
  color: var(--text-2-light);
}
.mepr-before-signup-form .ssdn-co__secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}
.mepr-before-signup-form .ssdn-co__login {
  font-weight: 600;
  color: var(--text-1-light);
  text-decoration: none;
}
.mepr-before-signup-form .ssdn-co__login span {
  color: var(--ssdn-orange);
}
.mepr-before-signup-form .ssdn-co__login:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Title + intro, top of the form */
.mepr-checkout-container .form-wrapper .ssdn-co__head {
  margin: 0 0 30px;
}
.mepr-checkout-container .form-wrapper .ssdn-co__title {
  margin: 0;
  font: 600 30px/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text-1-light);
}
.mepr-checkout-container .form-wrapper .ssdn-co__lede {
  margin: 10px 0 0;
  max-width: 30em;
  font: 400 16px/1.55 var(--font-ui);
  color: var(--text-2-light);
  text-wrap: pretty;
}

/* "Dirección de facturación" / "Forma de pago": divider line above */
.mepr-checkout-container .form-wrapper .ssdn-co__h2 {
  margin: 32px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--divider-light);
  font: 600 20px/1.2 var(--font-display);
  color: var(--text-1-light);
}

/* Strip gutters match the form's (section 6). ReadyLaunch gives every
   child of #primary 3rem side padding below 1024px. */
@media (max-width: 1023px) {
  .mepr-pro-template #primary > .mepr-before-signup-form {
    padding-left: 32px;
    padding-right: 32px;
  }
  .mepr-before-signup-form .ssdn-co__strip {
    max-width: 520px;
  }
}

@media (max-width: 560px) {
  .mepr-pro-template #primary > .mepr-before-signup-form {
    padding-left: 20px;
    padding-right: 20px;
  }
  .mepr-before-signup-form .ssdn-co__strip {
    padding-top: 16px;
  }
  .mepr-checkout-container .form-wrapper .ssdn-co__title {
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .mepr-checkout-container .form-wrapper .ssdn-co__lede {
    font-size: 14px;
    line-height: 1.5;
  }
}