.calio-image-flow {
  --calio-flow-speed: 3800ms;
  --calio-flow-ease: linear;
  --calio-flow-x-start: 0px;
  --calio-flow-y-start: 0px;
  --calio-flow-x-end: 0px;
  --calio-flow-y-end: 0px;
  --calio-flow-drag-length: 180px;
  --calio-flow-drag-offset: 12px;
  position: relative;
}

.calio-image-flow-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

.calio-image-flow.preset-showcase .calio-image-flow-shell {
  border-color: rgba(99, 102, 241, 0.28);
  box-shadow: 0 22px 44px -26px rgba(79, 70, 229, 0.45);
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
}

.calio-image-flow.preset-showcase .calio-image-flow-link-hint {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.92), rgba(16, 185, 129, 0.9));
}

.calio-image-flow.preset-device-mockup .calio-image-flow-shell {
  background: #020617;
  border-color: rgba(148, 163, 184, 0.25);
}

.calio-image-flow.preset-portfolio-scroll .calio-image-flow-shell {
  border-color: rgba(244, 114, 182, 0.28);
  background: linear-gradient(180deg, #ffffff 0%, #fdf2f8 100%);
}

.calio-image-flow.preset-portfolio-scroll .calio-image-flow-caption {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.calio-image-flow-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.calio-image-flow-viewport {
  position: relative;
  height: 360px;
  overflow: hidden;
}

.calio-image-flow-frame {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
}

.calio-image-flow.has-frame .calio-image-flow-frame {
  padding: 18px;
  background: #0f172a;
}

.calio-image-flow.has-frame.frame-browser-dark .calio-image-flow-frame {
  padding-top: 42px;
  background: linear-gradient(180deg, #0f172a, #111827);
}

.calio-image-flow.has-frame.frame-browser-dark .calio-image-flow-frame::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 14px;
  width: 38px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 5px 5px, #f87171 0 3px, transparent 4px),
    radial-gradient(circle at 19px 5px, #fbbf24 0 3px, transparent 4px),
    radial-gradient(circle at 33px 5px, #34d399 0 3px, transparent 4px);
}

.calio-image-flow.has-frame.frame-tablet .calio-image-flow-frame {
  padding: 22px 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, #111827, #1f2937);
}

.calio-image-flow.has-frame.frame-phone .calio-image-flow-frame {
  padding: 20px 10px;
  border-radius: 28px;
  max-width: 420px;
  margin: 0 auto;
  background: linear-gradient(180deg, #111827, #334155);
}

.calio-image-flow.has-frame.frame-phone .calio-image-flow-frame::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 90px;
  height: 7px;
  margin-left: -45px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.calio-image-flow.has-frame.frame-custom .calio-image-flow-frame {
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, #1e293b, #334155);
}

.calio-image-flow.has-frame.frame-custom.has-frame-notch .calio-image-flow-frame::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 86px;
  height: 8px;
  margin-left: -43px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.calio-image-flow-track {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 100%;
  min-height: 100%;
  transform: translate3d(var(--calio-flow-x-start), var(--calio-flow-y-start), 0);
  transition: transform var(--calio-flow-speed) var(--calio-flow-ease);
  will-change: transform;
}

.calio-image-flow.is-active .calio-image-flow-track {
  transform: translate3d(var(--calio-flow-x-end), var(--calio-flow-y-end), 0);
}

.calio-image-flow.has-no-distance .calio-image-flow-track {
  transition: none;
}

.calio-image-flow-media {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  -o-object-fit: cover;
     object-fit: cover;
}

.calio-image-flow.dir-left-right .calio-image-flow-track,
.calio-image-flow.dir-right-left .calio-image-flow-track {
  width: -moz-max-content;
  width: max-content;
  height: 100%;
}

.calio-image-flow.dir-left-right .calio-image-flow-media,
.calio-image-flow.dir-right-left .calio-image-flow-media {
  width: auto;
  height: 100%;
  min-width: 100%;
}

.calio-image-flow-link-hint {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(8px);
}

.calio-image-flow-caption {
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.6;
  padding: 12px 14px 14px;
}

.calio-image-flow-drag {
  position: relative;
  z-index: 3;
  transition: opacity 180ms ease;
}

.calio-image-flow .calio-image-flow-drag.axis-horizontal {
  width: 100%;
}

.calio-image-flow.drag-pos-top .calio-image-flow-drag.axis-horizontal {
  order: -1;
  margin-top: 0;
  margin-bottom: var(--calio-flow-drag-offset);
}

.calio-image-flow.drag-pos-auto .calio-image-flow-drag.axis-horizontal,
.calio-image-flow.drag-pos-bottom .calio-image-flow-drag.axis-horizontal {
  order: 3;
  margin-top: var(--calio-flow-drag-offset);
}

.calio-image-flow .calio-image-flow-drag.axis-vertical {
  position: absolute;
  top: 50%;
  right: var(--calio-flow-drag-offset);
  width: 18px;
  height: var(--calio-flow-drag-length);
  margin-top: 0;
  transform: translateY(-50%);
}

.calio-image-flow.drag-pos-left .calio-image-flow-drag.axis-vertical {
  left: var(--calio-flow-drag-offset);
  right: auto;
}

.calio-image-flow.drag-pos-right .calio-image-flow-drag.axis-vertical,
.calio-image-flow.drag-pos-auto .calio-image-flow-drag.axis-vertical {
  right: var(--calio-flow-drag-offset);
  left: auto;
}

.calio-image-flow.drag-vis-hover .calio-image-flow-drag {
  opacity: 0;
  pointer-events: none;
}

.calio-image-flow.drag-vis-hover:hover .calio-image-flow-drag,
.calio-image-flow.drag-vis-hover:focus-within .calio-image-flow-drag {
  opacity: 1;
  pointer-events: auto;
}

body.elementor-editor-active .calio-image-flow.drag-vis-hover .calio-image-flow-drag {
  opacity: 1;
  pointer-events: auto;
}

.calio-image-flow-drag-range {
  --calio-flow-drag-height: 6px;
  --calio-flow-drag-track: rgba(148, 163, 184, 0.32);
  --calio-flow-drag-fill: #6366f1;
  --calio-flow-drag-thumb: #6366f1;
  --calio-flow-drag-thumb-size: 14px;
  --calio-flow-drag-thumb-border-size: 0px;
  --calio-flow-drag-thumb-border-color: transparent;
  --calio-flow-drag-progress: 0;
  display: block;
  width: 100%;
  height: var(--calio-flow-drag-height);
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--calio-flow-drag-fill) 0%,
    var(--calio-flow-drag-fill) calc(var(--calio-flow-drag-progress) * 1%),
    var(--calio-flow-drag-track) calc(var(--calio-flow-drag-progress) * 1%),
    var(--calio-flow-drag-track) 100%
  );
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: ew-resize;
}

.calio-image-flow .calio-image-flow-drag.axis-vertical .calio-image-flow-drag-range {
  width: var(--calio-flow-drag-length);
  max-width: none;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  cursor: ns-resize;
}

.calio-image-flow-drag-range::-webkit-slider-thumb {
  width: var(--calio-flow-drag-thumb-size);
  height: var(--calio-flow-drag-thumb-size);
  border: var(--calio-flow-drag-thumb-border-size) solid var(--calio-flow-drag-thumb-border-color);
  border-radius: 50%;
  background: var(--calio-flow-drag-thumb);
  -webkit-appearance: none;
          appearance: none;
}

.calio-image-flow-drag-range::-moz-range-thumb {
  width: var(--calio-flow-drag-thumb-size);
  height: var(--calio-flow-drag-thumb-size);
  border: var(--calio-flow-drag-thumb-border-size) solid var(--calio-flow-drag-thumb-border-color);
  border-radius: 50%;
  background: var(--calio-flow-drag-thumb);
}

.calio-image-flow-drag-range::-moz-range-track {
  height: var(--calio-flow-drag-height);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--calio-flow-drag-fill) 0%,
    var(--calio-flow-drag-fill) calc(var(--calio-flow-drag-progress) * 1%),
    var(--calio-flow-drag-track) calc(var(--calio-flow-drag-progress) * 1%),
    var(--calio-flow-drag-track) 100%
  );
}

@media (max-width: 767px) {
  .calio-image-flow-viewport {
    height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calio-image-flow-track {
    transition-duration: 1ms !important;
  }
}

