/**
 * Auth card component variants.
 * Canonical card shell and theme variants shared by auth surfaces.
 */

.auth-card {
  background: var(--white, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgb(0 0 0 / 10%);
  padding: 3rem;
  border: 1px solid var(--border-color, #e9ecef);
}

.auth-hero-container--solo .auth-card {
  width: min(100%, 420px);
  padding: clamp(2.5rem, 5vw, 3rem);
}

.auth-hero-container--solo .auth-card.auth-entry-card {
  width: min(100%, 700px);
}

.auth-checking .auth-card {
  position: relative;
  opacity: 0.65;
  pointer-events: none;
}

.auth-checking .auth-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgb(255 255 255 / 40%);
}

.p-auth .auth-hero .auth-card {
  background: var(--auth-card-bg, rgb(12 23 46 / 88%));
  border: 1px solid var(--auth-card-border, rgb(255 255 255 / 10%));
  box-shadow: var(--auth-card-shadow, 0 30px 60px rgb(12 23 46 / 40%));
  color: var(--auth-light-text, #e4ebff);
  border-radius: 20px;
  padding: clamp(2.2rem, 4vw, 3rem);
}

.p-auth .auth-hero .auth-card .auth-header h2,
.p-auth .auth-hero .auth-card .auth-subtitle,
.p-auth .auth-hero .auth-card label,
.p-auth .auth-hero .auth-card .checkbox-label a,
.p-auth .auth-hero .auth-card .auth-footer a {
  color: var(--auth-light-text, #e4ebff);
}

.p-auth .auth-hero .auth-card .auth-subtitle {
  color: var(--auth-muted-text, #a6b4cc);
}

.p-auth .auth-hero .auth-card .form-group label {
  color: var(--auth-light-text, #e4ebff);
}

.p-auth .auth-hero .auth-card .form-group input[type="email"],
.p-auth .auth-hero .auth-card .form-group input[type="password"],
.p-auth .auth-hero .auth-card .form-group input[type="text"] {
  background: rgb(22 44 80 / 35%);
  border: 1px solid rgb(255 255 255 / 12%);
  color: #fff;
}

.p-auth .auth-hero .auth-card .form-group input[type="email"]::placeholder,
.p-auth .auth-hero .auth-card .form-group input[type="password"]::placeholder,
.p-auth .auth-hero .auth-card .form-group input[type="text"]::placeholder {
  color: rgb(255 255 255 / 50%);
}

.p-auth .auth-hero .auth-card .form-group input:focus {
  border-color: var(--auth-plan-highlight, #f77f00);
  box-shadow: 0 0 0 3px rgb(247 127 0 / 18%);
}

@media (width <= 768px) {
  .auth-card {
    padding: 2rem;
  }
}

@media (width <= 576px) {
  .auth-card {
    padding: 1.5rem;
    margin: 0 0.5rem;
  }
}