/*
 * RIDES SIGN-IN GATE (2026-10, branch feature/rides-gate)
 *
 * The card a logged-out visitor sees on every /fa/user_rides-* page (public_html/user/rides/dsp_signin_gate.php), in
 * place of the old generic "The following was found: This action requires you to be logged in" box. Hand-edited
 * directly; there is no LESS source. Everything is scoped to .rg-gate.
 *
 * Fonts (Bebas Neue + Outfit) come from the root lay_Default.php. Palette matches the rest of the 2026 rides pages
 * (rides-landing.css / ride.css): orange #F47B20, ink #1A1A1A, neutral gray surfaces.
 *
 * Link colours: thefoat-muted.css forces `a:not(<allowlist>) { color:#333 !important }`; `.rg-gate a` is in that
 * allowlist, and the !important colours below keep the buttons correct against any other site-wide link rule.
 */
.rg-gate {
  --orange: #F47B20;
  --orange-dark: #D96400;
  --ink: #1A1A1A;
  --muted: #6B6B6B;
  --border: #E5E5E5;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  max-width: 480px;
  margin: 44px auto 64px;
  padding: 0 16px;
  text-align: center;
  box-sizing: border-box;
}
.rg-gate * { box-sizing: border-box; }

.rg-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  padding: 34px 30px 26px;
}

.rg-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #F4F4F4;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.rg-card h1 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 400;
  text-transform: uppercase;
}

.rg-card .rg-lede {
  font-size: 16px;
  line-height: 1.55;
  color: #444;
  margin: 0 auto 20px;
  max-width: 380px;
}

.rg-perks {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 18px;
  text-align: left;
  display: grid;
  gap: 10px;
  background: #F7F7F7;
  border-radius: 10px;
}
.rg-perks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.4;
  color: #333;
  margin: 0;
}
.rg-perks svg {
  flex: 0 0 18px;
  margin-top: 1px;
  color: var(--orange);
}

.rg-btn {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none !important;
}
.rg-gate a.rg-btn-primary,
.rg-gate a.rg-btn-primary:link,
.rg-gate a.rg-btn-primary:visited {
  background: var(--orange);
  color: #fff !important;
  border: 2px solid var(--orange);
}
.rg-gate a.rg-btn-primary:hover,
.rg-gate a.rg-btn-primary:focus {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #fff !important;
}
.rg-gate a.rg-btn-secondary,
.rg-gate a.rg-btn-secondary:link,
.rg-gate a.rg-btn-secondary:visited {
  background: #fff;
  color: var(--ink) !important;
  border: 2px solid var(--ink);
  margin-top: 10px;
}
.rg-gate a.rg-btn-secondary:hover,
.rg-gate a.rg-btn-secondary:focus {
  background: #F4F4F4;
  color: var(--ink) !important;
}

.rg-note {
  font-size: 13px;
  color: var(--muted);
  margin: 16px 0 0;
}
.rg-note a {
  color: var(--ink) !important;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .rg-gate { margin: 28px auto 48px; }
  .rg-card { padding: 28px 20px 22px; }
  .rg-card h1 { font-size: 34px; }
}