/* ------------------------------------------------------------------ */
/*  LUSO KITCHEN — WOOCOMMERCE BLOCKS STYLESHEET                        */
/*  Loaded only on the cart and checkout pages (see functions.php).     */
/*  Depends on base.css and woocommerce.css.                            */
/*                                                                     */
/*  Section 13: block templates (Cart & Checkout blocks)               */
/*                                                                     */
/*  WooCommerce Blocks is a separate React-based system whose           */
/*  generated CSS draws borders with inset box-shadows and animates    */
/*  labels with transforms. Those cannot be beaten with plain          */
/*  specificity, hence the !important flags here — each rule below     */
/*  documents why it needs one.                                        */
/*                                                                     */
/*  Scope note: the quantity selector is deliberately NOT part of       */
/*  13.1/13.4 — its inner input must stay transparent inside the pill   */
/*  (see 13.5). It is excluded at the source (removed from the          */
/*  selector lists, :not() in the focus rule), so no rule in this       */
/*  file depends on file order to win.                                 */
/* ------------------------------------------------------------------ */


/* 13.1 Text inputs and textareas                                        */
/* Padding geometry: the field label is pinned at the top (13.3), so    */
/* the top padding reserves its space and the typed value sits below.   */
/* !important: required to remove the blocks' inset box-shadow border   */
/* and its own padding, which would otherwise clip the value.           */
.wp-block-woocommerce-cart input[type="text"],
.wp-block-woocommerce-cart input[type="email"],
.wp-block-woocommerce-cart input[type="tel"],
.wp-block-woocommerce-cart input[type="url"],
.wp-block-woocommerce-cart input[type="password"],
.wp-block-woocommerce-cart textarea,
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout input[type="url"],
.wp-block-woocommerce-checkout input[type="password"],
.wp-block-woocommerce-checkout textarea {
  border: 1px solid var(--contrast-3) !important;
  border-radius: 10px !important;
  padding: 26px 18px 10px !important;
  background-color: #ffffff !important;
  color: var(--contrast) !important;
  box-shadow: none !important;
}

/* 13.2 Selects                                                          */
/* Selects get their own geometry because they must differ from text    */
/* inputs: the selected value is vertically centered in the space       */
/* left below the pinned label. Math: label zone ends at ~20px from     */
/* the top (top 6px + 12px font at 1.2 line-height, see 13.3); with      */
/* 28px top / 8px bottom padding the value sits exactly midway in       */
/* that space, and 28 + 8 = 26 + 10 keeps the total field height        */
/* identical to the text inputs in 13.1.                                */
/* !important: same reason as 13.1 — blocks style selects with inset    */
/* box-shadow borders.                                                   */
.wp-block-woocommerce-cart select,
.wp-block-woocommerce-checkout select {
  border: 1px solid var(--contrast-3) !important;
  border-radius: 10px !important;
  padding: 28px 18px 8px !important;
  background-color: #ffffff !important;
  color: var(--contrast) !important;
  box-shadow: none !important;
}

/* 13.3 Field labels — pinned statically at the top                      */
/* The blocks animate labels with transforms (floating label pattern).   */
/* We pin them as small fixed captions instead, so they can never       */
/* overlap the value. !important: required to neutralize the blocks'    */
/* transform/position rules on the `.is-active` state.                   */
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  top: 6px !important;
  left: 18px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 500;
  color: var(--contrast-2) !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none;
}

/* 13.4 Focus states                                                     */
/* The quantity selector input is excluded via :not() so the pill's      */
/* inner input never gets a focus ring. !important: needed to replace    */
/* the blocks' own focus shadow.                                        */
.wp-block-woocommerce-cart input:focus:not(.wc-block-components-quantity-selector__input),
.wp-block-woocommerce-cart textarea:focus,
.wp-block-woocommerce-cart select:focus,
.wp-block-woocommerce-checkout input:focus:not(.wc-block-components-quantity-selector__input),
.wp-block-woocommerce-checkout textarea:focus,
.wp-block-woocommerce-checkout select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-ring) !important;
  outline: none !important;
}

/* 13.5 Quantity selector — inner input stays bare inside the pill        */
/* The pill container and its −/+ buttons keep their blocks styling;    */
/* only the inner input is reset so the number shows correctly.         */
/* No !important needed: every potential conflict was excluded at the    */
/* source (13.1, 13.4 and the global form rule in base.css, section 5),  */
/* so plain specificity settles it.                                     */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
  width: 3em;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Suppress the focus ring the global form rule (base.css, section 5)    */
/* would add                                                             */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input:focus {
  border: none;
  box-shadow: none;
}

/* Hide the native number spinners (the pill has its own −/+ buttons)    */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}