/*
 * Component: Slick Slider
 *
 * FINAL FIX v4: Removing the !important position
 * overrides to let Slick's RTL logic work.
*/

.discover-listings-slider .slick-slide {
  padding: 0 8px; /* <-- CHANGED FROM 20px to 8px */
  box-sizing: border-box; 
}
.discover-listings-slider .oneCard {
  margin-bottom: 10px;
}

/*
 * ==========================================================
 * SLICK ARROWS
 * ==========================================================
 */
.discover-listings-slider .slick-arrow {
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  z-index: 10;
  transition: all 0.3s ease;
}
.discover-listings-slider .slick-arrow:hover {
  background-color: var(--color-brand-primary);
}

.discover-listings-slider .slick-arrow:before {
  font-family: 'slick'; 
  font-size: 1.2rem;
  color: var(--color-brand-dark) !important;
  opacity: 1;
}

/*
 * ==========================================================
 * THE FIX:
 * We are DELETING the 'left' and 'right' properties.
 *
 * This will let Slick's default theme file
 * (which we loaded in functions.php)
 * correctly position the buttons.
 *
 * In LTR, it will be [Prev] [Next].
 * In RTL, it will be [Next] [Prev].
 * This will match the click logic perfectly.
 * ==========================================================
 */

/*
 * ==========================================================
 * SLICK DOTS (This was correct)
 * ==========================================================
 */
.discover-listings-slider .slick-dots {
  bottom: -40px;
}
.discover-listings-slider .slick-dots li button:before {
  font-size: 10px;
  color: var(--color-gray-border);
  opacity: 1;
}
.discover-listings-slider .slick-dots li.slick-active button:before {
  color: var(--color-brand-primary);
  opacity: 1;
}