/* MWD Mask Slider
 *
 * These are DEFAULTS only. Every Elementor control writes a real CSS property
 * straight onto the element it affects, at a higher specificity than anything
 * here, so the panel always wins.
 *
 *   .mwd-ms-wrap > .mwd-ms (root) > .mwd-ms__mask (the visible box) > …
 */

.mwd-ms-wrap {
  display: flex;
  width: 100%;
}

/* Root: takes the Width control. The image, and a pagination strip placed
   outside it, stack inside. */
.mwd-ms {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;             /* fallback: without its settings CSS the root would collapse to 0px */
  max-width: 100%;
}

/* The mask: the visible box. Takes the Height control and does the clipping. */
.mwd-ms__mask {
  position: relative;
  width: 100%;
  height: 420px;           /* fallback only; the panel's Height always overrides */
  overflow: hidden;
  isolation: isolate;      /* slides can never paint over neighbouring content */
}

.mwd-ms__track {
  position: absolute;
  inset: 0;
}

/* Slides stack and fill the mask. Off-state is opacity or an off-axis
   transform — never `visibility`, whose transition needs a delay equal to the
   duration and makes `transition-duration` from the panel hard to override. */
.mwd-ms__slide {
  position: absolute;
  inset: 0;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(.5, 0, .1, 1);
  will-change: transform, opacity;
}
.mwd-ms__slide.is-active { z-index: 1; }

.mwd-ms__link {
  display: block;
  width: 100%;
  height: 100%;
}

.mwd-ms__img {
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* Size carries the extra `.mwd-ms` step on purpose. Elementor ships
   `.elementor img { height: auto }`, which out-ranks a single class: without
   this the image keeps its own aspect ratio, stops short of the mask's height
   and leaves a gap, and `cover` has nothing to fill. */
.mwd-ms .mwd-ms__img {
  width: 100%;
  height: 100%;
  max-width: none;         /* themes cap img at 100% width; harmless, but explicit */
}

/* ---- effect: fade ---- */
.mwd-ms--fade .mwd-ms__slide {
  opacity: 0;
  transition-property: opacity;
}
.mwd-ms--fade .mwd-ms__slide.is-active { opacity: 1; }

/* ---- effect: slide, from any edge ----
   A resting slide waits on the "next" edge. The JS parks the incoming slide on
   the edge it should arrive from (instantly), then adds .is-active so the
   transition carries it in. Off-mask slides are clipped by the mask. */
.mwd-ms--slide .mwd-ms__slide {
  opacity: 1;
  transition-property: transform;
}

.mwd-ms--slide.mwd-ms--from-right  .mwd-ms__slide,
.mwd-ms--slide.mwd-ms--from-right  .mwd-ms__slide.is-next { transform: translate3d(100%, 0, 0); }
.mwd-ms--slide.mwd-ms--from-right  .mwd-ms__slide.is-prev { transform: translate3d(-100%, 0, 0); }

.mwd-ms--slide.mwd-ms--from-left   .mwd-ms__slide,
.mwd-ms--slide.mwd-ms--from-left   .mwd-ms__slide.is-next { transform: translate3d(-100%, 0, 0); }
.mwd-ms--slide.mwd-ms--from-left   .mwd-ms__slide.is-prev { transform: translate3d(100%, 0, 0); }

.mwd-ms--slide.mwd-ms--from-bottom .mwd-ms__slide,
.mwd-ms--slide.mwd-ms--from-bottom .mwd-ms__slide.is-next { transform: translate3d(0, 100%, 0); }
.mwd-ms--slide.mwd-ms--from-bottom .mwd-ms__slide.is-prev { transform: translate3d(0, -100%, 0); }

.mwd-ms--slide.mwd-ms--from-top    .mwd-ms__slide,
.mwd-ms--slide.mwd-ms--from-top    .mwd-ms__slide.is-next { transform: translate3d(0, -100%, 0); }
.mwd-ms--slide.mwd-ms--from-top    .mwd-ms__slide.is-prev { transform: translate3d(0, 100%, 0); }

/* last, and as specific as the parking rules, so it always wins */
.mwd-ms.mwd-ms--slide .mwd-ms__slide.is-active { transform: translate3d(0, 0, 0); }

/* ---- gradient overlay ----
   One layer over every slide. Being inside the mask, it takes the mask's size,
   clipping and rounded corners with no extra rules, and it stays still while
   the slides move beneath it. Stacking inside the mask (its own context):
   slides 0–1, overlay 2, pagination 3, arrows 4 — so the controls stay crisp.
   pointer-events: none lets clicks, links and swipes fall through to the
   slide. The panel's Background control supplies the gradient itself. */
.mwd-ms__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---- captions ----
   One layer, one caption per slide, all stacked in the same grid cell so the
   layer is as tall as the longest one and they cross-fade in place. Position
   is plain grid alignment (align-self / justify-self) and every offset is the
   caption's own margin, so the panel's Margin control moves it directly.
   Inside the mask it follows the overlay in source order, so it paints above
   the tint but below the pagination (3) and arrows (4). */
.mwd-ms__captions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  pointer-events: none;
}
.mwd-ms__caption {
  grid-area: 1 / 1;
  justify-self: left;
  box-sizing: border-box;
  max-width: 100%;
  opacity: 0;
  visibility: hidden;      /* also drops links in hidden captions from the tab order */
  /* follows the Transition speed setting, which writes --mwd-ms-cap-ms */
  transition: opacity var(--mwd-ms-cap-ms, 600ms) ease, visibility 0s linear var(--mwd-ms-cap-ms, 600ms);
  pointer-events: none;
}
.mwd-ms__caption.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}
.mwd-ms__caption.is-empty { display: none; }
.mwd-ms__caption > :first-child { margin-top: 0; }
.mwd-ms__caption > :last-child  { margin-bottom: 0; }
.mwd-ms__caption a { color: inherit; }

