/* ============================================================
   eshop/css/starter.css — Starter theme overrides
   Minimal, clean design with neutral palette.
   ============================================================ */

/* ── Theme color overrides ── */
:root {
  --eshop-primary: #4f46e5;
  --eshop-primary-hover: #4338ca;
  --eshop-accent: #6366f1;
  --eshop-header-bg: #ffffff;
  --eshop-footer-bg: #111827;
  --eshop-body-bg: #f9fafb;
}

/* ── Header ── */
.eshop-header {
  background: var(--eshop-header-bg);
  border-bottom: 1px solid var(--eshop-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.eshop-header .navbar-brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--eshop-primary);
}

.eshop-header .nav-link {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--eshop-text);
  transition: color var(--eshop-transition);
}

.eshop-header .nav-link:hover {
  color: var(--eshop-primary);
}

/* ── Search bar ── */
.eshop-search-input {
  border-radius: 2rem;
  border: 1px solid var(--eshop-border);
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  font-size: 0.9rem;
  transition: border-color var(--eshop-transition), box-shadow var(--eshop-transition);
}

.eshop-search-input:focus {
  border-color: var(--eshop-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* ── Buttons — match primary ── */
.eshop-body .btn-primary {
  background-color: var(--eshop-primary);
  border-color: var(--eshop-primary);
}

.eshop-body .btn-primary:hover {
  background-color: var(--eshop-primary-hover);
  border-color: var(--eshop-primary-hover);
}

.eshop-body .btn-outline-primary {
  color: var(--eshop-primary);
  border-color: var(--eshop-primary);
}

.eshop-body .btn-outline-primary:hover {
  background-color: var(--eshop-primary);
  border-color: var(--eshop-primary);
  color: #fff;
}

/* ── Footer ── */
.eshop-footer {
  background: var(--eshop-footer-bg);
  color: #9ca3af;
  padding: 2.5rem 0 1.5rem;
}

.eshop-footer h6 {
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.eshop-footer a {
  color: #9ca3af;
  text-decoration: none;
  transition: color var(--eshop-transition);
}

.eshop-footer a:hover {
  color: #fff;
}

.eshop-footer-bottom {
  border-top: 1px solid #374151;
  padding-top: 1rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
}

/* ── Cards — starter clean look ── */
.eshop-body .card {
  border-radius: var(--eshop-radius);
}

/* ── Nav pills — primary color ── */
.eshop-body .nav-pills .nav-link.active {
  background-color: var(--eshop-primary);
}

.eshop-body .nav-pills .nav-link {
  color: var(--eshop-text);
  font-weight: 500;
  font-size: 0.9rem;
}

/* ── Pagination ── */
.eshop-body .page-item.active .page-link {
  background-color: var(--eshop-primary);
  border-color: var(--eshop-primary);
}

.eshop-body .page-link {
  color: var(--eshop-primary);
}

/* ── Forms ── */
.eshop-body .form-control:focus,
.eshop-body .form-select:focus {
  border-color: var(--eshop-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* ── Badge text color fix ── */
.eshop-body .text-primary {
  color: var(--eshop-primary) !important;
}