/* auth/login.html — styles of this page. Extracted from the template; loaded where the <style> block used to be, so the cascade is unchanged. */
.swal2-icon.swal2-success {
  border: 3px solid rgb(var(--ac-500, 198 165 99));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(198, 165, 99, 0.25);
}

.swal2-icon.swal2-success * {
  /* SweetAlert draws its own animated tick (.swal2-success-line-*, display:block at a higher specificity, styles injected after
     ours): without !important both ticks showed, one on top of the other. Only our ::after tick is drawn. */
  display: none !important;
}

.swal2-icon.swal2-success::after {
  content: '';
  display: block;
  width: 15px;
  height: 27px;
  border: solid rgb(var(--ac-500, 198 165 99));
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
  margin-top: -4px;
  border-radius: 2px;
}

.swal2-popup {
  font-family: 'Vazirmatn', sans-serif;
  border-radius: 1.5rem !important;
  background-color: var(--ay-surface, rgb(var(--nv-0f172a, 15 23 42)));
  color: var(--ay-text, rgb(var(--nv-f8fafc, 248 250 252)));
  border: 1px solid var(--ay-border, rgb(var(--nv-1e293b, 30 41 59)));
  width: min(25rem, calc(100vw - 32px)) !important;
  max-width: 400px !important;
  box-sizing: border-box !important;
  margin: auto !important;
  padding: 1.5rem 1.25rem 1.25rem !important;
}
/* ---- mobile layout fixes ---- */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.swal2-container {
  padding: 16px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.swal2-title { font-size: 1.15rem; font-weight: 800; padding: .5rem .5rem 0; }
.swal2-html-container { font-size: .88rem; line-height: 1.8; margin: .75rem .25rem 0; }
.swal2-actions { width: 100%; gap: .5rem; margin-top: 1.1rem; }
.swal2-actions .swal2-styled { flex: 1; margin: 0; border-radius: .9rem; }
/* Eliminate harsh drop-shadow glow around logo in login page */
.an-pg-auth img[src*='logo.svg'],
.an-pg-auth .an-pub-logo {
  filter: none !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
html:not(.dark) .an-pg-auth img[src*='logo.svg'],
html:not(.dark) .an-pg-auth .an-pub-logo {
  filter: none !important;
  box-shadow: 0 10px 25px -5px rgba(16, 29, 53, 0.12), 0 0 0 1px rgba(221, 226, 236, 0.8) !important;
  border-color: var(--ay-border, #DDE2EC) !important;
}

body.an-pg-auth {
  padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
}
#auth-main-card-wrapper header {
  margin-top: 12px;
}

@media (max-width: 639px) {
  body.an-pg-auth {
    align-items: flex-start !important;
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .an-pg-auth input,
  .an-pg-auth select,
  .an-pg-auth textarea {
    font-size: 16px !important;
  }
}
@media (max-width: 420px) {
  .an-pg-auth .an-pub-panel {
    padding: 18px 14px !important;
    border-radius: 1.25rem !important;
  }
  .auth-tabs {
    gap: 2px;
    padding: 3px;
  }
  .auth-tab {
    font-size: 10.5px;
    padding: 6px 1px;
    gap: 2px;
    letter-spacing: -0.2px;
  }
  .auth-tab svg, .auth-tab i {
    width: 14px;
    height: 14px;
  }
}
/* ---- auth top bar ---- */
.an-pg-auth-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px 16px !important;
  min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
  background: rgba(8, 15, 32, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  z-index: 50 !important;
}

.an-auth-nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 448px !important; /* aligns with max-w-md auth card */
  margin: 0 auto !important;
  gap: 8px !important;
}

.an-auth-nav-link {
  color: rgb(var(--nv-cbd5e1, 203 213 225));
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(51, 65, 85, 0.5);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  min-height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--ay-tr-fast, 0.15s);
}

.an-auth-nav-link:hover {
  color: #EAD39C;
  border-color: rgba(198, 165, 99, 0.5);
  background: rgba(24, 43, 69, 0.85);
  transform: translateY(-1px);
}

.an-pg-auth-nav .ay-theme-switch {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
  color: #EAD39C !important;
  transition: all var(--ay-tr-fast, 0.15s);
}

.an-pg-auth-nav .ay-theme-switch:hover {
  border-color: rgba(198, 165, 99, 0.5) !important;
  background: rgba(24, 43, 69, 0.85) !important;
  transform: translateY(-1px);
}

html:not(.dark) .an-pg-auth-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--ay-border, #DDE2EC) !important;
  box-shadow: 0 1px 3px rgba(16, 29, 53, 0.04) !important;
}

