/* =====================================================================
   STYLE CONFIG — Overridden by Elementor Controls via var() cascade
   ===================================================================== */
:root, .bac-402901f9-wrapper {
  /* Default fallbacks if Elementor controls are empty */
  --carousel-max-width: 1200px;
  --card-radius: 20px;
  --card-gap: 24px;
  --peek-desktop: 40px;
  --peek-tablet: 24px;
  --peek-mobile: 0px;

  --arrow-size: 44px;
  --arrow-offset: 16px;
  --arrow-bg: #5fbf9f;
  --arrow-bg-hover: #4fae8e;
  --arrow-icon-color: #ffffff;
  --arrow-size-mobile: 34px;
  --arrow-size-tablet: 44px;
  --nav-arrows-display: flex;

  --handle-line-color: rgba(255,255,255,0.85);
  --handle-size: 40px;
  --handle-bg: #3b82f6;
  --handle-icon-color: #ffffff;
  --handle-size-mobile: 32px;

  --dot-size: 8px;
  --dot-color: #d1d5db;
  --dot-color-active: #2b2f36;
  --dot-gap: 8px;
  --dots-display: flex;

  --badge-bg: #3b82f6;
  --badge-text: #ffffff;
  
  --title-color: #2b2f36;
  
  --stats-color: #6b7280;
  --budget-color: #2fa66a;
  --days-color: #3b82f6;

  --aspect-desktop: 16/9;
  --aspect-tablet: 4/3;
  --aspect-mobile: 1/1;
  
  --ba-label-color: #ffffff;
  --ba-label-bg: rgba(0, 0, 0, 0.5);
  --ba-label-radius: 4px;
}

/* ===================================================================== */

.bac-402901f9-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.bac-402901f9-wrapper * { box-sizing:border-box; }

/* Handle Arrow Positioning Controls (outside vs inside) */
.bac-402901f9-wrapper .carousel-outer {
  width: 100%;
  max-width: var(--carousel-max-width);
  padding: 0 calc(var(--arrow-size) + var(--arrow-offset) * 2);
  position: relative;
}

/* When arrows are positioned inside, remove outer padding so carousel takes full width */
.elementor-widget-before_after_carousel_402901f9.arrows-pos-inside .bac-402901f9-wrapper .carousel-outer {
  padding: 0;
}

.bac-402901f9-wrapper .carousel-viewport { overflow:hidden; position:relative; }

.bac-402901f9-wrapper .slides-track { display:flex; will-change:transform; }

.bac-402901f9-wrapper .slide { flex:0 0 auto; width:100%; margin-right: var(--card-gap); }
.bac-402901f9-wrapper .slide:last-child { margin-right:0; }

/* ---------- BEFORE/AFTER COMPARISON ---------- */
.bac-402901f9-wrapper .compare {
  position:relative;
  width:100%;
  aspect-ratio: var(--aspect-desktop);
  border-radius: var(--card-radius);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  background:#000;
}
.bac-402901f9-wrapper .compare img {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
}
.bac-402901f9-wrapper .compare .after-wrap {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  overflow:hidden;
  clip-path:inset(0 0 0 var(--pos, 50%));
}

/* ---------- BEFORE/AFTER LABELS ---------- */
.bac-402901f9-wrapper .ba-label {
  position: absolute;
  top: 16px;
  z-index: 10;
  color: var(--ba-label-color);
  background-color: var(--ba-label-bg);
  border-radius: var(--ba-label-radius);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none; /* Let clicks pass through to drag handle */
}

.bac-402901f9-wrapper .ba-label-before {
  left: 16px;
}

.bac-402901f9-wrapper .ba-label-after {
  right: 16px;
}


.bac-402901f9-wrapper .compare-handle {
  position:absolute; top:0; left:var(--pos, 50%);
  transform:translateX(-50%);
  height:100%; width:2px;
  background:var(--handle-line-color);
  cursor:ew-resize;
  z-index: 15;
}
.bac-402901f9-wrapper .compare-handle::before {
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:var(--handle-size); height:var(--handle-size);
  border-radius:50%;
  background:var(--handle-bg);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.bac-402901f9-wrapper .compare-handle::after {
  content:"\27F7"; /* ⟷ */ position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:var(--handle-icon-color);
  font-size:16px; font-weight:bold; pointer-events:none;
}

/* ---------- NAV ARROWS ---------- */
/* display driven by --nav-arrows-display, set responsively via the
   "Show Arrows" Elementor control (selectors, not prefix_class — see PHP) */
.bac-402901f9-wrapper .nav-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--arrow-size); height:var(--arrow-size);
  border-radius:50%;
  background:var(--arrow-bg);
  border:none;
  display: var(--nav-arrows-display, flex);
  align-items:center; justify-content:center;
  cursor:pointer; z-index:5;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:background .15s ease;
  padding: 0;
}
.bac-402901f9-wrapper .nav-btn:hover { background:var(--arrow-bg-hover); border-radius:50%; /* Force circle on hover */ }
.bac-402901f9-wrapper .nav-btn svg { width:20px; height:20px; stroke:var(--arrow-icon-color); }

