/* Wonder Slider (WDT) base styles. */

.ws-root{--ws-shown:3;--ws-shown-eff:var(--ws-shown,3);--ws-fullresp:0;--ws-minwidth:250px;--ws-gap:20px;--ws-height:320px;--ws-arrow:100px;--ws-dot:15px;--ws-arrows:1;--ws-dots:1;position:relative;}

.ws-root .ws-wrap{position:relative;}

/* Track: transform driven (no scrollbars). */
.ws-root .ws-track{position:relative;overflow:hidden;touch-action:pan-y;}

/* Improve drag navigation on desktop (prevent ghost-image dragging/selecting). */
.ws-root.ws-dragging, .ws-root.ws-dragging *{user-select:none;-webkit-user-select:none;}
.ws-root img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;}

/* Ensure embedded media doesn't capture swipe/trackpad gestures inside the slider. */
.ws-root .ws-video-iframe, .ws-root .ws-video-wrap video{pointer-events:none;}
.ws-root .ws-track-inner{display:flex;gap:var(--ws-gap,20px);align-items:stretch;height:var(--ws-height,320px);will-change:transform;transform:translate3d(0,0,0);}

/* Extra hardening for looping belt smoothness. */
.ws-root.ws-looping .ws-track-inner{will-change:transform;}

/* Slides */
.ws-root .ws-slide{position:relative;flex:0 0 calc((100% - (var(--ws-shown-eff, var(--ws-shown,3)) - 1) * var(--ws-gap,20px)) / var(--ws-shown-eff, var(--ws-shown,3)));box-sizing:border-box;border-radius:var(--ws-slide-radius,0px);padding:0;height:var(--ws-height,320px);max-height:var(--ws-height,320px);overflow:hidden;transition:max-height .35s ease;}
.ws-root.ws-content-open .ws-track-inner{align-items:flex-start;height:auto;}
.ws-root .ws-slide.ws-opened{height:auto !important;max-height:none !important;overflow:visible !important;}
.ws-root .ws-slide.ws-opened .ws-content{height:auto !important;overflow:visible !important;}

/* Content wrapper (padding uses CSS variables set per slide in inline style attr) */
.ws-root .ws-content{height:100%;overflow:hidden;box-sizing:border-box;padding:var(--ws-pad-top,0px) var(--ws-pad-right,var(--ws-pad-top,0px)) var(--ws-pad-bottom,var(--ws-pad-top,0px)) var(--ws-pad-left,var(--ws-pad-right,var(--ws-pad-top,0px)));}

/* Expander */
.ws-root .ws-expander{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#111;display:none;align-items:center;justify-content:center;cursor:pointer;line-height:1;font-weight:800;box-shadow:0 14px 34px rgba(0,0,0,.14);transition:transform .15s ease,box-shadow .15s ease;z-index:4;}
.ws-root .ws-expander:hover{transform:scale(1.06);box-shadow:0 18px 44px rgba(0,0,0,.18);}
.ws-root .ws-slide.ws-needs-expand .ws-expander{display:flex;}
.ws-root .ws-slide.ws-opened .ws-expander{display:flex;}

/* Navigation arrows */
.ws-root .ws-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:var(--ws-arrow,100px);height:var(--ws-arrow,100px);border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,245,245,.95));border:1px solid rgba(0,0,0,.10);cursor:pointer;user-select:none;color:#111;box-shadow:0 16px 40px rgba(0,0,0,.16);transition:transform .15s ease, box-shadow .15s ease;}
.ws-root.ws-arrows-off .ws-nav{display:none !important;}
.ws-root .ws-nav:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 18px 44px rgba(0,0,0,.18);}
.ws-root .ws-nav:active{transform:translateY(-50%) scale(0.98);}
.ws-root .ws-nav svg{width:calc(var(--ws-arrow,100px) * .42);height:calc(var(--ws-arrow,100px) * .42);}
.ws-root .ws-prev{left:calc(var(--ws-arrow,100px) * -0.30);}
.ws-root .ws-next{right:calc(var(--ws-arrow,100px) * -0.30);}

