/* ------------------------------------------
   GENERAL STYLES
------------------------------------------ */
.navbar {
  height: 60px;
}

.card {
  margin-bottom: 0 !important;
  background-color: var(--theme-surface-elevated) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-card-border-color) !important;
}

.card-footer {
  background-color: var(--theme-surface-elevated) !important;
  border-color: var(--theme-border) !important;
}

/* ------------------------------------------
   SIDEBAR STYLES
------------------------------------------ */
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  width: 90px;
  bottom: 0;
  overflow-y: auto;
  background: var(--theme-surface-elevated) !important;
  border-right: 1px solid var(--theme-border) !important;
  text-align: center;
}
@media (min-width: 768px) {
  .sidebar {
    width: 200px;
  }
}

/* Sidebar text styling */
.sidebar span {
  font-size: 0.7rem;
  color: var(--theme-text-muted) !important;
}
.sidebar .list-group-item {
  background: transparent !important;
  color: var(--theme-text) !important;
  border: none;
}
.category-name {
  display: block;
  width: 100%;
  font-size: 0.85rem;
  color: var(--theme-text) !important;
}

/* Active category styling */
.list-group-item.active {
  border: none !important;
  border-left: 4px solid var(--theme-primary) !important;
  background: radial-gradient(
    circle at left center,
    rgba(var(--theme-primary-rgb), 0.18),
    transparent
  ) !important;
  color: var(--theme-primary) !important;
  font-weight: 500;
  border-radius: 10px;
}
.list-group-item:hover {
  background-color: rgba(var(--theme-text-rgb), 0.08) !important;
  cursor: pointer;
}

/* ------------------------------------------
   SEARCH BAR
------------------------------------------ */
.local-search-bar {
  position: fixed;
  top: 60px;
  left: 90px;
  right: 0;
  z-index: 10;
  background: var(--theme-surface-elevated) !important;
  border-bottom: 1px solid var(--theme-border) !important;
  padding: 0.5rem 1rem;
  width: calc(100% - 90px);
  max-width: calc(100% - 90px);
}
@media (min-width: 768px) {
  .local-search-bar {
    left: 200px;
    width: calc(100% - 200px);
    max-width: calc(100% - 200px);
  }
}

/* ------------------------------------------
   MAIN CONTENT
------------------------------------------ */
.main-content {
  margin-top: 120px;
  margin-left: 90px;
  height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 1rem;
  background: var(--theme-surface-muted) !important;
}
@media (min-width: 768px) {
  .main-content {
    margin-left: 200px;
  }
}

/* ------------------------------------------
   PRODUCT STYLES
------------------------------------------ */
.image-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--theme-border) !important;
}
.image-container img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.fixed-img-height {
  object-fit: cover;
}

.desc-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.6em;
  line-height: 1.3em;
}

/* ------------------------------------------
   CART COUNT BADGE
------------------------------------------ */
/* #cart-count {
  font-size: 0.70rem;
  height: 20px;
  width: 20px;
  background: red;
  border-radius: 50%;
  line-height: 1.3rem;
  color: white;
  text-align: center;
} */

/* ------------------------------------------
   MOBILE RESPONSIVE OVERRIDES
------------------------------------------ */
@media (max-width: 767px) {
  .fixed-img-height {
    height: 100px;
  }

  .card-title,
  .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
  }

  /* #main-content {
    padding: 2px;
  } */

  .card-body {
    padding: 4px;
  }

  .btn-sm {
    font-size: 15.6px;
  }

  .sidebar {
    width: 65px !important;
  }

  .main-content {
    margin-left: 65px;
    height: calc(100vh - 120px);
  }

  .local-search-bar {
    left: 65px;
    width: calc(100% - 65px);
    max-width: calc(100% - 65px);
    padding: 8px !important;
  }

  #category-menu a.list-group-item {
    padding: 2px !important;
    padding-bottom: 5px !important;
  }

  #category-menu a.list-group-item i {
    font-size: 15px !important;
  }

  .desc-truncate {
    display: none;
  }

  .image-container {
    height: 120px;
  }
}

/* --- Smooth Skeleton Pulse Animation --- */
@keyframes skeleton-pulse {
  0% { background-color: rgba(var(--theme-surface-rgb), 0.55); }
  50% { background-color: rgba(var(--theme-surface-rgb), 0.35); }
  100% { background-color: rgba(var(--theme-surface-rgb), 0.55); }
}

.placeholder {
  display: inline-block;
  background-color: rgba(var(--theme-surface-rgb), 0.45);
  border-radius: 4px;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.placeholder-glow .placeholder {
  opacity: 1;
}

.skeleton-img {
  height: 100%;
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

/* Optional: Fade-in for real cards */
.fade-in {
  animation: fadeIn 0.3s ease-in forwards;
  opacity: 0;
}
@keyframes fadeIn {
  to { opacity: 1; }
}


/* → ensure the results container is a positioned parent */
.search-results {
  position: relative;
}

/* overlay spinner stays dead-center */
.search-results .spinner-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(var(--theme-surface-rgb), 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

/* full-width inline loader (for first load) */
.search-results .loading-spinner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

/* centered “no results” block */
.search-results .no-results {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}
#active-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .25rem;
  position: relative;     /* enable its own z-index */
  z-index: 9999999999999;          /* one step above the bar */
}

/* 3) Style your badges so they stand out */
#active-filters .badge {
  cursor: pointer;
}


/* chip carousel */
#active-filters .item        { display:inline-block; width:auto; margin:0 4px; }
#active-filters .owl-stage   { display:flex; flex-wrap:wrap; row-gap:2px; }
#active-filters .badge       { cursor:pointer; font-size:.75rem; padding:.38rem .55rem; white-space:nowrap; }

/* side arrows */
#active-filters              { position:relative; }
#active-filters .owl-nav     { position:absolute; top:50%; left:0; width:100%;
                               transform:translateY(-50%); pointer-events:none; }
#active-filters .owl-nav button { position:absolute; top:0; pointer-events:auto;
                                  width:28px; height:28px; border-radius:50%;
                                  border:1px solid rgba(var(--theme-border-rgb), 0.8);
                                  background: var(--theme-surface);
                                  color: var(--theme-text);
                                  font-size:1.3rem; display:flex;
                                  align-items:center; justify-content:center; }
#active-filters .owl-prev    { left:-14px;  }
#active-filters .owl-next    { right:-14px; }
@media (max-width:599.9px){          /* hide arrows on small screens */
  #active-filters .owl-nav { display:none !important; }
  #active-filters.owl-carousel{ width: calc(100% - 65px) !important;}
}