/* =========================================================================
   Checkout — WooCommerce Checkout block (wp:woocommerce/checkout)
   Styled in place to match design/pages/checkout.html. All block markup,
   hooks and nonces are preserved — this is a visual layer only.
   Structure: two columns. LEFT .wc-block-checkout__main = billing/contact/
   shipping/payment/terms/place-order; RIGHT .wc-block-checkout__sidebar =
   order summary. The block stacks these itself via a 700px container query.
   NOTE: the block keeps payment + terms + place-order in the LEFT column
   (the mockup groups them under the summary on the right); those blocks live
   in a locked template subtree, so they are styled in place, not relocated.
   ========================================================================= */

/* Native form-control accent (radios / checkboxes: payment, shipping, terms) */
.woocommerce-checkout .wc-block-checkout { accent-color:var(--red); }
:root[data-theme="dark"] .woocommerce-checkout .wc-block-checkout { accent-color:var(--red-on-dark); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .woocommerce-checkout .wc-block-checkout { accent-color:var(--red-on-dark); } }

/* Widen the summary column toward the mockup (harmless if not flexed) */
@media (min-width:1000px){
  .woocommerce-checkout .wc-block-checkout__sidebar { flex-basis:25rem; max-width:25rem; }
  .woocommerce-checkout .wc-block-checkout__main { min-width:0; }
}
/* hide the empty express-payment slot so it leaves no gap */
.wp-block-woocommerce-checkout-express-payment-block:empty { display:none; }

/* --- LEFT: billing details as a single panel --- */
.woocommerce-checkout .wc-block-checkout__main {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:var(--shadow-1); padding:0.375rem 1.625rem;
}
.woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-step {
  padding:1.5rem 0; margin:0; border-bottom:1px solid var(--line);
}
.woocommerce-checkout .wc-block-checkout__main > .wc-block-components-checkout-step:last-of-type,
.woocommerce-checkout .wc-block-checkout__main .wc-block-checkout__actions { border-bottom:0; }
.wc-block-components-checkout-step__title,
.woocommerce-checkout h2, .woocommerce-checkout h3 {
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; color:var(--ink);
}

.wc-block-checkout .wc-block-components-title.wc-block-components-checkout-step__title {
  margin:0; font-family:var(--font-display); font-weight:800; font-size:1.25rem;
  line-height:1.2; letter-spacing:-.015em; color:var(--ink);
}
.wc-block-components-checkout-step__description { color:var(--muted); font-size:0.84375rem; margin-top:0.25rem; }
.wc-block-checkout .wc-block-components-checkout-step__heading { margin:0 0 1.125rem; }

@media (min-width:700px){
  .wc-block-checkout .wc-block-checkout__sidebar { top:var(--sticky-top); }
}

/* --- Form fields (block floating-label inputs + classic fallbacks) --- */
.wc-block-components-text-input input, .wc-block-components-text-input textarea,
.wc-block-components-select select, .wc-block-components-country-input select, .wc-block-components-state-input select,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  background:var(--surface-2); border:1.5px solid var(--line-strong); border-radius:0.625rem; color:var(--ink);
  font-family:var(--font-body);
}
/* the checkout block ships stubborn white field backgrounds — force theme surfaces */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout .wc-block-components-select__container select,
.wc-block-checkout .wc-block-components-combobox input,
.wc-block-checkout input.wc-block-components-text-input,
.wc-block-checkout select {
  background-color:var(--surface-2) !important; color:var(--ink) !important; border-color:var(--line-strong) !important;
}
.wc-block-checkout .wc-block-components-text-input input::placeholder,
.wc-block-checkout .wc-block-components-combobox input::placeholder { color:var(--muted); }
.wc-block-components-text-input input:focus, .wc-block-components-text-input textarea:focus,
.wc-block-components-select select:focus,
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus {
  border-color:var(--red); box-shadow:0 0 0 3px var(--focus); background:var(--surface); outline:none;
}
:root[data-theme="dark"] .wc-block-components-text-input input:focus,
:root[data-theme="dark"] .wc-block-components-text-input textarea:focus,
:root[data-theme="dark"] .wc-block-components-select select:focus { border-color:var(--red-on-dark); }
.wc-block-components-text-input label { color:var(--muted); font-family:var(--font-body); }
.wc-block-components-text-input.is-active label { color:var(--red); }
:root[data-theme="dark"] .wc-block-components-text-input.is-active label { color:var(--red-on-dark); }
.wc-block-components-validation-error, .wc-block-components-validation-error>p { color:var(--red); }
:root[data-theme="dark"] .wc-block-components-validation-error, :root[data-theme="dark"] .wc-block-components-validation-error>p { color:var(--red-on-dark); }
/* Ship-to-different-address toggle + order-note textarea inherit field/checkbox styles above */

.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:var(--shadow-1); overflow:hidden; padding:0;
}
.wc-block-checkout .wc-block-components-order-summary,
.wc-block-checkout .wc-block-components-panel,
.wc-block-checkout .checkout-order-summary-block-fill {
  background:none; border:0; border-radius:0; box-shadow:none;
}
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
  border-top:1px solid var(--line); padding:0.875rem 0;
}
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:first-child,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block { border-top:0; }
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block { padding:0; border-bottom:0; }
.wc-block-checkout .wc-block-components-totals-wrapper:empty,
.wc-block-checkout .wc-block-components-totals-wrapper.slot-wrapper { display:none; }

