/* =====================================================================
 * cart-fixes.css — Granzia cart page (Issue 18)
 * Loaded LAST on the cart page (dependency: granzia-style, enqueued after
 * responsive.css), so equal-specificity rules here win the cascade.
 * Fixes: (1) horizontal overflow, (2) price/total alignment (RTL),
 * (3) loyalty-points formatting, (4) mobile responsive stacking.
 * Brand navy #1d3d7c, gold accent #d4af37.
 * ===================================================================== */

:root {
  --cart-navy: var(--primary, #1d3d7c);
  --cart-gold: #d4af37;
  --cart-border: #e6e6e6;
}

/* ---------------------------------------------------------------------
 * 1) HORIZONTAL OVERFLOW GUARD (desktop + mobile)
 * The reference markup hard-codes pixel widths everywhere. Contain the
 * whole page and force border-box + max-width on every descendant so no
 * fixed-px child can spill past the viewport at 375px or 1440px.
 * ------------------------------------------------------------------- */
.cart-page {
  overflow-x: clip;            /* belt-and-suspenders against child spill */
}
.cart-page * {
  box-sizing: border-box;
}
.cart-page .cart-shell,
.cart-page .cart-layout,
.cart-page .cart-summary-panel,
.cart-page .cart-items-panel {
  max-width: 100%;
  min-width: 0;
}
.cart-shell {
  width: 100%;
  max-width: var(--page-max, 1440px);
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---------------------------------------------------------------------
 * 2) PRICING / TOTALS — clean RTL alignment, no clip, no awkward wrap
 * ------------------------------------------------------------------- */

/* Summary rows: label may shrink, amount (LTR currency) stays on one line */
.cart-summary-list div {
  gap: 12px;
}
.cart-summary-list dt {
  min-width: 0;
}
.cart-summary-list dd {
  white-space: nowrap;
  text-align: left;
}

/* Grand total: three-part row that stays aligned and fully visible */
.cart-total {
  column-gap: 8px;
  align-items: baseline;
}
.cart-total strong {
  min-width: max-content;
  white-space: nowrap;
  text-align: left;
  direction: ltr;
}

/* Per-item price cluster: amount + old price + discount badge never clip */
.cart-item__prices {
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.cart-item__prices span,
.cart-item__prices del,
.cart-item__prices em {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * 3) LOYALTY POINTS — number + label on one readable RTL line, no overflow
 * ------------------------------------------------------------------- */
.cart-points {
  overflow: hidden;
}
.cart-points__top {
  gap: 8px;
  min-width: 0;
}
.cart-points__top > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cart-points__top strong {
  justify-self: end;
  white-space: nowrap;       /* keep "N نقطة" on a single line */
  color: var(--cart-navy);
}
.cart-points__top strong [data-cart-points] {
  color: var(--cart-gold);   /* gold emphasis on the earned figure */
  font-weight: 700;
}
.cart-points p {
  overflow-wrap: anywhere;
}
.cart-points p [data-cart-points] {
  font-weight: 700;
  color: var(--cart-navy);
}

/* ---------------------------------------------------------------------
 * Coupon field (unstyled in base) — pill input + navy pill apply button
 * ------------------------------------------------------------------- */
.cart-coupon__field {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 8px 0 4px;
}
.cart-coupon__field[hidden] {
  display: none;
}
.cart-coupon__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--cart-border);
  border-radius: 999px;
  font: inherit;
  color: #3f3e3e;
  background: #fff;
}
.cart-coupon__input:focus {
  outline: none;
  border-color: var(--cart-navy);
}
.cart-coupon__apply {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: var(--cart-navy);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.cart-coupon__apply:hover {
  filter: brightness(1.08);
}

/* Checkout button — reinforce the rounded-pill brand style */
.cart-checkout {
  max-width: 100%;
  border-radius: 999px;
}

/* ---------------------------------------------------------------------
 * Empty-cart state (cart-empty.php) — center the themed Arabic state
 * ------------------------------------------------------------------- */
.cart-page .cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 16px 56px;
  text-align: center;
}
.cart-page .cart-empty__icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #eef3fa;
  color: var(--cart-navy);
}
.cart-page .cart-empty p {
  margin: 0;
  color: #3f3e3e;
  font-size: 18px;
  font-weight: 500;
}
.cart-page .cart-empty .cart-checkout {
  width: auto;
  min-width: 200px;
  padding-inline: 32px;
}

/* ---------------------------------------------------------------------
 * 4) RESPONSIVE — stack line items readably on mobile (label:value rows)
 * ------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cart-shell {
    padding-inline: 16px;
  }

  /* Item card: keep image at side, let text/prices flow underneath */
  .cart-item {
    grid-template-columns: minmax(0, 1fr) 104px;
    column-gap: 12px;
  }
  .cart-item__image {
    width: 104px;
    height: 104px;
  }

  /* Bottom row: stack quantity and price so they never collide/overflow */
  .cart-item__bottom {
    grid-template-columns: 1fr;
    row-gap: 12px;
    margin-top: 12px;
    justify-items: stretch;
  }
  .cart-item__prices {
    grid-column: 1;
    justify-content: flex-start;
  }
  .cart-qty {
    grid-column: 1;
    justify-self: start;
  }

  /* Summary rows readable at 375px */
  .cart-summary-list div {
    height: auto;
    min-height: 32px;
    flex-wrap: wrap;
  }
  .cart-total {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .cart-total__label { grid-column: 1; grid-row: 1; }
  .cart-total__tax   { grid-column: 1; grid-row: 2; }
  .cart-total strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  /* Loyalty + services wrap cleanly */
  .cart-services {
    height: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .cart-service span {
    font-size: 12px;
  }
}

/* Extra-small phones (<=380px): make sure nothing forces overflow */
@media (max-width: 380px) {
  .cart-shell { padding-inline: 12px; }
  .cart-item__prices span,
  .cart-item__prices del { font-size: 16px; }
}