/* ==========================================================================
   Controles de formulario — Jomagrx
   Radio/checkbox cuadrados con check blanco sobre azul corporativo
   Uso global: class="weu-control" en input type="radio" o "checkbox"
   ========================================================================== */
:root {
  --weu-control-size: 18px;
  --weu-control-radius: 4px;
  --weu-control-border: rgba(0, 0, 0, 0.22);
  --weu-control-border-hover: rgba(0, 0, 0, 0.35);
}

.weu-control[type="radio"],
.weu-control[type="checkbox"],
#amazzing_filter .af-radio-label > input.af.radio,
#amazzing_filter .af-checkbox-label > input.af.checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  width: var(--weu-control-size);
  height: var(--weu-control-size);
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--weu-control-border);
  border-radius: var(--weu-control-radius);
  background-color: var(--weu-white);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition:
    background-color var(--weu-transition),
    border-color var(--weu-transition),
    box-shadow var(--weu-transition);
}

.weu-control[type="radio"]:hover,
.weu-control[type="checkbox"]:hover,
#amazzing_filter .af-radio-label > input.af.radio:hover,
#amazzing_filter .af-checkbox-label > input.af.checkbox:hover {
  border-color: var(--weu-control-border-hover);
}

.weu-control[type="radio"]:focus-visible,
.weu-control[type="checkbox"]:focus-visible,
#amazzing_filter .af-radio-label > input.af.radio:focus-visible,
#amazzing_filter .af-checkbox-label > input.af.checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--weu-color-blue-soft);
  border-color: var(--weu-color-blue);
}

.weu-control[type="radio"]:checked,
.weu-control[type="checkbox"]:checked,
#amazzing_filter .af-radio-label > input.af.radio:checked,
#amazzing_filter .af-checkbox-label > input.af.checkbox:checked {
  background-color: var(--weu-color-blue);
  border-color: var(--weu-color-blue);
}

.weu-control[type="radio"]:checked::after,
.weu-control[type="checkbox"]:checked::after,
#amazzing_filter .af-radio-label > input.af.radio:checked::after,
#amazzing_filter .af-checkbox-label > input.af.checkbox:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--weu-color-on-blue);
  -webkit-mask-image: url("../fonts/heroicons/check.svg");
  mask-image: url("../fonts/heroicons/check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 68% 68%;
  mask-size: 68% 68%;
}

.weu-control[type="radio"]:disabled,
.weu-control[type="checkbox"]:disabled,
#amazzing_filter .af-radio-label > input.af.radio:disabled,
#amazzing_filter .af-checkbox-label > input.af.checkbox:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}