/* Layout + visuals; JS owns transforms */ 
.rr3d-wrap{
  --center-max:1280px;
  --radius:14px;
  --neon:#ffe65c;
  --glow:rgba(255,236,61,.55);
  --text:#fff;
  --cta-h:36px;
  --sub-h:26px;
  --border:4px;
  /* overlap to kill micro seam */
  --seam:4px;

  /* keep a small top/bottom cushion only */
  padding:8px 0 12px;
  background:transparent;
  position:relative;
  z-index:30;
  margin-bottom:8px; /* was 12px */
  overflow:visible !important;
}

/* Root */
.rr3d-native{
  width:100%;
  margin:0 auto;
  /* ⬇️ The big-gap culprit. No need to include (cta + sub) here. */
  padding:18px 10px 8px; /* was: calc(6px + var(--cta-h) + var(--sub-h)) */
  max-width:calc(var(--center-max) + 700px);
  position:relative;
  overflow:visible !important;
  cursor:grab;
  touch-action:pan-y;
}
/* Hide rail until JS marks ready to prevent initial side-jump */
.rr3d-native:not(.rr3d-ready) .rr3d-rail{ visibility:hidden; }
.rr3d-native.rr3d-ready .rr3d-rail{ visibility:visible; }

.rr3d-native:active{ cursor:grabbing; }

/* Stage */
.rr3d-rail{
  position:relative;
  overflow:visible !important;
  will-change:transform,height;
  margin-bottom:0;
}

/* Cards */
.rr3d-card{
  position:absolute;
  top:0; left:50%;
  transform-origin:center center;
  /* Pre-center before JS runs so it doesn't flash off to the side */
  transform:translateX(-50%);
  width:min(68vw, var(--center-max));
  display:flex; align-items:center; justify-content:center;
  overflow:visible !important;
  will-change:transform,opacity,z-index;
  user-select:none;
}
@media (max-width:640px){ .rr3d-card{ width:92vw; } }

/* Picture frame */
.rr3d-media{
  width:100%;
  aspect-ratio:16 / 9;
  position:relative;
  overflow:visible; /* bars must be visible */
  border-top:var(--border) solid var(--neon);
  border-left:var(--border) solid var(--neon);
  border-right:var(--border) solid var(--neon);
  border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;

  /* slightly bigger outer glow */
  box-shadow:
    0 0 5px  #ffff00,
    0 0 10px #00ffff,
    0 0 16px #ff00ff;

  display:block; line-height:0; font-size:0;
  transform:translateZ(0);
}

/* Clip the small tuck on background slides so no hairline shows */
.rr3d-card:not(.rr3d-active) .rr3d-media{ overflow:hidden; }

/* Image fits perfectly into rounded frame (hard clip for perfect corners) */
.rr3d-img{
  width:100%;
  height:calc(100% + var(--seam));
  margin-bottom:calc(-1 * var(--seam));
  display:block;
  object-fit:cover;
  border-top-left-radius:calc(var(--radius) - var(--border));
  border-top-right-radius:calc(var(--radius) - var(--border));
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  -webkit-clip-path: inset(0 0 0 0 round calc(var(--radius) - var(--border)) calc(var(--radius) - var(--border)) 0 0);
          clip-path: inset(0 0 0 0 round calc(var(--radius) - var(--border)) calc(var(--radius) - var(--border)) 0 0);
  backface-visibility:hidden;
  transform-style:preserve-3d;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 14px var(--glow);
}

/* Give background slides a tiny extra tuck to be safe on scaled cards */
.rr3d-card:not(.rr3d-active) .rr3d-img{
  height:calc(100% + var(--seam) + 2px);
  margin-bottom:calc(-1 * (var(--seam) + 2px));
}

/* ===== ATTACHED BARS ===== */
.rr3d-card.rr3d-active .rr3d-media::after{
  content:"ENTER COMPETITION";
  position:absolute;
  left:calc(0px - var(--border));
  right:calc(0px - var(--border));
  top:calc(100% - var(--border) - var(--seam));
  height:var(--cta-h);
  display:flex; align-items:center; justify-content:center;
  background:#ffd200;
  color:#000;
  font-weight:800;
  font-size:clamp(13px,1.25vw,16px);
  letter-spacing:.5px;
  border-left:var(--border) solid var(--neon);
  border-right:var(--border) solid var(--neon);
  border-top:none; border-bottom:none;
  box-shadow:none;
  pointer-events:none;
  z-index:6;
}

.rr3d-card.rr3d-active .rr3d-media::before{
  content:"JOIN OUR VIP FACEBOOK GROUP FOR FREEBIES!";
  position:absolute;
  left:calc(0px - var(--border));
  right:calc(0px - var(--border));
  top:calc(100% + var(--cta-h) - var(--border) - var(--seam));
  height:var(--sub-h);
  display:flex; align-items:center; justify-content:center;
  background:#0f0f0f;
  color:#fff;
  font-weight:700;
  font-size:clamp(12px,1.05vw,14px);
  border-left:var(--border) solid var(--neon);
  border-right:var(--border) solid var(--neon);
  border-bottom:var(--border) solid var(--neon);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:none;
  pointer-events:none;
  z-index:5;
}

/* Slightly bigger glow on active */
.rr3d-card.rr3d-active .rr3d-media{
  box-shadow:
    0 0 8px  #ffff00,
    0 0 16px #00ffff,
    0 0 24px #ff00ff;
}

/* Show bars only on the active card */
.rr3d-card:not(.rr3d-active) .rr3d-media::before,
.rr3d-card:not(.rr3d-active) .rr3d-media::after{
  content:none !important;
  display:none !important;
  box-shadow:none !important;
  border:0 !important;
}

/* Hide helpers we don't use */
.rr3d-pagination{ display:none !important; }
.rr3d-prev, .rr3d-next{ display:none !important; }

/* Builder safety */
.elementor-section, .elementor-container, .elementor-widget,
.wpb_row, .vc_row, .vc_row-fluid, .wpb_wrapper, .wpb_column, .vc_column_container,
.fl-row-content, .site-main .container, #main, #content, .content, .container,
.l-section, .l-section-h, .w-grid, .w-grid-list { overflow:visible !important; }

.rr3d-media, .rr3d-img { background:transparent !important; }
.rr3d-card .rr3d-img { pointer-events:none; }
.rr3d-card a { pointer-events:auto; }
.rr3d-wrap { isolation:isolate; }

/* Nuke any legacy ribbons if they exist in DOM */
.rr3d-media-wrap .rr3d-ribbon,
.rr3d-media-wrap .rr3d-ribbon-text,
.rr3d-card .vip-bar,
.rr3d-card [data-vip-bar] { display:none !important; }

.rr3d-card .rr3d-media { position:relative; z-index:3; }
.rr3d-card .rr3d-media::after { z-index:6; }
.rr3d-card .rr3d-media::before { z-index:5; }