/* ============================================================
   Trenino Booking — Cart Shopify-like  v1
   Override WooCommerce cart: 2-column, card layout, CTA prominente
   ============================================================ */

:root {
  --tc-red:      #ad2b2b;
  --tc-red-dark: #8b2222;
  --tc-text:     #333333;
  --tc-muted:    #696969;
  --tc-border:   #e5e5e5;
  --tc-bg:       #ffffff;
}

/* ── 2-column layout desktop ─────────────────────────────────── */
@media (min-width: 960px) {
  .woocommerce-cart .woocommerce {
    display: grid !important;
    grid-template-columns: 1fr 360px !important;
    gap: 40px !important;
    align-items: start !important;
  }

  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* Placement esplicito: entrambi in riga 2, colonne separate */
  .woocommerce-cart .woocommerce-cart-form {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .woocommerce-cart .cart-collaterals {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

/* Cart collaterals: width 100% (eredita dalla colonna CSS grid) */
.woocommerce-cart .cart-collaterals {
  width: 100% !important;
  float: none !important;
}

/* ── Cart form ───────────────────────────────────────────────── */
.woocommerce-cart .woocommerce-cart-form {
  float: none !important;
  width: 100% !important;
}

/* ── Cart title ──────────────────────────────────────────────── */
.woocommerce-cart .page-heading,
.woocommerce-cart h1.page-title {
  font-size: 1.4rem !important;
  margin-bottom: 24px !important;
}

/* ── Cart table → flex ───────────────────────────────────────── */
.woocommerce-cart .shop_table.cart {
  display: block !important;
  border: none !important;
  background: none !important;
}

.woocommerce-cart .shop_table.cart thead {
  display: none !important;
}

.woocommerce-cart .shop_table.cart tbody {
  display: block !important;
}

/* ── Ogni riga prodotto → flex ───────────────────────────────── */
.woocommerce-cart .shop_table.cart tr.cart_item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--tc-border) !important;
  position: relative !important;
}

.woocommerce-cart .shop_table.cart tr.cart_item td {
  display: block !important;
  padding: 0 !important;
  border: none !important;
}

/* ── Immagine prodotto — nascosta (i prodotti non hanno foto) ── */
.woocommerce-cart .shop_table.cart td.product-thumbnail,
.woocommerce-cart .cart_item td.product-thumbnail {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ── Nome + meta (data/orario) ───────────────────────────────── */
.woocommerce-cart .shop_table.cart td.product-name {
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 36px !important;
}

.woocommerce-cart .shop_table.cart td.product-name a {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--tc-text) !important;
  text-decoration: none !important;
  display: block !important;
  line-height: 1.3 !important;
}

.woocommerce-cart .shop_table.cart td.product-name a:hover {
  color: var(--tc-red) !important;
}

/* Meta variation (Data tour / Orario) */
.woocommerce-cart .shop_table.cart td.product-name dl.variation,
.woocommerce-cart .shop_table.cart td.product-name .wc-item-meta {
  margin: 6px 0 0 !important;
  font-size: 0.8rem !important;
  color: var(--tc-muted) !important;
}

.woocommerce-cart .shop_table.cart td.product-name dl.variation dt,
.woocommerce-cart .shop_table.cart td.product-name .wc-item-meta dt {
  font-weight: 600 !important;
  display: inline !important;
  margin: 0 !important;
}

.woocommerce-cart .shop_table.cart td.product-name dl.variation dd,
.woocommerce-cart .shop_table.cart td.product-name .wc-item-meta dd {
  display: inline !important;
  margin: 0 !important;
  margin-left: 4px !important;
}

.woocommerce-cart .shop_table.cart td.product-name dl.variation dd::after,
.woocommerce-cart .shop_table.cart td.product-name .wc-item-meta dd::after {
  content: '' !important;
  display: block !important;
}

/* ── Prezzo singolo — nascosto (ridondante con subtotale) ────── */
.woocommerce-cart .shop_table.cart td.product-price {
  display: none !important;
}

/* ── Quantità ────────────────────────────────────────────────── */
.woocommerce-cart .shop_table.cart td.product-quantity {
  flex-shrink: 0 !important;
}

/* ── Subtotale ───────────────────────────────────────────────── */
.woocommerce-cart .shop_table.cart td.product-subtotal {
  flex-shrink: 0 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--tc-text) !important;
  min-width: 64px !important;
  text-align: right !important;
}

