/*
 * Phase 2 typography: customer authentication surfaces only.
 * Readex Pro reuses the reviewed Phase 1 assets; runtime rules require the
 * explicit hxl-auth-typography hook and never match a generic auth-page alone.
 */

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("../fonts/readex-pro/readex-pro-arabic-wght-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("../fonts/readex-pro/readex-pro-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.hxl-auth-typography.auth-page {
  --hxl-auth-font: "Readex Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: var(--hxl-auth-font);
  --font-heading: var(--hxl-auth-font);
  --hxl-font: var(--hxl-auth-font);
  --hxl-font-ui: var(--hxl-auth-font);
  --hxl-font-display: var(--hxl-auth-font);
  font-family: var(--hxl-auth-font) !important;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.62;
  font-synthesis: none;
}

html[dir="rtl"] body.hxl-auth-typography.auth-page {
  --hxl-auth-font: "Readex Pro", Tahoma, Arial, "Segoe UI", sans-serif;
  line-height: 1.72;
}

body.hxl-auth-typography.auth-page :where(
  h1, h2, h3, h4, h5, h6,
  p, a, label, input, button, textarea, select, small, strong, span, bdi, li,
  .alert, .reset-note, .compact-verify-status, .error-message, .errors,
  .invalid-feedback, .valid-feedback, .form-text, .referral-signup-notice,
  #submit-message
) {
  font-family: var(--hxl-auth-font) !important;
}

body.hxl-auth-typography.auth-page .hxl-brand__tile {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body.hxl-auth-typography.auth-page .hxl-brand__wordmark {
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
}

body.hxl-auth-typography.auth-page :where(
  .auth-nav .nav-link,
  .shared-language-selector__label,
  .shared-language-selector__option
) {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.4;
  text-transform: none !important;
}

body.hxl-auth-typography.auth-page :where(
  .login-html h1,
  .login-html h2,
  .reset-panel h1,
  .feature-closed-card h1
) {
  font-size: clamp(1.75rem, 3vw, 2.15rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.18 !important;
  text-wrap: balance;
}

body.hxl-auth-typography.auth-page :where(
  .auth-copy,
  .account-modal-copy,
  .feature-closed-card p
) {
  max-width: 46ch;
  font-size: 1rem !important;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.65 !important;
}

body.hxl-auth-typography.auth-page .login-html .tab {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.4;
  text-transform: none !important;
}

body.hxl-auth-typography.auth-page :where(
  .login-form .group .label,
  .auth-modal .form-label,
  .reset-panel .form-group > label
) {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
}

body.hxl-auth-typography.auth-page :where(
  .login-form .group .input,
  .compact-verify-input,
  .auth-modal .form-control,
  .reset-panel .form-control
) {
  font-size: 1rem !important;
  font-weight: 500;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

body.hxl-auth-typography.auth-page :where(
  .login-form .group .input,
  .compact-verify-input,
  .auth-modal .form-control,
  .reset-panel .form-control
)::placeholder {
  font-weight: 400;
  opacity: 0.78;
}

body.hxl-auth-typography.auth-page .compact-verify-input {
  font-variant-numeric: tabular-nums;
}

body.hxl-auth-typography.auth-page :where(
  .login-form .group .button,
  .compact-verify-submit,
  .auth-modal .btn-primary,
  .reset-panel .btn,
  .feature-closed-card .btn-primary
) {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.4;
  text-transform: none !important;
  white-space: normal;
}

body.hxl-auth-typography.auth-page :where(
  .foot-lnk a,
  .foot-lnk label,
  .compact-verify-resend,
  .simple-text-link
) {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.5;
  text-transform: none !important;
}

body.hxl-auth-typography.auth-page :where(
  .error-message,
  .errors,
  .compact-verify-status,
  #submit-message,
  .invalid-feedback,
  .valid-feedback,
  .form-text,
  .custom-alert,
  .alert
) {
  font-size: 0.875rem !important;
  font-weight: 500;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
}

body.hxl-auth-typography.auth-page .referral-signup-notice {
  font-size: 0.875rem !important;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.55 !important;
}

body.hxl-auth-typography.auth-page .auth-modal .modal-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.006em !important;
  line-height: 1.3 !important;
}

body.hxl-auth-typography.auth-page :where(
  .auth-badge,
  .closed-badge
) {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

body.hxl-auth-typography.auth-page .reset-note {
  font-size: 0.925rem !important;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.65 !important;
}

html:root[dir="rtl"] body.hxl-auth-typography.auth-page :where(
  h1, h2, h3, h4, h5, h6,
  p, a, label, input, button, textarea, select, small, strong, span, bdi, li,
  .alert, .reset-note, .compact-verify-status, .error-message, .errors,
  .invalid-feedback, .valid-feedback, .form-text, .referral-signup-notice,
  #submit-message
) {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[dir="rtl"] body.hxl-auth-typography.auth-page :where(
  .login-html h1,
  .login-html h2,
  .reset-panel h1,
  .feature-closed-card h1
) {
  line-height: 1.34 !important;
}

html[dir="rtl"] body.hxl-auth-typography.auth-page :where(
  .auth-copy,
  .account-modal-copy,
  .reset-note,
  .feature-closed-card p
) {
  line-height: 1.75 !important;
}

html[dir="rtl"] body.hxl-auth-typography.auth-page :where(
  .login-form .group .label,
  .auth-modal .form-label,
  .reset-panel .form-group > label,
  .error-message,
  .errors,
  .compact-verify-status,
  .alert
) {
  line-height: 1.6 !important;
}

@media (max-width: 767.98px) {
  body.hxl-auth-typography.auth-page :where(
    .login-html h1,
    .login-html h2,
    .reset-panel h1,
    .feature-closed-card h1
  ) {
    font-size: clamp(1.55rem, 7vw, 1.85rem) !important;
    line-height: 1.22 !important;
  }

  html[dir="rtl"] body.hxl-auth-typography.auth-page :where(
    .login-html h1,
    .login-html h2,
    .reset-panel h1,
    .feature-closed-card h1
  ) {
    line-height: 1.38 !important;
  }
}

@media (max-width: 390px) {
  body.hxl-auth-typography.auth-page :where(
    .login-form .group .label,
    .auth-modal .form-label,
    .reset-panel .form-group > label
  ) {
    font-size: 0.85rem !important;
  }

  body.hxl-auth-typography.auth-page :where(
    .error-message,
    .errors,
    .compact-verify-status,
    #submit-message,
    .alert
  ) {
    font-size: 0.84rem !important;
  }
}