@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --cg:#16a34a; --cg-d:#15803d; --cg-l:#4ade80; --cg-xl:#dcfce7;
  --cr:#ef4444; --cw:#f59e0b;
  --bg:#f0fdf4; --surface:#fff;
  --text:#0f172a; --muted:#64748b; --border:#d1fae5;
  --radius:18px; --sm:12px;
  --shadow:0 8px 32px rgba(22,163,74,.12);
  --shadow-sm:0 2px 12px rgba(0,0,0,.07);
  --shadow-hover:0 16px 48px rgba(22,163,74,.2);
  --trans:all .28s cubic-bezier(.4,0,.2,1);
}

/* ── Page ── */
.cart-section {
 /* background: linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 60%,#f8faff 100%) !important;*/
  min-height: 80vh;
  font-family: 'Inter', sans-serif !important;
  padding-bottom: 60px !important;
}

/* ── Cart Item Card ── */
.cart-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px 20px !important;
  margin-bottom: 14px !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: slideUp .45s ease forwards;
  opacity: 0;
}
.cart-item:nth-child(1){animation-delay:.04s}
.cart-item:nth-child(2){animation-delay:.10s}
.cart-item:nth-child(3){animation-delay:.16s}
.cart-item:nth-child(4){animation-delay:.22s}
.cart-item:nth-child(5){animation-delay:.28s}

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

.cart-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:4px; background:linear-gradient(180deg,var(--cg-l),var(--cg-d));
  border-radius:4px 0 0 4px; transform:scaleY(0); transition:var(--trans);
}
.cart-item:hover { box-shadow:var(--shadow-hover) !important; transform:translateY(-2px); border-color:var(--cg-l) !important; }
.cart-item:hover::before { transform:scaleY(1); }

/* ── Product Image ── */
.cart-item > a.product-image {
  flex-shrink: 0 !important;
  display: block !important;
  width: 90px !important;
}
.cart-item > a.product-image img,
.cart-item .product-image img {
  width: 90px !important;
  height: 90px !important;
  object-fit: contain !important;
  border-radius: var(--sm) !important;
  border: 1.5px solid var(--border) !important;
  background: #f8fffe !important;
  padding: 6px !important;
  display: block !important;
  transition: var(--trans) !important;
}
.cart-item:hover .product-image img { transform:scale(1.06) !important; }

/* ── Item Details ── */
.cart-item .item-details {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.cart-item .item-details h3 {
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 0 2px !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.cart-item .item-details h3 a { color:inherit !important; text-decoration:none !important; }
.cart-item .item-details h3 a:hover { color:var(--cg) !important; }

/* Variant tags */
.cart-item .sold-by { margin: 0 !important; }
.cart-item .sold-by span {
  background: #f0fdf4 !important;
  color: var(--cg-d) !important;
  border: 1px solid var(--border) !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  display: inline-block !important;
  margin-right: 4px !important;
  margin-bottom: 2px !important;
}

/* Price */
.cart-item .price-section { margin: 2px 0 0 !important; }
.cart-item .price-section .price { font-size: 1.05rem !important; font-weight: 800 !important; color: var(--cg) !important; }
.cart-item .price-section .original-price { display: none !important; }

/* Promo badge */
.promo-badge {
  display: inline-block !important;
  background: linear-gradient(135deg,var(--cg),var(--cg-d)) !important;
  color: #fff !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  margin-top: 2px !important;
}

/* ── Qty + Remove Row ── */
.cart-item .qty-remove {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 8px !important;
  flex-wrap: wrap !important;
}

/* ── Qty Controls — FORCE HORIZONTAL ROW ── */
.cart-item .cart_qty,
.cart-item .qty-remove .cart_qty { 
  display: inline-flex !important;
  align-items: center !important;
}

.cart-item .cart_qty .input-group {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: auto !important;
  background: var(--bg) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 50px !important;
  padding: 4px 6px !important;
  gap: 4px !important;
}

/* Force the wrapper divs to be inline, not block */
.cart-item .cart_qty .input-group .qty-left-minus,
.cart-item .cart_qty .input-group .qty-right-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  flex: 0 0 auto !important;
  float: none !important;
}

.cart-item .qty-left-minus a,
.cart-item .qty-right-plus a {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface) !important;
  color: var(--cg) !important;
  font-size: .72rem !important;
  text-decoration: none !important;
  transition: var(--trans) !important;
  border: 1.5px solid var(--border) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.cart-item .qty-left-minus a:hover,
.cart-item .qty-right-plus a:hover {
  background: var(--cg) !important;
  color: #fff !important;
  border-color: var(--cg) !important;
  transform: scale(1.1) !important;
}

.cart-item .qty-input,
.cart-item input.qty-input,
.cart-item .input-group input.form-control {
  width: 38px !important;
  min-width: 38px !important;
  height: 30px !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  flex: 0 0 38px !important;
}

/* ── Remove Button ── */
.cart-item .remove-btn {
  background: rgba(239,68,68,.09) !important;
  border: 1.5px solid rgba(239,68,68,.25) !important;
  border-radius: 50px !important;
  padding: 6px 14px !important;
  color: var(--cr) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--trans) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1 !important;
}
.cart-item .remove-btn:hover {
  background: var(--cr) !important;
  color: #fff !important;
  border-color: var(--cr) !important;
}
.cart-item .remove-btn a,
.cart-item .remove-btn i {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none !important;
}