/* over the image: fills the mask, caption pinned by alignment */
.mwd-ms__captions--in {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.mwd-ms__captions--in .mwd-ms__caption {
  align-self: end;
  max-width: min(560px, 100%);
  margin: 24px;
  padding: 12px 18px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1rem;
  line-height: 1.45;
}

/* outside the image: in flow above or below the mask. The root is a flex
   column, so order decides the stack:
   top nav (-2) · caption above (-1) · mask (0) · caption below (1) · bottom nav (2) */
.mwd-ms__captions--out { position: relative; }
.mwd-ms__captions--below { order: 1; }
.mwd-ms__captions--above { order: -1; }
.mwd-ms__captions--below .mwd-ms__caption { margin: 16px 0 0; }
.mwd-ms__captions--above .mwd-ms__caption { margin: 0 0 16px; }

/* ---- swipe ----
   pan-y keeps vertical page scrolling (and pinch-zoom) with the browser;
   only sideways gestures reach the slider. */
.mwd-ms--swipe .mwd-ms__mask { touch-action: pan-y pinch-zoom; }
.mwd-ms--swipe .mwd-ms__track {
  -webkit-user-select: none;
  user-select: none;
}
.mwd-ms--swipe .mwd-ms__img { -webkit-user-drag: none; }

/* ---- pagination strip ---- */
.mwd-ms__nav {
  z-index: 3;
  display: flex;
  flex-wrap: wrap;         /* wrap rather than squash when there are many slides */
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px;
  box-sizing: border-box;
  pointer-events: none;    /* the strip is not a click target; its buttons are */
}
.mwd-ms--pill .mwd-ms__nav { gap: 12px; }

/* over the image: pinned to the top or bottom edge */
.mwd-ms--nav-over .mwd-ms__nav {
  position: absolute;
  left: 0;
  right: 0;
}
.mwd-ms--nav-over.mwd-ms--nav-bottom .mwd-ms__nav { bottom: 20px; }
.mwd-ms--nav-over.mwd-ms--nav-top    .mwd-ms__nav { top: 20px; }

/* outside the image: in flow, above or below the mask */
.mwd-ms--nav-out .mwd-ms__nav { position: relative; }
.mwd-ms--nav-out.mwd-ms--nav-bottom .mwd-ms__nav { margin-top: 20px; order: 2; }
.mwd-ms--nav-out.mwd-ms--nav-top    .mwd-ms__nav { margin-bottom: 20px; order: -2; }

/* Shared button reset for dots, the pause button and arrows. Themes put
   `min-height: 44px` and padding on every button, and a minimum always beats
   the used size — cleared outright or nothing here can go small. */
.mwd-ms button.mwd-ms__dot,
.mwd-ms button.mwd-ms__toggle,
.mwd-ms button.mwd-ms__arrow {
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  line-height: 0;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- dots ---- */
.mwd-ms button.mwd-ms__dot {
  position: relative;
  flex: 0 0 auto;          /* hold the set size instead of collapsing when tight */
  transition-property: width, background-color, transform;
  transition-duration: 600ms;
  transition-timing-function: ease;
}

/* Visual size and touch target are separate: the target is padded to a usable
   size without changing a visible pixel. */
.mwd-ms__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 8px);
  height: max(100%, 24px);
}

.mwd-ms__dot:focus-visible,
.mwd-ms__toggle:focus-visible {
  outline: 2px solid #FF6A2C;
  outline-offset: 4px;
}

/* style: bars. The extra `.mwd-ms__nav` step keeps the active colour ahead of
   a panel-set Dot colour (which targets every dot) but still behind a
   panel-set Active colour, so each control only overrides what it names. */
.mwd-ms--bars button.mwd-ms__dot {
  width: 34px;
  height: 5px;
  border-radius: 0;
  background-color: rgba(255, 255, 255, .45);
}
.mwd-ms.mwd-ms--bars .mwd-ms__nav button.mwd-ms__dot.is-active,
.mwd-ms.mwd-ms--bars .mwd-ms__nav button.mwd-ms__dot:hover {
  background-color: #FF6A2C;
}

/* style: progress pill. Dots, with the active one stretched into a pill whose
   fill runs across over the slide's hold time. The fill finishing is what
   advances the slide (see the JS), so the two can never drift apart. */
