/* LokalMarketPH Login Modal UI Polish V5
   Narrows authentication dialogs on desktop while keeping mobile comfortable. */

:root {
  --lm-auth-modal-max: 380px;
  --lm-auth-modal-mobile-gap: 1rem;
}

/* Modern browser targeting for the login and forgot-password modal. */
[role="document"]:has(#login-email),
[role="document"]:has(#reset-email),
.lm-auth-modal {
  width: min(100%, var(--lm-auth-modal-max)) !important;
  max-width: min(var(--lm-auth-modal-max), calc(100vw - 2rem)) !important;
  border-radius: 1.25rem !important;
}

[role="document"]:has(#login-email) > div:first-child,
[role="document"]:has(#reset-email) > div:first-child,
.lm-auth-modal > div:first-child {
  padding: 1rem 1.15rem !important;
}

[role="document"]:has(#login-email) > div:last-child,
[role="document"]:has(#reset-email) > div:last-child,
.lm-auth-modal > div:last-child {
  padding: 1.15rem !important;
}

[role="document"]:has(#login-email) h2,
[role="document"]:has(#reset-email) h2,
.lm-auth-modal h2 {
  font-size: 1.1rem !important;
  line-height: 1.35 !important;
}

[role="document"]:has(#login-email) form,
[role="document"]:has(#reset-email) form,
.lm-auth-modal form {
  gap: 0.875rem !important;
}

[role="document"]:has(#login-email) input,
[role="document"]:has(#reset-email) input,
.lm-auth-modal input {
  min-height: 42px;
  border-radius: 0.75rem !important;
}

[role="document"]:has(#login-email) button[type="submit"],
[role="document"]:has(#reset-email) button[type="submit"],
.lm-auth-modal button[type="submit"] {
  min-height: 44px;
  border-radius: 0.85rem !important;
}

/* Keep alert and confirmation dialogs medium-sized, but not huge on desktop. */
[role="document"]:not(:has(#login-email)):not(:has(#reset-email)) {
  max-width: min(520px, calc(100vw - 2rem));
}

@media (min-width: 1024px) {
  [role="dialog"] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (max-width: 640px) {
  [role="document"]:has(#login-email),
  [role="document"]:has(#reset-email),
  .lm-auth-modal {
    width: calc(100vw - var(--lm-auth-modal-mobile-gap)) !important;
    max-width: calc(100vw - var(--lm-auth-modal-mobile-gap)) !important;
    margin: 0 auto !important;
  }

  [role="document"]:has(#login-email) > div:first-child,
  [role="document"]:has(#reset-email) > div:first-child,
  .lm-auth-modal > div:first-child {
    padding: 0.9rem 1rem !important;
  }

  [role="document"]:has(#login-email) > div:last-child,
  [role="document"]:has(#reset-email) > div:last-child,
  .lm-auth-modal > div:last-child {
    padding: 1rem !important;
  }
}