/* Shared styling for allauth entrance pages (login, signup, password reset, …).
   The site ships no Bootstrap, so allauth's default Bootstrap/crispy markup
   renders raw; these styles + the entrance layout + element overrides put every
   auth page on the Evasan design system (Playfair Display, Open Sans, coral). */

.auth-page {
  background-color: #f3f4f5;
}

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Soft, layered atmosphere — light-blue + coral brand tints, kept subtle.
   Fixed (not absolute) so the off-screen blobs never add scrollbars and we
   don't need overflow:hidden, which would clip a taller-than-viewport card. */
.auth-shell::before,
.auth-shell::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

.auth-shell::before {
  width: 620px;
  height: 620px;
  top: -280px;
  right: -200px;
  background: radial-gradient(circle, rgba(110, 193, 228, 0.28), rgba(110, 193, 228, 0) 70%);
}

.auth-shell::after {
  width: 520px;
  height: 520px;
  bottom: -260px;
  left: -180px;
  background: radial-gradient(circle, rgba(239, 64, 53, 0.16), rgba(239, 64, 53, 0) 70%);
}

.auth-bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding: 26px 40px;
}

.auth-brand img {
  display: block;
  width: 150px;
  height: auto;
}

/* Account navigation (logged-in manage / MFA pages) */
.auth-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.auth-nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #3a4247;
  text-decoration: none;
  transition: color 200ms ease;
}

.auth-nav a:hover {
  color: #ef4035;
}

.auth-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  padding: 24px 20px 64px;
}

.auth-card {
  /* margin:auto centers the card when there's room, but top-aligns and lets
     the page scroll when the card is taller than the viewport (no clipping). */
  margin: auto;
  width: 100%;
  max-width: 460px;
  padding: 48px 46px 44px;
  background: #fff;
  border: 1px solid rgba(24, 26, 26, 0.06);
  border-radius: 18px;
  box-shadow: 0 32px 70px -28px rgba(24, 26, 26, 0.28);
  box-sizing: border-box;
  animation: authCardIn 700ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes authCardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.auth-kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ef4035;
}

.auth-card h1 {
  margin: 0 0 12px;
  font-family: "Playfair Display", serif;
  font-size: 38px;
  line-height: 1.08;
  font-weight: 700;
  color: #181a1a;
}

.auth-card h2 {
  margin: 30px 0 14px;
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 700;
  color: #181a1a;
}

.auth-card > p,
.auth-lead {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #3a4247;
}

/* Status pills (e.g. email Verified / Unverified / Primary) */
.auth-card .badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 999px;
  background: #ededed;
  color: #3a4247;
  vertical-align: middle;
}

.auth-card .badge.bg-success {
  background: rgba(0, 106, 165, 0.12);
  color: #006aa5;
}

.auth-card .badge.bg-warning {
  background: rgba(201, 12, 0, 0.1);
  color: #c90c00;
}

/* Text links only — never recolor an <a> styled as a .btn (keeps it white). */
.auth-card a:not(.btn) {
  color: #006aa5;
}

/* Fields */
.auth-field {
  margin-bottom: 20px;
}

.auth-field > label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #181a1a;
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="number"],
.auth-card input[type="tel"],
.auth-card textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  color: #181a1a;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 11px;
  box-sizing: border-box;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.auth-card input::placeholder,
.auth-card textarea::placeholder {
  color: #aeb4b7;
}

.auth-card input:focus,
.auth-card textarea:focus {
  outline: none;
  border-color: #ef4035;
  box-shadow: 0 0 0 4px rgba(239, 64, 53, 0.14);
}

.auth-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #3a4247;
  cursor: pointer;
}

.auth-check input {
  width: 18px;
  height: 18px;
  accent-color: #ef4035;
  flex-shrink: 0;
}

.auth-help {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #3a4247;
}

/* Password-requirement checklist */
.auth-hints {
  margin: -4px 0 24px;
  padding: 16px 18px;
  background: #f5f6f7;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #3a4247;
}

.auth-hints ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-hints li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 6px;
}

.auth-hints li:last-child {
  margin-bottom: 0;
}

.auth-hints li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6ec1e4;
}

/* Errors */
.auth-card .errorlist {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.auth-card .errorlist li {
  font-size: 12.5px;
  color: #c90c00;
}

.auth-card .auth-nonfield .errorlist,
.auth-card form > .errorlist {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: rgba(201, 12, 0, 0.07);
  border-radius: 10px;
}

/* Alerts / messages */
.auth-alert {
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  background: rgba(110, 193, 228, 0.16);
  color: #181a1a;
}

.auth-alert.auth-alert-error,
.auth-alert.error {
  background: rgba(201, 12, 0, 0.08);
  color: #c90c00;
}

/* Actions / buttons. Flex-centering reliably centers the label for both
   <button> and <a> variants and keeps the existing .btn hover fill working. */
.auth-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.auth-card .btn {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

/* Space stacked buttons whether they're in .auth-actions or standalone
   (e.g. the recovery-codes "Download" / "Generate new codes" links). */
.auth-card .btn + .btn {
  margin-top: 14px;
}

.auth-card .btn span {
  width: auto;
}

/* Quiet secondary / cancel action rendered as a centered text button. */
.auth-card .btn.ghost {
  background: transparent;
  border: none;
  min-width: 0;
  padding: 6px 4px;
  color: #3a4247;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.2px;
}

.auth-card .btn.ghost::before {
  display: none;
}

.auth-card .btn.ghost:hover {
  color: #181a1a;
  border-color: transparent;
  text-decoration: underline;
}

/* Expired / failed-token state */
.auth-fail-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: rgba(239, 64, 53, 0.1);
  color: #ef4035;
}

.auth-fail-mark svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 560px) {
  .auth-bar {
    padding: 20px 24px;
  }

  .auth-card {
    padding: 36px 26px 32px;
    border-radius: 14px;
  }

  .auth-card h1 {
    font-size: 30px;
  }
}