/* ============================================================
   MARTAL — Cart Page
   cart.css | Mobile-First RTL
   New selectors ONLY.
   Inherits from: style.css, product-details.css (pd-breadcrumb,
   pd-qty), search.css (search overlay).
   ============================================================ */


/* ── 1. CART HERO ─────────────────────────────────────────────── */
.cart-hero {
  position: relative;
  background: linear-gradient(160deg, var(--clr-rose) 0%, var(--clr-bg) 55%);
  padding-block: var(--sp-8) var(--sp-6);
  overflow: hidden;
}

.cart-hero__accent {
  position: absolute;
  inset-inline-end: -100px;
  top: -60px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clr-nude) 0%, transparent 70%);
  opacity: 0.3;
  pointer-events: none;
}

.cart-hero__inner {
  position: relative;
  z-index: 1;
  /* pd-breadcrumb already styles the nav above */
}

.cart-hero__content {
  margin-top: var(--sp-4);
}

/* hero__eyebrow + .eyebrow-line reused from style.css */

.cart-hero__title {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 900;
  color: var(--clr-text);
  line-height: 1.2;
  margin-block: var(--sp-2) var(--sp-2);
  letter-spacing: -0.5px;
}

.cart-hero__count {
  font-size: 14px;
  color: var(--clr-muted);
  font-weight: 600;
}

.cart-hero__count strong {
  color: var(--clr-red);
  font-weight: 900;
}


/* ── 2. CART BODY LAYOUT ─────────────────────────────────────── */
.cart-body {
  padding-block: var(--sp-8) var(--sp-12);
}

/* Stack on mobile, two-column on desktop */
.cart-body__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .cart-body__inner {
    grid-template-columns: 1fr 360px;
    gap: var(--sp-10);
  }
}


/* ── 3. CART ITEMS COLUMN ────────────────────────────────────── */
.cart-items-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}


/* ── 4. CART ITEM CARD ───────────────────────────────────────── */
.cart-item {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--sp-5);
  align-items: start;
  transition: box-shadow var(--t-base), border-color var(--t-base);
  animation: cartItemIn var(--t-slow) ease forwards;
}

@keyframes cartItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cart-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--clr-border-md);
}

@media (min-width: 480px) {
  .cart-item {
    grid-template-columns: 120px 1fr;
  }
}

@media (min-width: 768px) {
  .cart-item {
    grid-template-columns: 140px 1fr;
    padding: var(--sp-6);
  }
}


/* ── 5. CART ITEM IMAGE ──────────────────────────────────────── */
.cart-item__img {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* Uses the same placeholder bg classes from product-details.css
     and style.css (product-card__img--*) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--clr-rose), var(--clr-nude));
  flex-shrink: 0;
  position: relative;
  transition: transform var(--t-base);
}

.cart-item:hover .cart-item__img {
  transform: scale(1.03);
}

.cart-item__img i {
  font-size: 36px;
  color: var(--clr-nude);
}

.cart-item__img a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}


/* ── 6. CART ITEM INFO ───────────────────────────────────────── */
.cart-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.cart-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cart-item__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.cart-item__brand {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color var(--t-fast);
}

.cart-item__brand:hover {
  color: var(--clr-red-deep);
}

.cart-item__name {
  font-size: clamp(14px, 2.5vw, 16px);
  font-weight: 900;
  color: var(--clr-text);
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--t-fast);
  display: block;
}

.cart-item__name:hover {
  color: var(--clr-red);
}

.cart-item__color-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--clr-rose);
  border: 1px solid var(--clr-border-md);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text);
  width: fit-content;
}

.cart-item__color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.12);
}

/* Remove button */
.cart-item__remove {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: 1px solid var(--clr-border-md);
  font-size: 16px;
  color: var(--clr-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}

.cart-item__remove:hover {
  background: var(--clr-rose);
  color: var(--clr-red);
  border-color: var(--clr-nude);
  transform: rotate(90deg);
}

.cart-item__remove:focus-visible {
  outline: 3px solid var(--clr-red);
  outline-offset: 2px;
}


/* ── 7. CART ITEM FOOTER (qty + price) ───────────────────────── */
.cart-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Quantity selector — reuses .pd-qty from product-details.css */
/* No new rules needed; size is appropriate at default */

.cart-item__price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cart-item__unit-price {
  font-size: 12px;
  color: var(--clr-muted);
  font-weight: 600;
}

.cart-item__subtotal {
  font-size: 18px;
  font-weight: 900;
  color: var(--clr-red);
  line-height: 1;
}

.cart-item__old-subtotal {
  font-size: 12px;
  color: var(--clr-light);
  text-decoration: line-through;
  font-weight: 600;
}


/* ── 8. REMOVING ANIMATION ───────────────────────────────────── */
.cart-item.removing {
  animation: cartItemOut var(--t-slow) ease forwards;
  pointer-events: none;
}

@keyframes cartItemOut {
  to { opacity: 0; transform: translateX(24px); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}


/* ── 9. TRUST STRIP (reuses .trust-bar__list + .trust-item) ──── */
.cart-trust-strip {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--clr-border);
}

/* trust-bar__list already has scrollable + flex layout in style.css */


/* ── 10. ORDER SUMMARY ───────────────────────────────────────── */
.cart-summary-col {
  /* Sticky only on desktop */
}

@media (min-width: 1024px) {
  .cart-summary-col {
    position: sticky;
    top: calc(var(--navbar-h) + var(--sp-4));
  }
}

.cart-summary {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cart-summary__title {
  font-size: 18px;
  font-weight: 900;
  color: var(--clr-text);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
}

.cart-summary__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cart-summary__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cart-summary__line-label {
  font-size: 14px;
  color: var(--clr-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-direction: column;
  align-items: flex-start;
}

.cart-summary__shipping-note {
  font-size: 11px;
  color: var(--clr-red);
  font-weight: 700;
  display: block;
}

.cart-summary__line-label--discount {
  color: #1A7A40;
}

.cart-summary__line-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
}

.cart-summary__line-val--discount {
  color: #1A7A40;
}

.cart-summary__divider {
  height: 1px;
  background: var(--clr-border);
}

.cart-summary__total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cart-summary__total-label {
  font-size: 16px;
  font-weight: 900;
  color: var(--clr-text);
}

.cart-summary__total-val {
  font-size: 24px;
  font-weight: 900;
  color: var(--clr-red);
  transition: color var(--t-fast);
}

.cart-summary__total-val.updating {
  color: var(--clr-muted);
}


/* ── 11. COUPON FIELD ────────────────────────────────────────── */
.cart-coupon {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cart-coupon__input-row {
  display: flex;
  gap: var(--sp-2);
}

.cart-coupon__input {
  flex: 1;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text);
  background: var(--clr-rose);
  border: 1.5px solid var(--clr-border-md);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  direction: ltr;
  text-align: right;
}

.cart-coupon__input:focus {
  outline: none;
  border-color: var(--clr-red);
  box-shadow: 0 0 0 3px rgba(213,0,0,0.08);
}

.cart-coupon__input::placeholder {
  color: var(--clr-light);
  font-weight: 400;
  direction: rtl;
}

.cart-coupon__btn {
  flex-shrink: 0;
}

.cart-coupon__msg {
  font-size: 12px;
  font-weight: 700;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}

.cart-coupon__msg--success {
  color: #1A7A40;
  background: #E8F8EE;
}

.cart-coupon__msg--error {
  color: var(--clr-red);
  background: var(--clr-rose);
}


/* ── 12. COD BADGE + SECURE LINE ─────────────────────────────── */
.cart-summary__cod {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--clr-rose);
  border: 1px solid var(--clr-nude);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-text);
}

