/* ==========================================================
   VIP MANUAL SLIDER — FINAL FIX (2 BUTTONS, NO CLIP)
   ✅ Desktop + Mobile
   ✅ Works with BOTH markups:
      - .vip-btn--right / .vip-btn--left
      - data-vip-slide="prev|next"
   ✅ Prevent parent overflow clipping
========================================================== */

/* IMPORTANT: parent cards/sections in your theme have overflow:hidden.
   This ensures slider buttons are never cut. */
.section, .card-lux, .hero{
  overflow: visible !important;
}

/* Wrapper */
.vip-slider-wrap{
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
  border-radius: 22px;
  isolation: isolate;
  overflow: visible !important;
}

/* Fade edges (never blocks taps, always under buttons) */
.vip-slider-wrap::before,
.vip-slider-wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 78px;
  z-index: 5;
  pointer-events:none;
  border-radius: 22px;
}
.vip-slider-wrap::after{
  right:0;
  background: linear-gradient(270deg,
    var(--bg, #fff) 0%,
    rgba(255,255,255,.72) 35%,
    rgba(255,255,255,0) 100%
  );
}
.vip-slider-wrap::before{
  left:0;
  background: linear-gradient(90deg,
    var(--bg, #fff) 0%,
    rgba(255,255,255,.72) 35%,
    rgba(255,255,255,0) 100%
  );
}

/* ✅ If you use a container like .vip-slider-actions */
.vip-slider-actions{
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none; /* buttons will be clickable via pointer-events:auto */
}
.vip-slider-actions .vip-btn,
.vip-slider-actions button[data-vip-slide]{
  pointer-events: auto;
}

/* ✅ Buttons (style applies to BOTH .vip-btn and data-vip-slide buttons) */
.vip-btn,
.vip-slider-wrap button[data-vip-slide]{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index: 70;                      /* above fades + cards */
  width: 52px;
  height: 70px;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,.55);
  background: rgba(10,10,12,.44);
  color:#fff;
  font-size: 30px;
  font-weight: 950;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s, box-shadow .18s, opacity .18s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.vip-btn:hover,
.vip-slider-wrap button[data-vip-slide]:hover{
  background: rgba(10,10,12,.62);
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 26px 90px rgba(0,0,0,.28);
}
.vip-btn:active,
.vip-slider-wrap button[data-vip-slide]:active{
  transform: translateY(-50%) scale(.98);
}
.vip-btn:focus,
.vip-slider-wrap button[data-vip-slide]:focus{
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(212,175,55,.22), 0 18px 60px rgba(0,0,0,.22);
}
.vip-btn[disabled],
.vip-slider-wrap button[data-vip-slide][disabled]{
  opacity: .35 !important;
  pointer-events: none !important;
}

/* ✅ Positioning — OLD markup */
.vip-btn--right{ right: 10px; left: auto; } /* right = prev */
.vip-btn--left { left: 10px; right: auto; }  /* left  = next */

/* ✅ Positioning — NEW markup */
.vip-slider-wrap button[data-vip-slide="prev"]{ right: 10px; left: auto; }
.vip-slider-wrap button[data-vip-slide="next"]{ left: 10px; right: auto; }

/* Gallery container */
.vip-gallery{
  /* HARD FIX: prevent grid/wrap from ".gallery" class */
  display: block !important;

  position: relative;
  overflow: hidden;
  padding: 10px 64px;             /* space for buttons */
  border-radius: 22px;
  background: transparent;
  isolation: isolate;

  /* allow vertical page scroll */
  touch-action: pan-y;

  /* native scroll container (JS uses scrollIntoView) */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* hide scrollbar nicely */
  scrollbar-width: none;
}
.vip-gallery::-webkit-scrollbar{ display:none; }

/* Track built by JS */
.vip-gallery .vip-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  gap:14px;
  width:max-content;
  transform: translate3d(0,0,0);
}
.vip-gallery.is-center .vip-track{
  width:100%;
  justify-content:center;
}

/* Card */
.vip-gallery .g-item{
  flex:0 0 auto;
  width: clamp(180px, 18vw, 250px);
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  background:#000;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
  isolation:isolate;
}
.vip-gallery .g-item::before{
  content:"";
  display:block;
  padding-top: 177.78%;
}

/* Media */
.vip-gallery .g-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
  transform: scale(1.01);
}
.vip-gallery video.g-preview{ pointer-events:none; }

/* Overlay */
.vip-gallery .g-item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
  opacity:.88;
}

/* Caption */
.vip-gallery .g-cap{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding:10px 12px 12px;
  color:#fff;
  font-weight:900;
  font-size:.95rem;
  text-align:center;
  text-shadow: 0 10px 22px rgba(0,0,0,.6);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Click layer */
.vip-gallery .g-open{
  position:absolute;
  inset:0;
  z-index:4;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Play badge */
.vip-gallery .g-badge{
  position:absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight: 950;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ✅ Prevent duplicate render when JS moves items into track */
.vip-gallery.vip-manual.is-js > .g-item{ display: none; }

/* Mobile */
@media (max-width:576px){
  .vip-gallery{ padding: 10px 54px; }
  .vip-slider-wrap::before, .vip-slider-wrap::after{ width: 56px; }
  .vip-btn,
  .vip-slider-wrap button[data-vip-slide]{
    width: 46px;
    height: 62px;
    border-radius: 14px;
  }
  .vip-gallery .g-item{ width: 72vw; border-radius:24px; }
}