/* ==========================================================================
   cart.css — WooCommerce cart page overrides for template-cart.php
   All rules are scoped to body.eduk8u-cart so they can't leak to other
   templates. Loaded AFTER wp_head() so it wins specificity against WC's
   own CSS. Uses brand tokens from landing.css.
   ========================================================================== */

body.eduk8u-cart .cart-section {
  padding: 56px 0 72px;
}

@media (max-width: 767px) {
  body.eduk8u-cart .cart-section {
    padding: 36px 0 48px;
  }
}

/* Hide any "scroll to top" floating button injected by the parent theme or
   a plugin (Edumoon, Tutor LMS, generic back-to-top plugins). Broad set of
   selectors so it catches whatever the actual class/id is. */
body.eduk8u-cart [class*="back-to-top" i],
body.eduk8u-cart [id*="back-to-top" i],
body.eduk8u-cart [class*="scroll-top" i],
body.eduk8u-cart [id*="scroll-top" i],
body.eduk8u-cart [class*="scrollup" i],
body.eduk8u-cart [id*="scrollup" i],
body.eduk8u-cart [class*="scroll-up" i],
body.eduk8u-cart [id*="scroll-up" i],
body.eduk8u-cart .gototop,
body.eduk8u-cart .gotop,
body.eduk8u-cart .scroll-top-btn,
body.eduk8u-cart #toTop,
body.eduk8u-cart #goTop {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   CTA Final button re-assertion — WC and other plugins inject .btn-primary
   rules that override landing.css on cart pages (since we don't aggressively
   dequeue here). Force the brand colors back with cart-page scope so we win
   the specificity fight without raising !important.
   ────────────────────────────────────────────────────────────────────────── */
body.eduk8u-cart .cta-final .btn,
body.eduk8u-cart .cta-final a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  max-width: 100%;
  min-width: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, transform .05s;
}

@media (max-width: 520px) {
  body.eduk8u-cart .cta-final .cta-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  body.eduk8u-cart .cta-final .btn,
  body.eduk8u-cart .cta-final a.btn {
    width: 100%;
    min-height: 56px;
    padding: 14px 18px;
  }

  body.eduk8u-cart .cta-final .cta-contacts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.eduk8u-cart .cta-final .cta-contact {
    text-align: center;
    min-width: 0;
  }
}

body.eduk8u-cart .cta-final .btn-whatsapp,
body.eduk8u-cart .cta-final a.btn-whatsapp {
  background: #25D366;
  color: #fff;
}

body.eduk8u-cart .cta-final .btn-whatsapp:hover,
body.eduk8u-cart .cta-final a.btn-whatsapp:hover {
  background: #1FB755;
  color: #fff;
}

