/* ABDAR Video Testimonials */
/* Colors below are marked !important on purpose: this section is meant to render with the
   exact palette configured in the plugin's Settings screen, regardless of the active theme.
   Many themes apply their own global heading/link/button color rules (often already using
   !important themselves via the Customizer or a page builder's global styles), which would
   otherwise silently override this component's own gold/navy scheme — e.g. the "Video
   Testimonials" heading rendering in the theme's default (often near-black) heading color
   instead of the configured navy, or the CTA button picking up the theme's button color. */
/* Full-bleed background: WordPress page/theme containers commonly wrap content in a
   narrower boxed column centered with their own "margin: 0 auto" (sometimes !important).
   That constrains this section to whatever width the page happens to give it, which is
   why the pink background can end up much narrower than intended and the arrows look far
   from the cards. This breaks the section out to the full viewport width regardless of the
   parent container, while the header/carousel/CTA below stay centered at their own max-width. */
.abdar-vt{--abdar-bg:#fff6f3; width:100vw;max-width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:var(--abdar-bg,#fff6f3) !important;padding:72px 24px 78px;overflow:hidden;font-family:inherit;color:var(--abdar-navy) !important;box-sizing:border-box}
.abdar-vt *{box-sizing:border-box}
.abdar-vt-header{text-align:center;max-width:780px;margin:0 auto 42px}
.abdar-vt-eyebrow{font-size:14px;font-weight:800;letter-spacing:1.8px;color:var(--abdar-gold) !important;margin-bottom:12px}
.abdar-vt-header h2{margin:0;font-size:38px;line-height:1.15;font-weight:800;color:var(--abdar-navy) !important;background:none !important;-webkit-text-fill-color:var(--abdar-navy) !important}
.abdar-vt-header p{margin:24px auto 0;max-width:720px;font-size:18px;line-height:1.55;color:var(--abdar-text) !important}
.abdar-vt-divider{display:block;width:62px;height:4px;border-radius:5px;background:var(--abdar-gold);margin:44px auto 0}
.abdar-vt-carousel{position:relative;width:100%;max-width:1160px;margin:0 auto;padding:0 76px}
.abdar-vt-viewport{width:100%;overflow:hidden;position:relative}
.abdar-vt-track{display:flex;gap:28px;transition:transform .4s ease;will-change:transform;overflow:visible;width:100%}
.abdar-vt-card{flex:0 0 calc((100% - 56px)/3);background:#fff;border:1px solid rgba(20,71,110,.08);border-radius:var(--abdar-radius);overflow:hidden;box-shadow:0 8px 28px rgba(18,71,110,.06)}
.abdar-vt-media{position:relative;aspect-ratio:16/9;background:var(--abdar-navy);display:flex;align-items:center;justify-content:center;overflow:hidden}
.abdar-vt-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The overlay only darkens cards that have no real thumbnail (so the play button still
   reads clearly against the plain navy background). Once a real photo/video-frame poster
   is present, the overlay is switched off entirely so the photo shows in its natural,
   uncropped color instead of being tinted navy. */
.abdar-vt-media-overlay{position:absolute;inset:0;background:rgba(18,71,110,.92)}
.abdar-vt-media:not(.abdar-vt-media--blank) .abdar-vt-media-overlay{background:transparent}
.abdar-vt-play{position:relative;z-index:2;width:68px;height:48px;border:0;border-radius:12px;background:#ff0302 !important;color:#fff !important;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.28);transition:transform .2s ease,filter .2s ease}
.abdar-vt-play:hover,.abdar-vt-play:focus-visible{transform:scale(1.06);filter:brightness(1.08)}
.abdar-vt-play-icon{width:0;height:0;margin-left:4px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid #fff}
.abdar-vt-duration{position:absolute;z-index:3;right:12px;bottom:12px;background:#082e4b !important;color:#fff !important;border-radius:5px;padding:6px 8px;font-size:12px;font-weight:700}
.abdar-vt-info{display:flex;align-items:center;gap:14px;padding:20px 22px 22px;min-height:96px}
.abdar-vt-initials{width:50px;height:50px;min-width:50px;border:2px solid var(--abdar-gold) !important;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--abdar-gold) !important;font-size:14px;font-weight:800;background:#fff9f7 !important}
.abdar-vt-person h3{margin:0;color:var(--abdar-navy) !important;font-size:16px;line-height:1.25;font-weight:800;background:none !important;-webkit-text-fill-color:var(--abdar-navy) !important}
.abdar-vt-person p{margin:6px 0 0;color:var(--abdar-text) !important;font-size:14px;line-height:1.35}
/* Arrows sit inside the carousel's own reserved padding (see .abdar-vt-carousel above) instead
   of being pushed outside the component with a negative offset. The old approach relied on the
   surrounding page having extra empty margin around the plugin and got clipped by .abdar-vt's
   overflow:hidden the moment it was embedded in a normal, page-width container. */
.abdar-vt-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:60px;height:60px;padding:0;border:0;border-radius:50%;background:transparent !important;color:transparent !important;font-size:0;line-height:0;cursor:pointer;box-shadow:none;overflow:hidden}.abdar-vt-arrow img{display:block;width:100%;height:100%;object-fit:contain}
.abdar-vt-prev{left:6px}.abdar-vt-next{right:6px}
.abdar-vt-arrow:hover,.abdar-vt-arrow:focus-visible{filter:brightness(1.05)}
.abdar-vt-cta-wrap{text-align:center;margin-top:36px}
.abdar-vt-cta{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;border-radius:11px;background:var(--abdar-gold) !important;color:var(--abdar-navy) !important;font-weight:800;text-decoration:none;box-shadow:0 10px 22px rgba(221,169,31,.22)}
.abdar-vt-cta:hover,.abdar-vt-cta:focus-visible{filter:brightness(1.04);color:var(--abdar-navy) !important}
.abdar-vt-empty{text-align:center;width:100%;padding:30px}
.abdar-vt-modal{position:fixed;z-index:999999;inset:0;background:var(--abdar-modal-bg,#031421) !important;display:none;align-items:center;justify-content:center;padding:30px}
.abdar-vt-modal.is-open{display:flex}
.abdar-vt-modal-content{width:min(960px,95vw);aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.abdar-vt-modal-content iframe,.abdar-vt-modal-content video{width:100%;height:100%;border:0;display:block}
.abdar-vt-modal-close{position:absolute;right:20px;top:16px;width:88px;height:76px;border:0;border-radius:0;background:var(--abdar-modal-close-bg,#0068b7) !important;color:var(--abdar-modal-close-color,#fff) !important;font-size:44px;font-weight:700;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:none}.abdar-vt-modal-close:hover,.abdar-vt-modal-close:focus-visible{filter:brightness(1.08)}
@media(max-width:899px){
 .abdar-vt{padding-left:60px;padding-right:60px}.abdar-vt-card{flex-basis:calc((100% - 28px)/2)}
 .abdar-vt-carousel{padding:0 64px}
}
@media(max-width:767px){
 .abdar-vt{padding:52px 20px 58px}.abdar-vt-header{margin-bottom:30px}.abdar-vt-header h2{font-size:30px}.abdar-vt-header p{font-size:16px;margin-top:18px}
 .abdar-vt-divider{margin-top:30px}.abdar-vt-track{gap:16px}.abdar-vt-card{flex-basis:100%}
 .abdar-vt-arrow{width:44px;height:44px;font-size:0;line-height:0}.abdar-vt-prev{left:4px}.abdar-vt-next{right:4px}
 .abdar-vt-carousel{padding:0 13px}.abdar-vt-info{padding:17px}.abdar-vt-modal{padding:15px}
}