.cart-summary__cod i {
  color: var(--clr-red);
  font-size: 18px;
}

/* Checkout button inherits .btn .btn--primary .btn--lg from style.css */
.cart-summary__checkout {
  width: 100%;
  font-size: 16px;
}

.cart-summary__checkout:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.cart-summary__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: 12px;
  color: var(--clr-muted);
  font-weight: 600;
  text-align: center;
}

.cart-summary__secure i {
  color: #1A7A40;
  font-size: 14px;
}


/* ── 13. EMPTY STATE ─────────────────────────────────────────── */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
  padding: var(--sp-12) var(--sp-6);
  animation: fadeInPanel var(--t-slow) ease forwards;
}

/* @keyframes fadeInPanel — defined in style.css §22, remove duplicate */

.cart-empty__circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--clr-rose);
  border: 2px solid var(--clr-nude);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: emptyFloat 4s ease-in-out infinite;
}

@keyframes emptyFloat {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-empty__circle { animation: none; }
}

.cart-empty__circle i {
  font-size: 42px;
  color: var(--clr-nude);
}

.cart-empty__title {
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 900;
  color: var(--clr-text);
}

.cart-empty__text {
  font-size: 15px;
  color: var(--clr-muted);
  line-height: 1.75;
  max-width: 380px;
}

.cart-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}


/* ── 14. MOBILE STICKY CHECKOUT BAR ──────────────────────────── */
.cart-mobile-bar {
  position: fixed;
  bottom: 68px; /* sits above mobile-bottom-nav */
  left: 0;
  right: 0;
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  z-index: 650;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform var(--t-slow);
}

.cart-mobile-bar.visible {
  transform: translateY(0);
}

.cart-mobile-bar__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-mobile-bar__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-muted);
}

.cart-mobile-bar__total {
  font-size: 20px;
  font-weight: 900;
  color: var(--clr-red);
  line-height: 1;
}

.cart-mobile-bar__btn {
  flex-shrink: 0;
  padding: 13px 24px;
  font-size: 14px;
}

/* On desktop the sticky bar is hidden — summary column handles checkout */
@media (min-width: 1024px) {
  .cart-mobile-bar {
    display: none;
  }
}


/* ── 15. PAGE BOTTOM PADDING ─────────────────────────────────── */
/* Mobile: bottom nav (68px) + mobile bar (76px) */
@media (max-width: 1023px) {
  main {
    margin-bottom: calc(68px + 76px);
  }
}

@media (min-width: 1024px) {
  main {
    margin-bottom: 0;
  }
}


/* ── 16. ACTIVE CART ICON IN NAVBAR ──────────────────────────── */
.icon-btn.active-page {
  color: var(--clr-red);
  background: var(--clr-rose);
}


/* ── 17. NAVBAR ACTIVE-PAGE INDICATOR ────────────────────────── */
/* No nav-link is marked active on cart page — cart isn't in nav */


/* ── 18. SUMMARY COLUMN HIDDEN WHEN EMPTY ───────────────────── */
.cart-summary-col.is-empty {
  display: none;
}

@media (min-width: 1024px) {
  .cart-summary-col.is-empty {
    display: none;
  }
}


/* ── 19. RECOMMENDED SECTION ─────────────────────────────────── */
/* .section, .section--rose, .products-grid all inherited from style.css */
/* Nothing new needed */


/* ── 20. PRINT ───────────────────────────────────────────────── */
@media print {
  .cart-mobile-bar,
  .wa-fab,
  .announce-bar,
  .mobile-bottom-nav { display: none !important; }

  .cart-body__inner { grid-template-columns: 1fr; }
  .cart-summary-col { position: static; }
}