body.eduk8u-cart .cta-final .btn-primary,
body.eduk8u-cart .cta-final a.btn-primary {
  background: var(--brand-orange, #DD5426);
  color: #fff;
}

body.eduk8u-cart .cta-final .btn-primary:hover,
body.eduk8u-cart .cta-final a.btn-primary:hover {
  background: #b8401a;
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────────
   WC notices (added-to-cart, coupon applied, etc.)
   ────────────────────────────────────────────────────────────────────────── */
body.eduk8u-cart .woocommerce-notices-wrapper .woocommerce-message,
body.eduk8u-cart .woocommerce-notices-wrapper .woocommerce-info,
body.eduk8u-cart .woocommerce-notices-wrapper .woocommerce-error {
  background: #fff;
  border-left: 4px solid var(--brand-orange, #DD5426);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 24px;
  box-shadow: 0 2px 12px rgba(5, 42, 101, 0.06);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--ink-700, #1a1a1a);
  list-style: none;
}

body.eduk8u-cart .woocommerce-notices-wrapper .woocommerce-message {
  border-left-color: #1F7A4D;
}

body.eduk8u-cart .woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: #b3261e;
}

/* WC renders an absolutely-positioned icon via ::before on these notices. With
   our re-skinned padding it overlaps the text, so hide it — the colored left
   border is the visual cue instead. */
body.eduk8u-cart .woocommerce-info::before,
body.eduk8u-cart .woocommerce-message::before,
body.eduk8u-cart .woocommerce-error::before {
  content: none !important;
  display: none !important;
}

body.eduk8u-cart .woocommerce-notices-wrapper .button {
  background: var(--brand-navy, #052A65);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-left: 12px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Cart form layout — desktop puts the totals box on the right
   ────────────────────────────────────────────────────────────────────────── */
/* Side-by-side layout, 70/30 ratio.
   Edumoon wraps [woocommerce_cart] in a Bootstrap-style `.row.shopping-cart`
   with `.col-lg-8` (66%) for the cart form and `.col-lg-4` (33%) for the
   totals. The default 66/33 squashed the cart table. We widen the cart
   column to 70% and shrink the totals column to 30% — the cart table gets
   ~100px more breathing room and the totals box is still wide enough for
   subtotal/tax/total rows and the Express Checkout buttons.

   Also: strip any padding/border on the `.cart-collaterals` wrapper itself
   so the column doesn't draw a visual box around the totals card — only
   the inner `.cart_totals` element keeps the white card styling. */
@media (min-width: 992px) {
  body.eduk8u-cart .row.shopping-cart > .col-lg-8 {
    flex: 0 0 70%;
    max-width: 70%;
  }
  body.eduk8u-cart .row.shopping-cart > .col-lg-4 {
    flex: 0 0 30%;
    max-width: 30%;
  }
}

body.eduk8u-cart .cart-collaterals {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  width: 100%;
  float: none;
}

body.eduk8u-cart .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Cart table — re-skin shop_table_responsive
   ────────────────────────────────────────────────────────────────────────── */
body.eduk8u-cart table.shop_table {
  width: 100%;
  border: 1px solid var(--line, #e6e3dc);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(5, 42, 101, 0.04);
  table-layout: auto;
}

/* Desktop column widths — table now has full wrap width so we can give
   product-name a generous minimum without forcing overflow. */
@media (min-width: 769px) {
  body.eduk8u-cart .woocommerce-cart-form table.shop_table th.product-remove,
  body.eduk8u-cart .woocommerce-cart-form table.shop_table td.product-remove {
    width: 44px;
  }
  body.eduk8u-cart .woocommerce-cart-form table.shop_table th.product-thumbnail,
  body.eduk8u-cart .woocommerce-cart-form table.shop_table td.product-thumbnail {
    width: 80px;
  }
  body.eduk8u-cart .woocommerce-cart-form table.shop_table th.product-price,
  body.eduk8u-cart .woocommerce-cart-form table.shop_table td.product-price,
  body.eduk8u-cart .woocommerce-cart-form table.shop_table th.product-subtotal,
  body.eduk8u-cart .woocommerce-cart-form table.shop_table td.product-subtotal {
    width: 120px;
    white-space: nowrap;
  }
  body.eduk8u-cart .woocommerce-cart-form table.shop_table th.product-quantity,
  body.eduk8u-cart .woocommerce-cart-form table.shop_table td.product-quantity {
    width: 120px;
  }
  /* product-name absorbs remaining space */
  body.eduk8u-cart .woocommerce-cart-form table.shop_table td.product-name {
    word-break: break-word;
  }
}

body.eduk8u-cart table.shop_table thead {
  background: var(--paper-warm, #f6efe5);
}

body.eduk8u-cart table.shop_table th {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500, #555);
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--line, #e6e3dc);
}

body.eduk8u-cart table.shop_table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--line-soft, #f0ece4);
  vertical-align: middle;
  font-size: 14px;
  color: var(--ink-700, #1a1a1a);
}

body.eduk8u-cart table.shop_table tr:last-child td {
  border-bottom: 0;
}

body.eduk8u-cart table.shop_table td.product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

body.eduk8u-cart table.shop_table td.product-name a {
  border-bottom: 0;
  color: var(--brand-navy, #052A65);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}

body.eduk8u-cart table.shop_table td.product-name {
  border-bottom-color: transparent;
  text-align: center;
}

body.eduk8u-cart table.shop_table td.product-name a:hover {
  color: var(--brand-orange, #DD5426);
}

body.eduk8u-cart table.shop_table td.product-price,
body.eduk8u-cart table.shop_table td.product-subtotal {
  color: var(--ink-700, #1a1a1a);
  font-variant-numeric: tabular-nums;
}

body.eduk8u-cart table.shop_table td.product-subtotal {
  font-weight: 700;
}

/* Remove-item × column */
body.eduk8u-cart table.shop_table td.product-remove {
  width: 36px;
}

body.eduk8u-cart table.shop_table .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f0ece4;
  color: var(--ink-500, #555);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background .15s, color .15s;
}

body.eduk8u-cart table.shop_table .remove:hover {
  background: #b3261e;
  color: #fff;
}

/* Qty input */
body.eduk8u-cart .quantity input.qty {
  width: 64px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e6e3dc);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: #fff;
  color: var(--ink-700, #1a1a1a);
  font-variant-numeric: tabular-nums;
}

body.eduk8u-cart .quantity input.qty:focus {
  outline: 2px solid var(--brand-navy, #052A65);
  outline-offset: 1px;
  border-color: transparent;
}

/* Coupon row + cart actions.
   WooCommerce floats the coupon/update controls by default, so reset those
   styles and use a predictable two-column layout. */
body.eduk8u-cart table.shop_table .actions,
body.eduk8u-cart table.shop_table td.actions {
  padding: 22px 24px;
  background: var(--paper-warm, #f6efe5);
  border-top: 1px solid var(--line, #e6e3dc);
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

body.eduk8u-cart table.shop_table td.actions {
  display: table-cell;
}

body.eduk8u-cart .actions .coupon {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}

body.eduk8u-cart .actions button[name="update_cart"],
body.eduk8u-cart .actions input[name="update_cart"] {
  margin-left: auto;
}

body.eduk8u-cart .coupon label {
  display: none;
}

body.eduk8u-cart .coupon input.input-text {
  padding: 12px 18px;
  border: 1px solid var(--line, #e6e3dc);
  border-radius: 999px;
  font-size: 14px;
  min-width: 240px;
  height: 44px;
  background: #fff;
  color: var(--ink-700, #1a1a1a);
}

/* On narrow screens, let the actions stack cleanly */
@media (max-width: 768px) {
  body.eduk8u-cart table.shop_table .actions,
  body.eduk8u-cart table.shop_table td.actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body.eduk8u-cart .actions .coupon {
    width: 100%;
    flex-wrap: wrap;
  }
  body.eduk8u-cart .coupon input.input-text {
    flex: 1;
    min-width: 0;
  }
  body.eduk8u-cart .actions button[name="update_cart"],
  body.eduk8u-cart .actions input[name="update_cart"] {
    margin-left: 0;
    width: 100%;
  }
}

body.eduk8u-cart .coupon input.input-text:focus {
  outline: 2px solid var(--brand-navy, #052A65);
  outline-offset: 1px;
  border-color: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   Buttons — Apply coupon / Update cart / Proceed to checkout
   Reset WC's default look and apply our brand pill style.
   ────────────────────────────────────────────────────────────────────────── */
body.eduk8u-cart .woocommerce-cart-form .button,
body.eduk8u-cart .wc-proceed-to-checkout .checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, transform .05s, box-shadow .15s;
  background: var(--brand-navy, #052A65);
  color: #fff;
}

body.eduk8u-cart .coupon .button {
  padding: 12px 32px;
}

body.eduk8u-cart .woocommerce-cart-form .button:hover,
body.eduk8u-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: #041d49;
  box-shadow: 0 4px 12px rgba(5, 42, 101, 0.18);
  transform: translateY(-1px);
}

body.eduk8u-cart .woocommerce-cart-form .button:active,
body.eduk8u-cart .wc-proceed-to-checkout .checkout-button:active {
  transform: translateY(1px);
}

/* "Update cart" is secondary — outlined */
body.eduk8u-cart .woocommerce-cart-form button[name="update_cart"] {
  background: #f7f9fd;
  color: var(--brand-navy, #052A65);
  border-radius: 999px;
  padding: 12px 26px;
  box-shadow: inset 0 0 0 1.5px var(--brand-navy, #052A65);
}

body.eduk8u-cart .woocommerce-cart-form button[name="update_cart"]:hover {
  background: var(--brand-navy, #052A65);
  color: #fff;
}

body.eduk8u-cart .woocommerce-cart-form button[name="update_cart"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Proceed to checkout is the primary action — orange */
body.eduk8u-cart .wc-proceed-to-checkout .checkout-button {
  background: var(--brand-orange, #DD5426);
  width: 100%;
  padding: 14px 22px;
  font-size: 15px;
  margin-top: 12px;
}

body.eduk8u-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: #b8401a;
}

/* ──────────────────────────────────────────────────────────────────────────
   Stripe Express Checkout (Apple Pay, G Pay, Pay with Link)
   The Stripe gateway uses iframes / native button elements that bring their
   own dimensions — we intentionally do NOT force width/overflow on them
   because doing so caused the buttons to clip and disappear. We only add
   vertical spacing so they breathe inside (or below) the totals card.
   ────────────────────────────────────────────────────────────────────────── */
body.eduk8u-cart .wc-stripe-payment-request-wrapper,
body.eduk8u-cart .wc-stripe-payment-request-button-wrapper,
body.eduk8u-cart #wc-stripe-payment-request-wrapper,
body.eduk8u-cart .wc-stripe-product-payment-request-wrapper,
body.eduk8u-cart .wc-stripe-express-checkout-wrapper,
body.eduk8u-cart .stripe-payment-request-wrapper,
body.eduk8u-cart .wc-stripe-express-checkout {
  margin-top: 10px;
}

/* If the Stripe buttons render as a direct sibling of .cart_totals (outside
   the card), give them their own white card so they look paired with the
   totals box. */
body.eduk8u-cart .cart-collaterals > .wc-stripe-payment-request-wrapper,
body.eduk8u-cart .cart-collaterals > .wc-stripe-payment-request-button-wrapper,
body.eduk8u-cart .cart-collaterals > .wc-stripe-express-checkout-wrapper,
body.eduk8u-cart .cart-collaterals > .wc-stripe-product-payment-request-wrapper {
  background: #fff;
  border: 1px solid var(--line, #e6e3dc);
  border-radius: 16px;
  padding: 16px 20px;
  margin-top: 14px;
  box-shadow: 0 2px 12px rgba(5, 42, 101, 0.04);
}

/* ──────────────────────────────────────────────────────────────────────────
   Cart totals (right column on desktop, below table on mobile)
   ────────────────────────────────────────────────────────────────────────── */
body.eduk8u-cart .cart_totals {
  background: #fff;
  border: 1px solid var(--line, #e6e3dc);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(5, 42, 101, 0.04);
}

body.eduk8u-cart .cart_totals h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-navy, #052A65);
  margin: 0 0 16px;
}

body.eduk8u-cart .cart_totals table.shop_table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.eduk8u-cart .cart_totals table.shop_table th,
body.eduk8u-cart .cart_totals table.shop_table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft, #f0ece4);
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

body.eduk8u-cart .cart_totals table.shop_table th {
  color: var(--ink-500, #555);
  font-weight: 500;
  width: 50%;
}

body.eduk8u-cart .cart_totals table.shop_table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-700, #1a1a1a);
  font-weight: 600;
}

body.eduk8u-cart .cart_totals tr.order-total th,
body.eduk8u-cart .cart_totals tr.order-total td {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-navy, #052A65);
  padding-top: 16px;
  border-bottom: 0;
}

body.eduk8u-cart .cart_totals tr.order-total .amount {
  color: var(--brand-navy, #052A65);
}

/* Shipping rows + "Calculate shipping" toggle */
body.eduk8u-cart .shipping-calculator-button {
  color: var(--brand-orange, #DD5426);
  text-decoration: none;
  font-weight: 600;
}

body.eduk8u-cart .shipping-calculator-button:hover {
  text-decoration: underline;
}

body.eduk8u-cart .shipping-calculator-form .button {
  background: var(--brand-navy, #052A65);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
}

/* Cross-sells block (optional — only renders if "Up-Sells" / "Cross-Sells" set) */
body.eduk8u-cart .cross-sells {
  margin-top: 48px;
}

body.eduk8u-cart .cross-sells h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  color: var(--brand-navy, #052A65);
  margin: 0 0 20px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Empty cart state
   ────────────────────────────────────────────────────────────────────────── */
body.eduk8u-cart .cart-empty,
body.eduk8u-cart .wc-empty-cart-message {
  background: #fff;
  border: 1px solid var(--line, #e6e3dc);
  border-radius: 16px;
  padding: 56px 32px;
  text-align: center;
  font-size: 18px;
  color: var(--ink-700, #1a1a1a);
  box-shadow: 0 2px 12px rgba(5, 42, 101, 0.04);
}

body.eduk8u-cart .return-to-shop {
  margin-top: 24px;
  text-align: center;
}

body.eduk8u-cart .return-to-shop .button,
body.eduk8u-cart .return-to-shop .wc-backward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-orange, #DD5426);
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}

body.eduk8u-cart .return-to-shop .button:hover,
body.eduk8u-cart .return-to-shop .wc-backward:hover {
  background: #b8401a;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile cart table — WC switches to a responsive stacked layout via JS
   on small screens. We make sure that stacked layout still looks brand-true.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.eduk8u-cart table.shop_table_responsive thead {
    display: none;
  }
  body.eduk8u-cart table.shop_table_responsive tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--line, #e6e3dc);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
  }
  body.eduk8u-cart table.shop_table_responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line-soft, #f0ece4);
    padding: 12px 14px;
  }
  body.eduk8u-cart table.shop_table_responsive td:last-child {
    border-bottom: 0;
  }
  body.eduk8u-cart table.shop_table_responsive td::before {
    content: attr(data-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-500, #555);
  }
  body.eduk8u-cart table.shop_table_responsive td.actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body.eduk8u-cart table.shop_table_responsive td.actions::before {
    display: none;
  }
  body.eduk8u-cart .coupon {
    flex-wrap: wrap;
    margin-right: 0;
    width: 100%;
  }
  body.eduk8u-cart .coupon input.input-text {
    flex: 1;
    min-width: 0;
  }
  body.eduk8u-cart .cart-collaterals {
    margin-top: 24px;
  }
}