/*
 * Hospitality UI - premium checkbox and radio (owner request 2026-09-29), front office.
 * Same visual language as the back office (bo/12-choice.css) at a 20px size for touch: warm border, soft inner shadow,
 * teal fill with an animated white tick, animated radio dot, clear hover / focus / disabled / invalid states.
 * Two cases: native inputs (theme .not_uniform inputs, module forms) and the theme's uniform.js wrappers
 * (div.checker > span > input, div.radio > span > input; the input is transparent on top of the span).
 * Excluded: .hsp-native, Bootstrap button-group toggles, visually hidden inputs of chips/segments (they are clipped).
 *
 * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
 */

html.hsp-ui.hsp-ui-fo {
  --hsp-choice-size: 2rem;
  --hsp-choice-radius: 0.55rem;
  --hsp-choice-border: var(--hsp-color-border-control);
  --hsp-choice-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hsp-choice-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ native inputs */

html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"]):not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *) {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  inline-size: var(--hsp-choice-size);
  block-size: var(--hsp-choice-size);
  padding: 0;
  color: var(--hsp-color-on-action);
  background-color: var(--hsp-color-surface);
  border: 1.5px solid var(--hsp-choice-border);
  border-radius: var(--hsp-choice-radius);
  box-shadow: inset 0 1px 2px rgb(31 27 23 / 0.08);
  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color var(--hsp-dur-fast) var(--hsp-ease-standard),
    border-color var(--hsp-dur-fast) var(--hsp-ease-standard),
    box-shadow var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo input[type="radio"]:not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *) {
  border-radius: 50%;
}

html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"]):not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *)::before {
  content: "";
  display: block;
  inline-size: calc(var(--hsp-choice-size) - 0.6rem);
  block-size: calc(var(--hsp-choice-size) - 0.6rem);
  background-color: currentColor;
  -webkit-mask: var(--hsp-choice-tick) center / contain no-repeat;
  mask: var(--hsp-choice-tick) center / contain no-repeat;
  transform: scale(0);
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.hsp-ui.hsp-ui-fo input[type="radio"]:not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *)::before {
  inline-size: calc(var(--hsp-choice-size) * 0.44);
  block-size: calc(var(--hsp-choice-size) * 0.44);
  background-color: var(--hsp-color-action);
  border-radius: 50%;
  -webkit-mask: none;
  mask: none;
}

html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"]):not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *):not(:disabled):hover,
html.hsp-ui.hsp-ui-fo label:hover > input:is([type="checkbox"], [type="radio"]):not(.hsp-native):not([data-toggle="buttons"] *):not(:disabled) {
  border-color: var(--hsp-color-action);
  background-color: color-mix(in srgb, var(--hsp-color-action) 6%, var(--hsp-color-surface));
}

html.hsp-ui.hsp-ui-fo input[type="checkbox"]:not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *):is(:checked, :indeterminate) {
  background-color: var(--hsp-color-action);
  border-color: var(--hsp-color-action);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--hsp-color-action) 35%, transparent);
}

html.hsp-ui.hsp-ui-fo input[type="radio"]:not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *):checked {
  border-color: var(--hsp-color-action);
  background-color: var(--hsp-color-surface);
}

html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"]):not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *):checked::before {
  transform: scale(1);
}

html.hsp-ui.hsp-ui-fo input[type="checkbox"]:not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *):indeterminate::before {
  -webkit-mask-image: var(--hsp-choice-dash);
  mask-image: var(--hsp-choice-dash);
  transform: scale(1);
}

html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"]):not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"]):not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *):disabled {
  background-color: var(--hsp-color-surface-muted);
  border-color: color-mix(in srgb, var(--hsp-choice-border) 45%, transparent);
  box-shadow: none;
  cursor: not-allowed;
}

html.hsp-ui.hsp-ui-fo input[type="checkbox"]:not(.hsp-native):not([data-toggle="buttons"] *):not(:is(div.checker, div.radio) *):disabled:is(:checked, :indeterminate) {
  background-color: var(--hsp-color-text-disabled);
  border-color: var(--hsp-color-text-disabled);
}