/* Outside arrows positioning */
.bac-402901f9-wrapper .nav-prev { left: var(--arrow-offset); }
.bac-402901f9-wrapper .nav-next { right: var(--arrow-offset); }

/* Inside arrows positioning */
.elementor-widget-before_after_carousel_402901f9.arrows-pos-inside .bac-402901f9-wrapper .nav-prev { left: calc(var(--arrow-offset) + var(--peek-desktop)); z-index: 20; }
.elementor-widget-before_after_carousel_402901f9.arrows-pos-inside .bac-402901f9-wrapper .nav-next { right: calc(var(--arrow-offset) + var(--peek-desktop)); z-index: 20; }


/* ---------- CAPTION / META ---------- */
.bac-402901f9-wrapper .slide-meta { text-align:center; padding-top:18px; }
.bac-402901f9-wrapper .badge {
  display:inline-block;
  background:var(--badge-bg);
  color:var(--badge-text);
  font-weight:600;
  padding:4px 12px;
  border-radius:20px; /* Overriden by typography/border controls if needed */
  margin-bottom:10px;
}
.bac-402901f9-wrapper .slide-title {
  font-weight:600;
  color:var(--title-color);
  margin:0 0 6px;
}
.bac-402901f9-wrapper .slide-stats { color:var(--stats-color); margin:0; }
.bac-402901f9-wrapper .slide-stats .budget { color:var(--budget-color); font-weight:600; }
.bac-402901f9-wrapper .slide-stats .days { color:var(--days-color); font-weight:600; }

/* ---------- PAGINATION DOTS ---------- */
/* display driven by --dots-display, set responsively via the
   "Show Pagination Dots" Elementor control (selectors, not prefix_class) */
.bac-402901f9-wrapper .dots {
  display: var(--dots-display, flex);
  justify-content:center;
  gap:var(--dot-gap);
  margin-top:16px;
}
.bac-402901f9-wrapper .dot {
  width:var(--dot-size); height:var(--dot-size);
  border-radius:50%; background:var(--dot-color);
  border:none; cursor:pointer; padding:0;
}
.bac-402901f9-wrapper .dot.active { background:var(--dot-color-active); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    /* Tablet mapping */
    .bac-402901f9-wrapper .compare { aspect-ratio: var(--aspect-tablet); }
    .bac-402901f9-wrapper .nav-btn { width:var(--arrow-size-tablet); height:var(--arrow-size-tablet); }
    .elementor-widget-before_after_carousel_402901f9.arrows-pos-inside .bac-402901f9-wrapper .nav-prev { left: calc(var(--arrow-offset) + var(--peek-tablet)); }
    .elementor-widget-before_after_carousel_402901f9.arrows-pos-inside .bac-402901f9-wrapper .nav-next { right: calc(var(--arrow-offset) + var(--peek-tablet)); }
}

@media (max-width: 768px) {
  .bac-402901f9-wrapper .carousel-outer { padding: 0 calc(var(--arrow-size-mobile) + var(--arrow-offset) * 1.5); }
  .elementor-widget-before_after_carousel_402901f9.arrows-pos-inside .bac-402901f9-wrapper .carousel-outer { padding: 0; }
  .bac-402901f9-wrapper .nav-btn { width:var(--arrow-size-mobile); height:var(--arrow-size-mobile); }
  .bac-402901f9-wrapper .compare { border-radius:14px; }
  .bac-402901f9-wrapper .compare-handle::before { width:var(--handle-size-mobile); height:var(--handle-size-mobile); }
}

@media (max-width: 480px) {
    /* Mobile mapping */
  .bac-402901f9-wrapper .compare { aspect-ratio: var(--aspect-mobile); }
  .bac-402901f9-wrapper .carousel-outer { padding: 0; }
}