/* Password requirements styling */
.password-requirements {
  background: rgba(249, 250, 251, 0.8);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 0.75rem;
  border: 1px solid #e5e7eb;
}

.dark .password-requirements {
  background: rgba(55, 65, 81, 0.8);
  border-color: #4b5563;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.requirement-item svg {
  flex-shrink: 0;
}

.requirement-met {
  color: var(--color-success-green, #047857);
}

.requirement-unmet {
  color: #6b7280;
}

.dark .requirement-met {
  color: #4ade80;
}

.dark .requirement-unmet {
  color: #a8a29e;
}

/* Auth modal signup: keep password guidance compact inside the modal card. */
#modal-password-requirements.password-requirements {
  padding: 0.5rem 0.625rem !important;
  margin-top: 0.5rem !important;
  border-radius: 8px !important;
}

#modal-password-requirements p {
  margin-bottom: 0.25rem !important;
  font-size: 0.6875rem !important;
  line-height: 1rem !important;
}

#modal-password-requirements ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
  row-gap: 0.125rem;
}

#modal-password-requirements .requirement-item {
  gap: 0.25rem !important;
  padding: 0.0625rem 0 !important;
  font-size: 0.6875rem !important;
  line-height: 0.95rem !important;
}

#modal-password-requirements .requirement-item svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  min-width: 0.75rem !important;
}

#modal-password-requirements #modal-req-special {
  grid-column: 1 / -1;
}

.auth-age-confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.2rem;
  color: #4b5563;
  border-radius: 0.5rem;
  padding: 0.35rem 0.4rem;
  margin: -0.35rem -0.4rem;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.dark .auth-age-confirm-row {
  color: #d1d5db;
}

.auth-age-confirm-row input {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.auth-age-confirm-row.is-invalid {
  background: rgba(254, 226, 226, 0.9);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.85);
  color: #991b1b;
}

.dark .auth-age-confirm-row.is-invalid,
html.dark .auth-age-confirm-row.is-invalid {
  background: rgba(127, 29, 29, 0.35);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.7);
  color: #fecaca;
}

.auth-confirm-age-error {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: #b91c1c;
}

.dark .auth-confirm-age-error,
html.dark .auth-confirm-age-error {
  color: #fca5a5;
}

/* Progressive disclosure: contact -> password (and signup fields) */
.auth-progressive-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    grid-template-rows 0.32s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.24s ease 0.05s;
}

.auth-progressive-reveal:not(.is-revealed) {
  margin-top: 0 !important;
}

.auth-progressive-reveal.is-revealed {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}

.auth-progressive-reveal__inner {
  min-height: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}

.auth-progressive-reveal.is-revealed .auth-progressive-reveal__inner {
  transform: translateY(0);
}

.auth-progressive-fade {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.28s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.22s ease 0.04s;
}

.auth-progressive-fade.is-revealed {
  max-height: 2.5rem;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .auth-progressive-reveal,
  .auth-progressive-reveal__inner,
  .auth-progressive-fade {
    transition: none !important;
    transform: none !important;
  }
}

/* Compact forgot password requirements */
#forgot-password-requirements {
  padding: 0.5rem 0.75rem !important;
  margin-top: 0.5rem !important;
  border-radius: 8px !important;
}

#forgot-password-requirements .requirement-item {
  font-size: 0.6875rem !important; /* 11px */
  gap: 0.25rem !important;
  padding: 0.125rem 0 !important;
}

#forgot-password-requirements .requirement-item svg {
  width: 0.75rem !important; /* 12px */
  height: 0.75rem !important;
  min-width: 0.75rem !important;
  flex-shrink: 0 !important;
}

#forgot-password-requirements p {
  font-size: 0.625rem !important; /* 10px */
  margin-bottom: 0.25rem !important;
}

/* Contact field styling */
.with-phone-prefix {
  /* Fallback until JS measures prefix width; inline padding-left overrides this */
  padding-left: 4.75rem !important;
}

/* Mobile: forms.css (width <= 768px) used to force padding: 0.75rem !important on all
   auth inputs, collapsing left inset so typed digits overlapped +1. Higher specificity
   + explicit vertical/right padding keeps touch sizing while reserving prefix space. */
@media (max-width: 767px) {
  #auth-modal-content #auth-email.with-phone-prefix {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    padding-right: 0.75rem !important;
    padding-left: 5.25rem !important;
    min-height: 44px !important;
  }
}

