/**
 * @file
 * Styles for disabled category radio buttons and checkboxes.
 */

/* Style for disabled category options (both radio and checkbox) */
.disabled-category,
.geo-disabled-checkbox,
.geo-disabled-radio {
  opacity: 0.6;
  cursor: not-allowed !important;
  position: relative;
}

.disabled-category input[type="checkbox"]:disabled,
.disabled-category input[type="radio"]:disabled,
input.geo-disabled-checkbox[type="checkbox"]:disabled,
input.geo-disabled-radio[type="radio"]:disabled {
  cursor: not-allowed !important;
  pointer-events: none;
}

.disabled-category label,
input.geo-disabled-checkbox + label,
input.geo-disabled-radio + label {
  cursor: not-allowed !important;
  color: #999;
  pointer-events: none;
}

.disabled-category strong,
input.geo-disabled-checkbox + label strong,
input.geo-disabled-radio + label strong {
  color: #d32f2f;
  font-weight: bold;
  font-size: 0.9em;
}

/* Prevent pointer events on disabled items */
.disabled-category input[type="checkbox"]:disabled + label,
.disabled-category input[type="radio"]:disabled + label,
input.geo-disabled-checkbox:disabled + label,
input.geo-disabled-radio:disabled + label {
  pointer-events: none;
}

/* Add a strikethrough effect (optional) */
.disabled-category.strikethrough label {
  text-decoration: line-through;
}

/* Add a background tint to disabled items */
.disabled-category {
  background-color: #f5f5f5;
  padding: 5px;
  border-radius: 3px;
  margin-bottom: 5px;
}

/* Style for the entire form item containing disabled radio/checkbox */
.form-item:has(input.geo-disabled-checkbox:disabled),
.form-item:has(input.geo-disabled-radio:disabled),
.form-checkbox:has(input[disabled]),
.form-radio:has(input[disabled]),
.form-type-radio:has(input[disabled]),
.js-form-item:has(input[disabled]),
.js-form-type-radio:has(input[disabled]) {
  opacity: 0.6 !important;
  background-color: #f5f5f5;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Additional styling for webform radio buttons and checkboxes */
.webform-options-display-one-column .form-item:has(input:disabled),
.webform-options-display-buttons .form-item:has(input:disabled) {
  opacity: 0.6;
  background-color: #f5f5f5;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* Style for radio button labels that are disabled */
.form-type-radio input[type="radio"]:disabled + label,
.js-form-type-radio input[type="radio"]:disabled + label {
  color: #999 !important;
  cursor: not-allowed !important;
}