/* ── Bottone rimozione prodotto ──────────────────────────────── */
.woocommerce-cart .shop_table.cart td.product-remove {
  position: absolute !important;
  top: 20px !important;
  right: 0 !important;
  width: auto !important;
  order: 99 !important;
}

.woocommerce-cart .shop_table.cart td.product-remove a.remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  color: #ccc !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: 1.3rem !important;
  text-decoration: none !important;
  transition: color 0.14s !important;
  line-height: 1 !important;
}

.woocommerce-cart .shop_table.cart td.product-remove a.remove:hover {
  color: var(--tc-red) !important;
  background: none !important;
}

/* ── Quantità input ──────────────────────────────────────────── */
.woocommerce-cart .quantity {
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--tc-bg) !important;
}

.woocommerce-cart .quantity .qty {
  width: 44px !important;
  height: 38px !important;
  border: none !important;
  border-left: 1px solid var(--tc-border) !important;
  border-right: 1px solid var(--tc-border) !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  padding: 0 !important;
  background: var(--tc-bg) !important;
  color: var(--tc-text) !important;
}

.woocommerce-cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Qty +/- buttons (se aggiunti dal tema o da WC) */
.woocommerce-cart .quantity .minus,
.woocommerce-cart .quantity .plus {
  width: 34px !important;
  height: 38px !important;
  background: #fff !important;
  border: none !important;
  font-size: 1.1rem !important;
  color: var(--tc-text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.12s, color 0.12s !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.woocommerce-cart .quantity .minus:hover,
.woocommerce-cart .quantity .plus:hover {
  background: var(--tc-red) !important;
  color: #fff !important;
}

/* ── Tfoot / azioni ──────────────────────────────────────────── */
.woocommerce-cart .shop_table.cart tfoot {
  display: block !important;
}

.woocommerce-cart .shop_table.cart tfoot tr {
  display: flex !important;
  padding: 0 !important;
}

.woocommerce-cart .shop_table.cart tfoot td.actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 16px 0 !important;
  border: none !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Codice coupon */
.woocommerce-cart .coupon {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.woocommerce-cart .coupon .input-text {
  border: 1px solid var(--tc-border) !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  font-size: 0.86rem !important;
  flex: 1 !important;
  min-width: 140px !important;
}

.woocommerce-cart .coupon .button {
  background: var(--tc-bg) !important;
  border: 1px solid var(--tc-border) !important;
  color: var(--tc-muted) !important;
  font-size: 0.82rem !important;
  padding: 8px 16px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: border-color 0.14s, color 0.14s !important;
}

.woocommerce-cart .coupon .button:hover {
  border-color: var(--tc-red) !important;
  color: var(--tc-red) !important;
}

/* Update cart */
.woocommerce-cart button[name="update_cart"] {
  background: none !important;
  border: none !important;
  color: var(--tc-muted) !important;
  font-size: 0.8rem !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Riepilogo ordine (colonna destra) ───────────────────────── */
.woocommerce-cart .cart_totals {
  background: var(--tc-bg) !important;
  border: 1px solid var(--tc-border) !important;
  padding: 28px !important;
  float: none !important;
  width: 100% !important;
}

.woocommerce-cart .cart_totals h2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
}

.woocommerce-cart .cart_totals .shop_table {
  border: none !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  background: none !important;
}

.woocommerce-cart .cart_totals .shop_table th,
.woocommerce-cart .cart_totals .shop_table td {
  padding: 11px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--tc-border) !important;
  font-size: 0.9rem !important;
  vertical-align: middle !important;
  background: none !important;
}

.woocommerce-cart .cart_totals .shop_table th {
  font-weight: 600 !important;
  color: var(--tc-muted) !important;
  text-align: left !important;
}

.woocommerce-cart .cart_totals .shop_table td {
  text-align: right !important;
  font-weight: 600 !important;
  color: var(--tc-text) !important;
}

/* Riga totale finale */
.woocommerce-cart .cart_totals .shop_table tr.order-total th,
.woocommerce-cart .cart_totals .shop_table tr.order-total td {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  border-bottom: none !important;
  padding-top: 18px !important;
  color: var(--tc-text) !important;
}

.woocommerce-cart .cart_totals .shop_table tr.order-total td {
  color: var(--tc-red) !important;
}

/* ── CTA Checkout ────────────────────────────────────────────── */
.woocommerce-cart .wc-proceed-to-checkout {
  margin-top: 20px !important;
  padding: 0 !important;
}

.woocommerce-cart .checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  padding: 16px 20px !important;
  background: var(--tc-red) !important;
  color: #fff !important;
  font-family: Satoshi, -apple-system, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: none !important;
  transition: background 0.15s !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.woocommerce-cart .checkout-button:hover {
  background: var(--tc-red-dark) !important;
  color: #fff !important;
}

/* Trust signal sotto il bottone */
.woocommerce-cart .wc-proceed-to-checkout::after {
  content: "🔒 Pagamento sicuro con SumUp";
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--tc-muted);
  margin-top: 12px;
}

/* ── Carrello vuoto ──────────────────────────────────────────── */
.woocommerce-cart-form:empty + *,
.woocommerce-cart .woocommerce-info {
  border-top-color: var(--tc-red) !important;
}

.woocommerce-cart .return-to-shop .wc-backward {
  background: var(--tc-red) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
}

/* Mobile: stack verticale */
@media (max-width: 959px) {
  .woocommerce-cart .cart_totals {
    margin-top: 24px !important;
  }
}

/* ── Riduci spazio sopra (carrello e checkout vicini al top) ──── */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
  padding-top: 0 !important;
}

