/* One storefront checkbox drawing; native fields retain validation and form semantics. */
:root {
  --ode-check-size: 18px;
  --ode-check-border: #999;
  --ode-check-ink: #121212;
  --ode-check-focus: #0d8b6d;
  --ode-check-status-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%230d8066%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3.5%208%203%203%206-6%22%2F%3E%3C%2Fsvg%3E");
  --ode-check-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3.5%208%203%203%206-6%22%2F%3E%3C%2Fsvg%3E");
}

/* !important neutralizes old hidden/decorated inputs and native appearance overrides. */
body input[type="checkbox"]:not(:where(.order-roll input, [role="switch"], [hidden])) {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  flex: 0 0 var(--ode-check-size) !important;
  width: var(--ode-check-size) !important;
  height: var(--ode-check-size) !important;
  min-width: var(--ode-check-size) !important;
  min-height: var(--ode-check-size) !important;
  max-width: var(--ode-check-size) !important;
  max-height: var(--ode-check-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ode-check-border) !important;
  border-radius: 2px !important;
  background: #fff center / contain no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
  vertical-align: middle;
  cursor: pointer;
  font: inherit;
}
body input[type="checkbox"]:not(:where(.order-roll input, [role="switch"])):checked,
body input[type="checkbox"]:not(:where(.order-roll input, [role="switch"])):indeterminate {
  border-color: var(--ode-check-ink) !important;
  background-color: var(--ode-check-ink) !important;
  background-image: var(--ode-check-image) !important;
}
body input[type="checkbox"]:not(:where(.order-roll input, [role="switch"])):indeterminate {
  background-image: linear-gradient(#fff, #fff) !important;
  background-size: 9px 2px !important;
}
body input[type="checkbox"]:not(:where(.order-roll input, [role="switch"])):disabled {
  opacity: .4 !important;
  cursor: not-allowed;
}
/* Avoid fading a disabled square twice inside filter labels. */
body .vc-option:has(input:disabled) { opacity: 1; }
body .vc-option:has(input:disabled) > :not(input) { opacity: .4; }
body input[type="checkbox"]:not(:where(.order-roll input, [role="switch"])):not(:disabled):not(:checked):hover {
  border-color: var(--ode-check-focus) !important;
}
body input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ode-check-focus) !important;
  outline-offset: 3px !important;
}
/* Decorations are retired only where a real checkbox provides the visible square. */
body input[type="checkbox"] ~ :is(.order-consent__decor, .order-profile-sync__decor, .profile-block__checkbox-decor) {
  display: none !important;
}
body :is(.order-consent, .order-profile-sync, .profile-block__checkbox, .phone-auth-check, .profile-editor__house) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  cursor: pointer;
}
body :is(.order-consent, .order-profile-sync, .profile-block__checkbox, .phone-auth-check, .profile-editor__house) > input[type="checkbox"] {
  margin-block-start: max(0px, calc((1lh - var(--ode-check-size)) / 2)) !important;
}
body :is(.checkbox-inline, .checkbox > label, .ode-checkbox) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}
/* Multiple survey answers retain their chip layout with a visible shared checkbox. */
.ode-answer-options label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #d0d9ce;
}
.ode-answer-options label:has(input[type="checkbox"]:checked) {
  background: #e4eee0;
  border-color: #5c8e70;
  color: #174f33;
}
.ode-answer-options input[type="checkbox"] + span {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow-wrap: anywhere;
}
/* Link-based availability filter shares the native checkbox geometry and image. */
.vc-stock > span {
  position: relative;
  box-sizing: border-box;
  width: var(--ode-check-size);
  height: var(--ode-check-size);
  flex: 0 0 var(--ode-check-size);
  border: 1px solid var(--ode-check-border);
  border-radius: 2px;
  background: #fff;
}
.vc-stock[aria-checked="true"] > span {
  background-color: var(--ode-check-ink);
  border-color: var(--ode-check-ink);
}
.vc-stock[aria-checked="true"] > span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ode-check-image) center / contain no-repeat;
}
/* Completion/status marks use the same vector, tinted by their existing text color. */
body .profile-editor__verified::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: var(--ode-check-image) center / contain no-repeat;
  mask: var(--ode-check-image) center / contain no-repeat;
}
.oj-step-tabs .is-done > span,
.product-stats .product-stats__row-vote[aria-pressed="true"] {
  position: relative;
  font-size: 0;
}
.oj-step-tabs .is-done > span::after,
.product-stats .product-stats__row-vote[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  -webkit-mask: var(--ode-check-image) center / contain no-repeat;
  mask: var(--ode-check-image) center / contain no-repeat;
}
/* Legacy feedback fallback uses the same path; loading/error symbols remain distinct. */
body .product-stats-status[data-state="success"]::before {
  content: '';
  background: #e8f4ef var(--ode-check-status-image) center / 18px 18px no-repeat;
}
/* Newsletter switches keep their pill shape and gain keyboard-visible focus. */
body .order-roll > input[type="checkbox"] {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  clip-path: inset(50%);
}
.order-roll input:focus-visible ~ .order-roll__decor {
  outline: 2px solid var(--ode-check-focus);
  outline-offset: 3px;
}
.order-roll:has(input:disabled) {
  opacity: .4;
  cursor: not-allowed;
}
@media (forced-colors: active) {
  body input[type="checkbox"]:not(:where(.order-roll input, [role="switch"], [hidden])),
  body input[type="checkbox"]:not(:where(.order-roll input, [role="switch"], [hidden])):is(:checked, :indeterminate) {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background: none !important;
    border-color: CanvasText !important;
    accent-color: Highlight;
  }
  .vc-stock > span { border-color: CanvasText; background: Canvas; }
  .vc-stock[aria-checked="true"] > span {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
  }
}