/* FIXED: Ensure phone prefix is completely hidden and doesn't overlap text */
#auth-phone-prefix.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Phone prefix positioning - ensure it doesn't overlap with input text */
#auth-phone-prefix {
  pointer-events: auto;
  background: transparent;
  padding: 2px 6px;
  border-radius: 4px;
  left: 1rem !important;
  user-select: none;
}

#auth-phone-prefix:hover {
  background: rgba(0, 0, 0, 0.05);
}

.dark #auth-phone-prefix:hover {
  background: rgba(255, 255, 255, 0.05);
}

.field-valid {
  border-color: #10b981 !important;
}

.field-invalid {
  border-color: #ef4444 !important;
}

/* Auth surfaces: explicit dark field colors (forms.css --surface-raised + Tailwind dark:bg-* lose to
   password-type gaps and WebKit autofill; align with template dark:bg-gray-700 on gray-800 cards). */
html.dark :is(#auth-modal, #auth-modal-content, #forgot-password-popup, #forgot-password-form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
.dark :is(#auth-modal, #auth-modal-content, #forgot-password-popup, #forgot-password-form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
  background-color: var(--color-gray-700, #374151) !important;
  color: var(--color-dark-text, #fafaf9);
  border-color: var(--color-dark-border, #4b5563);
}

html.dark :is(#auth-modal-content, #forgot-password-popup-content),
.dark :is(#auth-modal-content, #forgot-password-popup-content) {
  color-scheme: dark;
}

html.dark :is(#auth-modal, #auth-modal-content, #forgot-password-popup, #forgot-password-form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill,
html.dark :is(#auth-modal, #auth-modal-content, #forgot-password-popup, #forgot-password-form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill:hover,
html.dark :is(#auth-modal, #auth-modal-content, #forgot-password-popup, #forgot-password-form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill:focus,
.dark :is(#auth-modal, #auth-modal-content, #forgot-password-popup, #forgot-password-form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill,
.dark :is(#auth-modal, #auth-modal-content, #forgot-password-popup, #forgot-password-form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill:hover,
.dark :is(#auth-modal, #auth-modal-content, #forgot-password-popup, #forgot-password-form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-dark-text, #fafaf9);
  caret-color: var(--color-dark-text, #fafaf9);
  -webkit-box-shadow: 0 0 0 1000px var(--color-gray-700, #374151) inset;
  box-shadow: 0 0 0 1000px var(--color-gray-700, #374151) inset;
  border-color: var(--color-dark-border, #4b5563);
  transition: background-color 5000s ease-in-out 0s;
}

.auth-password-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

.auth-password-toggle svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* One custom reveal control only — hide native password chrome that stacks on mobile */
#auth-modal-content .auth-password-field input[type="password"]::-ms-reveal,
#auth-modal-content .auth-password-field input[type="password"]::-ms-clear,
#forgot-password-popup .auth-password-field input[type="password"]::-ms-reveal,
#forgot-password-popup .auth-password-field input[type="password"]::-ms-clear {
  display: none;
}

#auth-modal-content .auth-password-field input[type="password"]::-webkit-credentials-auto-fill-button,
#auth-modal-content .auth-password-field input[type="password"]::-webkit-strong-password-auto-fill-button,
#forgot-password-popup .auth-password-field input[type="password"]::-webkit-credentials-auto-fill-button,
#forgot-password-popup .auth-password-field input[type="password"]::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.auth-password-field input[type="password"],
.auth-password-field input[type="text"] {
  padding-right: 2.75rem !important;
}

/* Mobile: forms.css + device-compatibility collapse right padding and enlarge all
   buttons to 44px — native reveal + custom eye then overlap in the same inset. */
@media (max-width: 767px) {
  #auth-modal-content .auth-password-field input[type="password"],
  #auth-modal-content .auth-password-field input[type="text"],
  #forgot-password-popup .auth-password-field input[type="password"],
  #forgot-password-popup .auth-password-field input[type="text"] {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 3rem !important;
    min-height: 48px !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  #auth-modal-content .auth-password-toggle,
  #forgot-password-popup .auth-password-toggle {
    min-width: 2.75rem !important;
    min-height: 0 !important;
    width: 2.75rem !important;
    padding: 0 !important;
  }
}

/* Text-link buttons (Forgot password?, Back, etc.) — no native button chrome in dark mode */
#auth-modal-content .auth-modal-text-link,
#forgot-password-popup .auth-modal-text-link {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  cursor: pointer;
}

.dark #auth-modal-content .auth-modal-text-link,
html.dark #auth-modal-content .auth-modal-text-link,
.dark #forgot-password-popup .auth-modal-text-link,
html.dark #forgot-password-popup .auth-modal-text-link {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#auth-modal-content .auth-modal-text-link:hover,
#forgot-password-popup .auth-modal-text-link:hover {
  background: rgba(59, 130, 246, 0.08);
}

.dark #auth-modal-content .auth-modal-text-link:hover,
html.dark #auth-modal-content .auth-modal-text-link:hover,
.dark #forgot-password-popup .auth-modal-text-link:hover,
html.dark #forgot-password-popup .auth-modal-text-link:hover {
  background: rgba(96, 165, 250, 0.12);
}

#auth-modal-content .auth-modal-text-link:focus-visible,
#forgot-password-popup .auth-modal-text-link:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

@media (hover: none) and (pointer: coarse) {
  #auth-modal-content .auth-modal-text-link,
  #forgot-password-popup .auth-modal-text-link {
    min-height: auto !important;
    min-width: auto !important;
    padding: 0.375rem 0.625rem !important;
  }
}

/* Phone dropdown styling */
.phone-dropdown {
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}

.dark .phone-dropdown {
  background: #374151;
  border-color: #4b5563;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.phone-dropdown .country-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 14px;
}

.phone-dropdown .country-option:hover {
  background-color: #f3f4f6;
}

.dark .phone-dropdown .country-option {
  color: #e5e7eb;
}

.dark .phone-dropdown .country-option:hover {
  background-color: #4b5563;
}

.phone-dropdown .country-flag {
  margin-right: 8px;
  font-size: 16px;
}

/* Agreement checkbox alignment - applies to all sizes */
#signup-fields .space-y-2 label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#signup-fields .space-y-2 input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
}

#signup-fields .space-y-2 {
  margin-top: 0.75rem;
}

/* Shake animation for error feedback */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-animation {
  animation: shake 0.5s ease-in-out;
}
/* Forgot password must stack ABOVE #auth-modal (--z-auth-modal). */
#forgot-password-popup {
  display: none;
  z-index: calc(var(--z-high-modal, 999999) + 50) !important;
}

#forgot-password-popup.show {
  display: flex !important;
  z-index: calc(var(--z-high-modal, 999999) + 50) !important;
}

#forgot-password-popup #forgot-password-popup-content {
  z-index: calc(var(--z-high-modal, 999999) + 51) !important;
}

#forgot-password-popup.show #forgot-password-popup-content {
  transform: translateY(0);
  opacity: 1;
}

#auth-modal {
  display: none;
}

#auth-modal.show,
#auth-modal:not(.hidden) {
  z-index: var(--z-auth-modal) !important;
}

