/* ─── Globals ────────────────────────────────────────────────────────────── */
:root {
  --brand-blue:  #1565c0;
  --brand-green: #1e7e34;
  --brand-dark:  #0d1b4b;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #1a1a1a;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.navbar-brand {
  font-size: 1.3rem;
  letter-spacing: -.3px;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, #0d1b4b 0%, #1565c0 100%);
  min-height: 340px;
  display: flex;
  align-items: center;
}

/* ─── Category cards ─────────────────────────────────────────────────────── */
.category-card {
  transition: transform .18s ease, box-shadow .18s ease;
  border-radius: 12px !important;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

.product-thumb img {
  height: 90px;
  width: 100%;
  object-fit: contain;
  background: #f8f9fa;
  border-radius: 6px;
}

/* ─── Category page header ───────────────────────────────────────────────── */
.category-header {
  background: linear-gradient(135deg, #0d1b4b 0%, #1565c0 100%);
}

/* ─── Product cards ──────────────────────────────────────────────────────── */
.product-card {
  transition: transform .18s ease, box-shadow .18s ease;
  border-radius: 10px !important;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
}

.product-img-wrap {
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  overflow: hidden;
}
.product-img-wrap img {
  max-height: 140px;
  width: 100%;
  object-fit: contain;
  padding: 8px;
}

.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Product detail page ────────────────────────────────────────────────── */
.product-main-img {
  width: 100%;
  height: 340px;
  object-fit: contain;
  background: #f8f9fa;
  padding: 12px;
}

.thumb-img:hover {
  border-color: var(--brand-blue) !important;
  opacity: .85;
}

/* ─── Admin layout ───────────────────────────────────────────────────────── */
.admin-wrap {
  min-height: 100vh;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
}

.admin-sidebar .nav-link {
  font-size: .9rem;
  padding: .45rem .75rem;
  transition: background .15s;
}
.admin-sidebar .nav-link:hover:not(.active) {
  background: rgba(255,255,255,.08);
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6c757d;
}

/* ─── Buttons / misc ─────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-primary:hover {
  background-color: #0d47a1;
  border-color: #0d47a1;
}
.btn-outline-primary {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-outline-primary:hover {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-success {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
}
.btn-success:hover {
  background-color: #155724;
  border-color: #155724;
}

/* ─── Navbar search ──────────────────────────────────────────────────────── */
.navbar .form-control::placeholder { color: rgba(255,255,255,.45); }
.navbar .form-control:focus { background: rgba(255,255,255,.15) !important; color: #fff; box-shadow: none; border-color: var(--brand-blue); }

/* ─── Categories dropdown ────────────────────────────────────────────────── */
.categories-dropdown {
  max-height: 70vh;
  overflow-y: auto;
  min-width: 260px;
}
.categories-dropdown .dropdown-item {
  font-size: .88rem;
  padding: .35rem 1rem;
}
.categories-dropdown .dropdown-item:hover { color: #fff; background: var(--brand-blue); }
.categories-dropdown .dropdown-item:hover i { color: #fff !important; }

/* ─── Star ratings ───────────────────────────────────────────────────────── */
.stars-wrap { line-height: 1; }
.star-icon { font-size: .72rem; color: #f5a623; }
.rating-num { font-size: .75rem; font-weight: 700; color: #333; }
.review-count { font-size: .68rem; color: #888; }

/* ─── Rank badge ─────────────────────────────────────────────────────────── */
.rank-badge {
  background: var(--brand-blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
}

/* ─── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-sidebar {
    width: 64px !important;
    min-width: 64px !important;
  }
  .admin-sidebar .nav-link span,
  .admin-sidebar .px-4 div,
  .admin-sidebar .px-4 .fw-bold + div,
  .admin-sidebar .btn span { display: none; }
  .admin-sidebar .nav-link { text-align: center; }
  .admin-sidebar .nav-link i { margin-right: 0 !important; }
}

/* ─── YouTube review list ────────────────────────────────────────────────── */
.yt-review-item:hover {
  background: #f0f4ff;
}
.yt-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}