/* Storefront authentication dialog.
   This file is loaded after each public CSS profile so account access keeps the
   same contained layout from catalog, cart, checkout and order tracking. */
.auth-modal[hidden] { display: none !important; }

.auth-modal.open {
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  overflow: hidden;
}

.auth-modal .auth-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 24px));
  min-width: 0;
  max-width: 440px;
  min-height: 0;
  max-height: min(760px, calc(100dvh - 32px));
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--store-theme-modal-border, rgba(17, 17, 17, .10));
  border-radius: 18px;
  background: var(--store-theme-modal-panel-bg, #fff);
  color: var(--store-theme-modal-text, var(--store-theme-text-primary, #111827));
  box-shadow: var(--store-theme-modal-shadow, 0 26px 70px rgba(0, 0, 0, .28));
}

.auth-modal .auth-modal__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: min(760px, calc(100dvh - 32px));
  margin: 0;
  padding: 25px 27px 28px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.auth-modal .modal__close {
  top: 10px;
  right: 10px;
  z-index: 5;
}

.auth-modal .auth-brand {
  display: flex;
  align-items: center;
  width: min(100%, 168px);
  height: 52px;
  min-width: 0;
  margin: 0 42px 13px 0;
  overflow: hidden;
}

.auth-modal .auth-brand img {
  display: block;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  max-width: min(168px, 100%) !important;
  max-height: 50px !important;
  object-fit: contain;
  object-position: left center;
}

.auth-modal .auth-modal__body h2 {
  min-width: 0;
  margin: 0 0 5px;
  padding-right: 48px;
  color: inherit;
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.auth-modal .auth-modal__intro {
  min-width: 0;
  margin: 0 0 18px;
  color: var(--store-theme-text-secondary, #667085);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.auth-modal .auth-tabs,
.auth-modal .auth-form,
.auth-modal .auth-alert,
.auth-modal .google-auth-block {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.auth-modal .auth-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  margin: 0 0 19px;
  padding: 4px;
  border: 1px solid var(--store-theme-border, rgba(17, 17, 17, .12));
  border-radius: 13px;
  background: var(--store-theme-bg-muted, #f8fafc);
}

.auth-modal .auth-tabs .mini {
  min-width: 0;
  min-height: 36px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.auth-modal .auth-tabs .mini.active {
  border: 1px solid var(--store-theme-accent-border, transparent);
  background: var(--store-theme-accent-selected-bg, #18212f);
  color: var(--store-theme-accent-selected-fg, #fff);
}

.auth-modal .auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  width: 100%;
}

.auth-modal .auth-form[hidden] { display: none !important; }

.auth-modal .auth-form .auth-premium-field {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  gap: 5px;
  isolation: auto;
}

.auth-modal .auth-form .auth-premium-field::before { display: none; }

.auth-modal .auth-form .auth-premium-field > .ui-field__label {
  position: static;
  min-width: 0;
  color: var(--store-theme-text-secondary, #667085);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  pointer-events: auto;
  overflow-wrap: anywhere;
}

.auth-modal .auth-form .auth-premium-field > input {
  width: 100%;
  min-width: 0;
  height: 45px;
  min-height: 45px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--store-theme-input-border, #d0d5dd) !important;
  border-radius: 9px !important;
  outline: 0 !important;
  background: var(--store-theme-input-bg, #fff) !important;
  color: var(--store-theme-input-text, #111827);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: none !important;
}

.auth-modal .auth-form .auth-premium-field > input::placeholder {
  color: var(--store-theme-input-placeholder, #98a2b3);
  opacity: 1;
}

.auth-modal .auth-form .auth-premium-field > input:hover {
  border-color: var(--store-theme-input-border-hover, #98a2b3) !important;
}

.auth-modal .auth-form .auth-premium-field:focus-within > input {
  border-color: var(--store-theme-input-border-focus, #344054) !important;
  box-shadow: 0 0 0 2px var(--store-theme-input-focus-ring, rgba(52, 64, 84, .16)) !important;
}

.auth-modal .auth-form .auth-premium-field > input[aria-invalid="true"] {
  border-color: var(--store-theme-input-error-border, #b42318) !important;
}

.auth-modal .auth-form .auth-premium-field:has(.auth-password-toggle) > input { padding-right: 79px; }

.auth-modal .auth-password-toggle {
  position: absolute;
  top: 30px;
  right: 9px;
  z-index: 3;
  min-width: 57px;
  height: 29px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--store-theme-text-secondary, #667085);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.auth-modal .auth-link {
  width: max-content;
  max-width: 100%;
  color: var(--store-theme-accent-fg-surface, var(--store-theme-text-primary, #111827));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.auth-modal .google-auth-block { margin-top: 4px; }

.auth-modal .auth-submit {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin-top: 1px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 750;
}

.auth-modal .auth-form .auth-premium-field > input:-webkit-autofill {
  -webkit-text-fill-color: var(--store-theme-input-text, #111827) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--store-theme-input-bg, #fff) inset !important;
  box-shadow: 0 0 0 1000px var(--store-theme-input-bg, #fff) inset !important;
}

@media (max-width: 760px) {
  .auth-modal.open {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }

  .auth-modal .auth-modal__panel {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 16px;
  }

  .auth-modal .auth-modal__body {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 20px 17px calc(24px + env(safe-area-inset-bottom));
  }

  .auth-modal .auth-brand {
    height: 43px;
    margin-bottom: 10px;
  }

  .auth-modal .auth-brand img { max-height: 42px !important; }
  .auth-modal .auth-modal__intro { margin-bottom: 13px; }
  .auth-modal .auth-tabs { margin-bottom: 14px; }
  .auth-modal .auth-tabs .mini { min-height: 44px; }
  .auth-modal .auth-form { gap: 10px; }
}