/**
 * BWA Category Slider - Front Styles
 */

.bwa-category-slider {
  padding          : 2rem 0 2.5rem;
  background-color : var(--color-grey-light);
}

.bwa-category-slider__wrapper {
  position  : relative;
  max-width : 1800px;
  margin    : 0 auto;
  padding   : 0 1rem;
}

@media screen and (min-width : 640px) {
  .bwa-category-slider__wrapper {
    padding : 0 2rem;
  }
}

@media screen and (min-width : 1024px) {
  .bwa-category-slider__wrapper {
    padding : 0 3rem;
  }
}

.bwa-category-slider__swiper {
  overflow : hidden;
  padding  : 0.5rem 0;
}

@media screen and (min-width : 640px) {
  .bwa-category-slider__swiper {
    margin : 0 3rem;
  }
}

.bwa-category-slider__swiper .swiper-wrapper {
  display : flex;
}

.bwa-category-slider__slide {
  height : auto;
}

.bwa-category-slider__link {
  display          : flex;
  align-items      : center;
  gap              : 0.85rem;
  width            : 100%;
  padding          : 0.5rem 1rem 0.5rem 0.5rem;
  background-color : var(--color-white-default, #fff);
  border           : 1px solid rgba(9, 28, 52, 0.08);
  border-radius    : var(--radius-full, 50px);
  text-decoration  : none;
  transition       : border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bwa-category-slider__link:hover {
  border-color : var(--color-primary);
}

.bwa-category-slider__image-wrapper {
  flex-shrink   : 0;
  width         : 48px;
  height        : 48px;
  border-radius : 50%;
  overflow      : hidden;
  border        : 2px solid var(--color-grey-default, #f3f5f7);
  background    : linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(243, 245, 247, 0.9));
}

@media screen and (min-width : 768px) {
  .bwa-category-slider__image-wrapper {
    width  : 54px;
    height : 54px;
  }
}

.bwa-category-slider__image {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  transition : transform 0.3s ease;
}

.bwa-category-slider__link:hover .bwa-category-slider__image {
  transform : scale(1.08);
}

.bwa-category-slider__image--placeholder {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 100%;
  height          : 100%;
  color           : var(--color-grey-font-default, #516765);
  font-size       : 1.25rem;
}

.bwa-category-slider__content {
  display        : flex;
  flex-direction : column;
  min-width      : 0;
  flex           : 1;
}

.bwa-category-slider__name {
  font-size          : 0.875rem;
  font-weight        : 600;
  color              : var(--color-black-default, #091C34);
  line-height        : 1.3;
  display            : -webkit-box;
  -webkit-line-clamp : 2;
  -webkit-box-orient : vertical;
  overflow           : hidden;
}

@media screen and (min-width : 768px) {
  .bwa-category-slider__name {
    font-size : 0.95rem;
  }
}

.bwa-category-slider__count {
  font-size  : 0.75rem;
  color      : var(--color-grey-font-default, #516765);
  margin-top : 0.15rem;
}

.bwa-category-slider__nav {
  position         : absolute;
  top              : 50%;
  z-index          : 4;
  transform        : translateY(-50%);
  display          : none;
  align-items      : center;
  justify-content  : center;
  width            : 40px;
  height           : 40px;
  border-radius    : 50%;
  border           : none;
  background-color : var(--color-grey-default);
  color            : var(--color-black-default, #091C34);
  cursor           : pointer;
  transition       : background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.bwa-category-slider__nav:hover {
  background-color : var(--color-primary, hsl(210, 90%, 45%));
  color            : var(--color-white-default, #fff);
  box-shadow       : 0 12px 30px rgba(9, 28, 52, 0.18);
}

.bwa-category-slider__nav.swiper-button-disabled {
  opacity        : 0.4;
  cursor         : default;
  pointer-events : none;
}

.bwa-category-slider__nav--prev {
  left : 0;
}

.bwa-category-slider__nav--next {
  right : 0;
}

@media screen and (min-width : 640px) {
  .bwa-category-slider__nav {
    display : inline-flex;
  }
}

.bwa-category-slider__nav .material-icons {
  font-size : 22px;
}