/* MM Supermarket - shared visual refresh */
:root {
  --mm-primary: #2563eb;
  --mm-primary-dark: #1d4ed8;
  --mm-accent: #f59e0b;
  --mm-danger: #dc2626;
  --mm-bg: #f5f9ff;
  --mm-radius: 12px;
}

body {
  background: var(--mm-bg);
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
}

.navbar {
  background: linear-gradient(135deg, var(--mm-primary), var(--mm-primary-dark)) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.navbar-brand { font-weight: 700; letter-spacing: 0.3px; }

.btn-primary {
  background-color: var(--mm-primary);
  border-color: var(--mm-primary);
}
.btn-primary:hover { background-color: var(--mm-primary-dark); border-color: var(--mm-primary-dark); }

.btn-success { background-color: #16a34a; border-color: #16a34a; }
.btn-outline-primary { color: var(--mm-primary); border-color: var(--mm-primary); }
.btn-outline-primary:hover { background-color: var(--mm-primary); border-color: var(--mm-primary); }

.card, .product-card {
  border: none;
  border-radius: var(--mm-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.card-img-top { border-radius: var(--mm-radius) var(--mm-radius) 0 0; background: #f1f1f1; }

.badge.bg-danger { background-color: var(--mm-danger) !important; }
.badge.bg-warning { background-color: var(--mm-accent) !important; }

.wishlist-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  background: white;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  border: none;
  font-size: 18px;
  color: #ccc;
}
.wishlist-heart.active { color: var(--mm-danger); }

.list-group-item { border: none; border-bottom: 1px solid #eee; }
.list-group-item:hover { background: #eefaf8; cursor: pointer; }

.form-control:focus, .form-select:focus {
  border-color: var(--mm-primary);
  box-shadow: 0 0 0 0.2rem rgba(15,118,110,0.15);
}

.price-strike { color: #999; text-decoration: line-through; font-size: 0.9em; }
.price-current { color: var(--mm-primary-dark); font-weight: 700; font-size: 1.1em; }

/* Dark mode */
html[data-theme="dark"] body { background: #121417; color: #e5e7eb; }
html[data-theme="dark"] .card { background: #1e2126; color: #e5e7eb; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background: #1e2126; color: #e5e7eb; border-color: #333;
}
html[data-theme="dark"] .list-group-item { background: #1e2126; color: #e5e7eb; }
html[data-theme="dark"] .table { color: #e5e7eb; }
html[data-theme="dark"] .bg-white { background-color: #1e2126 !important; }
html[data-theme="dark"] .text-muted { color: #9ca3af !important; }

.theme-toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--mm-primary);
  color: white;
  font-size: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  cursor: pointer;
}