/* ROAD SIGNAGE AFRICA — front-end components (welcome, registration, verification banner).
   Colours come from settings via inline :root vars (--rsa-accent, --rsa-ink). */

:root {
  --rsa-accent: #F2B705;
  --rsa-ink: #1C1F24;
  --rsa-ink-2: #2A2E35;
  --rsa-muted: #5B6270;
  --rsa-line: #E3E5E9;
  --rsa-bg: #F5F6F8;
  --rsa-card: #FFFFFF;
  --rsa-ok: #1F7A4D;
  --rsa-ok-bg: #E8F5EE;
  --rsa-err: #B42318;
  --rsa-err-bg: #FDECEA;
  --rsa-warn-bg: #FFF6D6;
  --rsa-radius: 14px;
  --rsa-font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.rsa-ui,
.rsa-ui *,
.rsa-ui *::before,
.rsa-ui *::after { box-sizing: border-box; }

.rsa-ui {
  font-family: var(--rsa-font);
  color: var(--rsa-ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.rsa-ui a { color: inherit; text-underline-offset: 3px; }
.rsa-ui h1, .rsa-ui h2, .rsa-ui h3 { font-family: var(--rsa-font); color: inherit; margin: 0; letter-spacing: -0.01em; }
.rsa-ui p { margin: 0 0 1em; }
.rsa-ui ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Welcome ---------- */

.rsa-welcome { display: grid; gap: 28px; margin: 0 auto 40px; max-width: 1200px; }

.rsa-hero {
  position: relative;
  overflow: hidden;
  background: var(--rsa-ink);
  color: #fff;
  border-radius: calc(var(--rsa-radius) + 6px);
  padding: 44px 40px 40px;
}
/* Hazard stripe + dashed road marking: a nod to the product without imagery. */
.rsa-hero::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 10px;
  background: repeating-linear-gradient(-45deg, var(--rsa-accent) 0 18px, var(--rsa-ink) 18px 36px);
}
.rsa-hero__road {
  position: absolute; left: 0; right: 0; bottom: 18px; height: 4px; opacity: .22;
  background: repeating-linear-gradient(90deg, #fff 0 46px, transparent 46px 82px);
  pointer-events: none;
}
.rsa-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 40px;
  align-items: start;
}
.rsa-hero__logo { display: block; max-height: 56px; width: auto; margin-bottom: 22px; }
.rsa-hero__brand {
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px;
  color: var(--rsa-accent); margin-bottom: 18px !important;
}
.rsa-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rsa-ink); background: var(--rsa-accent); padding: 4px 10px; border-radius: 999px;
  margin-bottom: 16px !important;
}
.rsa-hero__title { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; font-weight: 700; color: #fff; margin-bottom: 14px; }
.rsa-hero__lead { font-size: 17px; color: rgba(255, 255, 255, .78); max-width: 34em; margin-bottom: 28px !important; }

.rsa-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rsa-action {
  background: var(--rsa-ink-2);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--rsa-radius);
  transition: border-color .15s ease, transform .15s ease;
}
.rsa-action > .rsa-action__icon,
.rsa-action__link { display: flex; }
.rsa-action { display: flex; gap: 14px; padding: 16px; }
.rsa-action:has(.rsa-action__link) { padding: 0; }
.rsa-action__link { gap: 14px; padding: 16px; text-decoration: none; color: inherit; width: 100%; border-radius: inherit; }
.rsa-action:hover { border-color: var(--rsa-accent); }
.rsa-action__link:focus-visible { outline: 3px solid var(--rsa-accent); outline-offset: 2px; }
.rsa-action__icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--rsa-accent); color: var(--rsa-ink);
}
.rsa-action__body { display: grid; gap: 4px; }
.rsa-action__title { font-weight: 700; font-size: 14px; letter-spacing: .06em; color: #fff; }
.rsa-action__text { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); }

/* ---------- Auth card ---------- */

.rsa-auth { position: relative; }
.rsa-auth__card {
  background: var(--rsa-card);
  color: var(--rsa-ink);
  border-radius: var(--rsa-radius);
  padding: 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}
