/* =========================================================
   Radio Nigeria - Sign In & Register (mobile-app style)
   ========================================================= */

/* ---------- 1. COLORS (change the purple here) ---------- */
:root {
  --purple-main: #7c3aed;
  --purple-dark: #5b21b6;
  --text-dark: #1b1038;
  --text-muted: #6b6485;
  --border: #ddd6f3;
  --overlay: 0.55;      /* how dark the background picture is: 0 = no darkening, 1 = black */
}

/* ---------- 2. PAGE + BACKGROUND PICTURE ----------
   Your picture: images/auth-bg.jpg
   If it is missing, the dark purple gradient shows instead. */
html { background: #0f0626; }

body.auth-page {
  background: transparent;           /* lets the background picture show through */
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--text-dark);
  min-height: 100vh;
  min-height: 100dvh;               /* the real visible height on phones */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  position: relative;
}

/* The picture sits behind everything and stays still */
body.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(20, 8, 45, var(--overlay)), rgba(20, 8, 45, var(--overlay))),
    url("../images/auth-bg.jpg") center / cover no-repeat,
    linear-gradient(160deg, #2a1166, #0f0626);
}

/* ---------- 3. THE CARD ---------- */
.auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 28px;
  padding: 2rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* ---------- 4. BRAND HEADER ---------- */
.brand { text-align: center; margin-bottom: 1.5rem; }
.brand-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}
.brand-name { font-weight: 800; font-size: 1.4rem; margin: 0; }
.brand-text { color: var(--text-muted); font-size: 0.9rem; margin: 0.15rem 0 0; }

/* ---------- 5. TITLES ---------- */
.auth-title { font-weight: 800; font-size: 1.6rem; margin: 0; }
.auth-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: 0.2rem 0 1.25rem; }

/* ---------- 6. USER / ADMIN TABS ---------- */
.role-tabs {
  display: flex;
  background: #f3effd;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1.25rem;
}
.role-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.55rem 0;
  border-radius: 9px;
  transition: all 0.2s ease;
}
.role-tab.active {
  background: linear-gradient(135deg, var(--purple-main), var(--purple-dark));
  color: #fff;
}

/* ---------- 7. FORM FIELDS ---------- */
.form-label { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.35rem; }
.form-label i { color: var(--purple-main); }
.form-control {
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.95rem;
}
.form-control:focus {
  border-color: var(--purple-main);
  box-shadow: 0 0 0 0.22rem rgba(124, 58, 237, 0.18);
}
.password-wrap { position: relative; }
.password-wrap .form-control { padding-right: 46px; }
.toggle-eye {
  position: absolute;
  right: 6px;
  top: 0;
  height: 46px;
  width: 40px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
}
.form-check-input:checked { background-color: var(--purple-main); border-color: var(--purple-main); }
.form-check-input:focus { border-color: var(--purple-main); box-shadow: 0 0 0 0.22rem rgba(124, 58, 237, 0.18); }
.form-check-label { font-size: 0.88rem; color: var(--text-muted); }

/* ---------- 8. LINKS + BUTTON ---------- */
.link-accent { color: var(--purple-main); text-decoration: none; font-size: 0.88rem; }
.link-accent:hover { color: var(--purple-dark); text-decoration: underline; }

.btn-main {
  height: 48px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-main), var(--purple-dark));
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}
.btn-main:hover, .btn-main:focus-visible { color: #fff; filter: brightness(1.1); }

.switch-text { text-align: center; color: var(--text-dark); margin: 1.25rem 0 0; font-size: 0.92rem; }
.switch-text .link-accent { font-size: inherit; }

/* =========================================================
   9. PHONES: mobile-app look
   To change the card size or spacing on phones, edit here.
   ========================================================= */
@media (max-width: 576px) {
  body.auth-page { padding: 1.75rem; }        /* space around the card (the picture shows here) */

  .auth-card {
    max-width: 340px;                         /* card width on phones */
    padding: 1.5rem 1.25rem;
    border-radius: 26px;
  }

  .brand { margin-bottom: 1rem; }
  .brand-logo { width: 72px; height: 72px; margin-bottom: 0.35rem; }
  .brand-name { font-size: 1.15rem; }
  .brand-text { font-size: 0.8rem; }

  .auth-title { font-size: 1.4rem; }
  .auth-subtitle { font-size: 0.82rem; margin-bottom: 0.9rem; }

  .role-tabs { margin-bottom: 0.9rem; }
  .role-tab { padding: 0.45rem 0; font-size: 0.9rem; }

  .form-label { font-size: 0.78rem; margin-bottom: 0.25rem; }
  .form-control { height: 44px; font-size: 1rem; }    /* 16px stops iPhones zooming in */
  .toggle-eye { height: 44px; }
  .auth-card .mb-3 { margin-bottom: 0.75rem !important; }
  .auth-card .mb-4 { margin-bottom: 1rem !important; }

  .btn-main { height: 46px; }
  .switch-text { margin-top: 1rem; font-size: 0.85rem; }
}