#auth-modal-backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#auth-modal-tabs button,
.auth-mode-switch-btn {
  transition-property: color, opacity !important;
}

#auth-modal-close {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}

#auth-modal-close:focus-visible {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
}

#auth-modal-close:focus:not(:focus-visible) {
  outline: none !important;
}

/* Native sheet affordance — phone only; desktop keeps centered card. */
.auth-modal-sheet-handle {
  display: none;
  justify-content: center;
  padding: 0.625rem 0 0.25rem;
  flex-shrink: 0;
}

.auth-modal-sheet-handle-bar {
  display: block;
  width: 2.75rem;
  height: 0.3125rem;
  border-radius: 9999px;
  background: rgba(120, 113, 108, 0.45);
}

.dark .auth-modal-sheet-handle-bar,
html.dark .auth-modal-sheet-handle-bar {
  background: rgba(168, 162, 158, 0.5);
}

/* Modal Animation Styles */
#auth-modal.show {
  display: flex !important;
}

#auth-modal.show #auth-modal-content {
  transform: translateY(0);
  opacity: 1;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Vertical position comes from flex alignment on #auth-modal; avoid extra margins that push the sheet below the viewport.
   will-change:transform keeps the modal card on its own compositor layer at all times.
   transition: only transform+opacity — never transition:all near map/backdrop contexts. */
#auth-modal-content,
#forgot-password-popup-content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  will-change: transform;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.28s ease;
  transform: translateY(1.25rem);
  opacity: 0;
}

/* Scrollbar styling for better UX - more visible on small screens */
#auth-modal-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.6) transparent;
}

#auth-modal-content::-webkit-scrollbar {
  width: 8px;
}

#auth-modal-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

#auth-modal-content::-webkit-scrollbar-thumb {
  background-color: rgba(59, 130, 246, 0.6);
  border-radius: 4px;
}

#auth-modal-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(37, 99, 235, 0.8);
}

