/**
 * Authentication Pages Styles
 * 
 * BEM Methodology:
 * - Block: auth
 * - Element: auth__element (double underscore)
 * - Modifier: auth__element--modifier (double dash)
 * 
 * @module auth
 */

:root {
  /* ========================================================================
     Design Tokens - Colors (Light Theme Defaults)
     ======================================================================== */
  /* Note: These are overridden by theme CSS files (dsplay-light.css, dsplay-dark.css) */
  /* which define these variables using SASS color variables from _colors-light.sass and _colors-dark.sass */
  
  --auth-color-primary: #353740;
  --auth-color-text-primary: #353740;
  --auth-color-text-secondary: #90939E;
  --auth-color-input-text: #353740;
  --auth-color-label: #90939E;
  --auth-color-error: crimson;
  --auth-color-error-text: #8a1f11;
  --auth-color-background: #fff;
  --auth-color-button: #3388E8;
  --auth-color-button-hover: #2a6fc4;
  --auth-color-button-text: #ffffff;
  --auth-color-info-bg: #f1f2f5;
  --auth-color-info-border: #D1D2D3;
  --auth-color-success: #4F8A10;
  --auth-color-danger: crimson;
  
  /* Overlay & Border Colors */
  --auth-color-border-opacity: rgba(0, 0, 0, 0.1);
  --auth-color-overlay: rgba(0, 0, 0, 0.05);
  --auth-color-overlay-highlight: rgba(0, 0, 0, 0.03);
  --auth-color-input-focus: rgba(0, 0, 0, 0.1);
  --auth-color-shadow: rgba(0, 0, 0, 0.1);
  
  /* ========================================================================
     Design Tokens - Spacing
     ======================================================================== */
  
  --auth-spacing-xs: 0.25rem;
  --auth-spacing-sm: 0.5rem;
  --auth-spacing-md: 1rem;
  --auth-spacing-lg: 1.5rem;
  --auth-spacing-xl: 2rem;
  --auth-spacing-header: 32px;
  --auth-spacing-input-gap: 0.5rem;
  --auth-spacing-form-gap: 1.25rem;
  --auth-spacing-list-gap: 0.375rem;
  
  /* ========================================================================
     Design Tokens - Typography
     ======================================================================== */
  
  --auth-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --auth-font-size-heading: 26px;
  --auth-font-size-input: 16px;
  --auth-font-size-label: 14px;
  --auth-font-size-button: 16px;
  --auth-font-size-text: 14px;
  --auth-font-size-error: 14px;
  --auth-font-size-password: 13px;
  --auth-font-size-password-icon: 12px;
  --auth-font-weight-normal: 400;
  --auth-font-weight-medium: 500;
  --auth-font-weight-bold: 600;
  --auth-line-height-base: 1.4;
  --auth-line-height-heading: 1.2;
  --auth-letter-spacing: -0.01em;
  
  /* ========================================================================
     Design Tokens - Sizing
     ======================================================================== */
  
  --auth-size-input-height: 3rem;
  --auth-size-icon: 16px;
  --auth-size-icon-small: 12px;
  --auth-size-input-padding-x: 1rem;
  --auth-size-input-padding-y: 0;
  --auth-size-phone-flag-padding-x: 0.5rem;
  --auth-size-phone-flag-padding-y: 0;
  --auth-size-phone-input-padding-left: 52px;
  --auth-size-button-height: 3rem;
  --auth-size-button-padding-x: 1.25rem;
  --auth-size-button-padding-y: 0;
  
  /* ========================================================================
     Design Tokens - Border Radius
     ======================================================================== */
  
  --auth-radius-base: 1rem;
  --auth-radius-button: 4px;
  --auth-radius-info: 4px;
  --auth-radius-error: 0.5rem;
  
  /* ========================================================================
     Design Tokens - Z-Index
     ======================================================================== */
  
  --auth-z-index-overlay: 0;
  --auth-z-index-phone-flag: 1;
  
  /* ========================================================================
     Design Tokens - Transitions
     ======================================================================== */
  
  --auth-transition-duration: 0.2s;
  --auth-transition-timing: ease-in-out;
  --auth-transition-all: all var(--auth-transition-duration) var(--auth-transition-timing);
  
  /* ========================================================================
     Design Tokens - Opacity
     ======================================================================== */
  
  --auth-opacity-placeholder: 0.7;
  --auth-opacity-link-hover: 0.9;
  
  /* Legacy variable for backward compatibility */
  --color-white: #ffffff;
}

/* ==========================================================================
   Layout - Page Structure
   ========================================================================== */

