/* ================= BO TESTIMONIALS WIDGET — default styling =================
   Scoped under .bo-testimonials-wrap. Reproduces .testimonial-card / .t-video /
   .t-body exactly, converted from a static grid into a sliding track.
   Fully self-contained — no dependency on other widgets' CSS.
   ========================================================================= */

.bo-testimonials-wrap{
  --tt-navy: #031B39;
  --tt-navy-soft: #0B2A52;
  --tt-accent: #1083E6;
  --tt-blue-soft: #BFE0FB;
  --tt-slate: #54627A;
  --tt-slate-light: #8B97A8;
  --tt-line: #E4E8EE;
  --tt-ease: cubic-bezier(.22,1,.36,1);
  --tt-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --tt-per-view: 3;
  --tt-gap: 22px;

  /* icon theming — driven by the widget's Style > Icons controls */
  --tt-play-icon: var(--tt-navy);
  --tt-play-icon-hover: #fff;
  --tt-play-bg: rgba(255,255,255,.96);
  --tt-play-bg-hover: var(--tt-accent);
  --tt-arrow-icon: var(--tt-navy);
  --tt-arrow-bg: #fff;
  --tt-arrow-bg-hover: var(--tt-navy);
  --tt-dot: var(--tt-line);
  --tt-dot-active: var(--tt-accent);

  font-family:'Roboto', sans-serif;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.bo-testimonials-wrap{
  --tt-section-bg: transparent;
  --tt-pad-top: 80px;
  --tt-pad-bottom: 80px;
  --tt-container-max: 1220px;
  --tt-header-margin: 46px;
  --tt-transition-speed: 500ms;

  --tt-image-aspect: 16/10;
  --tt-image-fit: cover;
  --tt-image-brightness: .92;
  --tt-image-radius: 16px;
  --tt-overlay-start: rgba(3,27,57,0);
  --tt-overlay-end: rgba(3,27,57,.55);
  --tt-overlay-start-pos: 45%;

  --tt-hover-lift: 5px;
  --tt-hover-scale: 1.05;
  --tt-hover-shadow: rgba(3,27,57,.22);
  --tt-hover-border: var(--tt-blue-soft);
  --tt-hover-speed: 400ms;

  --tt-play-size: 54px;
  --tt-arrow-size: 44px;
}

.bo-testimonials-wrap,
.bo-testimonials-wrap *,
.bo-testimonials-wrap *::before,
.bo-testimonials-wrap *::after{
  box-sizing: border-box;
}

.bo-testimonials-wrap section{ background: var(--tt-section-bg); padding: var(--tt-pad-top) 0 var(--tt-pad-bottom); }
.bo-testimonials-wrap .tt-wrap{ max-width:var(--tt-container-max); width:100%; margin:0 auto; padding:0 40px; }

/* ---------- Header ---------- */
.bo-testimonials-wrap .tt-section-head{ max-width:620px; margin:0 auto var(--tt-header-margin); text-align:center; }
.bo-testimonials-wrap .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tt-accent); font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.bo-testimonials-wrap .eyebrow::before{
  content:''; width:18px; height:1px; background:var(--tt-accent); display:inline-block;
}
.bo-testimonials-wrap .tt-section-head h2{
  font-family:'Roboto Slab', serif;
  font-weight:600; letter-spacing:-0.01em; line-height:1.12;
  color:var(--tt-navy);
  font-size:36px;
  margin-top:14px;
}

/* ---------- Slider mechanics ---------- */
.bo-testimonials-wrap .testimonial-track-wrap{ position:relative; width:100%; max-width:100%; }
.bo-testimonials-wrap .testimonial-viewport{ overflow:hidden; width:100%; max-width:100%; touch-action: pan-y; }
.bo-testimonials-wrap .testimonial-track{
  display:flex;
  gap:var(--tt-gap);
  transition:transform var(--tt-transition-speed) var(--tt-ease);
  will-change:transform;
}
.bo-testimonials-wrap .testimonial-slide{
  flex:0 0 calc((100% - (var(--tt-per-view) - 1) * var(--tt-gap)) / var(--tt-per-view));
  max-width:calc((100% - (var(--tt-per-view) - 1) * var(--tt-gap)) / var(--tt-per-view));
  min-width:0;
}