.mwd-ms--pill button.mwd-ms__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: #8e8e8e;       /* inactive dot, and the pill's track */
}
.mwd-ms--pill button.mwd-ms__dot.is-active { width: 36px; }

/* scaled, not resized, so dot centres stay evenly spaced */
.mwd-ms--pill.mwd-ms--taper .mwd-ms__dot:nth-child(1):not(.is-active) { transform: scale(.4); }
.mwd-ms--pill.mwd-ms--taper .mwd-ms__dot:nth-child(2):not(.is-active) { transform: scale(.7); }

/* The clip lives on this inner span, not the button: `overflow: hidden` on the
   button would also clip its enlarged touch target. */
.mwd-ms__progress {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.mwd-ms--pill .mwd-ms__dot.is-active .mwd-ms__progress { display: block; }

/* Without autoplay the pill simply shows full: nothing to count down. */
.mwd-ms__progress::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;          /* rounded leading edge */
  background-color: #000;
}

/* display:none -> block restarts the animation, so a newly active pill always
   fills from empty. Duration = the slider's hold time, set by the JS. */
.mwd-ms.is-autoplay .mwd-ms__dot.is-active .mwd-ms__progress::before {
  animation: mwd-ms-fill var(--mwd-ms-fill-ms, 5000ms) linear both;
}
/* Must out-rank the rule above: the `animation` shorthand resets
   `animation-play-state` to `running`, so a weaker pause rule is ignored. */
.mwd-ms.is-autoplay.is-paused .mwd-ms__dot.is-active .mwd-ms__progress::before {
  animation-play-state: paused;
}

@keyframes mwd-ms-fill {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ---- pause / play button ---- */
.mwd-ms button.mwd-ms__toggle {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background-color: #8e8e8e;
  color: #000;
  transition: background-color .2s ease, color .2s ease;
}
.mwd-ms--bars button.mwd-ms__toggle {
  background-color: rgba(255, 255, 255, .45);
  color: #FF6A2C;
}
.mwd-ms__toggle svg {
  width: 46%;
  height: 46%;
  display: block;
  fill: currentColor;
}
.mwd-ms__toggle .mwd-ms__icon-play,
.mwd-ms.is-stopped .mwd-ms__toggle .mwd-ms__icon-pause { display: none; }
.mwd-ms.is-stopped .mwd-ms__toggle .mwd-ms__icon-play { display: block; }

/* ---- arrows ----
   The next arrow sits on the edge the next slide comes in from, pointing at
   it; the previous arrow opposite. The chevron is drawn pointing right and
   turned to face its edge. */
.mwd-ms button.mwd-ms__arrow {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, .35);
  color: #fff;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.mwd-ms button.mwd-ms__arrow:hover:not(:disabled) { background-color: rgba(0, 0, 0, .6); }
.mwd-ms button.mwd-ms__arrow:disabled { opacity: .35; cursor: default; }
.mwd-ms__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mwd-ms__arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}

.mwd-ms__arrow--side-left   { left: 16px;   top: 50%;  transform: translateY(-50%); }
.mwd-ms__arrow--side-right  { right: 16px;  top: 50%;  transform: translateY(-50%); }
.mwd-ms__arrow--side-top    { top: 16px;    left: 50%; transform: translateX(-50%); }
.mwd-ms__arrow--side-bottom { bottom: 16px; left: 50%; transform: translateX(-50%); }

.mwd-ms__arrow--side-left   svg { transform: rotate(180deg); }
.mwd-ms__arrow--side-top    svg { transform: rotate(-90deg); }
.mwd-ms__arrow--side-bottom svg { transform: rotate(90deg); }

/* ---- editor empty state ---- */
.mwd-ms-empty {
  padding: 24px;
  border: 1px dashed rgba(0, 0, 0, .25);
  font: 13px/1.5 system-ui, sans-serif;
  text-align: center;
  color: #777;
}

/* ---- mobile behaviour ----
   Phone-only switches from the panel. Everything here is scoped to a class the
   render adds, so a slider without them is untouched.
   767px matches Elementor's own mobile breakpoint. */
@media (max-width: 767px) {
  /* `button` is in the selector on purpose: the shared button reset names the
     element too, and would otherwise keep the arrow displayed. */
  .mwd-ms--hide-arrows-m button.mwd-ms__arrow { display: none; }
  .mwd-ms--hide-nav-m .mwd-ms__nav            { display: none; }
  .mwd-ms--cap-hide-m .mwd-ms__captions { display: none; }

  /* Caption as a full-width bar across the bottom of the image. The extra
     `.mwd-ms` step puts it above a panel-set mobile margin, which would
     otherwise re-indent the bar and leave it looking half-aligned. */
  .mwd-ms.mwd-ms--cap-bar-m .mwd-ms__captions--in .mwd-ms__caption {
    align-self: end;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
}

/* Motion is decoration here; the slider still works, it just cuts. */
@media (prefers-reduced-motion: reduce) {
  .mwd-ms__slide,
  .mwd-ms__dot,
  .mwd-ms__arrow,
  .mwd-ms__toggle,
  .mwd-ms__caption {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .mwd-ms__progress::before { animation: none !important; }
}