body {font-family:Helvetica,sans-serif;}
.intent-option { transition: all .15s ease; border-width: 2px; border-color: #dee1d9; background-color: #F7FAEF; }
.intent-option:hover { border-color: #8DC740; background-color: #F7FAEF; }

.option-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: .85rem 1rem;
  border: 2px solid #DCEAB9;
  border-radius: 2rem;
  background: #fff;
  cursor: pointer;
  transition: all .15s ease;
  margin-bottom: .6rem;
}
.option-btn:hover { border-color: #8DC740; background-color: #F7FAEF; }
.option-btn.selected { border-color: #0d3b66; background-color: #ebf9dd; font-weight: 600; }
.option-btn input { margin-right: .6rem; }
/* Radio buttons (single-select questions) are hidden — the whole
   button/label already shows selection clearly via .selected below
   (border, background, bold text), so the native radio circle is
   redundant and, on a touch device like an iPad, just adds visual
   clutter next to a label that's already the actual tap target.
   Checkboxes (multi-select questions) stay visible, since a checked/
   unchecked box is still the clearest way to show "more than one of
   these can be picked" — hiding those would remove real information,
   not just redundant decoration. A radio/checkbox hidden this way
   (rather than removed from the DOM) still toggles normally when its
   wrapping label is tapped — hiding it only affects how it looks, not
   whether it still works. */
.option-btn input[type="radio"] { display: none; }

.form-step { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }

.btn {border-radius:1rem;}
.btn:hover {color:#fff!important;}
.btn-link {--bs-btn-color:#2D353D;}

.btn.btn-outline-secondary:hover {color:#2D353D!important;}


.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {background-color:#ebf9dd;}
#formCard {border-radius: 2em;}

/* Change background and border color when checked */
.option-btn input:checked {
    background-color: #198754; /* Your custom color */
    border-color: #198754;     /* Match the border color */
}

/* Optional: Change the glow effect color when focused */
.option-btn input:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}