/* ============================================================================
 * form-checkboxes.css
 * ----------------------------------------------------------------------------
 * Forcibly fixes radio button and checkbox rendering on survey forms.
 *
 * Override approach: this file is loaded AFTER style.css in _header.php, and
 * uses !important on key rules to defeat any earlier "width: 100%" rules
 * applying to all .stv-form inputs.
 *
 * Place at: public_html/assets/css/form-checkboxes.css
 * Then add this line to _header.php after the existing style.css <link>:
 *   <link rel="stylesheet" href="/assets/css/form-checkboxes.css">
 * ============================================================================ */

/* Wipe out the inherited "make all inputs full-width pills" treatment for
   radios and checkboxes specifically. */
.stv-form input[type="radio"],
.stv-form input[type="checkbox"],
.stv-form .form-check-input {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  margin: 0 12px 0 0 !important;
  border: 3px solid #555 !important;
  background-color: #fff !important;
  cursor: pointer;
  flex-shrink: 0 !important;
  vertical-align: middle;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 70% 70% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* Round shape for radio buttons */
.stv-form input[type="radio"],
.stv-form .form-check-input[type="radio"] {
  border-radius: 50% !important;
}

/* Square shape (slightly rounded) for checkboxes */
.stv-form input[type="checkbox"],
.stv-form .form-check-input[type="checkbox"] {
  border-radius: 5px !important;
}

/* Hover — slight emphasis */
.stv-form input[type="radio"]:hover,
.stv-form input[type="checkbox"]:hover,
.stv-form .form-check-input:hover {
  border-color: #b32121 !important;
  box-shadow: 0 0 0 4px rgba(179, 33, 33, 0.10) !important;
}

/* Checked — solid red fill */
.stv-form input[type="radio"]:checked,
.stv-form input[type="checkbox"]:checked,
.stv-form .form-check-input:checked {
  background-color: #b32121 !important;
  border-color: #b32121 !important;
}

/* Radio: white dot inside the filled red circle when checked */
.stv-form input[type="radio"]:checked,
.stv-form .form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='3.5' fill='%23fff' cx='8' cy='8'/%3e%3c/svg%3e") !important;
}

/* Checkbox: white checkmark inside the filled red square when checked */
.stv-form input[type="checkbox"]:checked,
.stv-form .form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M3 8l3.5 3.5L13 5'/%3e%3c/svg%3e") !important;
}

/* Focus ring for keyboard users */
.stv-form input[type="radio"]:focus,
.stv-form input[type="checkbox"]:focus,
.stv-form .form-check-input:focus,
.stv-form input[type="radio"]:focus-visible,
.stv-form input[type="checkbox"]:focus-visible,
.stv-form .form-check-input:focus-visible {
  outline: 3px solid rgba(179, 33, 33, 0.5) !important;
  outline-offset: 2px !important;
  border-color: #b32121 !important;
}

/* Make the row layout sane and the labels easy to click */
.stv-form .form-check {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
}

.stv-form .form-check:hover {
  background-color: rgba(179, 33, 33, 0.04);
}

.stv-form .form-check-label {
  cursor: pointer;
  margin-bottom: 0 !important;
  font-size: 1rem;
  line-height: 1.4;
  flex-grow: 1;
}