/**
 * TFA Cart — Trust & Clarity (step 1).
 * Shared layout primitives (.tfa-v1, .tfa-steps, .tfa-grid, .tfa-card*,
 * .tfa-summary/.tfa-sum-card/.tfa-sum-head/.tfa-sum-body, font rule) live in
 * assets/shared.css and are enqueued alongside this file. Only cart-specific
 * rules below.
 */
/* All cart text bumped one size step (scoped to .tfa-cart so checkout/QR are unaffected) */
.tfa-cart .tfa-card-head h2 { font-size: 18px !important; }
.tfa-cart .tfa-card-head p { font-size: 14px !important; }

/* fixed layout so column widths are obeyed; product-name (no width) takes the rest.
   All gridlines unified to the card's border (1px solid var(--border)) — overriding
   Divi/Woo defaults (#eee outer box, rgba(0,0,0,.2) cell tops, our old dashed rows). */
.tfa-cart .tfa-cart-table { width: 100%; border: 1px solid var(--border) !important; border-collapse: collapse; table-layout: fixed; }
.tfa-cart .tfa-cart-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); text-align: left; padding: 0 10px 10px; border: 0 !important; border-bottom: 1px solid var(--border) !important; }
.tfa-cart .tfa-cart-table td { padding: 14px 10px; border: 0 !important; border-bottom: 1px solid var(--border) !important; vertical-align: middle; font-size: 16px; }
.tfa-cart .tfa-cart-table .product-remove { width: 44px; text-align: center; padding-left: 0; padding-right: 0; }
.tfa-cart .tfa-cart-table .product-price { width: 140px; }
.tfa-cart .tfa-cart-table .product-quantity { width: 110px; }
.tfa-cart .tfa-cart-table .product-subtotal { width: 150px; text-align: right; }
.tfa-cart .tfa-cart-table td.product-name { word-wrap: break-word; }
.tfa-cart .product-remove .remove { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted) !important; font-size: 18px; text-decoration: none; }
.tfa-cart .product-remove .remove:hover { background: #FDECEC; color: #C0392B !important; }
.tfa-cart .product-name a { color: var(--ink); font-weight: 600; text-decoration: none; }
/* Real product image (course thumbnail); WooCommerce placeholder if a product has none */
.tfa-cart .product-name .tfa-thumb {
  display: inline-block; vertical-align: middle; margin-right: 12px; width: 48px; height: 48px;
  border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: var(--surface-2);
}
.tfa-cart .product-price, .tfa-cart .product-subtotal { font-family: var(--mono) !important; font-weight: 600; white-space: nowrap; }
.tfa-cart .quantity .qty { width: 64px; padding: 10px 8px !important; text-align: center; background: var(--surface-2) !important; border: 1.5px solid var(--border) !important; border-radius: var(--r-sm) !important; }
/* Cart uses the SAME 1280px container as checkout (design-system parity); the card
   spans full width, so steps bar + notice + card all share the checkout width. */
.tfa-cart-single { max-width: 100%; margin: 0; }

/* Card head: title left, "Cập nhật giỏ hàng" button top-right on the heading row.
   No bottom divider above the course table (requested). */
.tfa-cart .tfa-cart-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 0 !important; }
.tfa-cart .tfa-cart-head .tfa-cart-head-text { min-width: 0; }
/* !important to beat Divi/WooCommerce .button styles (white/black text, 20px, own bg) */
.tfa-cart .tfa-update-cart { flex: none; height: 42px !important; padding: 0 16px !important; border-radius: var(--r-sm) !important; border: 1.5px solid var(--brand) !important; background: transparent !important; color: var(--brand-ink) !important; font-size: 14.5px !important; font-weight: 600 !important; cursor: pointer; white-space: nowrap; }
.tfa-cart .tfa-update-cart:hover { background: var(--brand-wash) !important; }

/* Foot: totals hidden; only the "Tiến hành thanh toán" button, right-aligned (old update-button spot).
   No top divider between the table and the button (requested). */
.tfa-cart-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.tfa-cart-total { display: flex; align-items: baseline; gap: 16px; }
.tfa-cart-total .k { font-size: 15px; font-weight: 600; color: var(--muted); }
.tfa-cart-total .v { font-size: 22px; font-weight: 800; color: var(--brand-ink); }
.tfa-cart-total .v .woocommerce-Price-amount { font-family: var(--sans); }
.tfa-cart-foot .cart_totals { float: none !important; width: auto !important; margin: 0 !important; }
.tfa-cart-foot .cart_totals > h2, .tfa-cart-foot .shop_table { display: none !important; } /* hide Tạm tính / Tổng cộng */
.tfa-cart-foot .wc-proceed-to-checkout { padding: 0; margin: 0; }
/* Same flat, solid style as the QR "Tôi đã chuyển khoản" button: no gradient, r-sm radius, taller */
.tfa-cart-foot .wc-proceed-to-checkout .checkout-button {
  display: inline-flex !important; align-items: center; justify-content: center; padding: 16px 32px !important;
  border: 0 !important; border-radius: var(--r-sm) !important; font-size: 16px; font-weight: 700; color: #fff !important; text-decoration: none;
  background: var(--brand) !important;
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--brand) 55%, transparent); transition: background .15s;
}
.tfa-cart-foot .wc-proceed-to-checkout .checkout-button:hover { background: var(--brand-ink) !important; } /* no lift/transform on hover */
/* (8) No Divi hover-arrow icon on cart buttons */
.tfa-cart-foot .wc-proceed-to-checkout .checkout-button::after,
.tfa-cart-foot .wc-proceed-to-checkout .checkout-button:hover::after,
.tfa-cart .tfa-update-cart::after, .tfa-cart .tfa-update-cart:hover::after { content: none !important; display: none !important; }

