/* ===== MainChick: WooCommerce Blocks radio / checkbox controls =====
   Woo Blocks renders real <input type=radio|checkbox>. Any min-height or pill
   border-radius on them turns them into tall white ovals - never style them
   with the generic text-input rules. */

body.mc-v2 input[type="radio"],
body.mc-v2 input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  width:20px!important; height:20px!important;
  min-height:0!important; max-height:20px!important;
  min-width:0!important; max-width:20px!important;
  flex:0 0 20px!important;
  margin:0 10px 0 0!important; padding:0!important;
  background:#fff!important;
  border:2px solid rgba(21,21,21,.28)!important;
  cursor:pointer; position:relative; vertical-align:middle;
  transition:border-color .15s ease, background .15s ease;
  box-shadow:none!important;
}
body.mc-v2 input[type="radio"]{ border-radius:50%!important; }
body.mc-v2 input[type="checkbox"]{ border-radius:6px!important; }

body.mc-v2 input[type="radio"]:hover,
body.mc-v2 input[type="checkbox"]:hover{ border-color:var(--mc-red)!important; }

/* checked states */
body.mc-v2 input[type="radio"]:checked{
  border-color:var(--mc-red)!important;
  background:#fff!important;
}
body.mc-v2 input[type="radio"]:checked::after{
  content:""; position:absolute; inset:3px;
  border-radius:50%; background:var(--mc-red);
}
body.mc-v2 input[type="checkbox"]:checked{
  background:var(--mc-red)!important; border-color:var(--mc-red)!important;
}
body.mc-v2 input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

body.mc-v2 input[type="radio"]:focus-visible,
body.mc-v2 input[type="checkbox"]:focus-visible{
  outline:2px solid var(--mc-red); outline-offset:2px;
}

/* Woo Blocks wraps these - stop its own faux control from doubling up */
body.mc-v2 .wc-block-components-radio-control__input,
body.mc-v2 .wc-block-components-checkbox__input{
  width:20px!important; height:20px!important; min-height:0!important;
}
body.mc-v2 .wc-block-components-radio-control__option{
  display:flex; align-items:center; gap:2px; padding:14px 16px!important;
}
body.mc-v2 .wc-block-components-radio-control-accordion-option,
body.mc-v2 .wc-block-components-radio-control__option{
  border-radius:12px;
}
body.mc-v2 .wc-block-components-checkbox__label{ font-size:14.5px; }

/* Row spacing so label sits on the control's line */
body.mc-v2 .wc-block-components-checkbox{ display:flex; align-items:center; }

/* Woo positions its radio with left:16px, assuming its own absolute layout.
   This theme re-lays the option out as flex with a 10px margin on the input,
   so Woo still nudges the input with left:16px on top of that - which pushed
   the control 16px right, straight into the label text. Neutralise the offset. */
body.mc-v2 .wc-block-components-radio-control__input{ left:auto!important; top:auto!important; }
body.mc-v2 .wc-block-components-radio-control__option-layout{ min-width:0; }
body.mc-v2 .wc-block-components-radio-control-accordion-option > label.wc-block-components-radio-control__option{
  display:flex; align-items:center; gap:2px;
}

/* The delivery day only applies to monthly plans. The field stays registered
   (so the value is always capturable) but is hidden unless the cart actually
   contains a monthly plan - body.mc-monthly-cart is added in PHP. */
body.woocommerce-checkout:not(.mc-monthly-cart) .wc-block-checkout__order-fields .wc-block-components-address-form{ display:none!important; }
