/**
 * CSS for Dog Age Filter.
 */

/* Filter container styling */
.dog-age-filter-container {
  margin-bottom: 20px;
  width: 100%;
}

/* Filter label */
.dog-age-filter-container legend {
  font-weight: bold;
  color: #0078d7;
  margin-bottom: 10px;
  font-size: 16px;
  display: block;
}

/* Age filter radio buttons container */
.dog-age-filter-radios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/* Individual radio button container */
.dog-age-filter-radios .form-item,
.dog-age-filter-radios .form-type-radio {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}

/* Radio inputs - show default radio buttons */
.dog-age-filter-radios input[type="radio"] {
  margin: 0 5px 0 0;
}

/* Style for the radio button labels */
.dog-age-filter-radios label {
  margin: 0 15px 0 0 !important;
  font-size: 14px;
  cursor: pointer;
}

/* Title styling */
.dog-age-filter-container .fieldset-legend {
  color: #0078d7;
  font-weight: bold;
}
.bef-radios input[type="radio"]:checked + label,
.form-radios input[type="radio"]:checked + label {
  background-color: #0078d7;
  color: white;
}

/* Focus state for accessibility */
.dog-age-filter-container input[type="radio"]:focus + label,
.bef-radios input[type="radio"]:focus + label,
.form-radios input[type="radio"]:focus + label {
  outline: 2px solid rgba(0, 120, 215, 0.5);
  outline-offset: 2px;
}

/* Hide the default labels provided by Drupal */
.js-form-item-age label.form-label {
  display: none;
}

/* Simple responsive styling */
@media (max-width: 767px) {
  .dog-age-filter-radios {
    flex-direction: column;
    align-items: flex-start;
  }
}