/* CFMOTO-style Series Slider (trimmed & adapted)
   Based on the structure observed in the provided HTML export. */
.cfmoto-ss-root { position: relative; display:flex; align-items:center; justify-content:center; max-width:100%; padding:50px 0; overflow-x:hidden; overflow-y:visible; }
.inner-series-slider{ z-index:1; display:inline-block; width:100%; max-width:100%; }
.series-slider__top{ display:flex; flex-direction:row; gap:20px; align-items:center; justify-content:flex-start; width:100%; margin-bottom:20px; border-bottom:1px solid rgba(0,0,0,.2); }
.series-slider__top-tab{ position:relative; top:1px; padding-bottom:10px; cursor:pointer; user-select:none; }
.series-slider__top-tab > *{ margin:0; }
.series-slider__top-tab p{ font-size:16px; color:rgba(0,0,0,.5); }
.series-slider__top-tab.series-slider-show{ border-bottom:3px solid var(--wp--preset--color--primary, #009bb4); }
.series-slider__top-tab.series-slider-show p{ color:#000; }

.series-slider__title{ display:none; flex-direction:column; align-items:center; justify-content:center; margin-top:75px; }
.series-slider__title.series-slider-show{ display:flex; }
.series-slider__title h1{ margin:0 !important; overflow:hidden; font-size:40px; font-weight:600; line-height:1.2; color:#222; letter-spacing:-1px; white-space:nowrap; text-overflow:ellipsis; }
.series-slider__title p{ margin:0; margin-top:10px; overflow:hidden; font-size:16px; font-weight:400; color:#666; white-space:nowrap; text-overflow:ellipsis; }

.series-slider__slider{ position:relative; display:none !important; }
.series-slider__slider.series-slider-show{ display:block !important; visibility:visible; }
.series-slider-bg-text{ position:absolute; top:50%; left:50%; z-index:0; display:flex; align-items:center; justify-content:center; font-size:25vw; font-weight:600; color:#fff; opacity:.45; pointer-events:none; transform:translate(-50%,-50%); white-space:nowrap; }
.series-slider-bg-text span{ transition: clip-path 1s ease !important; }

.swiper{ padding-bottom:90px !important; overflow-x:hidden !important; overflow-y:visible !important; }
.series-slider__slider-slide img{ max-width:650px; width:100%; height:auto; display:block; margin:0 auto; }
.series-image{ position:relative; min-height:220px; display:flex; align-items:center; justify-content:center; }
.cfmoto-ss-placeholder{ width:100%; max-width:650px; padding:80px 20px; border:1px dashed rgba(0,0,0,.2); text-align:center; color:#666; background:rgba(255,255,255,.6); }

.series-slider .swiper-button-prev,
.series-slider .swiper-button-next{
  width:62px; height:62px; color: var(--wp--preset--color--primary, #009bb4);
  border:1px solid currentColor; border-radius:50%;
}
.swiper-button-prev{ right:inherit !important; left:8% !important; }
.swiper-button-next{ right:8% !important; left:inherit !important; }
.swiper-button-prev::after, .swiper-button-next::after{ content:"" !important; }

.series-slider__slider__prev{ position:absolute; top:50%; left:0; transform:translate(0,-50px); z-index:5; }
.series-slider__slider__next{ position:absolute; top:50%; right:0; transform:translate(0,-50px); z-index:5; }

.swiper-pagination{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:26px !important;
  transform:translateX(-50%);
  display:flex !important;
  align-items:flex-end;
  justify-content:center;
  width:100% !important;
  max-width:1100px;
  overflow:visible;
  direction:ltr;
}
.swiper-pagination-bullet{
  position:relative;
  overflow:visible !important;
  width:12.5vw !important;
  max-width:170px;
  min-width:80px;
  height:1px !important;
  margin:0 !important;
  background:#666 !important;
  border-radius:0 !important;
  opacity:.5 !important;
}
.swiper-pagination-bullet-active{ height:2px !important; opacity:1 !important; }
.swiper-pagination-bullet p{ position:relative; top:-15px !important; margin:0; font-size:16px; font-weight:700; color:#666; }
/* CTA is rendered once in .series-slider__explore-holder (not inside bullets) */

/* CTA holder (centered above tabs) */
.cfmoto-ss-root .series-slider__slider{ position:relative; }
.cfmoto-ss-root .series-slider__explore-holder{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:120px; /* sits above pagination tabs */
  z-index:12;
  width:max-content;
  max-width:calc(100% - 40px);
}
.cfmoto-ss-root .series-slider__explore{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:700;
  color:#777;
  text-decoration:none;
  white-space:nowrap;
}
.cfmoto-ss-root .series-slider__explore svg{ color: currentColor; }

@media (max-width: 768px){
  .cfmoto-ss-root .series-slider__explore-holder{ bottom:95px; }
  .cfmoto-ss-root .series-slider__explore{ font-size:18px; }
}


/* Ensure our custom SVG arrows are not auto-flipped by theme/rtl rules */
.series-slider .swiper-button-prev svg,
.series-slider .swiper-button-next svg{ transform:none !important; }

.wheel-back,.wheel-front{ position:absolute; transform:translate(-50%,0%); }
.wheel-front{ transform:none; }
.wheel-back img,.wheel-front img{ transition: all 2.25s ease; }

/* Fade effect similar to ref */
.swiper-slide{ opacity:0; transition: opacity 1s !important; }
.swiper-slide-active{ opacity:1; }

@media (max-width: 991px){
  .series-slider__explore-holder{ bottom:110px !important; text-align:center; }
  .series-slider__explore{ font-size:18px; }

  .swiper-button-prev, .swiper-button-next{ display:none !important; }
  .series-slider__title{ margin-top:10px; }
  .series-slider__title h1{ font-size:1.1rem; }
  .series-slider__top-tab p{ font-size:.85rem; }
  .swiper-pagination-bullet p{ font-size:.8rem; }
}
@media (max-width: 576px){
  .swiper-pagination-bullet p{ font-size:.6rem; }
  .swiper-pagination-bullet{ width:13vw !important; }
}


/* === Hard overrides for Marfury/Theme conflicts (scoped) === */
.cfmoto-ss-root { position: relative !important; overflow-x:hidden !important; overflow-y:visible !important; }
.cfmoto-ss-root .series-slider__slider { position: relative !important; padding-bottom: 140px !important; }
.cfmoto-ss-root .swiper-pagination{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:60px !important;
  transform:translateX(-50%) !important;
  width:min(980px, calc(100% - 40px)) !important;
  max-width:980px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:36px !important;
  text-align:center !important;
  overflow:visible !important;
  direction:ltr !important;
  z-index:20 !important;
}
.cfmoto-ss-root .swiper-pagination-bullet{
  position:relative !important;
  flex:0 0 auto !important;
  width:170px !important;
  max-width:170px !important;
  min-width:110px !important;
  height:2px !important;
  background:#bdbdbd !important;
  border-radius:0 !important;
  opacity:1 !important;
  margin:0 !important;
  overflow:visible !important;
}
.cfmoto-ss-root .swiper-pagination-bullet-active{
  background:#4a4a4a !important;
}
.cfmoto-ss-root .swiper-pagination-bullet p{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  top:10px !important;
  margin:0 !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:0.5px !important;
  color:#bdbdbd !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}
.cfmoto-ss-root .swiper-pagination-bullet-active p{ color:#4a4a4a !important; }
/* single CTA holder */
.cfmoto-ss-root .series-slider__explore-holder{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  bottom:108px !important;
  z-index:30 !important;
  width:auto !important;
  text-align:center !important;
  pointer-events:auto !important;
}
.cfmoto-ss-root .series-slider__explore{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  font-size:20px !important;
  font-weight:700 !important;
  color:rgba(0,0,0,.55) !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}
.cfmoto-ss-root .series-slider__explore svg{ color: var(--wp--preset--color--primary, #009bb4) !important; }

/* ensure no stray CTA appears outside pagination */
.cfmoto-ss-root > a, 
.cfmoto-ss-root .series-image > a,
.cfmoto-ss-root .cfmoto-ss-cta-outside { display:none !important; }

/* if some legacy markup remains, hide it */
.cfmoto-ss-root .series-slider__explore-mobile{ display:none !important; }

/* Mobile tuning: bigger tabs + keep CTA above tabs */
@media (max-width: 576px){
  .cfmoto-ss-root .swiper-pagination{
    /* On small screens we allow horizontal scroll so the first/last tab isn't cut */
    bottom:70px !important;
    left:0 !important;
    transform:none !important;
    width:100% !important;
    padding:0 18px !important;
    justify-content:flex-start !important;
    gap:18px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .cfmoto-ss-root .swiper-pagination-bullet{
    width:42vw !important;
    min-width:120px !important;
    max-width:220px !important;
  }
  .cfmoto-ss-root .swiper-pagination-bullet p{
    font-size:14px !important;
    top:12px !important;
  }
  .cfmoto-ss-root .series-slider__explore-holder{
    bottom:108px !important;
  }
  .cfmoto-ss-root .series-slider__explore{
    font-size:18px !important;
  }
  .cfmoto-ss-root .series-slider__slider{ padding-bottom: 150px !important; }
}

/* arrows direction: prevent theme flips */
.cfmoto-ss-root .swiper-button-prev svg,
.cfmoto-ss-root .swiper-button-next svg{ transform:none !important; }

/* Ensure CTA link is clickable on touch devices */
.cfmoto-ss-root .series-slider__explore-holder,
.cfmoto-ss-root .series-slider__explore{ pointer-events:auto; }

/* === Mobile pagination: keep labels visible + avoid sticky bottom bar overlap === */
@media (max-width: 576px){
  /* give room for label + iOS safe area + sticky bottom nav */
  .cfmoto-ss-root .series-slider__slider{ padding-bottom: 260px !important; }

  .cfmoto-ss-root .swiper-pagination{
    bottom: calc(140px + env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* make each tab bullet carry its own height (so text can't get clipped) */
  .cfmoto-ss-root .swiper-pagination-bullet{
    background: transparent !important;
    height: auto !important;
    width: auto !important;
    min-width: 92px !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .cfmoto-ss-root .swiper-pagination-bullet::before{
    content: '';
    display: block;
    width: min(42vw, 140px);
    height: 2px;
    background: #bdbdbd;
  }
  .cfmoto-ss-root .swiper-pagination-bullet-active::before{ background:#4a4a4a; }

  .cfmoto-ss-root .swiper-pagination-bullet p{
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 12px 0 0 0 !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  /* CTA stays above the tabs */
  .cfmoto-ss-root .series-slider__explore-holder{
    bottom: calc(200px + env(safe-area-inset-bottom)) !important;
  }
}

/* === Mobile fit: show ALL 4 model tabs without horizontal scroll === */
@media (max-width: 576px){
  .cfmoto-ss-root .series-slider__slider{ padding-bottom: 175px !important; }

  .cfmoto-ss-root .swiper-pagination{
    width: calc(100% - 24px) !important;
    max-width: none !important;
    left: 12px !important;
    transform: none !important;
    justify-content: space-between !important;
    gap: 10px !important;
    bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }

  .cfmoto-ss-root .swiper-pagination-bullet{
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .cfmoto-ss-root .swiper-pagination-bullet p{
    font-size: 12px !important;
    letter-spacing: 0.25px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .cfmoto-ss-root .series-slider__explore-holder{
    bottom: calc(160px + env(safe-area-inset-bottom)) !important;
  }
}

/* Removed background text overlay */
.series-slider-bg-text{display:none !important;}

.series-image-link{display:block; text-decoration:none; color:inherit;}