body.auth-page-wrapper,
body:has(#main-content-area:has(.auth__overlay)) {
  background-color: var(--auth-color-background) !important;
}

html:has(body.auth-page-wrapper),
html:has(body:has(#main-content-area:has(.auth__overlay))) {
  background-color: var(--auth-color-background) !important;
}

body.auth-page-wrapper #page,
body:has(#main-content-area:has(.auth__overlay)) #page {
  /* Positioning */
  display: flex !important;
  flex-direction: column !important;
  /* Box Model */
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  background-color: var(--auth-color-background) !important;
}

body.auth-page-wrapper #header,
body:has(#main-content-area:has(.auth__overlay)) #header {
  /* Box Model */
  flex-shrink: 0 !important;
}

body.auth-page-wrapper #main-content-area,
#main-content-area:has(.auth__overlay),
#main-content-area.auth-page {
  /* Positioning */
  display: flex !important;
  flex-direction: column !important;
  /* Box Model */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background-color: var(--auth-color-background) !important;
}

body.auth-page-wrapper #main-content-push,
body:has(#main-content-area:has(.auth__overlay)) #main-content-push {
  /* Positioning */
  display: flex !important;
  flex-direction: column !important;
  /* Box Model */
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.auth-page-wrapper .breadcrumbs-container,
body:has(#main-content-area:has(.auth__overlay)) .breadcrumbs-container {
  /* Visuals */
  display: none !important;
}

body.auth-page-wrapper #main-content,
body:has(#main-content-area:has(.auth__overlay)) #main-content {
  /* Positioning */
  display: flex !important;
  align-items: center !important;
  /* Box Model */
  min-height: auto !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

body.auth-page-wrapper #footer,
body:has(#main-content-area:has(.auth__overlay)) #footer {
  /* Box Model */
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

/* ==========================================================================
   Typography - Base Styles
   ========================================================================== */

#main-content-area:has(.auth__overlay),
#main-content-area.auth-page {
  /* Typography */
  font-family: var(--auth-font-family);
  color: var(--auth-color-text-secondary);
}

#main-content-area:has(.auth__overlay) .font-sans,
#main-content-area.auth-page .font-sans {
  /* Typography */
  font-family: var(--auth-font-family);
}

#main-content-area:has(.auth__overlay) h1,
#main-content-area.auth-page h1 {
  /* Typography */
  font-family: var(--auth-font-family);
  font-size: var(--auth-font-size-heading);
  font-weight: var(--auth-font-weight-medium);
  line-height: var(--auth-line-height-heading);
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-emoji: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: proportional-nums;
  font-variant-position: normal;
  color: var(--auth-color-text-primary);
  /* Visuals */
  -webkit-font-smoothing: antialiased;
}

#main-content-area:has(.auth__overlay) span,
#main-content-area.auth-page span,
#main-content-area:has(.auth__overlay) p,
#main-content-area.auth-page p,
#main-content-area:has(.auth__overlay) h2,
#main-content-area.auth-page h2,
#main-content-area:has(.auth__overlay) button:not(.auth__submit),
#main-content-area.auth-page button:not(.auth__submit) {
  /* Typography */
  font-family: var(--auth-font-family);
  font-weight: var(--auth-font-weight-normal);
  color: var(--auth-color-text-secondary);
}

/* ==========================================================================
   Block: auth
   ========================================================================== */

/* Element: auth__overlay */
.auth__overlay {
  /* Positioning */
  position: fixed;
  inset: 0;
  z-index: var(--auth-z-index-overlay);
  /* Visuals */
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, var(--auth-color-overlay) 0%, transparent 75%);
}

/* Element: auth__container */
.auth__container {
  /* Box Model */
  min-height: 0;
}

/* Element: auth__main */
.auth__main {
  /* Box Model */
  padding: var(--auth-spacing-lg) 0;
}

/* Element: auth__header */
.auth__header {
  /* Box Model */
  margin-bottom: var(--auth-spacing-header);
}

/* Element: auth__heading */
.auth__heading {
  /* Typography */
  font-size: var(--auth-font-size-heading);
  font-weight: var(--auth-font-weight-medium);
  line-height: var(--auth-line-height-heading);
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-emoji: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: proportional-nums;
  font-variant-position: normal;
  color: var(--auth-color-text-primary);
  /* Visuals */
  -webkit-font-smoothing: antialiased;
}

/* Element: auth__label */
.auth__label {
  /* Typography */
  font-family: var(--auth-font-family) !important;
  font-size: var(--auth-font-size-label) !important;
  font-weight: var(--auth-font-weight-medium) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  color: var(--auth-color-label) !important;
}