/* Mobile: Show scrollbar always on small screens */
@media (max-width: 520px) {
  #auth-modal-content::-webkit-scrollbar {
    width: 6px;
  }

  #auth-modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(59, 130, 246, 0.7);
  }
}

/* Social Button Hover Effects */
#google-auth-btn,
#apple-auth-btn,
.auth-social-btn {
  will-change: transform;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/*
 * Light mode switch — footer meta under the email step, not a second header line.
 */
#auth-modal-tabs,
.auth-modal-tabs,
.auth-mode-switch {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 1rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid rgba(120, 113, 108, 0.14);
}

.auth-mode-switch-line {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #78716c;
}

.dark .auth-mode-switch-line,
html.dark .auth-mode-switch-line {
  color: #a8a29e;
}

.auth-mode-switch-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  min-height: 0 !important;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  vertical-align: baseline;
  display: inline;
}

.dark #auth-modal-tabs,
.dark .auth-modal-tabs,
html.dark #auth-modal-tabs,
html.dark .auth-modal-tabs,
.dark .auth-mode-switch,
html.dark .auth-mode-switch {
  background: transparent !important;
  border-top-color: rgba(115, 115, 115, 0.35);
  box-shadow: none;
}

/* Input Focus States — warm neutral ring aligned with discover chrome */
#auth-modal-content input:focus,
#forgot-password-popup input:focus {
  outline: none;
  border-color: #78716c;
  box-shadow: 0 0 0 3px rgba(120, 113, 108, 0.16);
}

.dark #auth-modal-content input:focus,
.dark #forgot-password-popup input:focus,
html.dark #auth-modal-content input:focus,
html.dark #forgot-password-popup input:focus {
  border-color: #a3a3a3;
  box-shadow: 0 0 0 3px rgba(163, 163, 163, 0.2);
}

/* Optional passkey enrollment prompt shown after sign-in */
#passkey-enroll-screen {
  color: #111827;
}

#auth-modal-content.passkey-enrollment-active #auth-modal-heading,
#auth-modal-content.passkey-enrollment-active #auth-modal-tabs,
#auth-modal-content.passkey-enrollment-active #auth-method-chooser,
#auth-modal-content.passkey-enrollment-active #auth-social-options,
#auth-modal-content.passkey-enrollment-active #auth-social-footer,
#auth-modal-content.passkey-enrollment-active #auth-email-divider {
  display: none !important;
}

#auth-modal-content.passkey-enrollment-active .auth-modal-body,
#auth-modal-content.passkey-enrollment-active .p-8 {
  padding-top: 2.25rem;
}

.passkey-enroll-panel {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem;
  margin-bottom: 0.875rem;
  border: 1px solid #dbeafe;
  border-radius: 1rem;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
}

.passkey-enroll-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  color: #2563eb;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.dark .passkey-enroll-icon,
html.dark .passkey-enroll-icon {
  color: #60a5fa;
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: none;
}

.passkey-enroll-copy {
  min-width: 0;
}

.passkey-enroll-kicker {
  margin: 0 0 0.125rem;
  font-size: 0.72rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2563eb;
}

.dark .passkey-enroll-kicker,
html.dark .passkey-enroll-kicker {
  color: #93c5fd;
}

.passkey-enroll-copy h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 800;
  color: #111827;
}

.passkey-enroll-lead {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.35rem;
  color: #4b5563;
}

.passkey-enroll-benefits {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  padding: 0 0.125rem;
}

.passkey-enroll-benefits div {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #374151;
}

.passkey-enroll-dot {
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: #2563eb;
}

