/* ──────────────────────────────────────
   Custom Properties
   ────────────────────────────────────── */
:root {
  --brand:      #ce0b1e;
  --step-done:  #5c5765;
  --step-text:  #222;
  --navy:       #41444d;
  --form-color: #41444d;
}

/* ──────────────────────────────────────
   Global Helpers
   ────────────────────────────────────── */
.text-navy  { color: var(--navy) !important; }
.bg-navy    { background-color: var(--navy) !important; }
.btn-navy   { background-color: var(--navy); color: #fff; border: 2px solid var(--navy); transition: background .2s, box-shadow .2s, border-color .2s; }
.btn-navy:hover { background-color: #32353c; color: #fff; border-color: #32353c; }
.btn-navy:active { background-color: #282a2f; color: #fff; border-color: #282a2f; }
.btn-navy:focus-visible {
  background-color: var(--navy);
  color: #fff;
  outline: none !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy);
}

/* Back button (btn-link) */
.btn-link.text-navy { transition: color .2s, box-shadow .2s; }
.btn-link.text-navy:hover { color: #32353c !important; }
.btn-link.text-navy:active { color: #282a2f !important; }
.btn-link.text-navy:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy);
  border-radius: .375rem;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f4f6f9;
  color: var(--step-text);
}

/* ──────────────────────────────────────
   Accessibility
   ────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--brand);
  color: #fff;
  padding: 8px 16px;
  font-weight: 700;
  border-radius: 0 0 4px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}
*:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy);
}

/* ──────────────────────────────────────
   Form Controls
   ────────────────────────────────────── */
.form-control,
.form-select,
textarea.form-control {
  color: var(--form-color);
  border-color: var(--form-color);
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
.form-control:active,
.form-select:active,
textarea.form-control:active {
  color: var(--form-color);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy);
  outline: none;
}
.form-control:focus-visible,
.form-select:focus-visible,
textarea.form-control:focus-visible {
  outline: none !important;
}
.form-control::placeholder {
  color: rgba(65,68,77,.5);
}
.form-label {
  color: var(--form-color);
}
.input-group-text {
  color: var(--form-color);
  border-color: var(--form-color);
}

/* Checkboxes */
.form-check-input {
  border-color: var(--navy);
}
.form-check-input:checked {
  background-color: var(--navy);
  border-color: var(--navy);
}
.form-check-input:focus,
.form-check-input:focus-visible {
  border-color: var(--navy);
  outline: none !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy);
}

/* Links */
a {
  color: var(--navy);
  transition: color .2s;
}
a:hover {
  color: #32353c;
}
a:active {
  color: #282a2f;
}
a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy);
  border-radius: 2px;
}

/* ──────────────────────────────────────
   Spacing Utilities
   ────────────────────────────────────── */
.p-12 { padding: 12px !important; }
