/* ─────────────────────────────────────────────────────────────
   category-slider.css — dark/light theme enabled
   Requires theme-core.css to be loaded BEFORE this file.
   Colors below reference CSS variables with the original
   literal kept as a fallback, e.g. var(--accent, #4f35e8).
   ───────────────────────────────────────────────────────────── */

/* ============================================ */
/* category-slider.css - COMPLETE, replaces ALL previous .owl-nav / */
/* .category-slider / .category-slider-container CSS you added earlier */
/* ============================================ */

/* ---- your original item styles, untouched ---- */
.category-box {
  width: 100px;
  height: 110px;
  padding: 10px;
}

.category-image {
  width: 75px;
  height: 75px;
  border-radius: 50%;
}

.category-name {
  font-size: 10px;
}

@media only screen and (max-width: 900px) {
  .category-box {
    width: 90px;
    height: 105px;
    padding: 10px;
  }

  .category-image {
    width: 65px;
    height: 65px;
    border-radius: 50%;
  }

  .category-name {
    font-size: 10px;
  }
}

/* ---- slider container ---- */
.category-slider-container {
  position: relative;
  /* nothing else here — no padding, no height, no overflow */
}

.category-slider {
  position: relative;
  padding: 0 40px; /* space for nav arrows */
  /* Owl adds overflow:hidden to this element itself, leave it alone */
}

/* ---- nav arrows ---- */
/* ---- nav arrows - circular, white background ---- */
.category-slider .owl-nav {
  display: block !important;
}

.category-slider .owl-nav .owl-prev,
.category-slider .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  height: 34px;
  width: 34px;
  transform: translateY(-50%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-surface, #fff) !important;
  box-shadow: 0 2px 6px var(--shadow-color-lg, rgba(0, 0, 0, 0.18));
  font-size: 16px;
  color: var(--text-secondary-strong, #444);
  z-index: 5;
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
  pointer-events: none;
}

/* only enable interaction + hover-reveal on non-touch (desktop) */
@media (hover: hover) and (pointer: fine) {
  .category-slider-container:hover .owl-nav .owl-prev,
  .category-slider-container:hover .owl-nav .owl-next {
    opacity: 1;
    pointer-events: auto;
  }
}

.category-slider .owl-nav .owl-prev {
  left: 2px;
}
.category-slider .owl-nav .owl-next {
  right: 2px;
}

.category-slider .owl-nav .owl-prev:hover,
.category-slider .owl-nav .owl-next:hover {
  color: #000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%) scale(1.08);
}

.category-slider .owl-nav .owl-prev i,
.category-slider .owl-nav .owl-next i {
  transition: transform 0.2s ease;
}

.category-slider .owl-nav .owl-prev:hover i {
  transform: translateX(-2px);
}
.category-slider .owl-nav .owl-next:hover i {
  transform: translateX(2px);
}

/* ---- mobile: no hover, so always-visible but slightly smaller ---- */
@media only screen and (max-width: 900px) {
  .category-slider .owl-nav .owl-prev,
  .category-slider .owl-nav .owl-next {
    height: 30px;
    width: 30px;
    font-size: 14px;
    opacity: 0.9;
    pointer-events: auto;
  }
}

@media only screen and (max-width: 480px) {
  .category-slider {
    padding: 0 25px; /* less space for nav arrows on small screens */
  }
}