/* ---------- Card (unchanged visuals) ---------- */
.bo-testimonials-wrap .testimonial-card{
  background:#fff; border:1px solid var(--tt-line); border-radius:16px;
  overflow:hidden; transition: box-shadow var(--tt-hover-speed) var(--tt-ease), transform var(--tt-hover-speed) var(--tt-ease), border-color var(--tt-hover-speed) var(--tt-ease);
  display:flex; flex-direction:column; height:100%;
}
.bo-testimonials-wrap:not(.tt-no-hover) .testimonial-card:hover{
  box-shadow:0 28px 56px -30px var(--tt-hover-shadow); transform:translateY(calc(var(--tt-hover-lift) * -1)); border-color:var(--tt-hover-border);
}
.bo-testimonials-wrap .t-video{
  position:relative; aspect-ratio: var(--tt-image-aspect); overflow:hidden; cursor:pointer;
  border-radius: var(--tt-image-radius) var(--tt-image-radius) 0 0;
}
.bo-testimonials-wrap .t-video img{
  width:100%; height:100%; display:block; object-fit: var(--tt-image-fit); object-position:center;
  transition: transform var(--tt-hover-speed) var(--tt-ease), filter var(--tt-hover-speed) var(--tt-ease);
  filter: brightness(var(--tt-image-brightness));
}
.bo-testimonials-wrap:not(.tt-no-hover) .testimonial-card:hover .t-video img{ transform: scale(var(--tt-hover-scale)); filter:brightness(1); }
.bo-testimonials-wrap .t-video::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--tt-overlay-start) var(--tt-overlay-start-pos), var(--tt-overlay-end) 100%);
}
.bo-testimonials-wrap .t-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:var(--tt-play-size); height:var(--tt-play-size); border-radius:50%; background:var(--tt-play-bg);
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition: transform .3s var(--tt-ease-spring), background .3s var(--tt-ease);
  box-shadow:0 10px 24px -6px rgba(3,27,57,.4);
}
.bo-testimonials-wrap .t-video:hover .t-play{ transform:translate(-50%,-50%) scale(1.1); background:var(--tt-play-bg-hover); }
.bo-testimonials-wrap .t-play svg{ width:16px; height:16px; fill:var(--tt-play-icon); transition: fill .3s var(--tt-ease); margin-left:2px; }
.bo-testimonials-wrap .t-video:hover .t-play svg{ fill:var(--tt-play-icon-hover); }
.bo-testimonials-wrap .t-duration{
  position:absolute; bottom:10px; right:10px; z-index:2; font-family:'IBM Plex Mono'; font-size:10.5px;
  color:#fff; background:rgba(3,27,57,.55); padding:3px 8px; border-radius:5px; letter-spacing:.04em;
}
.bo-testimonials-wrap .t-body{ padding:18px 20px 20px; }
.bo-testimonials-wrap .t-role-tag{
  font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tt-accent); margin-bottom:8px; display:block;
}
.bo-testimonials-wrap .t-body p.quote{ font-size:14px; color:var(--tt-slate); font-weight:400; line-height:1.5; margin-bottom:14px; }
.bo-testimonials-wrap .t-person{ display:flex; align-items:center; gap:10px; }
.bo-testimonials-wrap .t-avatar{
  width:34px;height:34px;border-radius:50%; background:linear-gradient(135deg,var(--tt-navy),var(--tt-navy-soft)); flex-shrink:0;
}
.bo-testimonials-wrap .t-person strong{ display:block; font-size:13px; color:var(--tt-navy); }
.bo-testimonials-wrap .t-person span{ font-size:11.5px; color:var(--tt-slate-light); }

.bo-testimonials-wrap .t-video.is-playing video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bo-testimonials-wrap .t-video.is-playing img,
.bo-testimonials-wrap .t-video.is-playing .t-play,
.bo-testimonials-wrap .t-video.is-playing .t-duration,
.bo-testimonials-wrap .t-video.is-playing::after{ display:none; }

/* ---------- Arrows ---------- */
.bo-testimonials-wrap .tt-arrow{
  position:absolute; top:38%; transform:translateY(-50%);
  width:var(--tt-arrow-size); height:var(--tt-arrow-size); border-radius:50%;
  background:var(--tt-arrow-bg); border:1px solid var(--tt-line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5;
  box-shadow:0 14px 28px -14px rgba(11,31,58,.3);
  transition: all .3s var(--tt-ease);
}
.bo-testimonials-wrap .tt-arrow:hover{ background:var(--tt-arrow-bg-hover); border-color:var(--tt-arrow-bg-hover); }
.bo-testimonials-wrap .tt-arrow svg{ width:16px; height:16px; stroke:var(--tt-arrow-icon); transition:stroke .3s var(--tt-ease); }
.bo-testimonials-wrap .tt-arrow:hover svg{ stroke:var(--tt-play-icon-hover); }
.bo-testimonials-wrap .tt-arrow:disabled{ opacity:.35; cursor:default; }
.bo-testimonials-wrap .tt-arrow:disabled:hover{ background:var(--tt-arrow-bg); border-color:var(--tt-line); }
.bo-testimonials-wrap .tt-arrow-prev{ left: max(-22px, calc(-22px + 5vw - 20px)); }
.bo-testimonials-wrap .tt-arrow-next{ right: max(-22px, calc(-22px + 5vw - 20px)); }

/* ---------- Dots ---------- */
.bo-testimonials-wrap .tt-dots{
  display:flex; justify-content:center; gap:8px; margin-top:26px;
}
.bo-testimonials-wrap .tt-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--tt-dot); border:none; cursor:pointer;
  padding:0; transition: all .3s var(--tt-ease);
}
.bo-testimonials-wrap .tt-dot.active{ background:var(--tt-dot-active); width:22px; border-radius:5px; }

