/* Enhance: Modern Minimalist UI for E‑Commerce Computer Store */
:root {
  --nav-red: #AF3E3E;
  --text-black: #0F0E0E;
  --bg-white: #FFFFFF;
}

html, body {
  background: var(--bg-white);
  color: var(--text-black);
}

/* Navbar inspired by contrastly.com aesthetic */
.site-navbar {
  background: var(--nav-red) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, background 0.2s ease;
  /* Compact navbar height */
  --bs-navbar-padding-y: .25rem;
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
}

.site-navbar .navbar-brand,
.site-navbar .nav-link,
.site-navbar .dropdown-item {
  color: #fff !important;
}

/* Ensure white background rules elsewhere don't override navbar */
.site-navbar, .site-navbar * {
  background-color: transparent;
}

.site-navbar { background-color: var(--nav-red) !important; }

.site-navbar .nav-link {
  font-weight: 500;
  letter-spacing: 0.2px;
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
  line-height: 1.1 !important;
  font-size: 0.9rem;
}

.site-navbar .nav-link:hover,
.site-navbar .dropdown-item:hover {
  color: #ffffff !important;
  opacity: 0.9;
}

.site-navbar .navbar-toggler {
  border: 0;
}

.site-navbar .navbar-toggler:focus {
  box-shadow: none;
}

.site-navbar .btn,
.site-navbar .btn:focus {
  box-shadow: none;
  padding: .25rem .5rem !important;
}

/* Search inputs inside navbar */
.site-navbar .form-control {
  border-radius: 24px;
  border: none;
  height: 32px;
  padding: .25rem .5rem !important;
}

.site-navbar .input-group {
  border-radius: 24px;
  overflow: hidden;
}

/* Brand sizing */
.site-navbar .navbar-brand { padding-top: 0; padding-bottom: 0; }
.site-navbar .navbar-brand img { height: 20px !important; }

/* Cart badge on dark nav */
.site-navbar .badge.bg-danger {
  background-color: #d9534f !important;
}

/* Ensure main content respects fixed navbar height */
main[role="main"], main { padding-top: 64px; }

/* Footer readability */
footer a { color: #fff; }
footer a:hover { opacity: 0.85; }

/* KGDialog entry animation */
@keyframes kgDialogIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.kg-dialog-card {
  animation: kgDialogIn 0.2s ease-out;
}