/* =========================================
   CART PAGE
========================================= */

.cart-page {
  padding: 70px 0;
  background: #f8fafc;
  min-height: 70vh;
}

/* =========================================
   PAGE HEADING
========================================= */

.page-heading {
  margin-bottom: 40px;
  text-align: center;
}

.page-heading > span {
  display: inline-block;
  margin-bottom: 10px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.page-heading h1 {
  margin-bottom: 10px;
  color: #111827;
  font-size: 38px;
}

.page-heading p {
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
}

/* =========================================
   CART LAYOUT
========================================= */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 30px;
  align-items: start;
}

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

.cart-items-section {
  min-width: 0;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cart-item {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);
}

.cart-item-image {
  width: 100px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border-radius: 10px;
  font-size: 38px;
}

.cart-item-content h3 {
  margin-bottom: 7px;
  color: #111827;
  font-size: 17px;
}

.cart-item-content p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.cart-item-price {
  text-align: right;
}

.cart-item-price strong {
  display: block;
  margin-bottom: 10px;
  color: #111827;
  font-size: 18px;
}

.remove-cart-btn {
  padding: 7px 10px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff;
  color: #dc2626;
  font-size: 12px;
  cursor: pointer;
  transition: 0.3s ease;
}

.remove-cart-btn:hover {
  background: #fef2f2;
}

/* =========================================
   CART SUMMARY
========================================= */

.cart-summary {
  position: sticky;
  top: 25px;
  padding: 25px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}

.cart-summary h2 {
  margin-bottom: 22px;
  color: #111827;
  font-size: 20px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 0;
  color: #64748b;
  font-size: 14px;
}

.summary-row strong {
  color: #111827;
}

.summary-row .discount {
  color: #16a34a;
}

.summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
  color: #111827;
  font-size: 17px;
  font-weight: 700;
}

.summary-total strong {
  font-size: 22px;
}

/* =========================================
   CHECKOUT BUTTON
========================================= */

.checkout-btn {
  width: 100%;
  margin-top: 22px;
  padding: 13px 15px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.checkout-btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

.continue-shopping {
  display: block;
  margin-top: 17px;
  color: #64748b;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  transition: 0.3s ease;
}

.continue-shopping:hover {
  color: #2563eb;
}

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

.empty-cart {
  display: none;
  padding: 70px 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
}

.empty-cart-icon {
  margin-bottom: 15px;
  font-size: 55px;
}

.empty-cart h2 {
  margin-bottom: 8px;
  color: #111827;
  font-size: 23px;
}

.empty-cart p {
  margin-bottom: 22px;
  color: #64748b;
  font-size: 14px;
}

.empty-cart .primary-btn {
  display: inline-block;
}

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

@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }

  .cart-summary {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .cart-page {
    padding: 50px 0;
  }

  .page-heading h1 {
    font-size: 30px;
  }

  .page-heading p {
    font-size: 14px;
  }

  .cart-item {
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 15px;
    padding: 15px;
  }

  .cart-item-image {
    width: 75px;
    height: 70px;
    font-size: 30px;
  }

  .cart-item-content h3 {
    font-size: 15px;
  }

  .cart-item-price {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .cart-item-price strong {
    margin-bottom: 0;
  }

  .cart-summary {
    padding: 22px;
  }
}

@media (max-width: 400px) {
  .page-heading h1 {
    font-size: 27px;
  }

  .empty-cart {
    padding: 55px 15px;
  }

  .empty-cart h2 {
    font-size: 20px;
  }
}

/* =========================================
   DARK MODE - CART PAGE
========================================= */

body.dark-mode .cart-page {
    color: #e5e7eb !important;
}

body.dark-mode .page-heading span {
    color: #60a5fa !important;
}

body.dark-mode .page-heading h1 {
    color: #ffffff !important;
}

body.dark-mode .page-heading p {
    color: #cbd5e1 !important;
}

/* Cart Summary */

body.dark-mode .cart-summary {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

body.dark-mode .cart-summary h2 {
    color: #ffffff !important;
}

body.dark-mode .summary-row {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

body.dark-mode .summary-row span {
    color: #cbd5e1 !important;
}

body.dark-mode .summary-row strong {
    color: #ffffff !important;
}

body.dark-mode .summary-row .discount {
    color: #22c55e !important;
}

body.dark-mode .summary-total {
    border-color: #475569 !important;
}

body.dark-mode .summary-total span {
    color: #ffffff !important;
}

body.dark-mode .summary-total strong {
    color: #ffffff !important;
}

/* Checkout */

body.dark-mode .checkout-btn {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

body.dark-mode .checkout-btn:hover {
    background: #1d4ed8 !important;
}

/* Continue Shopping */

body.dark-mode .continue-shopping {
    color: #93c5fd !important;
}

body.dark-mode .continue-shopping:hover {
    color: #60a5fa !important;
}

/* Empty Cart */

body.dark-mode .empty-cart {
    color: #e5e7eb !important;
}

body.dark-mode .empty-cart h2 {
    color: #ffffff !important;
}

body.dark-mode .empty-cart p {
    color: #cbd5e1 !important;
}

/* ================= DARK MODE CART TEXT ================= */

body.dark-mode .cart-item {
    background: #ffffff !important;
    border-color: #d1d5db !important;
}

body.dark-mode .cart-item-content h3 {
    color: #111827 !important;
}

body.dark-mode .cart-item-content p {
    color: #64748b !important;
}

body.dark-mode .cart-item-price strong {
    color: #111827 !important;
}

body.dark-mode .cart-item-image {
    background: #dbeafe !important;
    color: #475569 !important;
}

body.dark-mode .remove-cart-btn {
    color: #dc2626 !important;
    border-color: #fecaca !important;
    background: #ffffff !important;
}

/* FINAL DARK MODE FIX - CART */

body.dark-mode .cart-page .empty-cart {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .cart-page .empty-cart h2 {
    color: #ffffff !important;
}

body.dark-mode .cart-page .empty-cart p {
    color: #cbd5e1 !important;
}

body.dark-mode .cart-page .empty-cart .primary-btn {
    background-color: #2563eb !important;
    color: #ffffff !important;
}