/* MB Email Code Login: layout only; inputs and buttons reuse the auth panel classes. */
.mb-ecl { margin-top: 18px; }
.mb-ecl [hidden] { display: none !important; }
/* The panel styles .mb-auth-panel__form with display, which would override [hidden] when the code panel is open. */
.mb-auth-panel [data-auth-login-form][hidden] { display: none !important; }
.mb-ecl__divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; color: #6b7280; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.mb-ecl__divider::before, .mb-ecl__divider::after { content: ""; flex: 1; height: 1px; background: rgba(15, 23, 42, .14); }
.mb-ecl__toggle { width: 100%; }
.mb-ecl__panel { margin-top: 14px; }
.mb-ecl[data-mode="email_code"] .mb-ecl__panel { margin-top: 0; }
.mb-ecl__step { display: grid; gap: 14px; }
.mb-ecl__code { font-size: 1.4em; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
/* Resend / change: light text actions under Sign in, in the panel's link colour. Specific selectors:
   the theme styles every <button> (which otherwise turned these into outlined pills). */
.mb-ecl .mb-ecl__links { display: flex; justify-content: space-between; align-items: center; gap: 0 16px; flex-wrap: wrap; margin-top: -6px; }
.mb-ecl .mb-ecl__links button.mb-ecl__link,
.mb-ecl .mb-ecl__links button.mb-ecl__link:hover,
.mb-ecl .mb-ecl__links button.mb-ecl__link:focus,
.mb-ecl .mb-ecl__links button.mb-ecl__link:active,
.mb-ecl .mb-ecl__links button.mb-ecl__link:disabled { appearance: none; -webkit-appearance: none; margin: 0; min-height: 44px; padding: 10px 2px; border: 0; border-radius: 0; background: transparent; background-image: none; box-shadow: none; color: #c34a87; font-family: var(--mb-auth-body, inherit); font-size: .93rem; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; }
.mb-ecl .mb-ecl__links button.mb-ecl__link:hover { color: #a93972; text-decoration: underline; text-underline-offset: 3px; }
.mb-ecl .mb-ecl__links button.mb-ecl__link:focus-visible { outline: 2px solid #0f1720; outline-offset: 2px; border-radius: 6px; }
.mb-ecl .mb-ecl__links button.mb-ecl__link:disabled,
.mb-ecl .mb-ecl__links button.mb-ecl__link:disabled:hover { color: var(--mb-auth-muted, #526a85); font-weight: 600; text-decoration: none; cursor: default; }
.mb-ecl__feedback { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; background: rgba(15, 23, 42, .05); }
.mb-ecl__feedback--error { background: rgba(185, 28, 28, .08); color: #8b1e2d; }
.mb-ecl__feedback--info { background: rgba(21, 128, 61, .08); color: #14532d; }
/* "Password | Email me a code": two clear choices styled like the auth panel's own tabs (dark = selected).
   Selectors are deliberately specific: the site theme styles every <button>, which otherwise made both
   options render identically (white with a dark border). */
.mb-ecl-methods { display: grid; gap: 10px; margin-bottom: 20px; }
.mb-ecl-methods .mb-ecl-methods__switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; margin: 0; border: 0; background: transparent; }
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option,
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option:hover,
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option:focus,
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option:active { appearance: none; -webkit-appearance: none; margin: 0; border: 1px solid var(--mb-auth-border-strong, rgba(15, 23, 42, .28)); border-radius: 999px; min-height: 48px; padding: 0 12px; background: #ffffff; background-image: none; color: #0f1720; font-family: var(--mb-auth-body, inherit); font-size: .95rem; font-weight: 700; line-height: 1.15; letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap; box-shadow: none; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option:hover { border-color: #0f1720; }
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option:focus-visible { outline: 2px solid #0f1720; outline-offset: 2px; }
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option.is-active,
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option.is-active:hover,
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option.is-active:focus,
.mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option.is-active:active { background: #0f1720; border-color: #0f1720; color: #ffffff; box-shadow: 0 8px 18px rgba(15, 23, 42, .18); }
.mb-ecl-methods .mb-ecl-methods__hint { margin: 0; color: var(--mb-auth-muted, #526a85); font-size: .9rem; line-height: 1.45; text-align: center; }
.mb-ecl-methods .mb-ecl-methods__hint[hidden] { display: none !important; }
.mb-ecl-methods .mb-ecl-methods__hint strong { color: var(--mb-auth-text, #11253e); }
.mb-ecl[data-mode="both"] .mb-ecl__panel { margin-top: 0; }
/* The panel rounds inputs only inside its login form; give the code steps the same shape (the theme's input rule otherwise wins). */
.mb-auth-panel .mb-ecl .mb-ecl__step input.mb-auth-panel__input { border-radius: 999px; padding: 8px 20px; height: auto; }
.mb-ecl__sent { padding: 14px 16px; border-radius: 16px; background: rgba(21, 128, 61, .07); border: 1px solid rgba(21, 128, 61, .16); }
.mb-ecl__sent-title { margin: 0 0 4px; font-weight: 700; font-size: 1.02rem; color: var(--mb-auth-text, #11253e); }
.mb-ecl__sent-copy { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--mb-auth-text, #11253e); overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .mb-ecl .mb-ecl__links { flex-direction: column; align-items: center; margin-top: -4px; }
  .mb-ecl-methods .mb-ecl-methods__switch button.mb-ecl-methods__option { font-size: .88rem; min-height: 46px; padding: 0 6px; }
}