/**
 * Professional Banner Slider - Fully Responsive
 * Version: 3.0.0
 * Responsive on all devices: Desktop, Tablet, Mobile, Extra-small
 */

/* ===============================================
   CRITICAL RESET
   =============================================== */
.pbs-slider-container,
.pbs-slider-container *,
.cwfd-slider,
.cwfd-slider *,
.pbs-slider,
.pbs-slider * {
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
}

/* ===============================================
   FULL WIDTH CONTAINER - True full width
   =============================================== */
.pbs-slider-container {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  clear: both !important;
  float: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* Force full viewport width - break out of any parent container */
body .pbs-slider-container {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
}

/* ===============================================
   SLIDER - Responsive container
   =============================================== */
.cwfd-slider,
.pbs-slider {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  background: #f0f0f0 !important;
}

/* ===============================================
   SLIDES CONTAINER
   =============================================== */
.cwfd-slides,
.pbs-slides {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  cursor: grab !important;
  touch-action: pan-y !important;
  margin: 0 !important;
  padding: 0 !important;
  will-change: transform !important;
  align-items: stretch !important;
}

.cwfd-slides.dragging,
.pbs-slides.dragging {
  cursor: grabbing !important;
  transition: none !important;
}

/* ===============================================
   INDIVIDUAL SLIDES - Responsive
   =============================================== */
.cwfd-slide,
.pbs-slide {
  min-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  position: relative !important;
  display: block !important;
  text-decoration: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  line-height: 0 !important;
}

/* ===============================================
   IMAGE STYLING - Responsive, no cropping
   =============================================== */
.cwfd-slide img,
.pbs-slide img,
.cwfd-slide picture,
.pbs-slide picture,
.cwfd-slide picture img,
.pbs-slide picture img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  min-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Hover zoom effect */
a.pbs-slide:hover img,
a.cwfd-slide:hover img {
  transform: scale(1.02);
  transition: transform 0.4s ease !important;
}

/* ===============================================
   NAVIGATION ARROWS
   =============================================== */
.cwfd-arrow,
.pbs-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #C40044 !important;
  border: none !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.cwfd-arrow:hover,
.pbs-arrow:hover {
  background: #C40044 !important;
  color: #fff !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(196, 0, 68, 0.4) !important;
}

.cwfd-arrow:active,
.pbs-arrow:active {
  transform: translateY(-50%) scale(0.95) !important;
}

.cwfd-arrow:focus,
.pbs-arrow:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196, 0, 68, 0.3), 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.cwfd-arrow svg,
.pbs-arrow svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.5 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.cwfd-prev,
.pbs-prev {
  left: 20px !important;
}

.cwfd-next,
.pbs-next {
  right: 20px !important;
}

/* ===============================================
   NAVIGATION DOTS
   =============================================== */