.woocommerce-cart .type-page.entry,
.woocommerce-checkout .type-page.entry {
  padding-top: 20px !important;
}

/* Riduci gap titolo → contenuto: page-title-bar + page-content (max 30px) */
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content {
  padding-top: 30px !important;
}

.woocommerce-checkout .page-title-bar-01,
.woocommerce-checkout .page-title-bar,
.woocommerce-cart .page-title-bar-01,
.woocommerce-cart .page-title-bar {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 14px !important;
  margin-bottom: 0 !important;
}

/* Inner wrapper — forza altezza automatica */
.woocommerce-cart .page-title-bar-inner,
.woocommerce-checkout .page-title-bar-inner {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Zero out margin sul wrapper WooCommerce dentro page-content */
.woocommerce-checkout .page-content > .woocommerce,
.woocommerce-cart .page-content > .woocommerce {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Empty notices wrapper toglie spazio */
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-notices-wrapper {
  min-height: 0 !important;
  margin: 0 !important;
}
.woocommerce-checkout .woocommerce-notices-wrapper:empty,
.woocommerce-cart .woocommerce-notices-wrapper:empty {
  display: none !important;
}


/* ============================================================
   Trenino Booking — Checkout Shopify-like  v1
   ============================================================ */

/* ── Nasconde h3 orfano (viene ricreato via ::before sull'order_review) ── */
.woocommerce-checkout h3#order_review_heading {
  display: none !important;
}

.woocommerce-checkout #order_review::before {
  content: "IL TUO ORDINE";
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--tc-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--tc-border);
}

/* ── 2-column layout: FLEX su wrapper PHP iniettato da class-woo-integration ──
   Struttura risultante:
   <form>
     <div class="trenino-checkout-left">   #customer_details billing form   </div>
     <div class="trenino-checkout-right">  h3 + #order_review + #payment    </div>
   </form>
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 960px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 40px !important;
  }

  .trenino-checkout-left {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .trenino-checkout-right {
    width: 380px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 24px !important;
  }
}

/* ── col2-set: stack colonne billing sopra una all'altra ─────── */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
}