.wc-block-checkout .wc-block-components-checkout-order-summary__title {
  margin:0; padding:1.25rem 1.25rem 1rem; border:0; border-bottom:1px solid var(--line); align-items:center;
}
.wc-block-checkout .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
  margin:0; font-family:var(--font-display); font-weight:800; font-size:1.25rem;
  line-height:1.2; letter-spacing:-.015em; color:var(--ink);
}
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-cart-items-block { padding-block:0.25rem; }
.wc-block-checkout .wc-block-components-order-summary,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item,
.wc-block-checkout .wc-block-components-totals-coupon { padding-inline:1.25rem; }

/* A line per product: picture, name and line total. The short description
   and the unit price repeat what the cart already showed and squeeze the name. */
.wc-block-checkout .wc-block-components-order-summary-item { padding:0.75rem 0; gap:0; }
.wc-block-checkout .wc-block-components-order-summary-item + .wc-block-components-order-summary-item { border-top:1px solid var(--line); }
.wc-block-checkout .wc-block-components-order-summary-item__description { padding:0 0.75rem 0 1rem; min-width:0; align-self:center; }
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
  font-family:var(--font-display); font-weight:600; font-size:0.875rem; line-height:1.3; color:var(--ink);
  overflow-wrap:normal; word-break:normal; hyphens:none;
}
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata,
.wc-block-checkout .wc-block-components-order-summary-item__individual-prices { display:none; }
.wc-block-checkout .wc-block-components-order-summary-item__total-price {
  align-self:center; font-family:var(--font-display); font-weight:700; font-size:0.9375rem; color:var(--ink); white-space:nowrap;
}
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
  background:var(--ink); color:var(--surface); border:0; box-shadow:0 0 0 2px var(--surface);
  font-family:var(--font-label); font-weight:600; font-size:0.6875rem; font-variant-numeric:tabular-nums;
}
.wc-block-components-order-summary-item__image img,
.wc-block-components-order-summary-item__image .wc-block-components-product-image { border-radius:0.75rem; border:1px solid var(--line); overflow:hidden; }

.wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-family:var(--font-display); font-weight:600; font-size:0.875rem; color:var(--ink);
}

/* Totals */
.wc-block-components-totals-item { font-size:0.90625rem; }
.wc-block-components-totals-item__label { color:var(--muted); }
.wc-block-components-totals-item__value, .order-total .amount {
  font-family:var(--font-display); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; color:var(--ink);
}

/* --- Payment methods --- */
.wc-block-components-radio-control__option {
  border:1.5px solid var(--line-strong); border-radius:var(--radius-m); margin-bottom:0.625rem; padding:0.8125rem 0.9375rem 0.8125rem 2.75rem;
}
.wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:checked) {
  border-color:var(--red); background:var(--tint);
}
:root[data-theme="dark"] .wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:checked) { border-color:var(--red-on-dark); }
.wc-block-components-radio-control__label { font-family:var(--font-display); font-weight:600; color:var(--ink); }
.wc-block-components-radio-control__description { color:var(--muted); font-size:0.8125rem; }

/* --- Terms + place order --- */
.wc-block-checkout__terms { color:var(--ink); font-size:0.84375rem; }
.wc-block-checkout__terms a { color:var(--red); font-weight:600; }
:root[data-theme="dark"] .wc-block-checkout__terms a { color:var(--red-on-dark); }
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions_row .wc-block-components-button {
  width:100%; justify-content:center; font-size:1rem; padding:0.9375rem 1.375rem;
}
.wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button { color:var(--muted); }

/* --- Small screens ---
   WooCommerce prints the summary twice here: collapsed at the top, in the
   sidebar, and in full before the button, inside the form card. The second is
   already inside a card, so it only gets a rule above it. */
.wc-block-checkout .checkout-order-summary-block-fill-wrapper {
  margin:0; padding:1.25rem 0 0; background:none; border:0; border-top:1px solid var(--line);
  border-radius:0; box-shadow:none;
}
.wc-block-checkout .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__heading { margin:0 0 0.25rem; }
.wc-block-checkout .checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary,
.wc-block-checkout .checkout-order-summary-block-fill-wrapper .wc-block-components-totals-item,
.wc-block-checkout .checkout-order-summary-block-fill-wrapper .wc-block-components-totals-coupon { padding-inline:0; }

@media (max-width:700px){
  .woocommerce-checkout .wc-block-checkout__main { padding:0.25rem 1.125rem; }
  .woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-step { padding:1.25rem 0; }
  .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { margin-bottom:1rem; }
  .wc-block-checkout .wc-block-components-checkout-order-summary__title { padding:0.9375rem 1.125rem; border-bottom:0; gap:0.75rem; }
  .wc-block-checkout .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
    font-size:1rem; font-weight:700; white-space:nowrap;
  }
  .wc-block-checkout .wc-block-components-title.wc-block-components-checkout-step__title { font-size:1.125rem; }
}