/* kids-survey-theme-minimal-colorful.css
   Minimal, calm, but more colorful
*/

:root{
  /* Friendly colors */
  --brand: #4e7de1;              /* friendly blue */
  --brand-hover: #3f6ed6;
  --brand-soft: rgba(78, 125, 225, 0.08);

  --accent: #f2b66d;             /* soft apricot */
  --accent-soft: rgba(242, 182, 109, 0.18);

  --ink: #0f172a;
  --muted: #64748b;

  --surface: #ffffff;
  --bg: #f9fbff;                 /* slightly warmer */
  --line: rgba(15, 23, 42, 0.08);

  /* Bootstrap overrides */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);

  --bs-primary: var(--brand);
  --bs-primary-rgb: 78, 125, 225;

  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-hover);

  --bs-secondary: #64748b;
  --bs-focus-ring-color: rgba(78, 125, 225, 0.28);

  --radius: 14px;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: var(--bg);
  color: var(--ink);
}

.bg-light{ background: transparent !important; }

/* ---------- Navbar ---------- */
.navbar{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
}
.navbar .navbar-brand{
  font-weight: 600;
}
.navbar .bi{
  color: var(--brand);
}

/* ---------- Card ---------- */
.card{
  background: var(--surface);
  border: 0 !important;
  border-radius: var(--radius);
}
.card-body{
  border-radius: var(--radius);
}

.text-muted{
  color: var(--muted) !important;
}

/* ---------- Options ---------- */
label.border.rounded-3.p-3.bg-white{
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  cursor: pointer;
  transition: background 120ms ease, outline-color 120ms ease;
}

label.border.rounded-3.p-3.bg-white:hover{
  background: var(--brand-soft) !important;
  outline-color: rgba(78, 125, 225, 0.25);
}

/* Selected: color without loudness */
label.border.rounded-3.p-3.bg-white:has(input.form-check-input:checked){
  background: linear-gradient(
    90deg,
    var(--accent-soft),
    rgba(255,255,255,0.9)
  ) !important;
  outline-color: rgba(78, 125, 225, 0.4);
}

/* ---------- Radios ---------- */
.form-check-input{
  width: 1.05rem;
  height: 1.05rem;
  border-color: rgba(100, 116, 139, 0.45);
}
.form-check-input:checked{
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus{
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

/* ---------- Buttons ---------- */
.btn{
  border-radius: 999px;
  font-weight: 600;
  padding: 0.6rem 1.05rem;
  box-shadow: none !important;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Primary */
.btn-primary{
  background: var(--brand);
  border: none;
}
.btn-primary:hover{
  background: var(--brand-hover);
}
.btn-primary:active,
.btn-primary.active{
  background: #345fc2;
}

/* Secondary */
.btn-outline-secondary{
  border-color: rgba(100, 116, 139, 0.35);
  color: rgba(15, 23, 42, 0.75);
}
.btn-outline-secondary:hover{
  background: var(--brand-soft);
  border-color: rgba(78, 125, 225, 0.35);
  color: var(--ink);
}
.btn-outline-secondary:active{
  background: rgba(78, 125, 225, 0.15);
}

/* Danger */
.btn-outline-danger{
  border-color: rgba(239, 68, 68, 0.35);
}
.btn-outline-danger:hover{
  background: rgba(239, 68, 68, 0.08);
  color: rgba(15, 23, 42, 0.75);
}
.btn-outline-danger:active{
  background: rgba(239, 68, 68, 0.14);
}

/* ---------- HR ---------- */
hr{
  border-top: 1px solid var(--line);
  opacity: 1;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}