/* Out of stock */
.out-of-stock-details {
  background: rgba(239,68,68,.1); color:var(--cr);
  border: 1px solid rgba(239,68,68,.25);
  padding: 4px 14px; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
}

/* ── Hidden table rows (fallback markup) ── */
.product-box-contain { display: none !important; }
table.table { border:none; background:transparent; }
table.table tbody { background:transparent; }

/* ── Cart Summary bar (discount progress) ── */
.cart__summary { border-radius: var(--radius) !important; overflow:hidden; }
.shipping-notes-wrapper { border-radius: var(--sm) !important; }

/* ── FREE Items Section ── */
#free_items_section > div {
  background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important;
  border: 1.5px solid rgba(22,163,74,.3) !important;
  border-radius: var(--radius) !important;
  padding: 14px 18px !important;
  margin-top: 16px !important;
}

/* ── SIDEBAR ── */
.col-xxl-3 .summery-box,
.summery-box.p-sticky {
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(22,163,74,.2) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 48px rgba(22,163,74,.12), 0 2px 8px rgba(0,0,0,.05) !important;
  padding: 24px !important;
  background-image: linear-gradient(135deg,rgba(240,253,244,.75),rgba(255,255,255,.97)) !important;
  animation: slideUp .5s ease .12s both !important;
}

/* Summary list */
ul.summery-total { list-style:none; padding:0; margin:0 0 20px; }
ul.summery-total li.list-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 11px 0 !important;
  border-bottom: 1px dashed var(--border) !important;
  border-top: none !important;
}
ul.summery-total li.list-total:last-child { border-bottom: none !important; }
ul.summery-total li.list-total h4 {
  font-size: .9rem !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}
ul.summery-total li.list-total h4.price.theme-color {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--cg) !important;
}
ul.summery-total li.list-total:last-child h4 { font-size:1rem !important; font-weight:800 !important; color:var(--text) !important; }
ul.summery-total li.list-total:last-child h4.price { font-size:1.25rem !important; color:var(--cg) !important; }

/* Promo boxes */
.promo-applied-box {
  background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important;
  border: 1.5px solid rgba(22,163,74,.3) !important;
  border-radius: var(--sm) !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  font-size: .83rem !important;
  color: var(--cg-d) !important;
  font-weight: 600 !important;
}
.promo-applied-box ul { margin:6px 0 0 14px; padding:0; font-weight:500; }

.promo-potential-box {
  background: linear-gradient(135deg,#fffbeb,#fef3c7) !important;
  border: 1.5px solid rgba(245,158,11,.35) !important;
  border-radius: var(--sm) !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  font-size: .82rem !important;
  color: #92400e !important;
}

/* ── Buttons ── */
.button-group.cart-button ul {
  list-style: none !important; padding:0 !important; margin:0 !important;
  display: flex !important; flex-direction: column !important; gap:10px !important;
}
.button-group.cart-button li { width:100% !important; }

.button-group.cart-button .proceed-btn,
.button-group.cart-button a.proceed-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 15px 16px !important;
  background: linear-gradient(135deg,var(--cg),var(--cg-d)) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  transition: var(--trans) !important;
  box-shadow: 0 6px 24px rgba(22,163,74,.4) !important;
  white-space: nowrap !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
}
.button-group.cart-button a.proceed-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(22,163,74,.5) !important;
  color: #fff !important;
}

.button-group.cart-button .shopping-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 14px !important;
  font-size: .87rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--trans) !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
.button-group.cart-button .shopping-button:hover {
  border-color: var(--cg-l) !important;
  color: var(--cg) !important;
  background: var(--cg-xl) !important;
}

/* ── Empty Cart ── */
.empty-cart {
  text-align: center; padding: 60px 20px;
  background: var(--surface); border-radius: var(--radius);
  border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
  margin-top: 20px;
}
.empty-cart img { width:200px; opacity:.85; margin-bottom:16px; }
.cart-empty-text { font-size:1.15rem; font-weight:800; color:var(--muted); font-family:'Inter',sans-serif; }

/* ── Responsive ── */
@media(max-width:991px){
  .col-xxl-3 .summery-box,
  .summery-box.p-sticky { position:static !important; margin-top:24px; }
}
@media(max-width:600px){
  .cart-item { flex-wrap:wrap !important; }
  .cart-item > a.product-image,
  .cart-item > a.product-image img,
  .cart-item .product-image img { width:72px !important; height:72px !important; }
  .cart-item .item-details h3 { white-space:normal !important; }
}