/* =============================================================
   BB Column Carousel – Front‑end styles (refined 2025‑07‑29)
   =============================================================*/

/* -------------------------------------------------------------
   1. Generic slide & wrapper behaviour
   ---------------------------------------------------------- */

/* Swiper owns width & spacing; remove BB gutters */
.fl-row.bbcc-initialized .fl-col {
  width: auto;           /* Swiper writes exact px width */
  flex: 0 0 auto;        /* keep that width */
  margin: 0;
}

/* Turn each slide into a flex box so its inner content stretches */
.bbcc-swiper .swiper-slide                   { display: flex; }
.bbcc-swiper .swiper-slide > .fl-col-content { flex: 1 1 auto; }
.bbcc-swiper .fl-col-content                 { width: 100%;   }

/* Swiper container – clip horizontally but allow full height */
.bbcc-swiper {
  position: relative;
  overflow-x: hidden;   /* prevent horizontal spill */
  overflow-y: visible;  /* let tall slides show fully */
  will-change: transform; /* hint smoother transforms */
}

/* Custom Coverflow effect styles */
.bbcc-swiper[data-coverflow="yes"] {
  overflow: visible; /* allow 3D transforms to show */
  perspective: 1200px; /* 3D perspective for depth */
  perspective-origin: center center;
}

.bbcc-swiper[data-coverflow="yes"] .swiper-wrapper {
  transform-style: preserve-3d; /* enable 3D transforms */
}

.bbcc-swiper[data-coverflow="yes"] .swiper-slide {
  width: 280px; /* fixed width for coverflow */
  flex-shrink: 0;
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center center;
  backface-visibility: hidden;
}

.bbcc-swiper[data-coverflow="yes"] .swiper-slide .fl-col-content {
  border-radius: 15px; /* rounded corners for cards */
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  transform: translateZ(0); /* force GPU acceleration */
  /* Preserve Beaver Builder column backgrounds - don't override background or overflow */
  position: relative; /* ensure proper stacking context */
}

/* Ensure column backgrounds and content are visible */
.bbcc-swiper[data-coverflow="yes"] .swiper-slide .fl-col-content * {
  position: relative; /* ensure content appears above background */
}

/* Leave a little space for pagination bullets (if enabled) */
.swiper-wrapper { 
  padding-bottom: 20px;
}

/* -------------------------------------------------------------
   2. Overlay arrows (default placement)
   ---------------------------------------------------------- */

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;             /* white chevrons */
  z-index: 5;                 /* stay above slide content */
  cursor: pointer;            /* indicate clickable */
  pointer-events: auto;       /* ensure clicks go through */
  transition: opacity 0.3s ease; /* smooth show/hide */
}

/* Force glyph to appear (in case parent colour is transparent) */
.bbcc-swiper .swiper-button-prev::after,
.bbcc-swiper .swiper-button-next::after {
  font-family: swiper-icons;
  font-size: 22px;
  line-height: 1;
  text-transform: none;
  color: inherit;             /* inherit white */
}

/* -------------------------------------------------------------
   3. Grouped navigation bar (top/bottom + left/right)
   ---------------------------------------------------------- */

.bbcc-nav              { display: flex; gap: 8px; transition: opacity 0.3s ease; }
.bbcc-nav-top          { margin-bottom: 2rem; }
.bbcc-nav-bottom       { margin-top:    2rem; }
.bbcc-nav-left         { justify-content: flex-start; }
.bbcc-nav-right        { justify-content: flex-end;   }

/* Reset overlay positioning when arrows live in the bar */
.bbcc-nav .swiper-button-prev,
.bbcc-nav .swiper-button-next {
  position: static !important;
  transform: none   !important;

  /* circular button styling */
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #c0c0c0;        /* mid‑grey */
  color: #fff;                /* white glyph */
  display: flex; align-items: center; justify-content: center;
  opacity: 1;                 /* ignore Swiper fade‑out */
  cursor: pointer;
  pointer-events: auto;       /* override possible disabled default */
}

/* honour disabled state visually but keep control of pointer-events */
.bbcc-nav .swiper-button-disabled { opacity: .35; pointer-events: none; }

/* explicit sides for overlay arrows to avoid layout overrides */
.bbcc-swiper .swiper-button-prev { 
  left: 10px;
  width: 44px;
  height: 44px;
  margin-top: -22px;
}
.bbcc-swiper .swiper-button-next { 
  right: 10px;
  width: 44px;
  height: 44px;
  margin-top: -22px;
}

/* ensure arrows are always visible and clickable */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 20px;
  font-weight: 900;
}

/* Chevron glyph inside the circle */
.bbcc-nav .swiper-button-prev::after,
.bbcc-nav .swiper-button-next::after {
  font-family: swiper-icons;
  font-size: 16px;
  line-height: 1;
  text-transform: none;
  color: inherit;             /* white */
}



/* -------------------------------------------------------------
   4. Responsive tweaks
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .bbcc-nav { margin: 1rem 0rem; }

}