/* ============================================================
   E-Stile Roma — checkout.css
   Stili per carrello a pagina intera, checkout e conferma ordine.
   Riusa i token di base.css e i componenti .cart-line di sections.css.
   ============================================================ */

.checkout-page {
  padding-top: clamp(96px, 13vh, 150px);
  padding-bottom: var(--section-gap);
}
.checkout-page__title { margin-bottom: var(--s6); }

/* ---------- Carrello a pagina intera ---------- */
.cart-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  align-items: start;
}
@media (min-width: 900px) {
  .cart-page { grid-template-columns: 1.6fr 1fr; }
}
.cart-page__list { display: flex; flex-direction: column; gap: var(--s4); }
.cart-page__row {
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: var(--s4);
  background: var(--surface);
}
.cart-page__row .cart-line__img { width: 96px; height: 96px; }
.cart-page__row .cart-line__name a { transition: color 0.25s var(--ease-out); }
.cart-page__row .cart-line__name a:hover { color: var(--accent); }
.cart-page__empty { text-align: center; padding-block: var(--s8); color: var(--muted); }
.cart-page__empty .btn { display: inline-block; margin-top: var(--s5); }

/* ---------- Riepilogo ordine (riusato in carrello e checkout) ---------- */
.cart-summary {
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: var(--s5);
  background: var(--surface);
}
@media (min-width: 900px) {
  .cart-summary { position: sticky; top: clamp(96px, 12vh, 130px); }
}
.cart-summary__row { display: flex; justify-content: space-between; margin-top: var(--s3); font-size: 0.92rem; }
.cart-summary__row.total {
  font-weight: 700; font-size: 1.1rem;
  border-top: 1px solid var(--hair); padding-top: var(--s3); margin-top: var(--s4);
}
.cart-summary .cart-summary__cta { display: block; width: 100%; text-align: center; margin-top: var(--s5); }
.cart-summary .cart-drawer__note { text-align: left; margin-top: var(--s4); }

/* ---------- Checkout ---------- */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  align-items: start;
}
@media (min-width: 900px) {
  .checkout-grid { grid-template-columns: 1.5fr 1fr; }
}

.checkout-form__section {
  border: 0; border-top: 1px solid var(--hair);
  padding-top: var(--s5); margin-bottom: var(--s5);
}
.checkout-form__section:first-child { border-top: 0; padding-top: 0; }
.checkout-form__section legend {
  font-family: var(--body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  padding: 0; margin-bottom: var(--s4);
}

.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; margin-bottom: var(--s3); }
.field span { color: var(--muted); }
.field input, .field select {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-input);
  background: var(--bg);
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}
.field input:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field-row .field--sm { grid-column: span 1; }
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}

.pay-options { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); }
.pay-option {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--hair-strong); border-radius: var(--r-card);
  font-size: 0.92rem; cursor: pointer;
  transition: border-color 0.25s ease;
}
.pay-option:has(input:checked) { border-color: var(--accent); }
.pay-option input { accent-color: var(--accent); }

.pay-card-fields { display: block; margin-top: var(--s2); }
.pay-card-fields[hidden] { display: none; }

.checkout-form__note { font-size: 0.78rem; color: var(--muted); margin-top: var(--s3); }
.checkout-form__error {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--accent);
  border-radius: var(--r-input);
  background: rgba(230, 51, 41, 0.08);
  color: var(--accent);
  font-size: 0.85rem;
  line-height: 1.4;
}
.checkout-form__error[hidden] { display: none; }
.checkout-form__submit { display: block; width: 100%; text-align: center; margin-top: var(--s2); }
.checkout-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Riepilogo compatto nel checkout / conferma ordine */
.checkout-summary__list { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s4); }
.checkout-summary__item { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--s3); align-items: center; }
.checkout-summary__item img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-card); }
.checkout-summary__item-info { display: flex; flex-direction: column; min-width: 0; }
.checkout-summary__item-name { font-size: 0.88rem; font-weight: 600; }
.checkout-summary__item-qty { font-size: 0.75rem; color: var(--muted); }
.checkout-summary__item-price { font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.checkout-summary__edit {
  display: inline-block; margin-top: var(--s4);
  font-size: 0.8rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.checkout-summary__edit:hover { color: var(--accent); }

/* ---------- Conferma ordine ---------- */
.order-confirm__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--grid-gap);
  margin-top: var(--s6);
}
@media (min-width: 760px) {
  .order-confirm__grid { grid-template-columns: 1.3fr 1fr; }
}
.order-confirm__items, .order-confirm__details {
  border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: var(--s5); background: var(--surface);
}
.order-confirm__details p { font-size: 0.92rem; line-height: 1.7; color: var(--ink); }