/* Phase 7: Checkout page. WooCommerce Checkout Block (client-side,
   Store API driven) -- restyles its real, verified class names,
   extracted directly from the plugin own compiled
   wp-content/plugins/woocommerce/assets/client/blocks/checkout.css (not
   from memory or documentation) via descendant selectors only.
   Billing/shipping fields, validation, order review, shipping
   calculation, payment methods and checkout processing all remain 100%
   native WooCommerce. */

.wp-block-woocommerce-checkout {
  max-width: var(--ecl-container-width);
  margin-inline: auto;
  padding-inline: 32px;
  padding-block: 32px 56px;
  font-family: var(--ecl-font-secondary);
}
@media (max-width: 900px) {
  .wp-block-woocommerce-checkout { padding-inline: 16px; }
}

.wc-block-components-title {
  font-family: var(--ecl-font-primary);
  color: var(--ecl-ink);
}

/* Billing/shipping address form fields */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-blocks-components-select__select {
  border: 1px solid var(--ecl-border-gray);
  border-radius: 8px;
  font-family: var(--ecl-font-secondary);
  font-size: 13.5px;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  font-family: var(--ecl-font-secondary);
  color: var(--ecl-meta-gray);
}
.wc-block-components-checkbox input {
  accent-color: var(--ecl-navy);
}

/* Shipping method options -- styled defensively; no shipping zone is
   configured on this staging site yet, so this cannot be visually
   verified against real populated options -- see the Step verification
   report. */
.wc-block-checkout__shipping-method-option {
  border: 1px solid var(--ecl-hairline);
  border-radius: 10px;
}
.wc-block-checkout__shipping-method-option--selected {
  border-color: var(--ecl-navy);
}

/* Payment methods -- same caveat: no gateway is enabled yet. */
.wc-block-components-radio-control__option {
  border: 1px solid var(--ecl-hairline);
  border-radius: 10px;
}
.wc-block-components-radio-control__option-checked {
  border-color: var(--ecl-navy);
}

/* Order summary sidebar */
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-components-sidebar {
  background: var(--ecl-surface);
  border-radius: 14px;
  padding: 24px;
}
.wc-block-components-order-summary-item__quantity {
  color: var(--ecl-meta-gray);
}
.wc-block-components-totals-item__value {
  font-family: var(--ecl-font-secondary);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--ecl-font-primary);
  font-weight: 800;
  color: var(--ecl-navy);
}

/* Place order button */
.wc-block-components-checkout-place-order-button {
  border-radius: 999px;
  font-family: var(--ecl-font-primary);
  font-weight: 700;
}

/* Notices / validation errors */
.wc-block-components-notice-banner,
.wc-block-components-validation-error {
  border-radius: 10px;
  font-family: var(--ecl-font-secondary);
}

.wc-block-checkout__terms {
  font-size: 12.5px;
  color: var(--ecl-meta-gray);
}

/* Order received / thank-you page -- the one classic-template page in
   this phase (woocommerce/checkout/thankyou.php). Not part of the Block,
   styled separately below with our own ecl-order-received classes. */
.ecl-order-received {
  padding-block: 48px 64px;
  max-width: 620px;
}
.ecl-order-received .woocommerce-thankyou-order-received {
  font-family: var(--ecl-font-primary);
  font-size: 20px;
  font-weight: 700;
  color: var(--ecl-ink);
  background: var(--ecl-tint-navy);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 24px;
}
.ecl-order-received__summary {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ecl-hairline);
  border-radius: 12px;
  overflow: hidden;
}
.ecl-order-received__summary li {
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ecl-hairline);
  font-size: 14px;
}
.ecl-order-received__summary li:last-child { border-bottom: none; }
.ecl-order-received__label {
  color: var(--ecl-meta-gray);
}
.ecl-order-received__failed p {
  color: var(--ecl-sale-red);
}