/* ---------- Reveal / stagger ---------- */
.bo-testimonials-wrap .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--tt-ease), transform .8s var(--tt-ease);
}
.bo-testimonials-wrap .reveal.in{ opacity:1; transform:translateY(0); }
.bo-testimonials-wrap .stagger-children > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--tt-ease), transform .7s var(--tt-ease);
}
.bo-testimonials-wrap .stagger-children.in > *{ opacity:1; transform:translateY(0); }

/* ---------- Editor-active safety net ----------
   Elementor adds this class to the preview iframe <body> so plugins can
   force-show scroll-reveal content while editing, independent of any
   JS timing race. */
body.elementor-editor-active .bo-testimonials-wrap .reveal,
body.elementor-editor-active .bo-testimonials-wrap .stagger-children,
body.elementor-editor-active .bo-testimonials-wrap .stagger-children > *{
	opacity: 1 !important;
	transform: none !important;
}
.bo-testimonials-wrap .stagger-children.in > *:nth-child(1){ transition-delay:0ms; }
.bo-testimonials-wrap .stagger-children.in > *:nth-child(2){ transition-delay:90ms; }
.bo-testimonials-wrap .stagger-children.in > *:nth-child(3){ transition-delay:180ms; }
.bo-testimonials-wrap .stagger-children.in > *:nth-child(4){ transition-delay:270ms; }

@media (prefers-reduced-motion: reduce){
  .bo-testimonials-wrap .reveal,
  .bo-testimonials-wrap .stagger-children > *{ opacity:1; transform:none; transition:none; }
  .bo-testimonials-wrap .testimonial-track{ transition:none; }
}

/* ================= RESPONSIVE ================= */

@media (max-width:980px){
  /* CSS-only fallback: guarantees correct layout even if the JS
     (applyPerView in testimonials.js) hasn't run yet or fails to load.
     JS still wins when present, since it sets this as an inline style
     on the element, which always beats an external stylesheet. */
  .bo-testimonials-wrap{ --tt-per-view: 2; }

  .bo-testimonials-wrap .tt-wrap{ padding:0 24px; }
}

@media (max-width:767px){
  .bo-testimonials-wrap{ --tt-per-view: 1 !important; }

  .bo-testimonials-wrap .tt-wrap{ padding:0 16px; }
  .bo-testimonials-wrap .tt-section-head h2{ font-size:24px; }
  .bo-testimonials-wrap .tt-section-head{ padding: 0 8px; }
  .bo-testimonials-wrap .testimonial-track-wrap{ padding: 0; }

  /* Single card should never exceed the viewport width. Hard-coded
     100% here (not var(--tt-per-view)) is intentional: this guarantees
     one-card-per-view on mobile no matter what value that variable
     resolves to from any other source (Elementor's own responsive
     control CSS, JS, inline styles, etc). */
  .bo-testimonials-wrap .testimonial-slide{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Arrows: on mobile the vw-based negative offset can sit right at the
     edge of the clipped wrapper and behave inconsistently across
     browsers. Pin them a fixed distance inside the container instead —
     this keeps them fully visible, tap-friendly, and guarantees zero
     chance of them causing edge overflow. */
  .bo-testimonials-wrap .tt-arrow{
    --tt-arrow-size: 38px;
    top: 32%;
  }
  .bo-testimonials-wrap .tt-arrow-prev{ left: 8px; }
  .bo-testimonials-wrap .tt-arrow-next{ right: 8px; }
}

@media (max-width:420px){
  .bo-testimonials-wrap .tt-wrap{ padding:0 12px; }
  .bo-testimonials-wrap .tt-section-head h2{ font-size:21px; }
  .bo-testimonials-wrap .t-body{ padding:16px 16px 18px; }
}