/* fix old iOS checkbox & radio */

/* ── Flat size/layout rules: CSS Nesting not supported in Safari < 16.5 ── */

.checks.size-sm { width: 14px; height: 14px; margin-top: 4px; }
.checks.size-md { width: 16px; height: 16px; margin-top: 6px; }
.checks.size-lg { width: 20px; height: 20px; }

.checks:hover {
  border: 1px solid var(--brand-primary-blue-700-main);
}

.checks-host:focus-within .checks {
  box-shadow:
    0px 0px 0px 2px var(--brand-bw-white),
    0px 0px 0px 3px var(--Brand-Primary-Blue-500);
}

.radio.size-sm { width: 14px; min-width: 14px; --icon-size: 6px; }
.radio.size-md { width: 16px; min-width: 16px; --icon-size: 7px; }
.radio.size-lg { width: 20px; min-width: 20px; --icon-size: 10px; }

.radio:hover {
  border: 1px solid var(--brand-primary-blue-700-main);
}

.radio-host:focus-within .radio {
  box-shadow:
    0px 0px 0px 2px var(--brand-bw-white),
    0px 0px 0px 3px var(--Brand-Primary-Blue-500);
}

/* ── :has()-based states: Safari < 15.4; JS adds .is-checked / .is-disabled ── */
@supports not (selector(:has(*))) {
  /* checks-host gap (replicates :has(.size-sm) logic via JS-added .host-sm) */
  .checks-host { gap: 8px; }
  .checks-host.host-sm { gap: 6px; }

  .checks.is-checked {
    border: 1px solid var(--brand-primary-blue-700-main);
    background-color: var(--brand-primary-blue-700-main);
  }
  .checks.is-checked > .checks__icon {
    visibility: visible;
  }
  .checks.is-disabled {
    border: 1px solid var(--Brand-Gray-300);
    background-color: var(--Brand-Gray-50);
    cursor: default;
  }
  .checks.is-checked.is-disabled {
    border: 1px solid var(--Brand-Gray-300);
    background-color: var(--Brand-Gray-300);
  }

  .radio.is-checked {
    border: 1px solid var(--brand-primary-blue-700-main);
    --radio-icon-color: var(--brand-primary-blue-700-main);
  }
  .radio.is-checked > .radio__icon {
    display: block;
    visibility: visible;
  }
  .radio.is-disabled {
    border: 1px solid var(--Brand-Gray-300);
    background-color: var(--Brand-Gray-50);
    cursor: default;
    --radio-icon-color: var(--Brand-Gray-300);
  }
  .radio.is-checked.is-disabled {
    border: 1px solid var(--Brand-Gray-300);
    background-color: var(--Brand-Gray-50);
    --radio-icon-color: var(--Brand-Gray-300);
  }
}