/* =========================================================
   AUTH STYLESHEET (ISOLATED FROM MAIN SCSS)
   Theme-aware + matches Sisters Station design system
========================================================= */

/* ===============================
   DESIGN TOKENS (COPIED + ADAPTED)
================================ */

:root {
  --color-primary: rgb(243, 184, 140);
  --color-accent: rgb(236, 92, 143);

  --text-primary: #222;
  --text-secondary: #666;
  --text-muted: #999;

  --bg-body: #ffffff;
  --bg-card: #ffffff;
  --bg-soft: #fafafa;

  --border-light: #eee;

  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 15px 35px rgba(0, 0, 0, 0.08);

  --transition: 0.3s ease;

  --input-bg: #ffffff;
  --accent-soft: rgba(243, 184, 140, 0.2);
}

/* ===============================
   DARK MODE (AUTO)
================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-body: #121212;
    --bg-card: #1f1f1f;
    --bg-soft: #181818;

    --text-primary: #f1f1f1;
    --text-secondary: #bbbbbb;
    --text-muted: #888;

    --border-light: #2a2a2a;

    --shadow-sm: none;
    --shadow-md: none;

    --input-bg: #1a1a1a;
  }
}

/* ALSO support manual theme switch */
:root[data-theme="dark"] {
  --bg-body: #121212;
  --bg-card: #1f1f1f;
  --bg-soft: #181818;

  --text-primary: #f1f1f1;
  --text-secondary: #bbbbbb;
  --text-muted: #888;

  --border-light: #2a2a2a;

  --shadow-sm: none;
  --shadow-md: none;

  --input-bg: #1a1a1a;
}

/* ===============================
   BASE
================================ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;

  /* background:
    radial-gradient(circle at top left, rgba(243,184,140,0.15), transparent 40%),
    radial-gradient(circle at bottom right, rgba(236,92,143,0.12), transparent 40%),
    var(--bg-body); */

  background-image:
    linear-gradient(
      180deg,
      rgba(243,184,140, 0.7) 0%,   /* brand sage overlay */
      rgba(233, 227, 219, 0.5) 55%,  /* brand beige blend */
      rgba(236,92,143, 0.3) 100%
    ),
    url("/assets/images/why-us\ \(2\).png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Parallax-ish effect (desktop) */
  background-attachment: fixed;

  transition: background var(--transition);
}

.auth-page .container {
  width: 100%;
}

/* ===============================
   CARD
================================ */

.auth-page .card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.auth-page .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

/* Dark mode hover fix */
:root[data-theme="dark"] .auth-page .card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* ===============================
   HEADINGS
================================ */

.auth-page h1 {
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.auth-page p {
  color: var(--text-secondary);
}

/* ===============================
   FORM ELEMENTS
================================ */

.auth-page .form-label {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.auth-page .form-control {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--input-bg);
  color: var(--text-primary);

  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;

  transition: var(--transition);
}

/* Focus state */
.auth-page .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--input-bg);
}

/* Invalid */
.auth-page .form-control.is-invalid {
  border-color: #dc3545;
}

/* Placeholder */
.auth-page .form-control::placeholder {
  color: var(--text-muted);
}

/* Checkbox */
.auth-page .form-check-input {
  border-radius: 4px;
  cursor: pointer;
}

.auth-page .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ===============================
   BUTTON
================================ */

.auth-page .btn-dark {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
  border: none;
  color: #fff;

  transition: var(--transition);
}

/* Hover */
.auth-page .btn-dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(243,184,140,0.35);
}

/* Active */
.auth-page .btn-dark:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ===============================
   LINKS
================================ */

.auth-page a {
  color: var(--color-accent);
  transition: var(--transition);
}

.auth-page a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ===============================
   ALERTS
================================ */

.auth-page .alert {
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  border: none;
}

/* Success */
.auth-page .alert-success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

/* Error */
.auth-page .alert-danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/* ===============================
   SMALL TEXT
================================ */

.auth-page .small {
  color: var(--text-muted);
}

/* ===============================
   MOBILE TWEAKS
================================ */

@media (max-width: 576px) {
  .auth-page {
    padding: 20px 0;
  }

  .auth-page .card-body {
    padding: 1.8rem 1.4rem;
  }
}