#main-content-area:has(.auth__overlay) .auth__label,
#main-content-area.auth-page .auth__label {
  /* Typography */
  font-family: var(--auth-font-family) !important;
  font-size: var(--auth-font-size-label) !important;
  font-weight: var(--auth-font-weight-medium) !important;
  color: var(--auth-color-label) !important;
}

/* Element: auth__input */
.auth__input {
  /* Positioning */
  position: relative;
  /* Box Model */
  height: var(--auth-size-input-height);
  padding: var(--auth-size-input-padding-y) var(--auth-size-input-padding-x);
  border: 2px solid var(--auth-color-border-opacity);
  border-radius: var(--auth-radius-base);
  /* Typography */
  font-family: var(--auth-font-family) !important;
  font-size: var(--auth-font-size-input) !important;
  font-weight: var(--auth-font-weight-normal) !important;
  color: var(--auth-color-input-text) !important;
  /* Visuals */
  background-color: var(--auth-color-input-bg);
  background: var(--auth-color-input-bg-gradient, var(--auth-color-input-bg));
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transition: var(--auth-transition-all);
}

.auth__input::placeholder {
  /* Typography */
  color: var(--auth-color-text-secondary);
  /* Visuals */
  opacity: var(--auth-opacity-placeholder);
}

.auth__input:focus {
  /* Visuals */
  outline: none;
  box-shadow: 0 0 0 2px var(--auth-color-input-focus);
}

#main-content-area:has(.auth__overlay) .auth__input,
#main-content-area.auth-page .auth__input {
  /* Typography */
  font-family: var(--auth-font-family) !important;
  font-size: var(--auth-font-size-input) !important;
  font-weight: var(--auth-font-weight-normal) !important;
  color: var(--auth-color-input-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth__input {
    transition: none;
  }
}

/* Element: auth__phone-wrapper */
.auth__phone-wrapper {
  /* Positioning */
  position: relative;
}

.auth__phone-wrapper .iti {
  /* Box Model */
  width: 100%;
}

.auth__phone-wrapper .iti .auth__input {
  /* Box Model */
  padding-left: var(--auth-size-phone-input-padding-left);
}

.auth__phone-wrapper .iti .iti__selected-flag {
  /* Positioning */
  position: relative;
  /* Box Model */
  height: 100%;
  padding: var(--auth-size-phone-flag-padding-y) var(--auth-size-phone-flag-padding-x);
  border-right: 1px solid var(--auth-color-border-opacity);
  /* Visuals */
  background-color: transparent;
}

.auth__phone-wrapper .iti .iti__selected-flag:hover {
  /* Visuals */
  background-color: var(--auth-color-overlay-highlight);
}

.auth__phone-wrapper .iti__flag-container {
  /* Positioning */
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--auth-z-index-phone-flag);
  /* Box Model */
  height: 100%;
}

.auth__phone-wrapper .iti__country-list {
  /* Box Model */
  border: 2px solid var(--auth-color-border-opacity);
  /* Visuals */
  background-color: var(--auth-color-background);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 4px 6px var(--auth-color-shadow);
}

.auth__phone-wrapper .iti__country {
  /* Typography */
  color: var(--auth-color-text-secondary);
}

.auth__phone-wrapper .iti__country.iti__highlight {
  /* Visuals */
  background-color: var(--auth-color-overlay-highlight);
}

/* Element: auth__submit */
#main-content-area:has(.auth__overlay) .auth__submit,
#main-content-area.auth-page .auth__submit,
.auth__submit {
  /* Typography */
  font-family: var(--auth-font-family) !important;
  font-size: var(--auth-font-size-button) !important;
  font-weight: var(--auth-font-weight-medium) !important;
  color: var(--auth-color-button-text) !important;
  /* Box Model */
  border-radius: var(--auth-radius-button) !important;
  /* Visuals */
  background-color: var(--auth-color-button) !important;
}

.auth__submit:hover {
  /* Visuals */
  background-color: var(--auth-color-button-hover) !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth__submit,
  .auth__submit:hover {
    transition: none;
  }
}

/* Element: auth__link */
.auth__link {
  /* Typography */
  font-weight: var(--auth-font-weight-bold);
  color: var(--auth-color-text-primary);
}

