/* ==========================================================================
   Chat & Pay World — Coverflow (cylinder screens) Elementor widget.
   Everything is namespaced under .cpwcf so it can't collide with the theme.
   ========================================================================== */
.cpwcf {
  --cpwcf-card-w: 190px;
  --cpwcf-card-h: calc(var(--cpwcf-card-w) * 2.173);   /* real screen ratio 440:956 */
  --cpwcf-radius: 470px;
  --cpwcf-perspective: 1850px;
  --cpwcf-height: 600px;
  --cpwcf-arrow-x: 585px;

  --cpwcf-ink:   #010802;
  --cpwcf-muted: #7c89a1;
  --cpwcf-line:  #e7ecea;
  --cpwcf-green: #61ce70;
  --cpwcf-shadow: 0 30px 70px -24px rgba(16,40,24,.30), 0 10px 24px -14px rgba(16,40,24,.18);
  --cpwcf-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  position: relative;
  font-family: var(--cpwcf-font);
}
.cpwcf *, .cpwcf *::before, .cpwcf *::after { box-sizing: border-box; }

/* hidden SVG filter defs must not create a line box */
.cpwcf-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---- liquid-glass utility (Apple-style frost + optional SVG refraction) ---- */
.cpwcf-lg {
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px) saturate(185%) brightness(1.06);
  backdrop-filter: blur(16px) saturate(185%) brightness(1.06);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 2px rgba(255,255,255,.10), 0 8px 26px rgba(0,0,0,.16);
}
.cpwcf-lg-liquid { position: relative; isolation: isolate; }
.cpwcf-lg-liquid::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  -webkit-backdrop-filter: url(#cpwcfFilter); backdrop-filter: url(#cpwcfFilter);
}

/* ---- stage / ring / cards ---- */
.cpwcf-stage {
  position: relative;
  height: var(--cpwcf-height);
  perspective: var(--cpwcf-perspective);
  perspective-origin: 50% 44%;
  width: 100%;
  touch-action: pan-y;
  user-select: none;
  overflow: visible;
}
.cpwcf-ring {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.cpwcf-card {
  position: absolute;
  width: var(--cpwcf-card-w); height: var(--cpwcf-card-h);
  left: calc(var(--cpwcf-card-w) / -2);
  top:  calc(var(--cpwcf-card-h) / -2);
  backface-visibility: visible;
  border-radius: calc(var(--cpwcf-card-w) * 0.09);
  overflow: hidden;
  box-shadow: var(--cpwcf-shadow);
  cursor: grab;
  will-change: opacity, filter;
}
.cpwcf-stage.cpwcf-dragging .cpwcf-card { cursor: grabbing; }
.cpwcf-screen { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- arrows ---- */
.cpwcf-nav {
  width: 54px; height: 54px; border-radius: 50%; color: var(--cpwcf-ink); cursor: pointer; z-index: 60; flex: none;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 12px 30px -14px rgba(16,40,24,.4);
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.cpwcf-nav:hover { background: var(--cpwcf-green); color: #fff; border-color: transparent; }
.cpwcf-nav:focus-visible { outline: 3px solid var(--cpwcf-green); outline-offset: 3px; }
.cpwcf-nav svg { width: 21px; height: 21px; }

.cpwcf-nav.cpwcf-nav--side { position: absolute; top: 50%; transform: translateY(-50%); }
.cpwcf-nav--side:hover { transform: translateY(-50%) scale(1.06); }
.cpwcf-prev.cpwcf-nav--side { left: max(8px, calc(50% - var(--cpwcf-arrow-x))); }
.cpwcf-next.cpwcf-nav--side { right: max(8px, calc(50% - var(--cpwcf-arrow-x))); }
.cpwcf-nav--bar:hover { transform: scale(1.06); }

/* ---- controls row ---- */
.cpwcf-controls { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 22px); margin-top: clamp(30px, 4vw, 52px); }
.cpwcf-nav--bar { display: none; }
.cpwcf-tabs {
  position: relative; display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(1,8,2,.05); border: 1px solid var(--cpwcf-line);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
}
.cpwcf-seg {
  position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: 999px; z-index: 0;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 16px -6px rgba(16,40,24,.28), inset 0 1px 1px rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.06); backdrop-filter: blur(14px) saturate(180%) brightness(1.06);
  transition: transform .42s cubic-bezier(.4,0,.2,1), width .42s cubic-bezier(.4,0,.2,1);
}
.cpwcf-tab {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
  font-family: var(--cpwcf-font); font-weight: 600; font-size: clamp(14px, 1.5vw, 16px);
  color: var(--cpwcf-muted); padding: 10px 26px; border-radius: 999px; transition: color .3s;
}
.cpwcf-tab:hover { color: var(--cpwcf-ink); }
.cpwcf-tab[aria-selected="true"] { color: var(--cpwcf-ink); }
.cpwcf-tab:focus-visible { outline: 3px solid var(--cpwcf-green); outline-offset: 3px; }

/* scoped button neutralizer — only inside the widget, never the whole site */
.cpwcf button:focus, .cpwcf button:hover { background-color: inherit; text-decoration: none; }

/* ---- responsive ---- */
@media (max-width: 810px) {
  .cpwcf { --cpwcf-card-w: 172px; --cpwcf-radius: 380px; --cpwcf-perspective: 1300px; --cpwcf-height: 540px; }
  .cpwcf-nav--side { display: none; }
  .cpwcf-nav--bar { display: grid; width: 46px; height: 46px; justify-content: center; align-items: center; align-content: center; }
}
@media (max-width: 480px) {
  .cpwcf { --cpwcf-card-w: 150px; --cpwcf-radius: 320px; --cpwcf-perspective: 1080px; --cpwcf-height: 490px; }
  .cpwcf-controls { gap: 8px; }
  .cpwcf-tabs { gap: 8px; flex-wrap: nowrap; }
  .cpwcf-tab { font-size: 13px; padding: 10px 14px; }
  .cpwcf-nav--bar { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpwcf-seg { transition: none; }
}