/* ===========================================================
   FULL‑WIDTH CAROUSEL  –  v3.1
   Clean, grouped, and token‑driven.
   Every tweak the designer asked for (position sliders, gap
   control, button label swap) is now covered by variables that
   Elementor writes at runtime.
   ===========================================================*/

:root{
  /* — Layout — */
  --fw-container: 1200px;      /* max inner width */
  --fw-gutter:    24px;        /* horizontal padding */
  --fw-gap:       20px;        /* card ↔ pagination gap */

  /* — Controls cluster — */
  --icon-size:    24px;        /* arrow / play icon size */
  --controls-gap: 20px;        /* space between arrow | play | arrow */
  --controls-x:   0;           /* custom X offset (set by slider) */
  --controls-y:   0;           /* custom Y offset (set by slider) */
}

/* -----------------------------------------------------------
   1. CORE LAYOUT
   -----------------------------------------------------------*/
.fw-carousel__wrapper{
  position:relative;
  height:800px;
  overflow:hidden;
  font-family:inherit;
}

.fw-carousel{height:100%}
.fw-carousel .swiper-slide{
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center;
}

.fw-inner{
    width:100%;
    max-width:var(--fw-container);
    margin-inline:auto;
    padding-inline:var(--fw-gutter);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    row-gap:var(--fw-gap);
}

/* template card */
.full-width_card{
    margin-inline:0;
    align-self:flex-start;
}

/* -----------------------------------------------------------
   2. PAGINATION STRIP + BULLETS
   -----------------------------------------------------------*/
.fw-pagination-bar{
  position:absolute;
  /* full‑bleed but respects gutter+container */
  left:max(var(--fw-gutter), calc((100% - var(--fw-container))/2 + var(--fw-gutter)));
  width:min(calc(var(--fw-container) - var(--fw-gutter)*2), calc(100% - var(--fw-gutter)*2));
  bottom:calc(var(--box-offset,0) + var(--fw-gap));
  height:40px;
  display:flex;
  align-items:start;
  padding-inline:var(--fw-gutter);
  z-index:10;
}

.fw-pagination-bar .swiper-pagination{ text-align:left; padding-left:32px; }

/* bullets */
.fw-pagination-bar .swiper-pagination-bullet{
  margin:0 4px !important;
  width:49px; height:8px;
  border-radius:8px;
  background:#dcdcdc;
  opacity:1;
  overflow:hidden;
  position:relative;
}

/* animated fill */
.fw-pagination-bar .swiper-pagination-bullet-active::before{
  content:'';
  position:absolute; inset:0 100% 0 0; /* start at 0% width */
  background:#000;
  animation:bullet-fill var(--bullet-duration,6000ms) linear forwards;
}

@keyframes bullet-fill{ to{ inset:0 } }

/* solid fill when paused */
.fw-carousel__wrapper.paused .swiper-pagination-bullet-active::before{ display:none; }
.fw-carousel__wrapper.paused .swiper-pagination-bullet-active{ background:#000; }
.fw-carousel__wrapper.paused .swiper-pagination-bullet-active{ animation-play-state:paused; }

/* hide entire bar if dots switched off */
.no-dots .fw-pagination-bar{ display:none; }

/* ────────────────────────────────────────────────
   CONTROLS BAR  (Prev | Toggle | Next)
   ------------------------------------------------ */

/* 1 ▸ Bar container */
.fw-carousel__controls{
  position:absolute;
  bottom:48px;
  left:50%;
  left:50%;
  transform:
      translateX(calc(-50% + var(--controls-x,0)))
      translateY(var(--controls-y,0));
  display:flex;
  align-items:center;
  gap: var(--controls-gap,16px);     /*  ← gap slider lives here */
  z-index:999;
}

/* 2 ▸ Generic button (arrows & toggle share most props) */
.fw-carousel__controls button{
  --_size: var(--icon-size,24px);
  flex:0 0 auto;
  min-width:calc(var(--_size) + 20px);  /* arrows stay square */
  min-height:calc(var(--_size) + 20px); /* pills can now grow vertically */
  padding:0;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--_size);
  line-height:1;
  color:inherit;
  scroll-margin-block-start:40vh;
}

/* 3 ▸ Prev / Next arrows keep square footprint --------*/

/* Flex-order so visual layout stays the same */
.fw-nav-prev            { order:1 }
.fw-carousel__toggle    { order:2 }
.fw-nav-next            { order:3 }

.fw-nav-prev,
.fw-nav-next,
.fw-nav-next:hover,
.fw-nav-prev:hover {
  width:calc(var(--_size) + 14px);
  border: 2px solid white!important;
  border-radius: 100px!important;
  background-color: #FFFFFFB2!important;
}

/* Play / Pause pill ------------------------------------------------ */
.fw-carousel__toggle{
  /* flex so it sits nicely in the flex bar */
  display:flex;
  align-items:center;
  gap:0.4em;

  /* visual styling – keep !important overrides */
  padding:8px 14px!important;
  border:2px solid #fff!important;
  border-radius:22px!important;
  background:#FFFFFFB2!important;
}

/* icon ---------------------------------------------------------------- */
.fw-carousel__toggle i{
  line-height:0;    /* remove extra font height */
  flex:0 0 auto;
}

/* label wrapper (overlaps its children) ------------------------------- */
.fw-label-box{
  display:grid;      /* 1-cell grid makes children stack */
  place-items:center;
}

/* labels share same grid cell ---------------------------------------- */
.fw-label-box .fw-toggle-label{
  grid-area:1/1;           /* overlap */
  white-space:nowrap;
  font-size:calc(var(--_size)*0.55);
  line-height:1;
}

/* visibility toggle – both labels stay in flow so width is fixed ----- */
.fw-label-play  { opacity:0; }
.fw-label-pause { opacity:1; }

.is-paused .fw-label-play  { opacity:1; }
.is-paused .fw-label-pause { opacity:0; }





/* -----------------------------------------------------------
   4. ACCESSIBILITY HELPERS & SLIDE OVERLAY
   -----------------------------------------------------------*/
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* tinted overlay over background image */
/*.fw-carousel__wrapper .swiper-slide{ position:relative; }
.fw-carousel__wrapper .swiper-slide::before{
  content:'';
  position:absolute; inset:0;
  background:#0C4C4C99;
  z-index:1;
}
.fw-carousel__wrapper .fw-inner{ position:relative; z-index:2; }
*/

/* -----------------------------------------------------------
   5. SMALL SCREENS ≤ 600px
   -----------------------------------------------------------*/
@media (max-width:600px){
  :root{ --fw-gutter:16px; --controls-gap:12px; }
  .fw-pagination-bar{
    left:var(--fw-gutter);
    width:calc(100% - var(--fw-gutter)*2);
  }
}