/* ==========================================================================
   Platform wiring styles — membership funnel stages + application form.
   Loads AFTER styles.css; only additions here, no design overrides.
   The membership.js engine toggles stages/errors via the `ms-on` class
   (its injected base CSS hides [data-ms-*]:not(.ms-on) elements).
   ========================================================================== */

/* Error + success lines inside the red signup card. */
.signup__error {
  position: relative;
  width: 100%;
  font-family: var(--font-gotham);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--gold);
  text-align: center;
}

/* Registration + application forms: labels and input text read left-aligned
   (the designed gate card keeps its centered single-field hero styling). */
[data-ms-signup] .field__label,
[data-ms-apply] .field__label {
  text-align: left;
}
[data-ms-signup] .field__input,
[data-ms-apply] .field__input {
  text-align: left;
}
[data-ms-signup] .field__input[type='date'],
[data-ms-apply] .field__input[type='date'] { text-align: left; }

/* State dropdown on the red card: native select, readable menu. */
select.field__input {
  appearance: auto;
  background: transparent;
  cursor: pointer;
}
select.field__input option { color: var(--black); background: var(--white); }

/* Two-up field row (first / last name). Collapses on small screens. */
.field-row {
  width: 100%;
  display: flex;
  gap: 16px;
}
.field-row .field { flex: 1 1 0; min-width: 0; }
@media (max-width: 560px) {
  .field-row { flex-direction: column; gap: 24px; }
}

/* Plan confirmation card (single-plan brand): reuse the price lockup on red. */
.signup .price { position: relative; align-self: center; }
.signup .price__amount,
.signup .price__period { color: var(--white); }

/* Native date input on the red card. */
.signup { color-scheme: dark; }
.field__input[type='date'] { text-align: center; }
.field__input[type='date']::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; }

/* Consent checkboxes (application form). */
.check {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--white);
  cursor: pointer;
}
.check__text {
  font-family: var(--font-gotham);
  font-size: 13px;
  line-height: 1.5;
  color: var(--white);
  text-align: left;
}
.check__text a { color: var(--white); text-decoration: underline; text-underline-position: from-font; }
.check__fine { display: block; margin-top: 4px; font-size: 11px; opacity: 0.7; }

/* Conditional birthdate + SMS block: the engine reveals [data-ms-apply-extra]
   when a phone number is entered. Spacing matches .signup__fields gap. */
[data-ms-apply-extra] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Remuda Rebates block on the registration card: a framed decision, not
   legalese. Gold hairlines echo the perks ornament treatment. */
.rebate-block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.rebate-block__pitch {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rebate-block__title {
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--white);
  text-align: left;
}
.rebate-block__sub {
  font-family: var(--font-gotham);
  font-size: 13px;
  line-height: 1.5;
  color: var(--white);
  opacity: 0.85;
  text-align: left;
}
.choice-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--white);
  cursor: pointer;
}
.choice:has(input:checked) { background: rgba(255, 255, 255, 0.12); }
.choice input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--white);
  cursor: pointer;
}
.choice__text {
  font-family: var(--font-gotham);
  font-size: 13px;
  line-height: 1.5;
  color: var(--white);
  text-align: left;
}
.rebate-note {
  font-family: var(--font-gotham);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--gold);
  text-align: left;
}

/* Auto-renewal / terms disclosure above the commitment buttons. */
.signup__legal {
  position: relative;
  width: 100%;
  font-family: var(--font-gotham);
  font-size: 12px;
  line-height: 1.55;
  color: var(--white);
  opacity: 0.85;
  text-align: left;
}
.signup__legal a {
  text-decoration: underline;
  text-underline-position: from-font;
}
.signup__legal strong { font-weight: 700; }

/* Secure-checkout trust lockup (padlock + processor name). */
.signup__secure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-gotham);
  font-size: 12px;
  letter-spacing: 0.24px;
  color: var(--white);
  opacity: 0.8;
}
.signup__secure-lock { flex: none; color: var(--gold); }
.signup__secure-badge {
  flex: none;
  height: 24px;
  width: auto;
  display: block;
}

/* Busy state: the engine disables the submit control while a call runs. */
.btn--solid[disabled] { opacity: 0.6; cursor: progress; }

/* Simple page shell for the apply / received pages (hero-lite header). */
.pagehead {
  position: relative;
  width: 100%;
  padding: 56px 24px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.pagehead .logo__inner { transform: scale(0.72); transform-origin: top center; }
.pagehead__back {
  font-family: var(--font-buttons);
  font-size: 11px;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}