/* Sign-in, sign-up and account pages, in the landing page's look (landing.css): the dark hero
   background, one big white card, pill buttons. On with body.lp-auth, so the subcontractor portal and
   customer documents, which share the same base template, keep their own look. */
.lp-auth {
  position: relative; isolation: isolate; color: #16213a;
  background: #0b1220;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.lp-auth::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 620px at 90% 0%, rgba(253, 89, 3, .5), transparent 62%),
    radial-gradient(760px 560px at 65% -10%, rgba(255, 150, 60, .24), transparent 60%),
    radial-gradient(1100px 700px at 0% 100%, rgba(40, 84, 190, .42), transparent 62%),
    linear-gradient(160deg, #0b1220 0%, #111a2e 55%, #0b1220 100%);
}
.lp-auth::after {
  content: ""; position: fixed; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(1000px 640px at 70% 10%, #000, transparent 75%);
  mask-image: radial-gradient(1000px 640px at 70% 10%, #000, transparent 75%);
}

/* The card: the default layout's .auth-card, and the sign-in pages' .auth-panel-inner */
.lp-auth .auth-page, .lp-auth .auth-solo { align-items: center; padding: clamp(32px, 7vh, 88px) 16px 24px; }
.lp-auth .auth-card, .lp-auth .auth-panel-inner {
  max-width: 480px; background: #fff; border: 0; border-radius: 28px;
  padding: clamp(28px, 5vw, 48px);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .12);
}
.lp-auth .auth-card.onboarding-card { max-width: 640px; }
.lp-auth .auth-card-logo { margin-bottom: 28px; }
.lp-auth .auth-card-logo img { width: 48px; height: 48px; }
.lp-auth .auth-card-title, .lp-auth .auth-panel-title { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.035em; color: #0b1220; }
.lp-auth .auth-card-text, .lp-auth .auth-panel-text { font-size: 1rem; line-height: 1.55; color: #5b6272; }
.lp-auth .auth-solo-brand { margin-bottom: 32px; }

/* Fields */
.lp-auth .auth-label, .lp-auth .auth-label-sm, .lp-auth .onboarding-card .form-label { font-size: .88rem; font-weight: 600; color: #26324a; }
.lp-auth .auth-field, .lp-auth .auth-card .form-control, .lp-auth .auth-card .form-select {
  height: 50px; border-radius: 12px; border: 1px solid #d5d8dc; font-size: 1rem; padding: 0 14px;
}
.lp-auth .auth-card textarea.form-control { height: auto; padding: 12px 14px; }
.lp-auth .auth-field:hover, .lp-auth .auth-card .form-control:hover { border-color: #b9bdc3; }
.lp-auth .auth-field:focus, .lp-auth .auth-card .form-control:focus, .lp-auth .auth-card .form-select:focus {
  border-color: #fd5903; box-shadow: 0 0 0 4px rgba(253, 89, 3, .15);
}
.lp-auth .auth-eye { top: 25px; border-radius: 10px; }
.lp-auth .auth-check .form-check-input { border-radius: 6px; }
.lp-auth .onboarding-logo { border-radius: 16px; }

/* Buttons: pills */
.lp-auth .auth-submit {
  height: 52px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  background: #fd5903; box-shadow: none; transition: background .15s;
}
.lp-auth .auth-submit:hover, .lp-auth .auth-submit:focus { background: #e24c00; }
.lp-auth .auth-submit:focus-visible { outline: 3px solid rgba(253, 89, 3, .45); outline-offset: 3px; }
.lp-auth .auth-google { height: 52px; border-radius: 999px; border-color: #d5d8dc; }
.lp-auth .auth-google:hover { border-color: #0b1220; }
.lp-auth .auth-card .btn-outline-secondary, .lp-auth .auth-card .btn-light { border-radius: 999px; }
.lp-auth .auth-link { color: #e24c00; font-weight: 600; }
.lp-auth .auth-card .alert, .lp-auth .auth-panel-inner .alert { border-radius: 12px; }

/* Footers sit on the dark background */
.lp-auth .auth-footer, .lp-auth .auth-panel-foot { color: rgba(255, 255, 255, .55); }
.lp-auth .auth-footer a:hover, .lp-auth .auth-panel-foot a:hover { color: #fff; }
.lp-auth > .auth-panel-foot { padding-bottom: 28px; }

@media (max-width: 575.98px) {
  .lp-auth .auth-card { padding: 28px 22px; border-radius: 24px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
}