/*
 * Login modal (IP-Login-Modal.md) - the <dialog> wrapper (login-modal.
 * blade.php) plus the form content it shares with the standalone /login
 * page (login-form.blade.php). Loaded site-wide (linked from
 * web.layouts.top_header, which every page includes) since the modal
 * itself can be triggered from any page's nav.
 *
 * Reuses existing tokens/components throughout - .ipflow-field/
 * .ipflow-field-error for labels/errors (same treatment every other
 * flow form already uses), .btn.btn-primary.btn-lg.full-width and
 * .btn.btn-tertiary.btn-md for the two buttons, .ipflow-dialog-close
 * (restyled in flow-forms.css itself, where that shared class already
 * lives, to this handoff's own close-button spec - see that file's own
 * comment; this also brings the Key Features and Business Hours
 * dialogs' close buttons in line, per the handoff's explicit
 * instruction to do that).
 */

/* ---- Dialog shell ---- */
.login-modal-dialog {
  position: relative;
  border: none;
  background: var(--surface, #fff);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--elevation-3, 0 8px 16px rgba(68, 85, 91, 0.18));
  padding: var(--space-6, 32px);
  width: 440px;
  max-width: calc(100vw - 32px);
  /* Centered vertically, scrolling inside if the viewport is short -
     a plain top:50%/translateY centering would push the dialog off the
     top edge on a short window instead of scrolling its own content. */
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  margin: auto;
}
.login-modal-dialog::backdrop {
  /* surface-inverse (#333333) at 60% opacity, per spec - the token
     itself is opaque, so the opacity is applied here rather than
     baked into a second token. */
  background: rgba(51, 51, 51, 0.6);
}
@media (max-width: 767px) {
  .login-modal-dialog {
    width: calc(100vw - 32px);
    padding: var(--space-5, 24px);
    max-height: calc(100vh - 32px);
  }
}

/* Top-right, independent of the title's own line below it - the title
   gets matching right-padding so its text never runs under the button. */
.login-modal-close {
  position: absolute;
  top: var(--space-6, 32px);
  right: var(--space-6, 32px);
}
@media (max-width: 767px) {
  .login-modal-close {
    top: var(--space-5, 24px);
    right: var(--space-5, 24px);
  }
}

/* ---- Title / subtitle ---- */
.login-form-title {
  margin: 0 0 4px;
  font: var(--h3-weight, 500) var(--h3-size, 22px)/var(--h3-line-height, 28px) var(--font-sans);
  color: var(--ink, #44555b);
}
/* Clears the close button above it - only needed inside the modal; the
   standalone /login page has no close button, so its own copy of this
   same title shouldn't reserve the space for one. */
.login-modal-dialog .login-form-title {
  padding-right: 56px;
}
.login-form-subtitle {
  margin: 0 0 var(--space-5, 24px);
  font: var(--body-weight, 400) var(--body-size, 16px)/var(--body-line-height, 24px) var(--font-sans);
  color: var(--ink-muted, #757575);
}

/* ---- Fields ---- */
/* .login-form-field layers on top of .ipflow-field (same label/error
   styling every other flow form already has) - only the parts that
   partial doesn't already cover: the 48px field height (taller than
   .ipflow-field's usual default, to line up with the Large button and
   stay easy to tap) and the icon-in-field positioning. */
.login-form-field .form-control {
  height: 48px;
  font-size: 16px;
}
.login-form-input-wrap {
  position: relative;
}
.login-form-input-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--ink-muted, #757575);
  font-size: 16px;
  pointer-events: none;
}
.login-form-input-wrap .form-control {
  padding-left: 44px;
}
.login-form-input-wrap--password .form-control {
  padding-right: 44px;
}
.login-form-input-wrap--password .toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  border: none;
  background: transparent;
  color: var(--ink-muted, #757575);
  cursor: pointer;
}
.login-form-input-wrap--password .toggle-password:hover {
  color: var(--ink, #44555b);
}
.login-form-input-wrap--password .toggle-password:focus-visible {
  outline: 2px solid var(--focus-ring, #2e6fe0);
  outline-offset: -2px;
}

/* ---- Remember me / Forgot password row ---- */
.login-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-5, 24px);
}
.login-form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: var(--body-weight, 400) 14px/1.4 var(--font-sans);
  color: var(--ink, #44555b);
  cursor: pointer;
}
.login-form-checkbox-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-blue, #3270a2);
}
.login-form-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--brand-blue, #3270a2);
  text-decoration: underline;
  font-size: 14px;
}
.login-form-link:hover {
  color: var(--link-hover, #3c77a6);
}
.login-form-link:focus-visible {
  outline: 2px solid var(--focus-ring, #2e6fe0);
  outline-offset: 2px;
}

/* ---- Submit button + spinner ---- */
.login-form-submit {
  position: relative;
}
.login-form-spinner {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: login-modal-spin .6s linear infinite;
}
.login-form-submit.is-loading .login-form-spinner {
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .login-form-spinner {
    animation: none;
  }
}
@keyframes login-modal-spin {
  to { transform: rotate(360deg); }
}

/* ---- Divider + footer ---- */
.login-form-divider {
  margin: var(--space-5, 24px) 0;
  border: 0;
  border-top: 1px solid var(--border, #dedede);
}
.login-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
}
.login-form-footer-text {
  font: var(--body-weight, 400) var(--body-size, 16px)/var(--body-line-height, 24px) var(--font-sans);
  color: var(--ink, #44555b);
}