.cwfd-dots,
.pbs-dots {
  position: absolute !important;
  bottom: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 30px !important;
  z-index: 10 !important;
  margin: 0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.cwfd-dot,
.pbs-dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  border-radius: 50% !important;
  background: #ddd !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.cwfd-dot:hover,
.pbs-dot:hover {
  background: #999 !important;
  transform: scale(1.2) !important;
}

.cwfd-dot.active,
.pbs-dot.active {
  background: #C40044 !important;
  width: 28px !important;
  border-radius: 10px !important;
}

/* ===============================================
   PROGRESS BAR
   =============================================== */
.pbs-progress {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #C40044 0%, #FF6B8A 100%) !important;
  z-index: 11 !important;
  width: 0% !important;
  transition: width 0.1s linear !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===============================================
   EXTRA LARGE DESKTOP (1600px+)
   =============================================== */
@media (min-width: 1600px) {

  .cwfd-arrow,
  .pbs-arrow {
    width: 54px !important;
    height: 54px !important;
  }

  .cwfd-arrow svg,
  .pbs-arrow svg {
    width: 24px !important;
    height: 24px !important;
  }

  .cwfd-prev,
  .pbs-prev {
    left: 40px !important;
  }

  .cwfd-next,
  .pbs-next {
    right: 40px !important;
  }
}

/* ===============================================
   LARGE DESKTOP (1400px - 1599px)
   =============================================== */
@media (min-width: 1400px) and (max-width: 1599px) {

  .cwfd-arrow,
  .pbs-arrow {
    width: 52px !important;
    height: 52px !important;
  }

  .cwfd-prev,
  .pbs-prev {
    left: 36px !important;
  }

  .cwfd-next,
  .pbs-next {
    right: 36px !important;
  }
}

/* ===============================================
   STANDARD DESKTOP (1024px - 1399px)
   =============================================== */
@media (min-width: 1024px) and (max-width: 1399px) {

  .cwfd-prev,
  .pbs-prev {
    left: 24px !important;
  }

  .cwfd-next,
  .pbs-next {
    right: 24px !important;
  }
}

/* ===============================================
   TABLET (768px - 1023px)
   =============================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  .cwfd-arrow,
  .pbs-arrow {
    width: 42px !important;
    height: 42px !important;
  }

  .cwfd-arrow svg,
  .pbs-arrow svg {
    width: 18px !important;
    height: 18px !important;
  }

  .cwfd-prev,
  .pbs-prev {
    left: 14px !important;
  }

  .cwfd-next,
  .pbs-next {
    right: 14px !important;
  }

  .cwfd-dots,
  .pbs-dots {
    bottom: 10px !important;
    padding: 6px 12px !important;
    gap: 6px !important;
  }

  .cwfd-dot,
  .pbs-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
  }

  .cwfd-dot.active,
  .pbs-dot.active {
    width: 22px !important;
  }
}

/* ===============================================
   MOBILE (481px - 767px)
   =============================================== */
@media (max-width: 767px) {
  body .pbs-slider-container {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }

  .cwfd-arrow,
  .pbs-arrow {
    width: 36px !important;
    height: 36px !important;
  }

  .cwfd-arrow svg,
  .pbs-arrow svg {
    width: 16px !important;
    height: 16px !important;
  }

  .cwfd-prev,
  .pbs-prev {
    left: 8px !important;
  }

  .cwfd-next,
  .pbs-next {
    right: 8px !important;
  }

  .cwfd-dots,
  .pbs-dots {
    bottom: 8px !important;
    padding: 5px 10px !important;
    gap: 5px !important;
  }

  .cwfd-dot,
  .pbs-dot {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
  }

  .cwfd-dot.active,
  .pbs-dot.active {
    width: 18px !important;
  }
}

/* ===============================================
   EXTRA SMALL MOBILE (≤400px)
   =============================================== */
@media (max-width: 400px) {

  .cwfd-arrow,
  .pbs-arrow {
    width: 32px !important;
    height: 32px !important;
  }

  .cwfd-arrow svg,
  .pbs-arrow svg {
    width: 14px !important;
    height: 14px !important;
  }

  .cwfd-prev,
  .pbs-prev {
    left: 6px !important;
  }

  .cwfd-next,
  .pbs-next {
    right: 6px !important;
  }

  .cwfd-dots,
  .pbs-dots {
    bottom: 6px !important;
    padding: 4px 8px !important;
  }
}

/* ===============================================
   LOADING STATE
   =============================================== */
.pbs-slider:not(.pbs-initialized) {
  background: linear-gradient(90deg, #f5f5f5 0%, #eee 50%, #f5f5f5 100%) !important;
  background-size: 200% 100% !important;
  animation: pbs-loading 1.5s ease-in-out infinite !important;
  min-height: 200px !important;
}

@keyframes pbs-loading {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/* ===============================================
   ACCESSIBILITY
   =============================================== */
@media (prefers-reduced-motion: reduce) {

  .cwfd-slides,
  .pbs-slides,
  .cwfd-arrow,
  .pbs-arrow,
  .cwfd-dot,
  .pbs-dot,
  .pbs-progress {
    transition: none !important;
    animation: none !important;
  }
}

/* ===============================================
   PRINT
   =============================================== */
@media print {
  .pbs-slider-container {
    width: 100% !important;
    margin: 0 !important;
  }

  .cwfd-arrow,
  .pbs-arrow,
  .cwfd-dots,
  .pbs-dots,
  .pbs-progress {
    display: none !important;
  }
}