/* ── Layout ──────────────────────────────────────────────────────────────── */

.mgw-track-outer {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mgw-track {
  /* Flex row: holds two identical .mgw-set strips side by side.
     direction:ltr anchors the first set to the left even on RTL sites. */
  display: flex;
  overflow: visible;
  width: 100%;
  direction: ltr;
}

.mgw-set {
  /* Each set animates by -100% of its own dimension (width for H, height for V).
     Two identical sets = seamless loop (mirrors the .reviews-track pattern).
     Animation driven by CSS variables so responsive speed works without JS. */
  display: flex;
  flex-direction: row; /* explicit: prevents any inherited override causing vertical layout */
  flex-wrap: nowrap;
  flex-shrink: 0;
  width: max-content;
  will-change: transform;
  direction: ltr;
  animation-name:            var(--mgw-anim, mgw-scroll-left);
  animation-duration:        var(--mgw-duration, 30s);
  animation-timing-function: var(--mgw-easing, linear);
  animation-iteration-count: infinite;
}

/* Gap via CSS variable so it can be swapped to padding-bottom in vertical mode */
.mgw-slide {
  padding-right: var(--mgw-gap, 0px);
}

/* ── Vertical scroll axis ────────────────────────────────────────────────── */

.mgw-axis-vertical .mgw-track {
  flex-direction: column;
}

.mgw-axis-vertical .mgw-set {
  flex-direction: column;
  width: 100%;
  height: max-content;
}

.mgw-axis-vertical .mgw-slide {
  width: 100%;
  padding-right: 0;
  padding-bottom: var(--mgw-gap, 0px);
}

.mgw-axis-vertical .mgw-slide--sep {
  width: 100%;
  height: auto;
  min-height: 40px;
}

/* Vertical fade — top/bottom instead of left/right */
.mgw-axis-vertical.mgw-track-outer.has-fade::before {
  top: 0; bottom: auto;
  left: 0; right: 0;
  height: var(--mgw-fade-width, 100px);
  width: auto;
  background: linear-gradient(to bottom, var(--mgw-fade-color, #fff), transparent);
}
.mgw-axis-vertical.mgw-track-outer.has-fade::after {
  bottom: 0; top: auto;
  left: 0; right: 0;
  height: var(--mgw-fade-width, 100px);
  width: auto;
  background: linear-gradient(to top, var(--mgw-fade-color, #fff), transparent);
}

@keyframes mgw-scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

@keyframes mgw-scroll-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.mgw-slide {
  flex-shrink: 0;
  box-sizing: border-box;
}

/* …but restore RTL for the slide CONTENT (captions, badges) on RTL sites */
[dir="rtl"] .mgw-slide {
  direction: rtl;
}

.mgw-slide-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition:
    transform   0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow  0.35s ease;
}

a.mgw-slide-inner {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.mgw-slide-image-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.mgw-slide-image {
  width: 100%;
  height: 100%;
  display: block;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter    0.5s ease;
}

.mgw-slide-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
}

/* ── Animation ───────────────────────────────────────────────────────────── */

/* The track holds the slides duplicated EXACTLY twice (done in PHP), so a
   -50% shift lands precisely on a copy boundary → perfectly seamless loop.
   Pure CSS — no JS measurement, nothing to mis-time. */
@keyframes mgw-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes mgw-scroll-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* pause on hover (CSS only, toggled by the data attribute) */
.mgw-track-outer[data-pause-hover="yes"]:hover .mgw-set {
  animation-play-state: paused !important;
}

.mgw-set.is-paused {
  animation-play-state: paused !important;
}

/* freeze animation in the Elementor editor */
.elementor-editor-active .mgw-set {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .mgw-set {
    animation: none !important;
  }
}

/* ── Fade mask ───────────────────────────────────────────────────────────── */

.mgw-track-outer.has-fade::before,
.mgw-track-outer.has-fade::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--mgw-fade-width, 100px);
  z-index: 5;
  pointer-events: none;
}

.mgw-track-outer.has-fade::before {
  left: 0;
  background: linear-gradient(to right, var(--mgw-fade-color, #fff), transparent);
}

.mgw-track-outer.has-fade::after {
  right: 0;
  background: linear-gradient(to left, var(--mgw-fade-color, #fff), transparent);
}

/* ── Hover effects ───────────────────────────────────────────────────────── */

/* Only apply hover/grayscale effects on devices that actually support pointer
   hover (desktops/laptops). On touch screens @media(hover:none) these rules
   are skipped entirely, so no broken half-state on mobile. */
@media (hover: hover) {
  .mgw-hover-zoom:hover .mgw-slide-image {
    transform: scale(1.07);
  }

  .mgw-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18) !important;
  }

  .mgw-hover-tilt:hover {
    transform: perspective(600px) rotateY(-4deg) scale(1.02);
  }

  .mgw-hover-glow:hover {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.6),
      0 0 30px rgba(100, 120, 255, 0.5) !important;
  }

  .mgw-hover-grayscale .mgw-slide-image {
    filter: grayscale(100%);
  }
  .mgw-hover-grayscale:hover .mgw-slide-image {
    filter: grayscale(0%);
  }
}

/* ── Caption modes ───────────────────────────────────────────────────────── */

.mgw-caption--below {
  padding: 12px 14px;
}

.mgw-caption--overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  color: #fff;
}

.mgw-caption--hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

@media (hover: hover) {
  .mgw-slide-inner:hover .mgw-caption--hover {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Touch devices: "hover caption" has no trigger — show it permanently as overlay */
@media (hover: none) {
  .mgw-caption--hover {
    opacity: 1;
    transform: translateY(0);
  }
}

.mgw-title {
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
}

.mgw-name {
  font-size: 0.9em;
  line-height: 1.4;
  margin-bottom: 4px;
}

.mgw-description {
  font-size: 0.875em;
  line-height: 1.5;
  opacity: 0.85;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.mgw-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  border: none;
  width: 2.4em;
  height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  line-height: 1;
}

.mgw-arrow:hover {
  opacity: 0.85;
}

/* keep transform-Y(−50%) — add scale on :hover without losing vertical centering */
.mgw-arrow:hover {
  transform: translateY(-50%) scale(1.1);
}

.mgw-arrow--prev { left: 10px; }
.mgw-arrow--next { right: 10px; }

.mgw-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.mgw-dot {
  border-radius: 50%;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.mgw-dot.is-active {
  transform: scale(1.3);
}

/* ── Slide rotation (manual + random tilt) ───────────────────────────────── */

.mgw-slide-inner {
  transform: rotate(var(--mgw-slide-rotate, 0deg));
}

/* Random scrapbook tilt — pseudo-random per position, overridable per slide */
.mgw-track-outer[data-random-tilt="yes"] .mgw-slide:nth-child(5n+1) .mgw-slide-inner { --mgw-slide-rotate: -3deg; }
.mgw-track-outer[data-random-tilt="yes"] .mgw-slide:nth-child(5n+2) .mgw-slide-inner { --mgw-slide-rotate:  2.5deg; }
.mgw-track-outer[data-random-tilt="yes"] .mgw-slide:nth-child(5n+3) .mgw-slide-inner { --mgw-slide-rotate: -1.5deg; }
.mgw-track-outer[data-random-tilt="yes"] .mgw-slide:nth-child(5n+4) .mgw-slide-inner { --mgw-slide-rotate:  3.5deg; }
.mgw-track-outer[data-random-tilt="yes"] .mgw-slide:nth-child(5n)   .mgw-slide-inner { --mgw-slide-rotate: -2.5deg; }

/* ── Badge / tag ─────────────────────────────────────────────────────────── */

.mgw-badge {
  position: absolute;
  z-index: 4;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: #ffd24a;
}

.mgw-badge-pos-top-right    .mgw-badge { top:    var(--mgw-badge-offset, 12px); right: var(--mgw-badge-offset, 12px); }
.mgw-badge-pos-top-left     .mgw-badge { top:    var(--mgw-badge-offset, 12px); left:  var(--mgw-badge-offset, 12px); }
.mgw-badge-pos-bottom-right .mgw-badge { bottom: var(--mgw-badge-offset, 12px); right: var(--mgw-badge-offset, 12px); }
.mgw-badge-pos-bottom-left  .mgw-badge { bottom: var(--mgw-badge-offset, 12px); left:  var(--mgw-badge-offset, 12px); }

/* ── Rating stars ────────────────────────────────────────────────────────── */

.mgw-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.mgw-star        { color: rgba(0, 0, 0, 0.15); }
.mgw-star.is-full { color: #f5b301; }

/* ── Separator between slides ────────────────────────────────────────────── */

.mgw-slide--sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  width: 60px;
}

.mgw-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mgw-separator svg { width: 1em; height: 1em; fill: currentColor; }

/* ── FRAME: Sticker ──────────────────────────────────────────────────────── */

/* Three-layer ring effect: padding (inner bg) → gap (same bg color) → border */
.mgw-frame-sticker .mgw-slide-inner {
  border-radius: 50%;
  overflow: visible; /* let box-shadow rings bleed outside */
  background: var(--mgw-frame-bg, #f0eaff);
  padding: var(--mgw-frame-pad, 10px);
  box-shadow:
    0 0 0 3px var(--mgw-frame-bg, #f0eaff),
    0 0 0 5px var(--mgw-sticker-border, #222),
    4px 8px 22px rgba(0, 0, 0, 0.2);
}

.mgw-frame-sticker .mgw-slide-image-wrap {
  border-radius: 50%;
  overflow: hidden; /* clip image to circle */
}

.mgw-frame-sticker .mgw-caption--below {
  text-align: center;
  padding: 16px 4px 0;
}

/* ── FRAME: Clean card ───────────────────────────────────────────────────── */

.mgw-frame-clean-card .mgw-slide-inner {
  background: var(--mgw-frame-bg, #fff);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.mgw-frame-clean-card .mgw-caption--below {
  padding: 16px 18px var(--mgw-frame-pad, 18px);
  text-align: center;
}

/* ── FRAME: Polaroid ─────────────────────────────────────────────────────── */

.mgw-frame-polaroid .mgw-slide-inner {
  background: var(--mgw-frame-bg, #fff);
  padding: var(--mgw-frame-pad, 12px);
  padding-bottom: var(--mgw-frame-pad-bottom, 46px);
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.mgw-frame-polaroid .mgw-slide-image-wrap { border-radius: 1px; }

.mgw-frame-polaroid .mgw-caption--below {
  padding: 10px 4px 0;
  text-align: center;
}

/* ── FRAME: Pinned to a string ───────────────────────────────────────────── */

.mgw-frame-pinned .mgw-track-outer { --mgw-string-color: #caa46a; }
.mgw-frame-pinned .mgw-track { position: relative; }

.mgw-frame-pinned .mgw-track::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -6%;
  right: -6%;
  height: 3px;
  background: var(--mgw-string-color, #caa46a);
  z-index: 0;
  transform: rotate(-0.4deg);
}

.mgw-frame-pinned .mgw-slide { padding-top: 26px; }

.mgw-frame-pinned .mgw-slide-inner {
  position: relative;
  background: var(--mgw-frame-bg, #fff);
  padding: 10px;
  padding-bottom: 30px;
  border-radius: 3px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.mgw-frame-pinned .mgw-slide-inner::before { /* the peg / clothespin */
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  width: 11px;
  height: 24px;
  border-radius: 3px;
  background: var(--mgw-peg-color, #d98aa8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

.mgw-frame-pinned .mgw-caption--below { padding: 10px 4px 0; text-align: center; }

/* ── FRAME: Ticket ───────────────────────────────────────────────────────── */

.mgw-frame-ticket .mgw-slide-inner {
  background: var(--mgw-frame-bg, #fff);
  padding: var(--mgw-frame-pad, 12px);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  -webkit-mask:
    radial-gradient(circle 9px at 0 62%, transparent 98%, #000 100%),
    radial-gradient(circle 9px at 100% 62%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(circle 9px at 0 62%, transparent 98%, #000 100%),
    radial-gradient(circle 9px at 100% 62%, transparent 98%, #000 100%);
          mask-composite: intersect;
}

.mgw-frame-ticket .mgw-caption--below {
  padding: 10px 6px 2px;
  text-align: center;
  border-top: 2px dashed rgba(0, 0, 0, 0.18);
  margin-top: 10px;
}

/* ── FRAME: Shape mask ───────────────────────────────────────────────────── */

.mgw-track-outer {
  /* geometric */
  --mgw-mask-circle:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='black'/%3E%3C/svg%3E");
  --mgw-mask-hexagon:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 95,26 95,74 50,98 5,74 5,26' fill='black'/%3E%3C/svg%3E");
  --mgw-mask-diamond:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 98,50 50,98 2,50' fill='black'/%3E%3C/svg%3E");
  --mgw-mask-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 98,96 2,96' fill='black'/%3E%3C/svg%3E");
  --mgw-mask-star:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35' fill='black'/%3E%3C/svg%3E");
  /* organic */
  --mgw-mask-blob:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='black' d='M44,-58C58,-48,71,-37,75,-23C79,-8,75,9,67,24C59,39,47,52,32,60C17,68,-1,71,-19,67C-37,63,-55,52,-65,36C-75,20,-77,-1,-71,-19C-65,-37,-51,-52,-35,-62C-19,-72,-1,-77,15,-74C31,-71,30,-68,44,-58Z' transform='translate(100 100)'/%3E%3C/svg%3E");
  --mgw-mask-trilobe:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='65' cy='72' r='68' fill='black'/%3E%3Ccircle cx='142' cy='78' r='63' fill='black'/%3E%3Ccircle cx='100' cy='148' r='58' fill='black'/%3E%3C/svg%3E");
  --mgw-mask-cloud:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cellipse cx='100' cy='128' rx='88' ry='36' fill='black'/%3E%3Ccircle cx='38' cy='95' r='32' fill='black'/%3E%3Ccircle cx='85' cy='66' r='40' fill='black'/%3E%3Ccircle cx='138' cy='70' r='37' fill='black'/%3E%3Ccircle cx='170' cy='98' r='28' fill='black'/%3E%3C/svg%3E");
  --mgw-mask-flower:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='black'%3E%3Ccircle cx='50' cy='28' r='24'/%3E%3Ccircle cx='50' cy='72' r='24'/%3E%3Ccircle cx='28' cy='50' r='24'/%3E%3Ccircle cx='72' cy='50' r='24'/%3E%3Ccircle cx='50' cy='50' r='26'/%3E%3C/g%3E%3C/svg%3E");
  --mgw-mask-heart:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50,82 C20,62 8,44 8,33 C8,20 18,10 32,10 C39,10 46,14 50,20 C54,14 61,10 68,10 C82,10 92,20 92,33 C92,44 80,62 50,82Z'/%3E%3C/svg%3E");
}

.mgw-frame-shape-mask .mgw-slide-image-wrap {
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.mgw-frame-shape-mask .mgw-slide-inner {
  background: transparent;
  box-shadow: none;
}