/**
 * 1080p-class desktops: --auth-form-scale for login + volunteer/org register.
 * Shared scaling rules live here; auth_form_viewport_720.css tightens the scale.
 * No zoom (breaks AOS); uses register.css variables + wizard overrides.
 */

body.auth-viewport-page {
  --auth-form-scale: 1;
}

@media (max-width: 1920px) and (min-width: 641px) {
  @media (min-height: 500px) {
    body.auth-viewport-page {
      --auth-form-scale: 0.88;
    }
  }
}

body.auth-viewport-page main.main .form-holder {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 641px) {
  @media (min-height: 500px) {
    body.auth-viewport-page {
      --font-size: clamp(
        calc(14px * var(--auth-form-scale)),
        calc(1.5vw * var(--auth-form-scale)),
        calc(16px * var(--auth-form-scale))
      );
      --navbar-height: clamp(
        calc(50px * var(--auth-form-scale)),
        calc(8vw * var(--auth-form-scale)),
        calc(70px * var(--auth-form-scale))
      );
      --container-max-width: clamp(280px, 88vw, calc(600px * var(--auth-form-scale)));
      --spacing-xs: clamp(
        calc(4px * var(--auth-form-scale)),
        calc(1vw * var(--auth-form-scale)),
        calc(6px * var(--auth-form-scale))
      );
      --spacing-sm: clamp(
        calc(8px * var(--auth-form-scale)),
        calc(1.5vw * var(--auth-form-scale)),
        calc(12px * var(--auth-form-scale))
      );
      --spacing-md: clamp(
        calc(12px * var(--auth-form-scale)),
        calc(2vw * var(--auth-form-scale)),
        calc(16px * var(--auth-form-scale))
      );
      --spacing-lg: clamp(
        calc(16px * var(--auth-form-scale)),
        calc(3vw * var(--auth-form-scale)),
        calc(24px * var(--auth-form-scale))
      );
      --spacing-xl: clamp(
        calc(24px * var(--auth-form-scale)),
        calc(4vw * var(--auth-form-scale)),
        calc(32px * var(--auth-form-scale))
      );
      --spacing-xxl: clamp(
        calc(32px * var(--auth-form-scale)),
        calc(5vw * var(--auth-form-scale)),
        calc(48px * var(--auth-form-scale))
      );
      --border-radius-sm: clamp(
        calc(6px * var(--auth-form-scale)),
        calc(1vw * var(--auth-form-scale)),
        calc(8px * var(--auth-form-scale))
      );
      --border-radius-md: clamp(
        calc(8px * var(--auth-form-scale)),
        calc(1.5vw * var(--auth-form-scale)),
        calc(12px * var(--auth-form-scale))
      );
      --border-radius-lg: clamp(
        calc(10px * var(--auth-form-scale)),
        calc(2vw * var(--auth-form-scale)),
        calc(16px * var(--auth-form-scale))
      );
      --border-radius-xl: clamp(
        calc(16px * var(--auth-form-scale)),
        calc(3vw * var(--auth-form-scale)),
        calc(24px * var(--auth-form-scale))
      );
    }

    body.auth-viewport-page main.main .form-holder {
      padding-top: clamp(
        calc(60px * var(--auth-form-scale)),
        calc(12vw * var(--auth-form-scale)),
        calc(100px * var(--auth-form-scale))
      );
      padding-bottom: clamp(
        calc(20px * var(--auth-form-scale)),
        calc(5vw * var(--auth-form-scale)),
        calc(60px * var(--auth-form-scale))
      );
      padding-left: clamp(
        calc(12px * var(--auth-form-scale)),
        calc(3vw * var(--auth-form-scale)),
        calc(24px * var(--auth-form-scale))
      );
      padding-right: clamp(
        calc(12px * var(--auth-form-scale)),
        calc(3vw * var(--auth-form-scale)),
        calc(24px * var(--auth-form-scale))
      );
    }

    body.auth-viewport-page .page-header {
      margin-bottom: clamp(
        calc(20px * var(--auth-form-scale)),
        calc(4vw * var(--auth-form-scale)),
        calc(32px * var(--auth-form-scale))
      );
    }

    body.auth-viewport-page .page-title {
      margin-bottom: clamp(
        calc(6px * var(--auth-form-scale)),
        calc(1.2vw * var(--auth-form-scale)),
        calc(10px * var(--auth-form-scale))
      );
      font-size: clamp(
        calc(36px * var(--auth-form-scale)),
        calc((8vw + 1rem) * var(--auth-form-scale)),
        calc(64px * var(--auth-form-scale))
      );
      letter-spacing: clamp(
        calc(-0.5px * var(--auth-form-scale)),
        calc(-0.1vw * var(--auth-form-scale)),
        calc(-0.8px * var(--auth-form-scale))
      );
    }

    body.auth-viewport-page .page-subtitle {
      font-size: clamp(
        calc(15px * var(--auth-form-scale)),
        calc((2.8vw + 0.5rem) * var(--auth-form-scale)),
        calc(22px * var(--auth-form-scale))
      );
    }

    body.auth-viewport-page .form-holder .icon {
      font-size: clamp(
        calc(20px * var(--auth-form-scale)),
        calc((4vw + 1rem) * var(--auth-form-scale)),
        calc(35px * var(--auth-form-scale))
      );
    }

    body.auth-viewport-page .form-card {
      padding: clamp(
        calc(24px * var(--auth-form-scale)),
        calc((5vw + 1rem) * var(--auth-form-scale)),
        calc(50px * var(--auth-form-scale))
      )
        clamp(
          calc(16px * var(--auth-form-scale)),
          calc((4vw + 0.5rem) * var(--auth-form-scale)),
          calc(45px * var(--auth-form-scale))
        );
      box-shadow: 0
        clamp(
          calc(15px * var(--auth-form-scale)),
          calc(3vw * var(--auth-form-scale)),
          calc(25px * var(--auth-form-scale))
        )
        clamp(
          calc(50px * var(--auth-form-scale)),
          calc(10vw * var(--auth-form-scale)),
          calc(80px * var(--auth-form-scale))
        )
        var(--primary-color-light);
    }

    body.auth-viewport-page .form-card:hover {
      box-shadow: 0
        clamp(
          calc(20px * var(--auth-form-scale)),
          calc(4vw * var(--auth-form-scale)),
          calc(30px * var(--auth-form-scale))
        )
        clamp(
          calc(60px * var(--auth-form-scale)),
          calc(12vw * var(--auth-form-scale)),
          calc(100px * var(--auth-form-scale))
        )
        var(--secondary-color-light);
    }

    body.auth-viewport-page .vol-reg-wizard .section-header,
    body.auth-viewport-page .org-reg-wizard .section-header {
      margin-bottom: calc(2rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .section-icon,
    body.auth-viewport-page .org-reg-wizard .section-icon {
      width: calc(50px * var(--auth-form-scale)) !important;
      height: calc(50px * var(--auth-form-scale)) !important;
      font-size: calc(1.5rem * var(--auth-form-scale)) !important;
      margin-bottom: calc(0.75rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .section-title,
    body.auth-viewport-page .org-reg-wizard .section-title {
      font-size: calc(1.5rem * var(--auth-form-scale)) !important;
      margin-bottom: calc(0.5rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .section-subtitle,
    body.auth-viewport-page .org-reg-wizard .section-subtitle {
      font-size: calc(0.95rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .form-group,
    body.auth-viewport-page .org-reg-wizard .form-group {
      margin-bottom: calc(1.25rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .form-label,
    body.auth-viewport-page .org-reg-wizard .form-label {
      font-size: calc(0.95rem * var(--auth-form-scale)) !important;
      margin-bottom: calc(0.5rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .form-control,
    body.auth-viewport-page .vol-reg-wizard textarea,
    body.auth-viewport-page .org-reg-wizard .form-control,
    body.auth-viewport-page .org-reg-wizard textarea {
      padding: calc(1rem * var(--auth-form-scale)) calc(1.25rem * var(--auth-form-scale)) !important;
      font-size: calc(1rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .org-reg-wizard textarea {
      min-height: calc(100px * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard textarea {
      min-height: calc(80px * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .field-hint,
    body.auth-viewport-page .org-reg-wizard .field-hint {
      font-size: calc(0.875rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .field-error,
    body.auth-viewport-page .org-reg-wizard .field-error {
      font-size: calc(0.875rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .availability-pill {
      padding: calc(0.5rem * var(--auth-form-scale)) calc(1rem * var(--auth-form-scale)) !important;
      font-size: calc(0.9rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .password-toggle,
    body.auth-viewport-page .org-reg-wizard .password-toggle {
      font-size: calc(1.1rem * var(--auth-form-scale)) !important;
      right: calc(0.75rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .step-validation-message,
    body.auth-viewport-page .org-reg-wizard .step-validation-message {
      padding: calc(1rem * var(--auth-form-scale)) calc(1.25rem * var(--auth-form-scale)) !important;
      font-size: calc(0.95rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .form-navigation,
    body.auth-viewport-page .org-reg-wizard .form-navigation {
      gap: calc(0.75rem * var(--auth-form-scale)) !important;
      margin-top: calc(2rem * var(--auth-form-scale)) !important;
      padding-top: calc(1.5rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .form-body,
    body.auth-viewport-page .vol-reg-wizard .auth-form {
      overflow: visible !important;
    }

    body.auth-viewport-page .org-reg-wizard .form-body,
    body.auth-viewport-page .org-reg-wizard .auth-form {
      overflow: visible !important;
    }

    body.auth-viewport-page .vol-reg-wizard .btn-nav,
    body.auth-viewport-page .org-reg-wizard .btn-nav {
      padding: calc(0.65rem * var(--auth-form-scale)) calc(1.25rem * var(--auth-form-scale)) !important;
      font-size: calc(0.9rem * var(--auth-form-scale)) !important;
      min-height: calc(2.5rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .global-select-display {
      min-height: calc(36px * var(--auth-form-scale)) !important;
      padding: calc(6px * var(--auth-form-scale)) calc(36px * var(--auth-form-scale))
        calc(6px * var(--auth-form-scale)) calc(10px * var(--auth-form-scale)) !important;
      font-size: calc(0.875rem * var(--auth-form-scale)) !important;
      border-radius: calc(10px * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .global-dropdown-menu {
      z-index: 6000 !important;
      max-height: calc(240px * var(--auth-form-scale)) !important;
      padding: calc(6px * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .global-dropdown-option {
      font-size: calc(0.875rem * var(--auth-form-scale)) !important;
      padding: calc(0.45rem * var(--auth-form-scale)) calc(0.65rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .vol-reg-consent-label {
      font-size: calc(1rem * var(--auth-form-scale)) !important;
      gap: calc(0.75rem * var(--auth-form-scale)) !important;
      line-height: 1.5 !important;
    }

    body.auth-viewport-page .vol-reg-wizard .vol-reg-consent-label .terms-link {
      font-size: inherit !important;
      padding: 0 !important;
    }

    body.auth-viewport-page .vol-reg-wizard .vol-reg-consent-label input[type="checkbox"] {
      width: calc(1.125rem * var(--auth-form-scale)) !important;
      height: calc(1.125rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .org-reg-wizard .org-reg-consent-label {
      font-size: calc(1rem * var(--auth-form-scale)) !important;
      gap: calc(0.75rem * var(--auth-form-scale)) !important;
      line-height: 1.5 !important;
    }

    body.auth-viewport-page .org-reg-wizard .org-reg-consent-label .terms-link {
      font-size: inherit !important;
      padding: 0 !important;
    }

    body.auth-viewport-page .org-reg-wizard .org-reg-consent-label input[type="checkbox"] {
      width: calc(1.125rem * var(--auth-form-scale)) !important;
      height: calc(1.125rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .org-reg-wizard .form-check-inline-label {
      font-size: calc(0.95rem * var(--auth-form-scale)) !important;
      gap: calc(0.5rem * var(--auth-form-scale)) !important;
    }

    /* Terms / Privacy line on org + company rep forms — not volunteer consent (uses .vol-reg-consent-label) */
    body.auth-viewport-page .org-reg-wizard .form-check-inline-label:has(.terms-link),
    body.auth-viewport-page .auth-form .form-check-inline-label:has(.terms-link) {
      font-size: clamp(
          calc(10px * var(--auth-form-scale)),
          calc(0.7rem * var(--auth-form-scale)),
          calc(13px * var(--auth-form-scale))
        )
        !important;
      line-height: 1.35 !important;
      gap: calc(0.3rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .org-reg-wizard .form-check-inline-label:has(.terms-link) .terms-link,
    body.auth-viewport-page .auth-form .form-check-inline-label:has(.terms-link) .terms-link {
      font-size: inherit !important;
      padding: 0 1px !important;
    }

    body.auth-viewport-page .org-reg-wizard .form-check-inline-label input[type="checkbox"] {
      width: calc(1.125rem * var(--auth-form-scale)) !important;
      height: calc(1.125rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .org-reg-wizard .form-check-inline-label:has(.terms-link) input[type="checkbox"],
    body.auth-viewport-page .auth-form .form-check-inline-label:has(.terms-link) input[type="checkbox"] {
      width: calc(0.98rem * var(--auth-form-scale)) !important;
      height: calc(0.98rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .form-footer,
    body.auth-viewport-page .org-reg-wizard .form-footer {
      margin-top: calc(1.5rem * var(--auth-form-scale)) !important;
      padding-top: calc(1rem * var(--auth-form-scale)) !important;
    }

    body.auth-viewport-page .vol-reg-wizard .signup-link,
    body.auth-viewport-page .org-reg-wizard .signup-link {
      font-size: calc(0.95rem * var(--auth-form-scale)) !important;
    }

    /* Login + shared auth form fields (register.css px-based clamps) */
    body.auth-viewport-page .form-group {
      margin-bottom: clamp(
        calc(16px * var(--auth-form-scale)),
        calc((3vw + 0.5rem) * var(--auth-form-scale)),
        calc(24px * var(--auth-form-scale))
      );
    }

    body.auth-viewport-page .auth-form label:not(.form-check-inline-label):not(.vol-reg-consent-label):not(.org-reg-consent-label) {
      margin-bottom: clamp(
        calc(6px * var(--auth-form-scale)),
        calc(1.5vw * var(--auth-form-scale)),
        calc(10px * var(--auth-form-scale))
      );
      font-size: clamp(
        calc(11px * var(--auth-form-scale)),
        calc((1.8vw + 0.25rem) * var(--auth-form-scale)),
        calc(13px * var(--auth-form-scale))
      );
      letter-spacing: clamp(
        calc(0.3px * var(--auth-form-scale)),
        calc(0.1vw * var(--auth-form-scale)),
        calc(0.8px * var(--auth-form-scale))
      );
    }

    body.auth-viewport-page .progress-bar {
      height: clamp(
        calc(2px * var(--auth-form-scale)),
        calc(0.4vw * var(--auth-form-scale)),
        calc(4px * var(--auth-form-scale))
      );
      margin-bottom: clamp(
        calc(16px * var(--auth-form-scale)),
        calc((3vw + 0.5rem) * var(--auth-form-scale)),
        calc(30px * var(--auth-form-scale))
      );
    }

    body.auth-viewport-page .auth-form .form-control,
    body.auth-viewport-page .auth-form input[type="text"],
    body.auth-viewport-page .auth-form input[type="email"],
    body.auth-viewport-page .auth-form input[type="password"],
    body.auth-viewport-page .auth-form input[type="search"] {
      font-size: clamp(
        calc(16px * var(--auth-form-scale)),
        calc((2vw + 0.25rem) * var(--auth-form-scale)),
        calc(16px * var(--auth-form-scale))
      ) !important;
      padding: clamp(
        calc(12px * var(--auth-form-scale)),
        calc(2vw * var(--auth-form-scale)),
        calc(16px * var(--auth-form-scale))
      )
        clamp(
          calc(14px * var(--auth-form-scale)),
          calc(2.5vw * var(--auth-form-scale)),
          calc(18px * var(--auth-form-scale))
        ) !important;
    }

    body.auth-viewport-page .btn-submit {
      padding: clamp(
        calc(14px * var(--auth-form-scale)),
        calc((2.5vw + 0.5rem) * var(--auth-form-scale)),
        calc(18px * var(--auth-form-scale))
      ) !important;
      font-size: clamp(
        calc(14px * var(--auth-form-scale)),
        calc((2vw + 0.25rem) * var(--auth-form-scale)),
        calc(16px * var(--auth-form-scale))
      ) !important;
      margin-top: clamp(
        calc(8px * var(--auth-form-scale)),
        calc(1.5vw * var(--auth-form-scale)),
        calc(10px * var(--auth-form-scale))
      ) !important;
      letter-spacing: clamp(
        calc(0.5px * var(--auth-form-scale)),
        calc(0.15vw * var(--auth-form-scale)),
        calc(1.2px * var(--auth-form-scale))
      ) !important;
    }

    body.auth-viewport-page .alert {
      padding: clamp(
        calc(8px * var(--auth-form-scale)),
        calc(2vw * var(--auth-form-scale)),
        calc(12px * var(--auth-form-scale))
      )
        clamp(
          calc(10px * var(--auth-form-scale)),
          calc(2.5vw * var(--auth-form-scale)),
          calc(16px * var(--auth-form-scale))
        ) !important;
      font-size: clamp(
        calc(12px * var(--auth-form-scale)),
        calc((1.8vw + 0.25rem) * var(--auth-form-scale)),
        calc(14px * var(--auth-form-scale))
      ) !important;
    }

    body.auth-viewport-page .form-footer .signup-link,
    body.auth-viewport-page .form-footer p {
      font-size: clamp(
        calc(12px * var(--auth-form-scale)),
        calc((2vw + 0.25rem) * var(--auth-form-scale)),
        calc(14px * var(--auth-form-scale))
      ) !important;
    }

    body.auth-viewport-page .divider {
      margin: clamp(
        calc(16px * var(--auth-form-scale)),
        calc(3vw * var(--auth-form-scale)),
        calc(24px * var(--auth-form-scale))
      ) 0 !important;
    }

    body.auth-viewport-page .social-login .btn {
      padding: clamp(
        calc(10px * var(--auth-form-scale)),
        calc(2vw * var(--auth-form-scale)),
        calc(14px * var(--auth-form-scale))
      )
        clamp(
          calc(14px * var(--auth-form-scale)),
          calc(2.5vw * var(--auth-form-scale)),
          calc(18px * var(--auth-form-scale))
        ) !important;
      font-size: clamp(
        calc(12px * var(--auth-form-scale)),
        calc((2vw + 0.25rem) * var(--auth-form-scale)),
        calc(14px * var(--auth-form-scale))
      ) !important;
    }
  }
}