/* Dots */
.ws-root .ws-dots{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.ws-root.ws-dots-off .ws-dots{display:none !important;}
.ws-root .ws-dot{width:var(--ws-dot,15px);height:var(--ws-dot,15px);border-radius:50% !important;appearance:none;-webkit-appearance:none;border:0;padding:0;display:inline-block;background:rgba(0,0,0,.25);cursor:pointer;transition:transform .15s ease, background .15s ease;}
.ws-root .ws-dot:hover{transform:scale(1.15);}
.ws-root .ws-dot.is-active{background:rgba(0,0,0,.75);}

/* Elementor editor: drag handle for resizing Slider Height directly in the preview */
.elementor-editor-active .ws-root .ws-height-resizer{position:absolute;left:0;right:0;bottom:-18px;height:18px;cursor:ns-resize;z-index:10;}
.elementor-editor-active .ws-root .ws-height-resizer::after{content:"";position:absolute;left:50%;top:9px;transform:translate(-50%,-50%);width:54px;height:4px;border-radius:99px;background:rgba(0,0,0,.25);}

/* Review slide */
.ws-root .ws-review-stars{display:flex;gap:4px;justify-content:center;align-items:center;padding-top:var(--ws-star-pad-top,5px);padding-bottom:var(--ws-star-pad-bottom,5px);margin-bottom:8px;font-size:var(--ws-star-size,18px);line-height:1;}
.ws-root .ws-star{color:var(--ws-star-inactive,#dddddd);}
.ws-root .ws-star.is-active{color:var(--ws-star-active,#f5b301);}
.ws-root .ws-review-name{font-weight:700;margin-top:10px;}
.ws-root .ws-review-position{opacity:.7;font-size:0.92em;margin-top:2px;}
.ws-root .ws-review-text{margin-top:10px;}

/* Text slide: add space below images inserted via the editor */
.ws-root .ws-slide[data-ws-type="text"] .ws-content img{padding-bottom:10px;}

/* Image slides */
.ws-root .ws-imgcol{display:flex;flex-direction:column;height:100%;position:relative;align-items:stretch;}
.ws-root .ws-imgcol .ws-imgwrap{order:0;position:relative;flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;width:100%;height:100%;}
.ws-root .ws-imgcol .ws-imgstack{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.ws-root .ws-imgcol .ws-caption{order:1;flex:0 0 auto;}

/* Default: cover */
.ws-root .ws-imgcol:not(.ws-image-no-cover) .ws-imgstack{align-items:stretch;justify-content:stretch;}
/*
  Hardening: many themes/Elementor styles apply global img rules (often height:auto)
  that can override the intended "cover" behavior. We keep these scoped to the widget.
*/
.ws-root .ws-imgcol:not(.ws-image-no-cover) img.ws-image{width:100% !important;height:100% !important;display:block;object-fit:cover !important;object-position:50% 50% !important;border-radius:inherit;backface-visibility:hidden;will-change:transform;transform:translateZ(0);}

/* If the slide uses an Elementor background image, keep it consistent with the "Disable cover" intent. */
.ws-root .ws-slide.ws-slide-image-no-cover{background-position:center !important;background-repeat:no-repeat !important;background-size:contain !important;}

/* Disable cover: fit/contain + caption width tracks the rendered image width */
/*
  In "Disable cover" mode we want the image to stay vertically aligned to the TOP at all times.
  This also ensures caption positions "Above image" and "Below image" stay attached to the image
  without gaps, and avoids the right-shift that can happen when the wrapper shrink-wraps.
*/
.ws-root .ws-imgcol.ws-image-no-cover{align-items:stretch;}

/*
  Hardening against theme/Elementor/global CSS that commonly forces cover behavior.
  We intentionally use higher specificity + !important on the key properties.
*/
.ws-root .ws-imgcol.ws-image-no-cover .ws-imgwrap{width:100% !important;max-width:100% !important;height:100% !important;}
/* Keep image pinned to top; keep horizontal centering. */
.ws-root .ws-imgcol.ws-image-no-cover .ws-imgstack{flex:0 0 auto !important;align-items:flex-start !important;justify-content:center !important;}
.ws-root .ws-imgcol.ws-image-no-cover img.ws-image{width:auto !important;height:auto !important;max-width:100% !important;max-height:100% !important;display:block;object-fit:contain !important;border-radius:inherit;}

/* Caption */
.ws-root .ws-caption{box-sizing:border-box;width:100%;max-width:100%;display:block;padding:10px 12px;border-radius:0px;margin:0;--ws-cap-base:translateY(0px);--ws-cap-x:translateX(0px);transform:var(--ws-cap-base) var(--ws-cap-x);} 
.ws-root a.ws-caption{color:inherit;text-decoration:none;}
/* Ensure linked captions never get browser-default underlines in any state.
   Typography control can still enable underline via its more-specific selector. */
.ws-root a.ws-caption:hover,
.ws-root a.ws-caption:active,
.ws-root a.ws-caption:focus,
.ws-root a.ws-caption:focus-visible,
.ws-root a.ws-caption:visited{ text-decoration:none; }
.ws-root .ws-imgcol.ws-cap-pos-above .ws-imgwrap > .ws-caption{order:-1;position:relative;display:block;width:100%;}
.ws-root .ws-imgcol.ws-cap-pos-below .ws-imgwrap > .ws-caption{order:1;position:relative;display:block;width:100%;}
.ws-root .ws-imgcol.ws-cap-pos-top .ws-imgwrap > .ws-caption{position:absolute;left:0;right:0;top:var(--ws-cap-inset-top,0px);--ws-cap-base:translateY(0px);} 
.ws-root .ws-imgcol.ws-cap-pos-bottom .ws-imgwrap > .ws-caption{position:absolute;left:0;right:0;bottom:var(--ws-cap-inset-bottom,0px);--ws-cap-base:translateY(0px);} 
.ws-root .ws-imgcol.ws-cap-pos-center .ws-imgwrap > .ws-caption{position:absolute;left:0;right:0;top:var(--ws-cap-center-y,50%);--ws-cap-base:translateY(-50%);} 

/* In no-cover mode, above/below captions are part of normal flow; keep everything top-aligned and gap-free. */
.ws-root .ws-imgcol.ws-image-no-cover.ws-cap-pos-above .ws-imgstack,
.ws-root .ws-imgcol.ws-image-no-cover.ws-cap-pos-below .ws-imgstack{align-items:flex-start !important;}

/*
  When "Disable cover" is enabled, overlay captions (top/bottom/center) should be centered over the
  *rendered image area*, not stretched across the full container. JS sets an exact pixel width.
*/
.ws-root .ws-imgcol.ws-image-no-cover.ws-cap-pos-top .ws-imgwrap > .ws-caption,
.ws-root .ws-imgcol.ws-image-no-cover.ws-cap-pos-bottom .ws-imgwrap > .ws-caption,
.ws-root .ws-imgcol.ws-image-no-cover.ws-cap-pos-center .ws-imgwrap > .ws-caption{left:50% !important;right:auto !important;--ws-cap-x:translateX(-50%);} 

.ws-root .ws-cap-anim-none{animation:none !important;}
.ws-root .ws-caption.ws-cap-play.ws-cap-anim-fade{animation:wsCapFade .55s ease both;}
.ws-root .ws-caption.ws-cap-play.ws-cap-anim-slide_top{animation:wsCapSlideTop .6s ease both;}
.ws-root .ws-caption.ws-cap-play.ws-cap-anim-slide_bottom{animation:wsCapSlideBottom .6s ease both;}
.ws-root.ws-hover-pause .ws-caption{animation-play-state:paused !important;}
@keyframes wsCapFade{from{opacity:0}to{opacity:1}}
@keyframes wsCapSlideTop{from{opacity:0;transform:var(--ws-cap-base) var(--ws-cap-x) translateY(-12px)}to{opacity:1;transform:var(--ws-cap-base) var(--ws-cap-x) translateY(0px)}}
@keyframes wsCapSlideBottom{from{opacity:0;transform:var(--ws-cap-base) var(--ws-cap-x) translateY(12px)}to{opacity:1;transform:var(--ws-cap-base) var(--ws-cap-x) translateY(0px)}}

/* Video slides */
.ws-root .ws-video-wrap{position:relative;width:100%;height:100%;overflow:hidden;}
.ws-root .ws-video-gesture{position:absolute;inset:0;z-index:1;background:transparent;}
.ws-root .ws-video-iframe{border:0;display:block;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);backface-visibility:hidden;will-change:transform;} 
.ws-root video.ws-video-html5{display:block;width:100%;height:100%;object-fit:cover;background:#000;backface-visibility:hidden;}
/* In "Disable cover" mode we still preserve aspect ratio; sizing is handled in JS (contain math). */
/* In no-cover mode, iframe sizing is handled by JS so we can preserve aspect ratio (contain/fit).
   Avoid !important here, otherwise the JS real-time sizing can't take effect (especially while
   Slider Height is being adjusted live in Elementor). */
.ws-root .ws-slide.ws-video-no-cover .ws-video-iframe{width:auto;height:auto;}
.ws-root .ws-slide.ws-video-no-cover video.ws-video-html5{object-fit:contain;}

.ws-root .ws-video-click{position:absolute;inset:0;z-index:2;display:block;}
.ws-root .ws-image-click{position:absolute;inset:0;z-index:2;display:block;}
.ws-root .ws-video-popup-hit{position:absolute;inset:0;z-index:3;display:block;background:transparent;border:0;padding:0;margin:0;cursor:pointer;}
.ws-root .ws-image-popup-hit{position:absolute;inset:0;z-index:3;display:block;background:transparent;border:0;padding:0;margin:0;cursor:pointer;}

/* Video modal */
.ws-video-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.68);} 
.ws-video-modal.is-open{display:flex;} 
.ws-video-modal__box{max-width:92vw;max-height:92vh;width:min(92vw,1100px);aspect-ratio:16/9;background:#000;border-radius:16px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;} 
.ws-video-modal__box.ws-html5{aspect-ratio:auto;height:92vh;width:92vw;max-width:1100px;} 
.ws-video-modal__close{position:absolute;top:10px;right:10px;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;z-index:2;} 
.ws-video-modal__media{width:100%;height:100%;display:block;border:0;} 
.ws-video-modal__media.ws-html5-video{object-fit:contain;background:#000;}
.ws-video-modal__media.ws-img{object-fit:contain;background:#000;}
.ws-video-modal__media.ws-img{object-fit:contain;background:#000;}

/* Visibility toggles */
.ws-root{position:relative;}
.ws-root.ws-dots-off .ws-dots{display:none !important;}
.ws-root.ws-arrows-off .ws-nav{display:none !important;}