html:not(.dark) .an-auth-nav-link {
  color: var(--ay-text, #101D35);
  background: var(--ay-surface, #FFFFFF);
  border: 1px solid var(--ay-border, #DDE2EC);
  box-shadow: 0 1px 2px rgba(16, 29, 53, 0.03);
}

html:not(.dark) .an-auth-nav-link:hover {
  color: var(--ay-accent, #85630F);
  border-color: var(--ay-accent, #85630F);
  background: var(--ay-accent-soft, #F5ECD6);
  transform: translateY(-1px);
}

html:not(.dark) .an-pg-auth-nav .ay-theme-switch {
  background: var(--ay-surface, #FFFFFF) !important;
  border: 1px solid var(--ay-border, #DDE2EC) !important;
  color: #55637A !important;
}

html:not(.dark) .an-pg-auth-nav .ay-theme-switch:hover {
  background: var(--ay-surface-2, #EEF1F6) !important;
  border-color: #94A3B8 !important;
  color: #101D35 !important;
  transform: translateY(-1px);
}

/* Auth brand subtitle: the public theme accent in light mode, luminous champagne gold in dark mode */
.an-auth-platform-tag {
  color: #EAD39C !important;
  font-weight: 700;
  transition: color var(--ay-tr-fast, 0.15s);
}

html:not(.dark) .an-auth-platform-tag,
html:not(.dark) .an-pg-auth h1 > .an-auth-platform-tag,
html:not(.dark) .an-pg-auth h1 > span {
  color: var(--ay-accent, #85630F) !important; /* the public theme accent, same as every other public page */
  background: none !important;
}

/* Eliminate muddy brown overrides across auth elements in light mode */
html:not(.dark) .an-pg-auth :is(.text-emerald-400, .text-emerald-500, .text-emerald-600) {
  color: var(--ay-accent, #85630F) !important;
}

.auth-glows { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-glows > div { position: absolute; width: 18rem; height: 18rem; border-radius: 9999px; filter: blur(64px); }
.auth-glows > .g1 { top: -8rem; right: -8rem; background: rgba(198, 165, 99, 0.12); }
.auth-glows > .g2 { bottom: -8rem; left: -8rem; background: rgba(59, 130, 246, .10); }
.auth-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; }
.auth-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 2px; border-radius: .8rem; font-size:12px; line-height: 1.3; font-weight: 700;
  color: rgb(var(--nv-94a3b8, 148 163 184)); background: transparent; border: 0; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.auth-tab svg, .auth-tab i { width: 16px; height: 16px; }
.auth-tab.is-active {
  color: #0b1426;
  background: linear-gradient(135deg, #EAD39C, #C6A563);
  box-shadow: 0 4px 12px rgba(198, 165, 99, 0.35);
}

/* ==========================================================================
   Auth Light Mode Overrides (Pearl Light Suite)
   ========================================================================== */
html:not(.dark) .an-pg-auth input,
html:not(.dark) .an-pg-auth select,
html:not(.dark) .an-pg-auth textarea {
  background-color: var(--ay-surface-2, #EEF1F6) !important;
  background-image: none !important;
  color: var(--ay-text, #101D35) !important;
  border-color: var(--ay-border, #DDE2EC) !important;
  -webkit-text-fill-color: var(--ay-text, #101D35) !important;
}

html:not(.dark) .an-pg-auth input::placeholder,
html:not(.dark) .an-pg-auth select::placeholder,
html:not(.dark) .an-pg-auth textarea::placeholder {
  color: var(--ay-text-muted, #55637A) !important;
  -webkit-text-fill-color: var(--ay-text-muted, #55637A) !important;
  opacity: 1;
}

html:not(.dark) .an-pg-auth input:focus,
html:not(.dark) .an-pg-auth select:focus,
html:not(.dark) .an-pg-auth textarea:focus {
  background-color: var(--ay-surface, #FFFFFF) !important;
  border-color: var(--ay-accent, #85630F) !important;
  outline: 2px solid rgba(127, 98, 43, 0.25) !important;
  outline-offset: 1px;
}

/* Chrome / Safari Autofill: Eliminate dark/black box in light mode */
html:not(.dark) .an-pg-auth input:-webkit-autofill,
html:not(.dark) .an-pg-auth input:-webkit-autofill:hover,
html:not(.dark) .an-pg-auth input:-webkit-autofill:focus,
html:not(.dark) .an-pg-auth input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #EEF1F6 inset !important;
  box-shadow: 0 0 0 1000px #EEF1F6 inset !important;
  -webkit-text-fill-color: #101D35 !important;
  color: #101D35 !important;
  caret-color: #101D35 !important;
  border-color: #DDE2EC !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Panel & Card */
html:not(.dark) .an-pg-auth .an-pub-panel {
  background: var(--ay-surface, #FFFFFF) !important;
  border-color: var(--ay-border, #DDE2EC) !important;
  box-shadow: 0 16px 40px -12px rgba(16, 29, 53, 0.12) !important;
}

/* Tabs */
html:not(.dark) .an-pg-auth .auth-tabs {
  background: var(--ay-surface-2, #EEF1F6) !important;
  border: 1px solid var(--ay-border, #DDE2EC) !important;
}
html:not(.dark) .an-pg-auth .auth-tab {
  color: var(--ay-text-muted, #55637A) !important;
}
html:not(.dark) .an-pg-auth .auth-tab:hover {
  color: var(--ay-text, #101D35) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}
html:not(.dark) .an-pg-auth .auth-tab.is-active {
  background: var(--ay-accent-fill, linear-gradient(135deg, #EAD39C, #C6A563)) !important;
  color: var(--ay-on-accent, #0B1426) !important;
  box-shadow: 0 4px 14px -2px rgba(198, 165, 99, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  font-weight: 800 !important;
}

/* Labels */
html:not(.dark) .an-pg-auth label {
  color: var(--ay-text, #101D35) !important;
}

/* Primary Action Buttons */
html:not(.dark) .an-pg-auth :is(#btn-password-submit, #btn-otp-request, #btn-otp-verify, #btn-register-submit, #btn-submit-agency-reg) {
  background: var(--ay-accent-fill, linear-gradient(135deg, #EAD39C, #C6A563)) !important;
  color: var(--ay-on-accent, #0B1426) !important;
  font-weight: 800 !important;
  border: 1px solid var(--ay-accent-fill-hi, #EAD39C) !important;
  box-shadow: 0 8px 24px -4px rgba(198, 165, 99, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
html:not(.dark) .an-pg-auth :is(#btn-password-submit, #btn-otp-request, #btn-otp-verify, #btn-register-submit, #btn-submit-agency-reg):hover {
  box-shadow: 0 12px 28px -4px rgba(198, 165, 99, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-1px);
}

/* Bottom Marketplace Card */
html:not(.dark) .an-pg-auth .an-pub-foot {
  background: var(--ay-surface-2, #EEF1F6) !important;
  border: 1px solid var(--ay-border, #DDE2EC) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
html:not(.dark) .an-pg-auth .an-pub-foot h2 {
  color: var(--ay-text, #101D35) !important;
}
html:not(.dark) .an-pg-auth .an-pub-foot p {
  color: var(--ay-text-muted, #55637A) !important;
}
html:not(.dark) .an-pg-auth .an-pub-foot a {
  background: var(--ay-surface, #FFFFFF) !important;
  border: 1px solid var(--ay-border, #DDE2EC) !important;
  color: var(--ay-text, #101D35) !important;
  box-shadow: var(--ay-shadow-sm, 0 1px 3px rgba(16, 29, 53, 0.07)) !important;
  font-weight: 800 !important;
  transition: all var(--ay-tr-fast, 0.15s) !important;
}
html:not(.dark) .an-pg-auth .an-pub-foot a:hover {
  border-color: var(--ay-accent, #85630F) !important;
  color: var(--ay-accent, #85630F) !important;
  background: var(--ay-accent-soft, #F5ECD6) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--ay-shadow-md, 0 6px 18px rgba(16, 29, 53, 0.08)) !important;
}

/* License upload box and note enhancements in light mode */
html:not(.dark) .an-pg-auth .border-dashed {
  border-color: var(--ay-border, #DDE2EC) !important;
  background-color: var(--ay-surface-2, #EEF1F6) !important;
}
html:not(.dark) .an-pg-auth .border-dashed:hover {
  border-color: var(--ay-accent, #85630F) !important;
  background-color: var(--ay-accent-soft, #F5ECD6) !important;
}
html:not(.dark) .an-pg-auth .an-pub-note strong {
  color: var(--ay-text, #101D35) !important;
  font-weight: 800;
}


/* tap target of the show/hide password button (icon stays 16px) */
.an-pw-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* the login field is typed left-to-right (phone/username) but its Persian placeholder must read right-to-left */
#login-username:placeholder-shown { direction: rtl; text-align: right; }