.rsa-auth__title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.rsa-auth__toggle { position: absolute; opacity: 0; pointer-events: none; }
.rsa-auth__tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--rsa-bg); padding: 4px; border-radius: 10px; margin-bottom: 20px;
}
.rsa-auth__tab {
  text-align: center; padding: 10px 8px; border-radius: 8px; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--rsa-muted); user-select: none;
}
.rsa-auth__toggle--reg:checked ~ .rsa-auth__card .rsa-auth__tab--reg,
.rsa-auth__toggle--login:checked ~ .rsa-auth__card .rsa-auth__tab--login {
  background: var(--rsa-card); color: var(--rsa-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.rsa-auth__toggle--reg:focus-visible ~ .rsa-auth__card .rsa-auth__tab--reg,
.rsa-auth__toggle--login:focus-visible ~ .rsa-auth__card .rsa-auth__tab--login { outline: 3px solid var(--rsa-accent); }
.rsa-auth__panel { display: none; }
.rsa-auth__toggle--reg:checked ~ .rsa-auth__card .rsa-auth__panel--reg,
.rsa-auth__toggle--login:checked ~ .rsa-auth__card .rsa-auth__panel--login { display: block; }

.rsa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rsa-field { margin-bottom: 14px; }
.rsa-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--rsa-ink); }
.rsa-optional { font-weight: 400; color: var(--rsa-muted); }
.rsa-ui input[type="text"],
.rsa-ui input[type="email"],
.rsa-ui input[type="tel"],
.rsa-ui input[type="password"],
.rsa-ui select {
  display: block; width: 100%; min-height: 46px;
  font: inherit; font-size: 15px; color: var(--rsa-ink);
  background: #fff; border: 1.5px solid var(--rsa-line); border-radius: 10px;
  padding: 10px 12px; margin: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rsa-ui input:focus, .rsa-ui select:focus {
  outline: none; border-color: var(--rsa-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsa-accent) 45%, transparent);
}
.rsa-ui [aria-invalid="true"] { border-color: var(--rsa-err); }
.rsa-field__hint { font-size: 12.5px; color: var(--rsa-muted); margin: 6px 0 0 !important; }
.rsa-field__error { font-size: 13px; color: var(--rsa-err); margin: 6px 0 0 !important; font-weight: 500; }

.rsa-checks { display: grid; gap: 10px; margin: 6px 0 20px; }
.rsa-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.rsa-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--rsa-ink); }
.rsa-check--optional { color: var(--rsa-muted); }
.rsa-check--inline { align-items: center; }
.rsa-auth__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 18px; font-size: 13.5px; flex-wrap: wrap; }
.rsa-auth__fine { font-size: 12.5px; color: var(--rsa-muted); margin: 12px 0 0 !important; text-align: center; }

.rsa-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Buttons & notices ---------- */

.rsa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; line-height: 1.2;
  transition: transform .1s ease, filter .15s ease;
}
.rsa-btn--primary { background: var(--rsa-accent); color: var(--rsa-ink) !important; }
.rsa-btn--primary:hover { filter: brightness(1.05); }
.rsa-btn:active { transform: translateY(1px); }
.rsa-btn:focus-visible { outline: 3px solid var(--rsa-ink); outline-offset: 2px; }
.rsa-btn--block { width: 100%; }

.rsa-notice { border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px !important; color: var(--rsa-ink); }
.rsa-notice--success { background: var(--rsa-ok-bg); color: var(--rsa-ok); }
.rsa-notice--error { background: var(--rsa-err-bg); color: var(--rsa-err); }
.rsa-notice--warn { background: var(--rsa-warn-bg); }
.rsa-notice a { font-weight: 600; }

/* ---------- Benefits & trust ---------- */

.rsa-section-title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; margin-bottom: 18px !important; }
.rsa-benefits { padding: 8px 4px 0; }
.rsa-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rsa-benefit {
  background: var(--rsa-card); border: 1px solid var(--rsa-line); border-radius: var(--rsa-radius);
  padding: 20px; position: relative;
}
.rsa-benefit__num {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--rsa-ink); border-bottom: 3px solid var(--rsa-accent); margin-bottom: 10px;
}
.rsa-benefit__title { font-size: 16px; font-weight: 600; margin-bottom: 6px !important; }
.rsa-benefit__text { font-size: 14px; color: var(--rsa-muted); margin: 0 !important; }

.rsa-trust {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px;
}
.rsa-trust > div { background: var(--rsa-bg); border-radius: var(--rsa-radius); padding: 22px; font-size: 14px; color: var(--rsa-muted); }
.rsa-trust__title { font-size: 16px; font-weight: 600; color: var(--rsa-ink); margin-bottom: 8px !important; }
.rsa-trust__phones { display: grid; gap: 4px; }
.rsa-trust__phones a { font-size: 18px; font-weight: 600; color: var(--rsa-ink); text-decoration: none; }
.rsa-trust p:last-child { margin-bottom: 0; }

/* ---------- Unverified banner ---------- */

.rsa-verify-banner {
  font-family: var(--rsa-font);
  background: var(--rsa-accent); color: var(--rsa-ink);
  font-size: 14px; line-height: 1.45; position: relative; z-index: 9999;
}
.rsa-verify-banner--fixed { position: fixed; left: 0; right: 0; bottom: 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, .15); }
.rsa-verify-banner__inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rsa-verify-banner__link { color: var(--rsa-ink); font-weight: 700; text-decoration: underline; margin-left: auto; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .rsa-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .rsa-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rsa-hero { padding: 34px 16px 30px; border-radius: var(--rsa-radius); }
  .rsa-actions, .rsa-benefits__grid, .rsa-trust, .rsa-grid-2 { grid-template-columns: 1fr; }
  .rsa-auth__card { padding: 20px 16px; }
  .rsa-verify-banner__link { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rsa-ui *, .rsa-btn { transition: none !important; }
}