/* ============================================
   CART PAGE - Modern Light Theme 2026
   ============================================ */

.cart {
  background: var(--bg-primary, #FDFBF7);
  border: 1px solid var(--bg-tertiary, #EDE6DA);
  box-shadow: 0 8px 40px var(--shadow-soft, rgba(45, 41, 38, 0.08));
  padding: var(--space-xl, 2rem);
  border-radius: var(--radius-xl, 16px);
  text-align: left;
  margin: var(--space-xl, 2rem) auto;
  max-width: 800px;
  color: var(--text-primary, #2D2926);
}

.cart h2 {
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  text-align: center;
  margin-bottom: var(--space-xl, 2rem);
  color: var(--text-primary, #2D2926);
  font-size: var(--fs-h2, 1.75rem);
}

/* ============================================
   CART MODE INDICATOR (delivery / pickup pill)
   ============================================ */

.cart-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  background: var(--bg-secondary, #F5F0E8);
  color: var(--brand-gold-dark, #A68736);
  padding: 8px 14px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 auto var(--space-lg, 1.5rem);
  box-shadow: 0 2px 8px var(--shadow-soft, rgba(45, 41, 38, 0.08));
}

.cart-mode-indicator i {
  color: var(--brand-gold, #C9A456);
}

.cart-mode-change {
  margin-left: var(--space-sm, 0.5rem);
  padding-left: var(--space-sm, 0.5rem);
  border-left: 1px solid var(--bg-tertiary, #EDE6DA);
  color: var(--text-secondary, #5C5550);
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color var(--transition-fast, 150ms ease);
}

.cart-mode-change:hover {
  color: var(--brand-gold-dark, #A68736);
  text-decoration: underline;
}

html[lang="he"] .cart-mode-change {
  margin-left: 0;
  margin-right: var(--space-sm, 0.5rem);
  padding-left: 0;
  padding-right: var(--space-sm, 0.5rem);
  border-left: none;
  border-right: 1px solid var(--bg-tertiary, #EDE6DA);
}

.cart > .cart-mode-indicator {
  display: flex;
  width: max-content;
  max-width: 100%;
}

/* Center the pill under the heading */
.cart h2 + .cart-mode-indicator {
  margin-top: calc(-1 * var(--space-md, 1rem));
}

/* ============================================
   CART ITEMS
   ============================================ */

.cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 1.5rem);
}

.cart-item {
  display: flex;
  align-items: center;
  gap: var(--space-lg, 1.5rem);
  padding: var(--space-lg, 1.5rem);
  background: var(--bg-secondary, #F5F0E8);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--bg-tertiary, #EDE6DA);
  transition: all var(--transition-fast, 150ms ease);
}

.cart-item:hover {
  box-shadow: 0 4px 20px var(--shadow-soft, rgba(45, 41, 38, 0.08));
  border-color: var(--brand-gold-light, #E5D4A4);
}

/* Item Image */
.item-image {
  flex-shrink: 0;
}

.item-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--bg-tertiary, #EDE6DA);
  background: var(--bg-primary, #FDFBF7);
}

/* Item Details */
.item-details {
  flex-grow: 1;
}

.item-details h3 {
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  margin: 0 0 var(--space-xs, 0.25rem) 0;
  color: var(--text-primary, #2D2926);
  font-size: var(--fs-h4, 1.1rem);
  font-weight: 600;
}

.item-details p {
  margin: var(--space-xs, 0.25rem) 0;
  font-size: var(--fs-small, 0.9rem);
  color: var(--text-secondary, #5C5550);
}

/* Quantity Controls */
.item-quantity-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  margin: var(--space-md, 1rem) 0;
}

.quantity-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-gold, #C9A456), var(--brand-gold-dark, #A68736));
  border: none;
  color: white;
  cursor: pointer;
  border-radius: var(--radius-md, 8px);
  font-weight: 700;
  font-size: 1.25rem;
  transition: all var(--transition-fast, 150ms ease);
}

.quantity-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(201, 164, 86, 0.4);
}

.quantity-btn:active {
  transform: scale(0.95);
}

.item-quantity {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #2D2926);
  min-width: 40px;
  text-align: center;
}

/* Item Subtotal */
.item-subtotal {
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size: var(--fs-h4, 1.1rem);
  font-weight: 700;
  color: var(--brand-gold-dark, #A68736);
  min-width: 80px;
  text-align: right;
}

/* ============================================
   CART TOTAL
   ============================================ */

.cart-total {
  margin-top: var(--space-xl, 2rem);
  padding-top: var(--space-xl, 2rem);
  border-top: 2px solid var(--bg-tertiary, #EDE6DA);
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm, 0.5rem) 0;
  font-size: var(--fs-body, 1rem);
  color: var(--text-secondary, #5C5550);
}

.total-row.delivery-row {
  color: var(--text-secondary, #5C5550);
  font-size: var(--fs-small, 0.9rem);
}

.total-row.delivery-row i {
  color: var(--brand-gold, #C9A456);
  margin-right: var(--space-xs, 0.25rem);
}

.total-row.grand-total {
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size: var(--fs-h3, 1.25rem);
  font-weight: 700;
  color: var(--brand-gold-dark, #A68736);
  margin-top: var(--space-sm, 0.5rem);
  padding-top: var(--space-md, 1rem);
  border-top: 1px solid var(--bg-tertiary, #EDE6DA);
}

/* ============================================
   DELIVERY ITEM IN CART
   ============================================ */

.cart-item.delivery-item {
  background: linear-gradient(135deg, var(--bg-secondary, #F5F0E8), var(--brand-gold-light, #E5D4A4));
  border: 2px dashed var(--brand-gold, #C9A456);
}

.cart-item.delivery-item .delivery-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: var(--brand-gold, #C9A456);
  border-radius: var(--radius-md, 8px);
}

.cart-item.delivery-item .delivery-icon i {
  font-size: 2.5rem;
  color: white;
}

.cart-item.delivery-item .item-details h3 {
  color: var(--brand-gold-dark, #A68736);
}

.cart-item.delivery-item .item-price {
  display: flex;
  align-items: center;
}

.cart-item.delivery-item .delivery-price {
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size: var(--fs-h3, 1.25rem);
  font-weight: 700;
  color: var(--brand-gold-dark, #A68736);
}

@media (max-width: 768px) {
  .cart-item.delivery-item .delivery-icon {
    width: 60px;
    height: 60px;
  }

  .cart-item.delivery-item .delivery-icon i {
    font-size: 1.5rem;
  }
}

/* ============================================
   CART ACTIONS
   ============================================ */

.cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl, 2rem);
  gap: var(--space-md, 1rem);
  flex-wrap: wrap;
}

.left-actions,
.center-actions,
.right-actions {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 150px;
}

.left-actions {
  justify-content: flex-start;
}

.center-actions {
  justify-content: center;
}

.right-actions {
  justify-content: flex-end;
}

/* Clear Cart Button */
.clear-cart-btn {
  background: transparent;
  color: var(--error, #B44444);
  border: 2px solid var(--error, #B44444);
  padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
  font-size: var(--fs-small, 0.9rem);
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all var(--transition-fast, 150ms ease);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
}

.clear-cart-btn:hover {
  background: var(--error, #B44444);
  color: white;
}

/* Continue Shopping Button */
.continue-shopping-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
  background: transparent;
  color: var(--text-primary, #2D2926);
  border: 2px solid var(--brand-gold, #C9A456);
  font-size: var(--fs-small, 0.9rem);
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms ease);
}

.continue-shopping-btn:hover {
  background: var(--brand-gold-light, #E5D4A4);
}

.continue-shopping-btn i {
  transition: transform var(--transition-fast, 150ms ease);
}

.continue-shopping-btn:hover i {
  transform: translateX(-4px);
}

/* Checkout Button */
.checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-md, 1rem) var(--space-xl, 2rem);
  background: linear-gradient(135deg, var(--brand-gold, #C9A456), var(--brand-gold-dark, #A68736));
  color: white;
  font-size: var(--fs-body, 1rem);
  font-weight: 700;
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast, 150ms ease);
  box-shadow: 0 4px 15px rgba(201, 164, 86, 0.3);
  position: relative;
  overflow: hidden;
}

.checkout-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left var(--transition-slow, 400ms ease);
}

.checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(201, 164, 86, 0.4);
}

.checkout-btn:hover::before {
  left: 100%;
}

/* ============================================
   EMPTY CART
   ============================================ */

.cart-empty {
  text-align: center;
  padding: var(--space-3xl, 4rem) var(--space-xl, 2rem);
}

.cart-empty i {
  font-size: 4rem;
  color: var(--text-muted, #8B857D);
  margin-bottom: var(--space-lg, 1.5rem);
}

.cart-empty p {
  font-size: var(--fs-h3, 1.25rem);
  color: var(--text-secondary, #5C5550);
  margin-bottom: var(--space-xl, 2rem);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .cart {
    padding: var(--space-lg, 1.5rem);
    margin: var(--space-md, 1rem);
    border-radius: var(--radius-lg, 12px);
  }

  .cart h2 {
    font-size: var(--fs-h3, 1.25rem);
    margin-bottom: var(--space-lg, 1.5rem);
  }

  .cart-item {
    flex-wrap: wrap;
    padding: var(--space-md, 1rem);
    gap: var(--space-md, 1rem);
  }

  .item-image img {
    width: 80px;
    height: 80px;
  }

  .item-details h3 {
    font-size: 1rem;
  }

  .item-details p {
    font-size: 0.85rem;
  }

  .cart-total {
    font-size: var(--fs-h3, 1.25rem);
  }

  /* Vertical layout for actions */
  .cart-actions {
    flex-direction: column;
    gap: var(--space-md, 1rem);
  }

  .left-actions,
  .center-actions,
  .right-actions {
    width: 100%;
    justify-content: center;
  }

  .clear-cart-btn,
  .continue-shopping-btn,
  .checkout-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Reorder buttons: Checkout first, then continue, then clear */
  .right-actions {
    order: 1;
  }

  .center-actions {
    order: 2;
  }

  .left-actions {
    order: 3;
  }
}

/* ============================================
   RTL SUPPORT (Hebrew)
   ============================================ */

html[lang="he"] .cart-item {
  flex-direction: row-reverse;
}

html[lang="he"] .item-details {
  text-align: right;
}

html[lang="he"] .item-quantity-controls {
  flex-direction: row-reverse;
}

html[lang="he"] .continue-shopping-btn i {
  transform: rotate(180deg);
}

html[lang="he"] .continue-shopping-btn:hover i {
  transform: rotate(180deg) translateX(-4px);
}