/* =============================================================================
   WooCommerce cart and checkout form controls

   Promoted out of a client override. Nothing here is about one shop: the cart
   and checkout blocks render the same markup on every site the theme ships to,
   and each rule below is a theme-or-plugin defect rather than a design choice.

   The selection colour is the contrast preset, so a styles/*.json variation
   carries these controls with it. Sizes stay literal — 18px is a control size,
   not a design token, and the accessible target is the label row the control
   sits in rather than the box itself.

   Loaded by yk_enqueue_woocommerce_styles() only when WooCommerce is active.
   ============================================================================= */

/*
 * The quantity stepper's field inherits the theme's 10px 20px input padding,
 * which is sized for a full-width text field and pushes the number out from
 * between the − and + buttons.
 */
.wc-block-cart-item__quantity
  input.wc-block-components-quantity-selector__input {
  padding: 5px 10px !important;
}

/* -----------------------------------------------------------------------
   Checkboxes and radios

   Drawn here rather than by the browser. appearance: none strips the native
   widget and the check glyph and radio dot below are painted as background
   images, which is what keeps them optically centred: WooCommerce's own check
   mark is an absolutely positioned SVG on a non-square "0 0 24 20" viewBox and
   sat about 3px off centre in the box.

   position is deliberately never touched. WooCommerce's block radios are
   placed with position: absolute, and changing it here breaks the shipping and
   payment option layout.
   ----------------------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;

  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;

  /*
   * Guards against a plugin sizing these as text fields. style.css already
   * excludes checkbox and radio from the theme's own input padding.
   */
  padding: 0 !important;
  /*
   * Literal, not a token: an unchecked control's boundary is what WCAG 1.4.11
   * measures, and #767676 is the lightest grey that still clears 3:1 against
   * white with room to spare (4.5:1). The muted tokens sit below that.
   */
  border: 1px solid #767676 !important;
  background-color: var(--wp--preset--color--base, #fff) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  box-shadow: none !important;

  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

input[type="checkbox"] {
  border-radius: 3px !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--wp--preset--color--contrast, #212121) !important;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--wp--preset--color--contrast, #212121) !important;
  outline-offset: 2px !important;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* WooCommerce's own off-centre check mark, replaced by the one below. */
.wc-block-components-checkbox__mark {
  display: none !important;
}

input[type="checkbox"]:checked {
  background-color: var(--wp--preset--color--contrast, #212121) !important;
  border-color: var(--wp--preset--color--contrast, #212121) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") !important;
  background-size: 13px 13px !important;
  background-position: center center !important;
}

input[type="checkbox"]:indeterminate {
  background-color: var(--wp--preset--color--contrast, #212121) !important;
  border-color: var(--wp--preset--color--contrast, #212121) !important;
  background-image: linear-gradient(#fff, #fff) !important;
  background-size: 9px 2px !important;
  background-position: center center !important;
}

/*
 * The radio dot is a radial-gradient rather than a pseudo-element, because
 * generated content is not rendered on a replaced element.
 */
input[type="radio"]:checked {
  border: 1.5px solid var(--wp--preset--color--contrast, #212121) !important;
  background-color: var(--wp--preset--color--base, #fff) !important;
  background-image: radial-gradient(
    circle at center,
    var(--wp--preset--color--contrast, #212121) 0 4.25px,
    transparent 4.75px
  ) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}

/* A label of two or more lines keeps its control on the first line. */
.wc-block-components-checkbox > label {
  position: relative;
  align-items: flex-start;
  gap: 12px;
}

.wc-block-components-checkbox__input[type="checkbox"] {
  margin: 2px 0 0 !important;
}

.wc-block-components-checkbox__label {
  line-height: 1.5;
}

/* -----------------------------------------------------------------------
   Shipping and payment options on a narrow viewport

   The option row lays the label and the amount out on one line with no
   min-width: 0 anywhere in the chain, so the flex items refuse to shrink below
   their content and the row overflows — measured at 385px of content in a
   345px box on a 400px screen, which cut the amount off. Letting the row wrap
   drops the amount onto its own line instead.
   ----------------------------------------------------------------------- */
@media (max-width: 600px) {
  .wc-block-components-radio-control__option-layout {
    min-width: 0 !important;
  }

  .wc-block-components-radio-control__label-group {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    row-gap: 2px;
  }

  .wc-block-components-radio-control__label {
    min-width: 0 !important;
  }

  .wc-block-components-radio-control__secondary-label {
    flex: 0 0 auto !important;
    white-space: nowrap;
    text-align: left !important;
  }
}