/* Login responsive */
@media (max-width: 768px) {
  .login-page {
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    padding-top: calc(20px + var(--safe-top));
    padding-bottom: calc(20px + var(--safe-bottom));
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }

  .login-card {
    width: 100%;
    max-width: none;
    padding: 32px 22px 26px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  .login-card__logo {
    max-width: min(260px, 72vw);
    margin-bottom: 28px;
  }

  .login-card .form-group {
    margin-bottom: 16px;
  }

  .login-card .form-input,
  .login-modal .form-input {
    height: var(--touch-target-min);
    font-size: 16px;
    padding: 0 14px;
  }

  .login-card .form-input-wrap .form-input {
    padding-right: 52px;
  }

  .login-card .form-input-toggle {
    right: 8px;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
  }

  .login-card .form-link {
    display: block;
    width: 100%;
    margin: 20px 0 22px;
    padding: 8px 4px;
    text-align: center;
    font-size: 0.8125rem;
  }

  .login-card .btn--primary,
  .login-modal .btn--primary {
    height: var(--touch-target-min);
    font-size: 0.875rem;
  }

  .login-card__footer {
    margin-top: 28px;
    padding-top: 20px;
  }
}

@media (max-width: 480px) {
  .login-page {
    flex-direction: column;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    min-height: var(--viewport-height);
  }

  .login-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--viewport-height);
    padding: calc(28px + var(--safe-top)) 20px calc(28px + var(--safe-bottom));
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .login-card__logo {
    max-width: min(240px, 78vw);
    margin-bottom: 32px;
  }

  .login-card #loginForm {
    flex: 0 0 auto;
  }
}

@media (max-width: 360px) {
  .login-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .login-modal__code-inputs {
    gap: 3px;
  }

  .login-modal__code-digit {
    width: clamp(32px, 11vw, 40px);
    height: clamp(40px, 12vw, 48px);
  }
}