.passkey-enroll-note {
  padding: 0.75rem 0.875rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: #4b5563;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

.passkey-enroll-actions {
  display: grid;
  gap: 0.625rem;
}

.passkey-enroll-primary,
.passkey-enroll-secondary {
  width: 100%;
  min-height: 2.75rem;
  border-radius: 0.75rem;
  font-weight: 700;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.passkey-enroll-primary {
  color: #ffffff;
  background: var(--color-brand-accent, #0f5a56);
  border: 1px solid var(--color-brand-accent, #0f5a56);
}

.passkey-enroll-primary:hover {
  background: var(--color-brand-accent-hover, #083f3c);
  border-color: var(--color-brand-accent-hover, #083f3c);
  transform: translateY(-1px);
}

.passkey-enroll-secondary {
  color: #4b5563;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.passkey-enroll-secondary:hover {
  color: #111827;
  background: #f9fafb;
  border-color: #d1d5db;
}

.dark #passkey-enroll-screen {
  color: #f9fafb;
}

.dark .passkey-enroll-panel {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.35) 0%, rgba(17, 24, 39, 0.95) 72%);
  border-color: #1e3a8a;
}

.dark .passkey-enroll-icon {
  color: #93c5fd;
  background: #111827;
  border-color: #1e40af;
}

.dark .passkey-enroll-kicker {
  color: #93c5fd;
}

.dark .passkey-enroll-copy h2 {
  color: #f9fafb;
}

.dark .passkey-enroll-lead,
.dark .passkey-enroll-benefits div,
.dark .passkey-enroll-note {
  color: #d1d5db;
}

.dark .passkey-enroll-note {
  background: #111827;
  border-color: #374151;
}

.dark .passkey-enroll-secondary {
  color: #d1d5db;
  background: #111827;
  border-color: #374151;
}

.dark .passkey-enroll-secondary:hover {
  color: #f9fafb;
  background: #1f2937;
  border-color: #4b5563;
}

/* ======================== RESPONSIVE DESIGN ======================== */
/* Phone: bottom sheet. Desktop/tablet: centered card. Drop the old
   ultra-compact 8–11px text hacks — they fought native readability. */

@media (max-width: 767px) {
  #auth-modal,
  #forgot-password-popup.show {
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  #auth-modal-content,
  #forgot-password-popup-content,
  #auth-modal.show #auth-modal-content,
  #forgot-password-popup.show #forgot-password-popup-content {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem)) !important;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    border-bottom: none !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
    flex-shrink: 0 !important;
  }

  #auth-modal-content,
  #forgot-password-popup-content {
    transform: translateY(100%);
    opacity: 1;
  }

  #auth-modal.show #auth-modal-content,
  #forgot-password-popup.show #forgot-password-popup-content {
    transform: translateY(0);
    opacity: 1;
  }

  .auth-modal-sheet-handle {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
  }

  #auth-modal-close {
    top: 0.75rem;
    left: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }

  #forgot-password-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  #auth-modal-content .auth-modal-body,
  #auth-modal-content .p-6,
  #auth-modal-content .p-8,
  #forgot-password-popup-content .p-6 {
    padding: 0.65rem 1.15rem 1.1rem !important;
  }

  #auth-modal-content h2,
  #forgot-password-popup-content h3 {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0;
  }

  #auth-modal-content .auth-modal-subtitle {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }

  #auth-modal-content .text-sm,
  #forgot-password-popup-content .text-sm {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
  }

  #auth-modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #forgot-password-popup-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #auth-modal-content button[type="submit"],
  #google-auth-btn,
  #apple-auth-btn {
    min-height: 44px;
    font-size: 16px !important;
    padding: 0.625rem 0.875rem;
  }

  #auth-modal-content button[type="submit"],
  #google-auth-btn,
  #apple-auth-btn {
    font-size: 0.9375rem !important;
    font-weight: 600;
  }

  #auth-modal-content .auth-mode-switch-btn,
  #signin-tab,
  #signup-tab {
    min-height: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
  }

  #auth-modal-content label,
  #forgot-password-popup-content label {
    font-size: 0.75rem !important;
    margin-bottom: 0.3rem !important;
  }

  #auth-modal-content .space-y-3 > * + *,
  #auth-modal-content .space-y-4 > * + * {
    margin-top: 0.625rem !important;
  }

  #auth-modal-content .mb-6,
  #auth-modal-content .mb-8,
  #auth-modal-content .text-center.mb-8 {
    margin-bottom: 0.75rem !important;
  }

  #auth-modal-content .auth-modal-heading {
    margin-bottom: 1rem !important;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  #auth-modal-content .mt-6.text-xs,
  #auth-modal-content .auth-modal-legal-footer {
    font-size: 0.6875rem !important;
    line-height: 1.35 !important;
    margin-top: 0.75rem !important;
  }

  #modal-password-requirements.password-requirements,
  .password-requirements {
    padding: 0.75rem !important;
    margin-top: 0.625rem !important;
    border-radius: 0.75rem !important;
  }

  #modal-password-requirements .requirement-item,
  .password-requirements .requirement-item {
    font-size: 0.75rem !important;
    line-height: 1.25rem !important;
    gap: 0.375rem !important;
    padding: 0.125rem 0 !important;
  }

  #modal-password-requirements .requirement-item svg,
  .password-requirements .requirement-item svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  #modal-password-requirements p,
  .password-requirements p {
    font-size: 0.75rem !important;
    margin-bottom: 0.375rem !important;
  }

  #google-auth-btn svg,
  #apple-auth-btn svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

