/* ── General ─────────────────────────────────────────────────────── */
body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; }

a { transition: color .2s; }

.hover-lift { transition: transform .2s, box-shadow .2s; cursor: pointer; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero-banner { background: linear-gradient(135deg, #dc3545 0%, #c41230 100%); }

/* ── Product card ────────────────────────────────────────────────── */
.card { border-radius: 12px; }
.card-img-top { border-radius: 12px 12px 0 0; }

/* ── Star Rating (review form) ───────────────────────────────────── */
.star-rating { display: flex; flex-direction: row-reverse; gap: 4px; }
.star-rating input { display: none; }
.star-rating label { font-size: 28px; color: #ddd; cursor: pointer; transition: color .15s; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #ffc107; }

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar-dark .navbar-nav .nav-link { font-weight: 500; }
.navbar-dark .navbar-nav .nav-link:hover { color: #ffc107 !important; }

/* ── Toast notification ──────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast-item {
  background: #212529; color: #fff; padding: 12px 20px;
  border-radius: 8px; font-size: 14px; min-width: 280px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  animation: slideIn .3s ease;
}
.toast-item.success { border-left: 4px solid #28a745; }
.toast-item.error   { border-left: 4px solid #dc3545; }
@keyframes slideIn { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }

/* ── Pagination ──────────────────────────────────────────────────── */
.page-link { color: #dc3545; }
.page-item.active .page-link { background: #dc3545; border-color: #dc3545; color: #fff; }