/* ── Titoli sezione billing/review ──────────────────────────── */
.woocommerce-checkout #billing h3,
.woocommerce-checkout #shipping h3,
.woocommerce-checkout h3#order_review_heading {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: var(--tc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--tc-border) !important;
}

/* ── Billing form: 2 colonne su desktop ──────────────────────── */
@media (min-width: 600px) {
  .woocommerce-checkout #billing .woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
  }

  .woocommerce-checkout #billing .form-row-wide {
    grid-column: 1 / -1 !important;
  }
}

/* ── Form rows ───────────────────────────────────────────────── */
.woocommerce-checkout .form-row {
  margin: 0 0 14px !important;
  padding: 0 !important;
}

.woocommerce-checkout .form-row label {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--tc-text) !important;
  margin-bottom: 5px !important;
}

.woocommerce-checkout .form-row .required {
  color: var(--tc-red) !important;
}

/* ── Input, select, textarea ─────────────────────────────────── */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  border: 1px solid var(--tc-border) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  font-family: Satoshi, -apple-system, sans-serif !important;
  font-size: 0.92rem !important;
  color: var(--tc-text) !important;
  background: #fff !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.14s !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
  line-height: 1.4 !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--tc-red) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Validation errors ───────────────────────────────────────── */
.woocommerce-checkout .form-row.woocommerce-invalid input,
.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: #c0392b !important;
}

/* ── Order review box ────────────────────────────────────────── */
.woocommerce-checkout #order_review {
  background: #fff !important;
  border: 1px solid var(--tc-border) !important;
  padding: 28px !important;
}

.woocommerce-checkout #order_review .shop_table {
  border: none !important;
  width: 100% !important;
  background: none !important;
  margin-bottom: 0 !important;
}

.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
  padding: 10px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--tc-border) !important;
  font-size: 0.88rem !important;
  background: none !important;
  vertical-align: middle !important;
}

.woocommerce-checkout #order_review .shop_table th {
  color: var(--tc-muted) !important;
  font-weight: 600 !important;
}

/* Riga totale */
.woocommerce-checkout #order_review .shop_table tfoot .order-total th,
.woocommerce-checkout #order_review .shop_table tfoot .order-total td {
  border-bottom: none !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  padding-top: 14px !important;
}

.woocommerce-checkout #order_review .shop_table tfoot .order-total td strong {
  color: var(--tc-red) !important;
}

/* ── Sezione pagamento ───────────────────────────────────────── */
.woocommerce-checkout #payment {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-top: 20px !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  border: 1px solid var(--tc-border) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  list-style: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--tc-border) !important;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: none !important;
}

.woocommerce-checkout #payment .payment_box {
  background: #f7f7f7 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  margin: 8px 0 0 !important;
  font-size: 0.84rem !important;
  color: var(--tc-muted) !important;
}

.woocommerce-checkout #payment .payment_box::before {
  display: none !important;
}

/* ── Bottone "Completa ordine" ───────────────────────────────── */
.woocommerce-checkout #payment .place-order {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

.woocommerce-checkout #payment #place_order {
  display: block !important;
  width: 100% !important;
  padding: 16px 20px !important;
  background: var(--tc-red) !important;
  color: #fff !important;
  font-family: Satoshi, -apple-system, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.woocommerce-checkout #payment #place_order:hover {
  background: var(--tc-red-dark) !important;
}

/* Trust signal sotto il bottone */
.woocommerce-checkout #payment .place-order::after {
  content: "🔒 Pagamento sicuro con SumUp";
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--tc-muted);
  margin-top: 12px;
}

/* ── Note aggiuntive: nascondi se vuote ──────────────────────── */
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: var(--tc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 20px 0 12px !important;
  padding: 0 !important;
  border: none !important;
}

/* ── Mobile: stack ───────────────────────────────────────────── */
@media (max-width: 959px) {
  .woocommerce-checkout #order_review {
    margin-top: 24px !important;
  }
}