@media (min-width: 768px) {
  #auth-modal,
  #forgot-password-popup.show {
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)) !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  #auth-modal-content,
  #forgot-password-popup-content,
  #auth-modal.show #auth-modal-content,
  #forgot-password-popup.show #forgot-password-popup-content {
    margin: 0 auto !important;
    max-width: 28rem;
    width: 100%;
    max-height: min(90dvh, calc(100dvh - 2rem)) !important;
    height: auto;
    overflow-y: auto !important;
    overflow-x: hidden;
    border-radius: 1rem !important;
    flex-shrink: 0 !important;
  }

  #auth-modal-content,
  #forgot-password-popup-content {
    transform: translateY(1rem) scale(0.98);
    opacity: 0;
  }

  #auth-modal.show #auth-modal-content,
  #forgot-password-popup.show #forgot-password-popup-content {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .auth-modal-sheet-handle {
    display: none !important;
  }

  #auth-modal-close {
    top: 1rem;
    left: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  #auth-modal-content .auth-modal-body {
    padding: 1.35rem 1.5rem 1.25rem !important;
  }

  #auth-modal-content h2 {
    font-size: 1.25rem !important;
  }

  #auth-modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #auth-modal-content button[type="submit"],
  #google-auth-btn,
  #apple-auth-btn {
    min-height: 2.5rem;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  #google-auth-btn:hover,
  #apple-auth-btn:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  #auth-modal-content input:focus {
    box-shadow: 0 0 0 3px rgba(120, 113, 108, 0.14);
  }

  #google-auth-btn svg,
  #apple-auth-btn svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

/* Phone dropdown responsive */
@media (max-width: 520px) {
  .phone-dropdown {
    max-height: 140px !important;
    font-size: 0.75rem !important;
    padding: 2px !important;
  }

  .phone-dropdown .country-option {
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
  }

  .phone-dropdown .country-flag {
    font-size: 0.875rem !important;
    margin-right: 6px !important;
  }
}

@media (min-width: 520px) and (max-width: 767px) {
  .phone-dropdown {
    max-height: 160px !important;
    font-size: 0.8125rem !important;
  }

  .phone-dropdown .country-option {
    padding: 6px 10px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .phone-dropdown {
    max-height: 200px !important;
    font-size: 0.875rem !important;
  }

  .phone-dropdown .country-option {
    padding: 8px 12px !important;
  }
}

/* Guest 2FA: contact code first; authenticator collapsed by default */
.guest-authenticator-section {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f9fafb;
}

.dark .guest-authenticator-section {
  border-color: #4b5563;
  background: rgba(55, 65, 81, 0.35);
}

.guest-authenticator-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  background: transparent;
  border: none;
  cursor: pointer;
}

.dark .guest-authenticator-toggle {
  color: #e5e7eb;
}

.guest-authenticator-toggle:hover {
  background: rgba(0, 0, 0, 0.03);
}

.dark .guest-authenticator-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

.guest-authenticator-toggle[aria-expanded="true"] .guest-authenticator-chevron {
  transform: rotate(180deg);
}

.guest-authenticator-chevron {
  transition: transform 0.15s ease;
}

.guest-authenticator-panel {
  padding: 0 1rem 1rem;
  border-top: 1px solid #e5e7eb;
}

.dark .guest-authenticator-panel {
  border-top-color: #4b5563;
}

/* =============================================================================
 * Auth modal shell polish — aligned with discover marketplace chrome
 * ============================================================================= */

.auth-modal-overlay,
#auth-modal {
  background-color: transparent;
}

/*
 * Auth overlay pin for scroll-lock / visualViewport offset quirks when the
 * keyboard is closed. AuthModal clears this pin while the keyboard is open so
 * the sheet stays layout-bottom-docked (VV height pin caused a gap above the
 * keyboard on first focus).
 */
#auth-modal.auth-modal--vv-pinned,
#forgot-password-popup.auth-modal--vv-pinned {
  position: fixed !important;
  top: var(--auth-vv-offset-top, 0px) !important;
  left: var(--auth-vv-offset-left, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--auth-vv-width, 100vw) !important;
  height: var(--auth-vv-height, 100dvh) !important;
  min-height: var(--auth-vv-height, 100dvh) !important;
  max-height: var(--auth-vv-height, 100dvh) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 767px) {
  #auth-modal.show,
  #forgot-password-popup.show {
    align-items: flex-end !important;
    justify-content: center !important;
  }

  #auth-modal.show.auth-modal--vv-pinned #auth-modal-content,
  #forgot-password-popup.show.auth-modal--vv-pinned #forgot-password-popup-content {
    max-height: min(92%, calc(var(--auth-vv-height, 100dvh) - 0.5rem)) !important;
  }
}

