.cwfe-slider-wrapper {
    position: relative;
    width: 100%;
}
.cwfe-dots-outside {
    padding-bottom: 40px;
}
/* Base wrapper */
.cwfe-slider-wrapper {
    position: relative;
    width: 100%;
}

/* If dots are outside, we need space below for them */
.cwfe-dots-outside {
    padding-bottom: 40px;
}

/* Swiper container */
.cwfe-slider {
    width: 100%;
    overflow: hidden;
}

/* When arrows OR dots are placed outside, we must allow overflow */
.cwfe-arrows-outside .cwfe-slider,
.cwfe-dots-outside .cwfe-slider {
    overflow: visible;
}

/* Make sure each slide can stretch */
.cwfe-slider .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

/* Inner slide content box (your Elementor template goes here) */
.cwfe-slide-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Empty states */
.cwfe-slider-empty,
.cwfe-slide-missing {
    background: #f5f5f5;
    color: #555;
    border: 1px dashed #999;
    padding: 40px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
}
.cwfe-slider-wrapper .cwfe-button-prev,
.cwfe-slider-wrapper .cwfe-button-next {
    position: absolute;
    top: 50%;
    z-index: 5;

    /* Strong reset so theme styles can't break the shape */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    background-image: none !important;

    background: rgba(0,0,0,0.5);
    color: #fff;

    /* default fallback size — Elementor will override these with more specific selectors when you move the Size slider */
    width: 40px!important;
    height: 40px!important;
    border-radius: 50%!important;

    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s ease, color 0.2s ease;
}

.cwfe-slider-wrapper .cwfe-button-prev:hover,
.cwfe-slider-wrapper .cwfe-button-next:hover {
    background: rgba(0,0,0,0.7);
    color: #fff;
}

/* Arrows INSIDE */
.cwfe-arrows-inside .cwfe-button-prev {
    left: 10px;
    transform: translateY(-50%);
}
.cwfe-arrows-inside .cwfe-button-next {
    right: 10px;
    transform: translateY(-50%);
}

/* Arrows OUTSIDE */
.cwfe-arrows-outside .cwfe-button-prev {
    left: 0;
    transform: translate(-100%, -50%);
}
.cwfe-arrows-outside .cwfe-button-next {
    right: 0;
    transform: translate(100%, -50%);
}

.cwfe-arrow-inner {
    font-weight: 600;
    font-family: system-ui, sans-serif;
    line-height: 1;
    display: block;
}


/* =========================
   PAGINATION DOTS
   ========================= */
.cwfe-pagination {
    left: 0;
    right: 0;
    text-align: center;
    z-index: 5;
}

/* Dots INSIDE: overlay at bottom of slide */
.cwfe-dots-inside .cwfe-pagination {
    position: absolute;
    bottom: 10px;
}

/* Dots OUTSIDE: visually below slider */
.cwfe-dots-outside .cwfe-pagination {
    position: absolute;
    bottom: -30px;
}

/* Swiper injects bullets inside .cwfe-pagination */
.cwfe-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.7);
    opacity: 1;
    border-radius: 50%;
    margin: 0 4px !important;
    transition: background 0.2s ease;
}

.cwfe-pagination .swiper-pagination-bullet-active {
    background: rgba(255,255,255,1);
}

/* HARD RESET just our slider buttons so theme button styles don't apply */
.cwfe-slider-wrapper .cwfe-button-prev,
.cwfe-slider-wrapper .cwfe-button-next {
  /* wipe inherited button styles from themes/plugins */
  all: unset;                     /* resets padding/line-height/etc. */
  -webkit-appearance: none !important;
  appearance: none !important;

  /* rebuild the button */
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  background-image: none !important;

  /* default fallbacks (Elementor’s “Size” control will override width/height) */
  width: 40px;
  height: 40px;
  border-radius: 50%;

  background: rgba(0,0,0,0.5);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  transition: background .2s ease, color .2s ease;
}

/* keep the inside/outside rules you already have */
.cwfe-arrows-inside .cwfe-button-prev { left: 10px; transform: translateY(-50%); }
.cwfe-arrows-inside .cwfe-button-next { right: 10px; transform: translateY(-50%); }
.cwfe-arrows-outside .cwfe-button-prev { left: 0;  transform: translate(-100%, -50%); }
.cwfe-arrows-outside .cwfe-button-next { right: 0; transform: translate(100%, -50%); }

.cwfe-arrow-inner { display:block; line-height:1; font-weight:600; font-family:system-ui,sans-serif; }
/* Mobile safety rules */
@media (max-width: 767px) {

    /* Force arrows to behave like INSIDE on phones,
       even if user chose Outside in the Style tab */
    .cwfe-arrows-outside .cwfe-button-prev {
        left: 10px;
        transform: translateY(-50%);
    }

    .cwfe-arrows-outside .cwfe-button-next {
        right: 10px;
        transform: translateY(-50%);
    }

    /* Prevent tiny horizontal scrolling caused by nav buttons sticking out */
    .cwfe-slider-wrapper {
        overflow-x: hidden;
    }
}