/* ------------------------------------------
   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: 0px;
  background: var(--theme-surface-muted) !important;
}

.category-section>h4.mb-3 {
  margin: 0 4px !important;
}

@media (min-width: 768px) {
  .main-content {
    margin-left: 200px;
  }
}

@media (max-width: 699px) {
  .category-section>h4 {
    font-size: 15px;
  }
}

/* ------------------------------------------
   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;
  }
}