/* =============================================================
   CART.CSS  –  Shopping Cart Page
   ============================================================= */
.cart-page { padding: 0 0 60px; }
.cart-page-hero { background: var(--bg-surface); border-bottom: 1px solid var(--border-color); padding: 24px 0 16px; }
.cart-page-hero h1 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }

/* Layout */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 24px; align-items: start; }

/* Cart Items Panel */
.cart-items-panel { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; }
.cart-panel-header { padding: 14px 20px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.cart-panel-header h3 { font-size: 0.9rem; font-weight: 700; margin: 0; }
.cart-item-count { font-size: 0.8rem; color: var(--text-muted); }

.cart-item { display: grid; grid-template-columns: 80px 1fr auto auto; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); transition: background 0.15s; }
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: var(--bg-elevated); }

.cart-item-img { width: 80px; height: 80px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cart-item-img img { max-width: 90%; max-height: 90%; object-fit: contain; }
.cart-item-img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; }
.cart-item-img-placeholder i { font-size: 1.6rem; color: var(--accent); opacity: 0.6; }

.cart-item-cat { font-size: 0.7rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.cart-item-name { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); margin: 2px 0; }
.cart-item-name a { color: inherit; text-decoration: none; }
.cart-item-name a:hover { color: var(--accent); }
.cart-item-price { font-size: 0.82rem; color: var(--text-muted); }

.cart-item-total { text-align: right; }
.cart-line-total { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.cart-item-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; padding: 4px; border-radius: 5px; transition: all 0.15s; margin-top: 6px; display: block; margin-left: auto; }
.cart-item-remove:hover { color: var(--danger); background: var(--danger-bg); }

.cart-actions { padding: 14px 20px; background: var(--bg-elevated); border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Order Summary */
.cart-summary { position: sticky; top: 130px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; }
.cart-summary-header { padding: 14px 20px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-color); font-size: 0.9rem; font-weight: 700; }
.cart-summary-body { padding: 18px 20px; }

.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; padding: 7px 0; }
.summary-row .label { color: var(--text-secondary); }
.summary-row .value { font-weight: 600; color: var(--text-primary); }
.summary-row .value.discount { color: var(--success); }
.summary-divider { height: 1px; background: var(--border-color); margin: 10px 0; }

.summary-total-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.summary-total-row .total-label { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.summary-total-row .total-value { font-size: 1.4rem; font-weight: 900; color: var(--accent); }

/* Coupon */
.coupon-section { margin: 14px 0; }
.coupon-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 7px; font-weight: 500; }
.coupon-form { display: flex; gap: 6px; }
.coupon-input { flex: 1; min-width: 0; padding: 8px 12px !important; font-size: 0.84rem !important; text-transform: uppercase; }
.coupon-apply-btn { background: var(--bg-elevated); border: 1.5px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.coupon-apply-btn:hover { border-color: var(--accent); color: var(--accent); }

.coupon-applied { display: flex; align-items: center; justify-content: space-between; background: var(--success-bg); border: 1px solid var(--success); border-radius: 8px; padding: 8px 12px; font-size: 0.82rem; }
.coupon-applied .code { font-weight: 700; color: var(--success); }
.coupon-remove-btn { background: none; border: none; color: var(--success); cursor: pointer; font-size: 0.8rem; }
.coupon-msg { font-size: 0.78rem; margin-top: 5px; padding: 5px 10px; border-radius: 6px; }
.coupon-msg.success { background: var(--success-bg); color: var(--success); }
.coupon-msg.error   { background: var(--danger-bg); color: var(--danger); }

.btn-checkout { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 14px; font-size: 0.95rem; font-weight: 700; cursor: pointer; width: 100%; text-decoration: none; transition: all 0.2s; margin-top: 12px; }
.btn-checkout:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4); }
.cart-secure-note { text-align: center; font-size: 0.76rem; color: var(--text-muted); margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* Empty Cart */
.cart-empty { text-align: center; padding: 80px 20px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 16px; grid-column: 1 / -1; }
.cart-empty-icon { font-size: 5rem; color: var(--text-muted); margin-bottom: 20px; display: block; animation: emptyFloat 3s ease-in-out infinite; }
@keyframes emptyFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cart-empty h2 { font-size: 1.5rem; margin-bottom: 10px; }
.cart-empty p  { color: var(--text-secondary); margin-bottom: 24px; }

/* Responsive */
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } }
@media (max-width: 600px) { .cart-item { grid-template-columns: 64px 1fr; gap: 10px; } .cart-item-qty, .cart-item-total { grid-column: 2; } }