/* auth-center-fix.css — perfectly center the Login/Register modal on every width.
   2026-05-31. Root cause: .auth-v3 used display:flex + align-items:flex-end, which
   pushed any sub-full-width child (the form, w<container) to the RIGHT → skew.
   Fix: stretch alignment + one unified horizontal gutter so all rows share edges.
   Independent file, loaded LAST so it wins; trivially reversible (remove the <link>). */

html body #modal-auth .auth-v3,
html body #modal-auth.modal-backdrop .auth-v3 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;      /* was flex-end → caused the right-shift */
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Every content row spans the full gutter width, no stray horizontal margins */
html body #modal-auth .auth-v3 .auth-v3-brand,
html body #modal-auth .auth-v3 .auth-v3-tabs,
html body #modal-auth .auth-v3 .auth-v3-form,
html body #modal-auth .auth-v3 .auth-v3-panel-head,
html body #modal-auth .auth-v3 .auth-v3-field,
html body #modal-auth .auth-v3 .auth-v3-remember,
html body #modal-auth .auth-v3 .auth-v3-cta,
html body #modal-auth .auth-v3 .auth-v3-foot,
html body #modal-auth .auth-v3 .auth-v3-switch {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* Rows holding edge-aligned content → zero horizontal padding so edges match the inputs */
html body #modal-auth .auth-v3 .auth-v3-brand,
html body #modal-auth .auth-v3 .auth-v3-form,
html body #modal-auth .auth-v3 .auth-v3-panel-head {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Inputs + primary button fill the content width exactly */
html body #modal-auth .auth-v3 .auth-v3-input,
html body #modal-auth .auth-v3 .bs-input,
html body #modal-auth .auth-v3 .auth-v3-cta {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Drag handle: small centered bar (not stretched) */
html body #modal-auth .auth-v3 .auth-v3-handle {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Close ✕ anchored top-right, out of flow, never affecting layout */
html body #modal-auth .auth-v3 .auth-v3-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* Remember-me: full-width box, content left-aligned and vertically centered */
html body #modal-auth .auth-v3 .auth-v3-remember {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
  padding-left: 0 !important;
}

/* Centered text rows */
html body #modal-auth .auth-v3 .auth-v3-panel-head,
html body #modal-auth .auth-v3 .auth-v3-foot,
html body #modal-auth .auth-v3 .auth-v3-switch {
  text-align: center !important;
}