/* ========================================================================== */
/*  Checkbox Component (reusable)                                            */
/* ========================================================================== */

:where(.woocommerce, .wc-block-components-checkbox, .wbc-checkbox){
  --wbc-checkbox-size: 20px;
  --wbc-checkbox-radius: 6px;
  --wbc-checkbox-border: color-mix(in srgb, var(--text) 18%, var(--bg) 82%);
  --wbc-checkbox-bg: var(--surface);
  --wbc-checkbox-accent: var(--accent);
}

/* Base checkbox input styling (no tick, filled state) */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox],
.woocommerce form .input-checkbox,
.woocommerce .woocommerce-form__input-checkbox.input-checkbox,
.wbc-checkbox__input[type=checkbox]{
  width:var(--wbc-checkbox-size);
  height:var(--wbc-checkbox-size);
  min-width:var(--wbc-checkbox-size);
  appearance:none;
  -webkit-appearance:none;
  background-image:none;
  border-radius:var(--wbc-checkbox-radius);
  border:2px solid var(--wbc-checkbox-border);
  background:var(--wbc-checkbox-bg);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
  display:inline-grid;
  place-content:center;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]::before,
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]::after,
.woocommerce form .input-checkbox::before,
.woocommerce form .input-checkbox::after,
.woocommerce .woocommerce-form__input-checkbox.input-checkbox::before,
.woocommerce .woocommerce-form__input-checkbox.input-checkbox::after,
.wbc-checkbox__input[type=checkbox]::before,
.wbc-checkbox__input[type=checkbox]::after{
  content:none !important;
  display:none !important;
  background-image:none !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked,
.woocommerce form .input-checkbox:checked,
.woocommerce .woocommerce-form__input-checkbox.input-checkbox:checked,
.wbc-checkbox__input[type=checkbox]:checked{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--wbc-checkbox-accent) 80%, #fff 20%),
    color-mix(in srgb, var(--wbc-checkbox-accent) 65%, #000 35%)
  );
  border-color:color-mix(in srgb, var(--wbc-checkbox-accent) 70%, var(--bg) 30%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--wbc-checkbox-accent) 25%, transparent);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus,
.woocommerce form .input-checkbox:focus,
.woocommerce .woocommerce-form__input-checkbox.input-checkbox:focus,
.wbc-checkbox__input[type=checkbox]:focus{
  outline:2px solid color-mix(in srgb, var(--wbc-checkbox-accent) 60%, var(--bg) 40%);
  outline-offset:2px;
}

/* Woo Blocks checkmark element (hide) */
.wc-block-components-checkbox .wc-block-components-checkbox__mark{
  display:none;
}

/* Optional standalone checkbox layout */
.wbc-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
}

.wbc-checkbox__label{
  font-weight:600;
}