/* ============================================================
   Recruit.Football — Auth pages (login, register, forgot password)
   Branding: navy/gold palette, Oswald + Barlow Condensed
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --rf-navy:         #09111f;
  --rf-navy2:        #0d1829;
  --rf-navy3:        #111f36;
  --rf-navy4:        #162540;
  --rf-accent:         #2b8fff;
  --rf-accent-light:        #74b5ff;
  --rf-accent-dim:     rgba(43,143,255,0.12);
  --rf-accent-border:  rgba(43,143,255,0.3);
  --rf-white:        #ffffff;
  --rf-off:          #e8e4db;
  --rf-muted:        #a4b8d0;
  --rf-border:       rgba(255,255,255,0.07);
  --rf-border2:      rgba(255,255,255,0.12);
  --rf-danger:       #e85040;
  --rf-danger-dim:   rgba(232,80,64,0.12);
  --rf-success:      #2db87a;
  --rf-success-dim:  rgba(45,184,122,0.12);
  --rf-input-bg:     #0a1424;
}

html {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--rf-navy) !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--rf-navy) !important;
  color: var(--rf-off);
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Page layout ── */
.rf-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(43,143,255,0.04) 0%, transparent 60%),
    var(--rf-navy);
}

.rf-auth-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* ── Logo / Brand ── */
.rf-auth-logo {
  text-align: center;
  margin-bottom: 36px;
}

.rf-auth-logo .rf-mark {
  display: inline-flex;
  text-decoration: none;
}

.rf-logo-img {
  height: 60px;
  width: auto;
  max-width: 260px;
  display: block;
  object-fit: contain;
}

/* ── Card container ── */
.rf-auth-box {
  background: var(--rf-navy2);
  border: 1px solid var(--rf-border2);
  border-radius: 12px;
  padding: 36px 32px;
}

.rf-auth-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--rf-accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.rf-auth-title {
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--rf-white);
  margin-bottom: 24px;
  line-height: 1.1;
}

.rf-auth-title em {
  font-style: italic;
  color: var(--rf-accent);
}

/* ── Alerts ── */
.rf-alert {
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.5;
  border-left: 3px solid;
}

.rf-alert-error {
  background: var(--rf-danger-dim);
  border-color: var(--rf-danger);
  color: #f09595;
}

.rf-alert-success {
  background: var(--rf-success-dim);
  border-color: var(--rf-success);
  color: #5dcaa5;
}

/* ── Form fields (auth forms only) ── */
.rf-auth-card .rf-field {
  margin-bottom: 18px;
}

.rf-auth-card .rf-field label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rf-muted);
  margin-bottom: 6px;
}

.rf-auth-card .rf-field input,
.rf-auth-card .rf-field select {
  display: block;
  width: 100%;
  background: var(--rf-input-bg);
  border: 1px solid var(--rf-border2);
  border-radius: 6px;
  padding: 11px 14px;
  color: var(--rf-off);
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.rf-auth-card .rf-field input:focus,
.rf-auth-card .rf-field select:focus {
  border-color: var(--rf-accent);
}

.rf-auth-card .rf-field input::placeholder {
  color: var(--rf-muted);
}

.rf-auth-card .rf-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7fa0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.rf-auth-card .rf-field select option {
  background: var(--rf-navy3);
  color: var(--rf-off);
}

.rf-auth-card .rf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 480px) {
  .rf-field-row {
    grid-template-columns: 1fr;
  }
}

/* ── Password hint ── */
.rf-field-hint {
  font-size: 11px;
  color: var(--rf-muted);
  margin-top: 5px;
}

/* ── Remember / Forgot row ── */
.rf-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.rf-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--rf-muted);
  cursor: pointer;
}

.rf-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--rf-accent);
  cursor: pointer;
}

.rf-forgot-link {
  font-size: 13px;
  color: var(--rf-accent);
  text-decoration: none;
}

.rf-forgot-link:hover {
  color: var(--rf-accent-light);
}

/* ── Submit button (auth forms only) ── */
.rf-auth-card .rf-btn-primary {
  display: block;
  width: 100%;
  background: var(--rf-accent) !important;
  color: var(--rf-navy) !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 13px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-bottom: 20px;
}

.rf-auth-card .rf-btn-primary:hover,
.rf-auth-card .rf-btn-primary:visited:hover {
  background: #b8923c !important;
  color: var(--rf-navy) !important;
}

.rf-auth-card .rf-btn-primary:active {
  transform: translateY(1px);
}

/* ── Footer link ── */
.rf-auth-footer {
  text-align: center;
  font-size: 13px;
  color: var(--rf-muted);
}

.rf-auth-footer a {
  color: var(--rf-accent);
  text-decoration: none;
  font-weight: 500;
}

.rf-auth-footer a:hover {
  color: var(--rf-accent-light);
}

/* ── Divider ── */
.rf-divider {
  height: 1px;
  background: var(--rf-border);
  margin: 22px 0;
}

/* ── Check email page ── */
.rf-check-email-icon {
  width: 56px;
  height: 56px;
  background: var(--rf-accent-dim);
  border: 1px solid var(--rf-accent-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 24px;
}

.rf-check-email-body {
  text-align: center;
  color: var(--rf-muted);
  font-size: 14px;
  line-height: 1.7;
}