/* Krótki checkout mobile-first dla makiety i klasycznego WooCommerce. */

.demo-checkout__header {
  display: flex;
  width: 100%;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
}

.demo-checkout__header > div { display: grid; max-width: 48rem; gap: var(--space-3); }
.demo-checkout__header p { margin: 0; }
.demo-error-summary { width: 100%; }
.demo-error-summary ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); }

.demo-checkout { display: grid; align-items: start; gap: var(--space-5); }
.demo-checkout__fields { display: grid; min-width: 0; gap: var(--space-4); }
.demo-checkout__section { min-width: 0; margin: 0; padding: var(--space-5); }
.demo-checkout__section legend {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 0 var(--space-4);
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.demo-checkout__section legend span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}

.demo-checkout__section > .field + .field,
.demo-checkout__section > .field + .demo-checkout__row,
.demo-checkout__section > .demo-checkout__row + .choice-group,
.demo-checkout__section > .choice-group + .field,
.demo-checkout__section > .choice-group + .field__help { margin-top: var(--space-4); }
.demo-checkout__row { display: grid; gap: var(--space-4); }
.choice-group { display: grid; gap: var(--space-3); }
.choice-card {
  display: grid;
  min-height: var(--control-min-size);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-3);
}

.choice-card:has(input:checked) { border-color: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand); }
.choice-card input,
.check-row input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-brand); }
.choice-card span { display: grid; }
.choice-card small { color: var(--color-text-muted); }
.check-row { display: grid; align-items: start; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-3); }
.check-row.has-error { color: var(--color-error); font-weight: 700; }
.demo-checkout__invoice summary { min-height: var(--control-min-size); font-weight: 800; cursor: pointer; }
.demo-checkout__invoice[open] summary { margin-bottom: var(--space-4); }
.demo-checkout__invoice .check-row { margin-bottom: var(--space-4); }

.demo-checkout__summary { display: grid; padding: var(--space-5); gap: var(--space-5); }
.demo-checkout__summary h2 { font-size: clamp(1.65rem, 8vw, 2.35rem); }
.demo-summary-product { display: grid; align-items: center; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--space-3); }
.demo-summary-product img { width: 4rem; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-surface-muted); object-fit: cover; }
.demo-summary-product div { display: grid; }
.demo-summary-product small { color: var(--color-text-muted); }
.demo-summary-product > span { font-weight: 800; white-space: nowrap; }
.demo-summary-totals { display: grid; margin: 0; gap: var(--space-2); }
.demo-summary-totals div { display: flex; justify-content: space-between; gap: var(--space-4); }
.demo-summary-totals div:last-child { padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--font-size-lg); font-weight: 800; }
.demo-summary-totals dd { margin: 0; }
.demo-checkout__agreements { display: grid; gap: var(--space-3); }
.demo-checkout__summary .button { width: 100%; }
.demo-checkout__safe-submit { margin: calc(-1 * var(--space-3)) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }
.demo-confirmation__next { display: grid; padding: var(--space-5); gap: var(--space-3); }
.demo-confirmation__next h2 { font-size: var(--font-size-lg); }
.demo-confirmation__next p { margin: 0; }

/* Klasyczny checkout WooCommerce pozostaje źródłem prawdziwego zamówienia. */
.woocommerce-checkout .shop-content > .woocommerce { display: grid; gap: var(--space-5); }
.woocommerce-checkout form.checkout { display: grid; align-items: start; gap: var(--space-5); }
.woocommerce-checkout form.checkout .col2-set,
.woocommerce-checkout form.checkout #order_review {
  width: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout form.checkout .form-row { margin-bottom: var(--space-4); }
.woocommerce-checkout form.checkout .form-row-first,
.woocommerce-checkout form.checkout .form-row-last { width: 100%; float: none; }
.woocommerce-checkout form.checkout h3 { margin: 0 0 var(--space-4); font-size: clamp(1.65rem, 7vw, 2.35rem); }
.woocommerce-checkout form.checkout #order_review_heading { margin-top: var(--space-5); }
.woocommerce-checkout table.shop_table { border-color: var(--color-border); border-collapse: collapse; }
.woocommerce-checkout #payment { background: var(--color-surface-muted); }
.woocommerce-checkout #payment div.payment_box { background: var(--color-info-surface); color: var(--color-info); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--color-info-surface); }
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment div.form-row { padding: var(--space-4); }
.woocommerce-checkout #place_order { width: 100%; }

@media (min-width: 45rem) {
  .demo-checkout__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-checkout__row--address { grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr); }
  .choice-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-group > .field__label,
  .choice-group > .field__error { grid-column: 1 / -1; }
  .woocommerce-checkout form.checkout .form-row-first,
  .woocommerce-checkout form.checkout .form-row-last { width: 48%; }
}

@media (min-width: 64rem) {
  .demo-checkout { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); }
  .demo-checkout__summary { position: sticky; top: 5.5rem; }
  .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.72fr); }
  .woocommerce-checkout form.checkout #order_review_heading { margin: 0; grid-column: 2; grid-row: 1; }
  .woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2 / span 2; }
  .woocommerce-checkout form.checkout .col2-set { grid-column: 1; grid-row: 1 / span 3; }
}