.auth-modal-backdrop,
#auth-modal-backdrop {
  background-color: rgba(15, 23, 42, 0.42) !important;
}

.auth-modal-panel,
#auth-modal-content,
#forgot-password-popup-content {
  background: #fafaf9;
  border: 1px solid rgba(214, 211, 208, 0.72);
  border-radius: 1rem;
  box-shadow: 0 20px 55px rgba(28, 25, 23, 0.14), 0 2px 8px rgba(28, 25, 23, 0.07);
  color: #292524;
  overflow-x: hidden;
}

.dark .auth-modal-panel,
.dark #auth-modal-content,
.dark #forgot-password-popup-content,
html.dark .auth-modal-panel,
html.dark #auth-modal-content,
html.dark #forgot-password-popup-content {
  background: #262626;
  border-color: rgba(82, 82, 82, 0.72);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.28);
  color: #f5f5f4;
}

.auth-modal-close-btn,
#auth-modal-close,
#forgot-password-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.375rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #a8a29e;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.auth-modal-close-btn:hover,
#auth-modal-close:hover,
#forgot-password-close:hover {
  background-color: rgba(28, 25, 23, 0.06);
  color: #292524;
}

.dark .auth-modal-close-btn,
.dark #auth-modal-close,
.dark #forgot-password-close,
html.dark .auth-modal-close-btn,
html.dark #auth-modal-close,
html.dark #forgot-password-close {
  color: #a3a3a3;
}

.dark .auth-modal-close-btn:hover,
.dark #auth-modal-close:hover,
.dark #forgot-password-close:hover,
html.dark .auth-modal-close-btn:hover,
html.dark #auth-modal-close:hover,
html.dark #forgot-password-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.auth-modal-divider-label {
  background: #fafaf9;
  color: #78716c;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

.dark .auth-modal-divider-label,
html.dark .auth-modal-divider-label {
  background: #262626;
  color: #a8a29e;
}

/* Compact layout — denser vertical rhythm, less “padded toy form” */
#auth-modal-content .auth-modal-body {
  padding: 1.15rem 1.25rem 1.1rem;
}

#auth-modal-content .auth-modal-heading {
  margin: 0 0 1rem;
  padding: 0.35rem 2rem 0;
}

#auth-modal-content .auth-modal-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
}

#auth-modal-content .auth-modal-subtitle {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 400;
  color: #78716c;
}

.dark #auth-modal-content .auth-modal-subtitle,
html.dark #auth-modal-content .auth-modal-subtitle {
  color: #a8a29e;
}

/* Email step: title only — mode switch lives at the bottom */
#auth-modal-content.auth-step-email #auth-modal-subtitle,
#auth-modal-content.auth-step-overlay #auth-modal-subtitle {
  display: none !important;
}

/* Host / guest intents keep instructional subtitle on email */
#auth-modal.auth-modal--host-listing #auth-modal-content.auth-step-email #auth-modal-subtitle,
#auth-modal.auth-modal--guest-lookup #auth-modal-content.auth-step-email #auth-modal-subtitle {
  display: block !important;
  margin-top: 0.45rem;
  text-align: left;
}

#auth-modal-content .auth-social-options {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

/* Auth method chooser vs email step */
#auth-modal-content.auth-step-chooser #auth-email-panel {
  display: none !important;
}

#auth-modal-content.auth-step-email #auth-method-chooser {
  display: none !important;
}

#auth-modal-content.auth-step-overlay #auth-method-chooser,
#auth-modal-content.auth-step-overlay #auth-modal-tabs,
#auth-modal-content.auth-step-overlay #auth-social-footer,
#auth-modal-content.auth-step-overlay #auth-chooser-legal-footer {
  display: none !important;
}

#auth-modal-content.auth-step-overlay #auth-email-panel {
  display: block !important;
}

#auth-modal-content .auth-method-chooser {
  margin-top: 0.25rem;
}

#auth-modal-content .auth-social-footer {
  margin-top: 0.75rem;
}

#auth-modal-content .auth-social-options--footer {
  margin-bottom: 0;
}

#auth-modal-content .auth-social-btn--email {
  background: #f5f3ef;
  color: #1c1917;
  border-color: rgba(120, 113, 108, 0.28);
}