html.hsp-ui.hsp-ui-fo :is(.has-error, .form-error) input:is([type="checkbox"], [type="radio"]):not(.hsp-native):not(:checked),
html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"])[aria-invalid="true"]:not(.hsp-native):not(:checked) {
  border-color: var(--hsp-color-border-error);
}

/* ------------------------------------------------------------------ uniform.js wrappers: same look on the span */

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio) {
  inline-size: var(--hsp-choice-size);
  block-size: var(--hsp-choice-size);
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio) span {
  display: inline-grid;
  place-content: center;
  inline-size: var(--hsp-choice-size);
  block-size: var(--hsp-choice-size);
  background-color: var(--hsp-color-surface);
  border: 1.5px solid var(--hsp-choice-border);
  border-radius: var(--hsp-choice-radius);
  box-shadow: inset 0 1px 2px rgb(31 27 23 / 0.08);
}

html.hsp-ui.hsp-ui-fo div.radio span {
  border-radius: 50%;
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio) span::before {
  content: "";
  display: block;
  inline-size: calc(var(--hsp-choice-size) - 0.6rem);
  block-size: calc(var(--hsp-choice-size) - 0.6rem);
  margin: 0;
  background-color: var(--hsp-color-on-action);
  border: 0;
  -webkit-mask: var(--hsp-choice-tick) center / contain no-repeat;
  mask: var(--hsp-choice-tick) center / contain no-repeat;
  transform: scale(0);
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.hsp-ui.hsp-ui-fo div.radio span::before {
  inline-size: calc(var(--hsp-choice-size) * 0.44);
  block-size: calc(var(--hsp-choice-size) * 0.44);
  background-color: var(--hsp-color-action);
  border-radius: 50%;
  -webkit-mask: none;
  mask: none;
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio).hover span {
  border-color: var(--hsp-color-action);
  background-color: color-mix(in srgb, var(--hsp-color-action) 6%, var(--hsp-color-surface));
}

html.hsp-ui.hsp-ui-fo div.checker span.checked {
  background-color: var(--hsp-color-action);
  border-color: var(--hsp-color-action);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--hsp-color-action) 35%, transparent);
}

html.hsp-ui.hsp-ui-fo div.checker span.checked::before {
  inline-size: calc(var(--hsp-choice-size) - 0.6rem); /* 10-components drew a 6x11px rotated-border tick */
  block-size: calc(var(--hsp-choice-size) - 0.6rem);
  margin: 0;
  border: 0;
  transform: scale(1);
}

html.hsp-ui.hsp-ui-fo div.radio span.checked {
  background-color: var(--hsp-color-surface);
  border-color: var(--hsp-color-action);
  border-width: 1.5px;
}

html.hsp-ui.hsp-ui-fo div.radio span.checked::before {
  transform: scale(1);
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio).focus span {
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio).disabled span {
  background-color: var(--hsp-color-surface-muted);
  border-color: color-mix(in srgb, var(--hsp-choice-border) 45%, transparent);
  box-shadow: none;
}

/* ------------------------------------------------------------------ labels */

html.hsp-ui.hsp-ui-fo :is(.checkbox, .radio) label,
html.hsp-ui.hsp-ui-fo :is(.checkbox-inline, .radio-inline) {
  align-items: center;
  gap: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo label:has(> input[type="radio"]:checked):not(.btn) {
  color: var(--hsp-color-text-strong);
}

@media (prefers-reduced-motion: reduce) {
  html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"]),
  html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"])::before,
  html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio) span::before {
    transition: none;
  }
}

@media (forced-colors: active) {
  html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"]) {
    -webkit-appearance: auto;
    appearance: auto;
  }

  html.hsp-ui.hsp-ui-fo input:is([type="checkbox"], [type="radio"])::before {
    display: none;
  }
}