/* cart-drawer.css */

/* Cart overlay — z-index must stay BELOW the drawer (900) */
#cartOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 850;
  display: none;
  cursor: pointer;
}
#cartOverlay.active { display: block; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(400px, 96vw);
  height: 100vh;
  background: white;
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform var(--ease-slow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-2xl);
}
.cart-drawer.open { transform: translateX(0); }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--border);
  flex-shrink: 0;
}
.cart-header-left { display: flex; align-items: center; gap: var(--sp-2); }
.cart-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; }
.cart-qty-badge {
  background: var(--primary);
  color: white;
  border-radius: var(--r-full);
  min-width: 22px; height: 22px;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

.cart-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }

.cart-empty { text-align: center; padding: var(--sp-16) var(--sp-5); }
.cart-empty .empty-icon { font-size: 56px; margin-bottom: var(--sp-4); }
.cart-empty h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--sp-2); }
.cart-empty p  { font-size: var(--text-sm); color: var(--gray-500); margin-bottom: var(--sp-6); }

.cart-free-shipping {
  background: var(--primary-bg);
  border: 1px solid var(--primary-20);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--sp-4);
}

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: var(--gray-50);
  border: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.cart-item-variant { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.cart-item-qty-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); gap: var(--sp-2); flex-wrap: wrap; }
.cart-item-price { font-size: var(--text-base); font-weight: 800; color: var(--black); white-space: nowrap; align-self: center; flex-shrink: 0; }
.cart-remove { font-size: 11px; color: var(--gray-400); cursor: pointer; transition: color var(--ease); }
.cart-remove:hover { color: var(--error); }

.cart-footer { padding: var(--sp-4) var(--sp-5); border-top: var(--border); flex-shrink: 0; }
.cart-totals { margin-bottom: var(--sp-4); }
.cart-row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--gray-600); margin-bottom: var(--sp-2); }
.cart-row.total { font-size: var(--text-lg); font-weight: 800; color: var(--black); margin-top: var(--sp-3); }
.cart-row .val  { color: var(--primary); }

/* Quantity counter */
.input-counter { display: flex; align-items: center; }
.counter-btn {
  width: 28px; height: 28px;
  border: var(--border);
  background: var(--gray-50);
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--ease);
  color: var(--gray-700);
  border-radius: var(--r-sm);
}
.counter-btn:hover { background: var(--primary); border-color: var(--primary); color: white; }
.counter-input {
  width: 36px;
  text-align: center;
  border: none;
  border-top: var(--border);
  border-bottom: var(--border);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 4px 0;
  background: white;
  outline: none;
}

/* ── Cart Drawer Mobil Düzeltmeleri ──────────────────────────── */
@media (max-width: 480px) {
  .cart-drawer { width: 100%; }

  .cart-header { padding: var(--sp-3) var(--sp-4); }
  .cart-title  { font-size: var(--text-base); }

  .cart-body   { padding: var(--sp-3) var(--sp-4); }
  .cart-footer { padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }

  .cart-item-img { width: 52px; height: 52px; font-size: 22px; }
  .cart-item-name { font-size: 12px; }
  .cart-item-price { font-size: var(--text-sm); }
}