/* Presentation for Tutor 4.2 guest account forms. Native forms, navigation and state remain Tutor-owned. */
html:not([data-tutor-theme="dark"]) body.madd-account-page {
  --tutor-text-primary: var(--madd-ink);
  --tutor-text-secondary: var(--madd-muted);
  --tutor-text-subdued: var(--madd-muted);
  --tutor-text-brand: var(--madd-action);
  --tutor-text-brand-hover: var(--madd-action-hover);
  --tutor-icon-brand: var(--madd-action);
  --tutor-icon-brand-hover: var(--madd-action-hover);
  --tutor-border-brand: var(--madd-action);
  --tutor-border-brand-secondary: var(--madd-border);
  --tutor-border-brand-tertiary: var(--madd-brand);
  --tutor-border-idle: var(--madd-border);
  --tutor-border-idle2: var(--madd-border);
  --tutor-surface-base: var(--madd-canvas);
  --tutor-surface-l1: var(--madd-paper);
  --tutor-surface-l1-hover: var(--madd-canvas);
  --tutor-surface-sidebar-l1: var(--madd-paper);
  --tutor-surface-brand-primary: var(--madd-action);
  --tutor-surface-brand-secondary: var(--madd-tint);
  --tutor-surface-brand-tertiary: var(--madd-canvas);
  --tutor-surface-brand-quaternary: var(--madd-tint);
  --tutor-actions-brand-primary: var(--madd-action);
  --tutor-actions-brand-secondary: var(--madd-tint);
  --tutor-actions-brand-tertiary: var(--madd-canvas);
  --tutor-button-primary: var(--madd-action);
  --tutor-button-primary-hover: var(--madd-action-hover);
  --tutor-button-primary-focused: var(--madd-action-hover);
  --tutor-button-primary-soft: var(--madd-tint);
  --tutor-button-primary-soft-hover: var(--madd-border);
  --tutor-button-outline-hover: var(--madd-tint);
  --tutor-button-ghost-hover: var(--madd-canvas);
}

html[lang^="ar"] .madd-account-page {
  --tutor-font-family-body: "thmanyah sans", sans-serif;
  --tutor-font-family-heading: "thmanyah sans", sans-serif;
}

.madd-account-page :is(.tutor-login-wrap, #tutor-registration-wrap, :is(.tutor-reset-password-form, .tutor-forgot-password-form)) {
  --tutor-button-radius: 10px;
  scrollbar-color: var(--tutor-border-hover) var(--tutor-surface-base);
  scrollbar-width: auto;
}
.madd-account-page :is(.tutor-login-wrap, #tutor-registration-wrap, :is(.tutor-reset-password-form, .tutor-forgot-password-form)) :focus-visible {
  outline: 3px solid var(--tutor-text-brand);
  outline-offset: 3px;
}

/* Dedicated login, registration and recovery forms, outside the lesson or checkout modal. */
.madd-account-page .madd-main-content:has(.tutor-login-wrap, #tutor-registration-wrap, :is(.tutor-reset-password-form, .tutor-forgot-password-form)) {
  background: var(--tutor-surface-base);
  padding: 56px 24px 72px;
}
.madd-account-page :is(.tutor-login-wrap, #tutor-registration-wrap) {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 1px solid var(--tutor-border-idle);
  border-block-start: 4px solid var(--tutor-text-brand);
  border-radius: 16px;
  background: var(--tutor-surface-l1);
  box-shadow: none !important;
}
.madd-account-page :is(.tutor-login-form-wrapper, #tutor-registration-form) { padding: 36px !important; }
.madd-account-page .tutor-login-form-wrapper > .tutor-h3 { margin-block-end: 28px; font-size: 30px; line-height: 1.5; color: var(--tutor-text-primary); }
.madd-account-page #tutor-registration-form { gap: 24px; }
.madd-account-page :is(.tutor-login-wrap, #tutor-registration-wrap, :is(.tutor-reset-password-form, .tutor-forgot-password-form)) .tutor-input:not([type="checkbox"]):not([type="hidden"]),
.madd-account-page #tutor-registration-form input:is([name="phone_no"], [name="nelc_national_id"]) {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--tutor-border-idle);
  border-radius: 10px;
  background: var(--tutor-surface-l1);
  color: var(--tutor-text-primary);
  font-family: inherit;
  font-size: 16px;
}
.madd-account-page #tutor-registration-form .tutor-label { margin-block-end: 10px; line-height: 1.7; }
.madd-account-page #tutor-registration-form .tutor-form-row { row-gap: 24px; }
.madd-account-page #tutor-registration-form .tutor-form-row > * { flex: 0 0 100%; max-width: 100%; }
.madd-account-page #tutor-registration-form .tutor-form-row p { margin: 0; }
.madd-account-page #tutor-registration-form label[for="nelc_national_id"] { display: block; width: 100%; line-height: 1.8; }
.madd-account-page :is(.tutor-login-wrap, #tutor-registration-wrap, :is(.tutor-reset-password-form, .tutor-forgot-password-form)) .tutor-btn-primary { min-height: 52px; }
.madd-account-page .tutor-login-wrap #tutor-login-form > .tutor-flex { gap: 12px; flex-wrap: wrap; }
.madd-account-page .tutor-login-wrap .wfls-passkey-submit {
  min-height: 52px;
  border: 1px solid var(--tutor-border-brand);
  border-radius: 10px;
  background: var(--tutor-surface-l1);
  color: var(--tutor-text-brand);
  font: inherit;
}
.madd-account-page .tutor-login-wrap .wfls-passkey-submit:hover { background: var(--tutor-surface-brand-secondary); }
.madd-account-page .tutor-login-wrap .wfls-passkey-divider { display: flex; align-items: center; gap: 12px; margin-block: 20px; color: var(--tutor-text-secondary); }
.madd-account-page .tutor-login-wrap .wfls-passkey-divider::before,
.madd-account-page .tutor-login-wrap .wfls-passkey-divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--tutor-border-idle); }
.madd-account-page :is(.tutor-reset-password-form, .tutor-forgot-password-form) { padding: 28px !important; }
.madd-account-page .tutor-card:has(> :is(.tutor-reset-password-form, .tutor-forgot-password-form)) { margin: 0 auto !important; border-radius: 16px; }

@media (max-width: 767px) {
  .madd-account-page .madd-main-content:has(.tutor-login-wrap, #tutor-registration-wrap, :is(.tutor-reset-password-form, .tutor-forgot-password-form)) { padding: 32px 20px 48px; }
  .madd-account-page :is(.tutor-login-form-wrapper, #tutor-registration-form) { padding: 24px !important; }
  .madd-account-page .tutor-login-form-wrapper > .tutor-h3 { font-size: 26px; text-align: center; }
}


.madd-account-page .madd-account-title { margin: 0; padding: 32px 36px 0; font-size: 30px; line-height: 1.5; color: var(--tutor-text-primary); }
@media (max-width: 767px) { .madd-account-page .madd-account-title { padding: 24px 24px 0; font-size: 26px; text-align: center; } }