/* Modifier: auth__link--secondary */
/* Override theme CSS that loads after auth.css */
body.auth-page-wrapper #main-content-area:has(.auth__overlay) a.auth__link--secondary,
body.auth-page-wrapper #main-content-area.auth-page a.auth__link--secondary,
#main-content-area:has(.auth__overlay) .auth__link--secondary,
#main-content-area.auth-page .auth__link--secondary,
.auth__link--secondary {
  /* Typography */
  font-family: var(--auth-font-family) !important;
  font-size: var(--auth-font-size-text) !important;
  font-weight: var(--auth-font-weight-normal) !important;
  color: var(--auth-color-button) !important;
  text-decoration: none;
  text-decoration-color: var(--auth-color-button);
  /* Visuals */
  -webkit-font-smoothing: antialiased;
}

body.auth-page-wrapper #main-content-area:has(.auth__overlay) a.auth__link--secondary:hover,
body.auth-page-wrapper #main-content-area.auth-page a.auth__link--secondary:hover,
#main-content-area:has(.auth__overlay) .auth__link--secondary:hover,
#main-content-area.auth-page .auth__link--secondary:hover,
.auth__link--secondary:hover {
  /* Typography */
  color: var(--auth-color-button-hover) !important;
  text-decoration: underline;
  text-decoration-color: var(--auth-color-button-hover);
  /* Visuals */
  opacity: 1;
}

#main-content-area:has(.auth__overlay) a.hover\:underline,
#main-content-area.auth-page a.hover\:underline {
  /* Typography */
  font-weight: var(--auth-font-weight-bold);
  color: var(--auth-color-text-primary);
}

#main-content-area:has(.auth__overlay) a:hover:not(.auth__link--secondary):not(.auth__info-link),
#main-content-area.auth-page a:hover:not(.auth__link--secondary):not(.auth__info-link) {
  /* Typography */
  color: var(--auth-color-text-secondary);
  /* Visuals */
  opacity: var(--auth-opacity-link-hover);
}

/* Element: auth__error */
.auth__error {
  /* Typography */
  color: var(--auth-color-error);
}

/* Element: auth__error-summary */
#main-content-area:has(.auth__overlay) .errorSummary,
#main-content-area.auth-page .errorSummary,
.auth__container .errorSummary {
  /* Box Model */
  padding: var(--auth-spacing-sm) var(--auth-spacing-md);
  margin: 0 0 var(--auth-spacing-form-gap) 0;
  border-radius: var(--auth-radius-error);
  /* Typography */
  font-size: var(--auth-font-size-error) !important;
  color: var(--auth-color-error-text) !important;
}

#main-content-area:has(.auth__overlay) .errorSummary p,
#main-content-area.auth-page .errorSummary p,
.auth__container .errorSummary p {
  /* Box Model */
  margin: 0;
  padding: var(--auth-spacing-xs) 0;
  /* Typography */
  color: var(--auth-color-error-text);
}

#main-content-area:has(.auth__overlay) .errorSummary ul,
#main-content-area.auth-page .errorSummary ul,
.auth__container .errorSummary ul {
  /* Box Model */
  margin: var(--auth-spacing-sm) 0 0 0;
  padding: 0 0 0 var(--auth-spacing-form-gap);
  /* Typography */
  color: var(--auth-color-error-text);
}

#main-content-area:has(.auth__overlay) .errorSummary li,
#main-content-area.auth-page .errorSummary li,
.auth__container .errorSummary li {
  /* Box Model */
  margin-bottom: var(--auth-spacing-xs);
  /* Typography */
  color: var(--auth-color-error-text);
}

/* Element: auth__info-box */
.auth__info-box {
  /* Box Model */
  padding: var(--auth-spacing-md);
  border: 1px solid var(--auth-color-info-border);
  border-radius: var(--auth-radius-info);
  /* Typography */
  text-align: center;
  /* Visuals */
  background-color: var(--auth-color-info-bg);
}

/* Element: auth__info-text */
.auth__info-text {
  /* Box Model */
  margin: 0;
  /* Typography */
  font-family: var(--auth-font-family) !important;
  font-size: var(--auth-font-size-text) !important;
  font-weight: var(--auth-font-weight-normal) !important;
  color: var(--auth-color-text-secondary) !important;
}

/* Element: auth__info-link */
/* Override theme CSS that loads after auth.css */
body.auth-page-wrapper #main-content-area:has(.auth__overlay) a.auth__info-link,
body.auth-page-wrapper #main-content-area.auth-page a.auth__info-link,
#main-content-area:has(.auth__overlay) .auth__info-link,
#main-content-area.auth-page .auth__info-link,
.auth__info-link {
  /* Typography */
  font-family: var(--auth-font-family) !important;
  font-size: var(--auth-font-size-text) !important;
  font-weight: var(--auth-font-weight-normal) !important;
  color: var(--auth-color-button) !important;
  text-decoration: none;
  text-decoration-color: var(--auth-color-button);
  /* Visuals */
  -webkit-font-smoothing: antialiased;
}

