/* =====================================================
   HIIFA — customer login / signup
   Reuses style.css tokens + booking.css form styles.
   ===================================================== */
.auth-shell {
  min-height: calc(100vh - 84px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(32px, 7vw, 72px) 20px 64px;
  background:
    radial-gradient(720px 380px at 50% -8%, rgba(0, 93, 92, 0.06), transparent 60%),
    var(--off-white);
}
.auth-wrap { width: 100%; max-width: 420px; }

.auth-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(6, 24, 41, 0.08);
  padding: 34px 32px 28px;
}
.auth-heading { font-size: clamp(1.5rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.auth-sub { color: var(--text); font-size: 0.95rem; margin: 6px 0 24px; }

.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-link {
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 0.82rem; font-weight: 700; color: var(--teal-dark);
  padding: 0;
}
.auth-link:hover { text-decoration: underline; }

.auth-message {
  font-size: 0.86rem;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.auth-message[hidden] { display: none; }
.auth-message.is-error { background: #FBEAE8; color: #C6432F; }
.auth-message.is-success { background: rgba(0, 93, 92, 0.08); color: var(--teal-dark); }

.btn-primary-lg[disabled] { opacity: 0.65; cursor: default; }

.auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text);
}
.auth-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--teal-dark);
  padding: 0;
}
.auth-switch-btn:hover { color: var(--teal); }
.auth-switch-btn .lucide { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.auth-switch-btn:hover .lucide { transform: translateX(3px); }

.auth-guest { text-align: center; margin-top: 20px; font-size: 0.88rem; color: var(--text); }
.auth-guest a { color: var(--teal-dark); font-weight: 700; }
.auth-guest a:hover { text-decoration: underline; }

.field-block + .field-block { margin-top: 16px; }

/* spinner (matches booking.css .spin if present, defined here for standalone use) */
@keyframes hiifa-auth-spin { to { transform: rotate(360deg); } }
.auth-spin { display: inline-block; animation: hiifa-auth-spin 0.85s linear infinite; }
@media (prefers-reduced-motion: reduce) { .auth-spin { animation: none; } }