#auth-modal-content .auth-social-btn--email:hover:not(:disabled) {
  background: #ebe7e0;
  border-color: rgba(120, 113, 108, 0.4);
}

.dark #auth-modal-content .auth-social-btn--email,
html.dark #auth-modal-content .auth-social-btn--email {
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f4;
  border-color: rgba(115, 115, 115, 0.45);
}

.dark #auth-modal-content .auth-social-btn--email:hover:not(:disabled),
html.dark #auth-modal-content .auth-social-btn--email:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

#auth-modal-content.auth-step-email.auth-nav-back #auth-modal-close-icon {
  display: none !important;
}

#auth-modal-content.auth-step-email.auth-nav-back #auth-modal-back-icon {
  display: block !important;
}

#auth-modal-content:not(.auth-nav-back) #auth-modal-back-icon {
  display: none !important;
}

#auth-modal-content .auth-email-divider {
  margin: 0 0 0.75rem;
}

#auth-modal-content .auth-field-label {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#auth-modal-content .auth-field-input {
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
  border-radius: 0.5rem;
}

#auth-modal-content .auth-modal-legal-footer {
  margin-top: 0.875rem;
  font-size: 0.6875rem;
  line-height: 1.4;
}

.auth-social-btn {
  min-height: 2.4rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(120, 113, 108, 0.28);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-social-btn--google {
  background: #ffffff;
  color: #292524;
}

.auth-social-btn--google:hover:not(:disabled) {
  background: #f9fafb;
  border-color: rgba(120, 113, 108, 0.4);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
  transform: none;
}

.auth-social-btn--apple {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.auth-social-btn--apple:hover:not(:disabled) {
  background: #1f2937;
  border-color: #1f2937;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transform: none;
}

.dark .auth-social-btn--google,
html.dark .auth-social-btn--google {
  background: #374151;
  color: #f5f5f4;
  border-color: #4b5563;
}

.dark .auth-social-btn--google:hover:not(:disabled),
html.dark .auth-social-btn--google:hover:not(:disabled) {
  background: #4b5563;
  border-color: #6b7280;
}

#auth-submit-btn.btn-brand {
  min-height: 2.4rem;
  border-radius: 0.5rem;
  margin-top: 0.15rem;
}

/* Primary CTA owns brand teal — sole strong accent in the auth shell */
#auth-modal-content .btn-brand,
#forgot-password-popup .btn-brand {
  border-radius: 0.5rem;
  min-height: 2.4rem;
  background: var(--color-brand-accent, #0f5a56);
  border-color: var(--color-brand-accent, #0f5a56);
  color: var(--color-brand-accent-text, #ffffff);
  box-shadow: 0 1px 2px rgba(15, 90, 86, 0.18);
}

#auth-modal-content .btn-brand:hover:not(:disabled),
#forgot-password-popup .btn-brand:hover:not(:disabled) {
  background: var(--color-brand-accent-hover, #0c4e4a);
  border-color: var(--color-brand-accent-hover, #0c4e4a);
  box-shadow: 0 2px 4px rgba(15, 90, 86, 0.22);
}

@media (max-width: 640px), (pointer: coarse) {
  .auth-modal-close-btn,
  #auth-modal-close,
  #forgot-password-close {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .auth-social-btn,
  #auth-submit-btn.btn-brand,
  #auth-modal-content .btn-brand,
  #forgot-password-popup .btn-brand {
    min-height: 44px;
  }
}

/* Host listing intent — framing for signup/login from List your space */
.auth-modal-host-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.65rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--host-product-primary-fg, var(--color-brand-accent-fg, #5eead4));
  background: color-mix(in srgb, var(--host-product-primary, var(--color-brand-accent, #0f5a56)) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--host-product-primary, var(--color-brand-accent, #0f5a56)) 22%, transparent);
}

.auth-modal-host-banner.hidden {
  display: none !important;
}

html.dark .auth-modal-host-banner,
.dark .auth-modal-host-banner {
  color: var(--host-product-primary-on-dark, var(--color-brand-accent-on-dark-surface, #5eead4));
  background: color-mix(in srgb, var(--host-product-primary-on-dark, #0f5a56) 14%, #171717);
  border-color: color-mix(in srgb, var(--host-product-primary-on-dark, #0f5a56) 28%, transparent);
}

#auth-modal.auth-modal--host-listing .auth-modal-title {
  letter-spacing: -0.02em;
}

#auth-modal.auth-modal--host-listing .auth-modal-subtitle {
  max-width: 20.5rem;
  margin-left: auto;
  margin-right: auto;
}