body.auth-page-wrapper #main-content-area:has(.auth__overlay) a.auth__info-link:hover,
body.auth-page-wrapper #main-content-area.auth-page a.auth__info-link:hover,
#main-content-area:has(.auth__overlay) .auth__info-link:hover,
#main-content-area.auth-page .auth__info-link:hover,
.auth__info-link:hover {
  /* Typography */
  color: var(--auth-color-button-hover) !important;
  text-decoration: underline;
  text-decoration-color: var(--auth-color-button-hover);
  /* Visuals */
  opacity: 1;
}

/* Element: auth__password-requirements */
.auth__password-requirements {
  /* Positioning */
  display: none;
  /* Box Model */
  margin-top: var(--auth-spacing-sm);
}

/* Element: auth__password-requirements-list */
.auth__password-requirements-list {
  /* Positioning */
  display: flex;
  flex-direction: column;
  /* Box Model */
  gap: var(--auth-spacing-list-gap);
  margin: 0;
  padding: 0;
  /* Visuals */
  list-style: none;
}

/* Element: auth__password-requirement */
.auth__password-requirement {
  /* Positioning */
  display: flex;
  align-items: flex-start;
  /* Box Model */
  gap: var(--auth-spacing-sm);
  /* Typography */
  font-family: var(--auth-font-family);
  font-size: var(--auth-font-size-password);
  line-height: var(--auth-line-height-base);
  color: var(--auth-color-text-secondary);
  /* Visuals */
  transition: color var(--auth-transition-duration) var(--auth-transition-timing);
}

/* Element: auth__password-requirement-icon */
.auth__password-requirement-icon {
  /* Positioning */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Box Model */
  width: var(--auth-size-icon);
  height: var(--auth-size-icon);
  flex-shrink: 0;
  /* Typography */
  font-size: var(--auth-font-size-password-icon);
  font-weight: var(--auth-font-weight-bold);
  line-height: 1;
  /* Visuals */
  transition: color var(--auth-transition-duration) var(--auth-transition-timing);
}

/* Element: auth__password-requirement-text */
.auth__password-requirement-text {
  /* Box Model */
  flex: 1;
}

/* Modifier: auth__password-requirement--met */
#main-content-area:has(.auth__overlay) .auth__password-requirement--met .auth__password-requirement-icon,
#main-content-area.auth-page .auth__password-requirement--met .auth__password-requirement-icon,
.auth__password-requirement--met .auth__password-requirement-icon {
  /* Typography */
  color: var(--auth-color-success) !important;
}

.auth__password-requirement--met {
  /* Typography */
  color: var(--auth-color-text-primary);
}

/* Modifier: auth__password-requirement--unmet */
#main-content-area:has(.auth__overlay) .auth__password-requirement--unmet .auth__password-requirement-icon,
#main-content-area.auth-page .auth__password-requirement--unmet .auth__password-requirement-icon,
.auth__password-requirement--unmet .auth__password-requirement-icon {
  /* Typography */
  color: var(--auth-color-danger) !important;
}

.auth__password-requirement--unmet {
  /* Typography */
  color: var(--auth-color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .auth__password-requirement,
  .auth__password-requirement-icon {
    transition: none;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.auth__text {
  /* Typography */
  color: var(--auth-color-text-secondary);
}

/* ==========================================================================
   Override Theme CSS - Links
   ========================================================================== */

/* Override theme CSS global link color rule that loads after auth.css */
/* Theme CSS has: a { color: #494B56 !important; } */
body.auth-page-wrapper #main-content-area:has(.auth__overlay) a.auth__link--secondary,
body.auth-page-wrapper #main-content-area.auth-page a.auth__link--secondary,
body.auth-page-wrapper #main-content-area:has(.auth__overlay) a.auth__info-link,
body.auth-page-wrapper #main-content-area.auth-page a.auth__info-link {
  color: var(--auth-color-button) !important;
}

body.auth-page-wrapper #main-content-area:has(.auth__overlay) a.auth__link--secondary:hover,
body.auth-page-wrapper #main-content-area.auth-page a.auth__link--secondary:hover,
body.auth-page-wrapper #main-content-area:has(.auth__overlay) a.auth__info-link:hover,
body.auth-page-wrapper #main-content-area.auth-page a.auth__info-link:hover {
  color: var(--auth-color-button-hover) !important;
}