/* "Added to cart" / "removed" notice: readable dark text on brand wash */
.woocommerce-message, .woocommerce-cart .woocommerce-message {
  background: var(--brand-wash) !important; color: var(--ink) !important;
  border: 1px solid var(--border-strong) !important; border-left: 4px solid var(--brand) !important;
  border-radius: var(--r-md) !important; font-family: var(--sans) !important;
}
/* Remove the "Thanh toán / View cart" button inside the notice (requested) */
.woocommerce-message a.button, .woocommerce-message .button { display: none !important; }
/* "Undo?" link (restore removed item) was white/invisible — make it a visible brand link */
.woocommerce-message a.restore-item {
  color: var(--brand-ink) !important; font-weight: 600 !important; text-decoration: underline !important; text-shadow: none !important;
}
.woocommerce-message a.restore-item:hover { color: var(--brand) !important; }

/* Empty cart */
.tfa-cart-empty .tfa-empty-title { font-size: 19px; font-weight: 700; color: var(--ink); margin: 8px 0 6px; }
.tfa-cart-empty .tfa-empty-sub { color: var(--muted); margin: 0 0 18px; }
.tfa-cart-empty .tfa-btn-primary { display: inline-block; padding: 14px 26px; border-radius: var(--r-md); font-weight: 700; color: #fff !important; text-decoration: none; background: linear-gradient(180deg, var(--brand-bright), var(--brand)); }

@media (prefers-reduced-motion: reduce) { .tfa-cart-foot .wc-proceed-to-checkout .checkout-button { transition: none; } }

/* ===== Mobile: WooCommerce collapses the table (data-title labels) at ≤768px.
   Own that range fully so rows become clean stacked blocks instead of a broken grid. ===== */
@media (max-width: 768px) {
  .tfa-cart .tfa-cart-table,
  .tfa-cart .tfa-cart-table tbody,
  .tfa-cart .tfa-cart-table tr,
  .tfa-cart .tfa-cart-table td { display: block; width: 100% !important; }
  .tfa-cart .tfa-cart-table { border: 0 !important; table-layout: auto; }
  .tfa-cart .tfa-cart-table thead { display: none; } /* column headers move into each row via data-title */

  /* Each cart item = one bordered, rounded card */
  .tfa-cart .tfa-cart-table tr.cart_item {
    position: relative; border: 1px solid var(--border) !important; border-radius: var(--r-md);
    padding: 14px 16px; margin: 0;
  }

  /* Generic field row: uppercase label (data-title) left, value right */
  .tfa-cart .tfa-cart-table td {
    border: 0 !important; border-bottom: 1px solid var(--border) !important;
    padding: 11px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right;
  }
  .tfa-cart .tfa-cart-table td:last-child { border-bottom: 0 !important; }
  .tfa-cart .tfa-cart-table td::before {
    content: attr(data-title); flex: none; text-align: left;
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 600;
  }

  /* Product name: thumb + title as the card heading (no label, left-aligned).
     !important padding-right reserves space so the title never runs under the × button. */
  .tfa-cart .tfa-cart-table td.product-name { justify-content: flex-start; text-align: left; padding-right: 52px !important; }
  .tfa-cart .tfa-cart-table td.product-name::before { display: none; }
  .tfa-cart .product-name a { flex: 1; text-align: left; }

  /* Remove (×) button: pinned to the card's top-right corner */
  .tfa-cart .tfa-cart-table td.product-remove {
    position: absolute; top: 12px; right: 12px; width: auto !important;
    padding: 0 !important; border: 0 !important; margin: 0 !important;
  }
  .tfa-cart .tfa-cart-table td.product-remove::before { display: none; }

  /* Quantity input stays compact, aligned right with its label */
  .tfa-cart .quantity .qty { width: 72px; }

  /* Full-width checkout button for easy tapping */
  .tfa-cart-foot { justify-content: stretch; }
  .tfa-cart-foot .cart_totals, .tfa-cart-foot .wc-proceed-to-checkout { width: 100%; }
  .tfa-cart-foot .wc-proceed-to-checkout .checkout-button { width: 100%; }

  /* Update-cart button: let it wrap under the title comfortably */
  .tfa-cart .tfa-cart-head { flex-wrap: wrap; }
}