/* ECONF Connect — cleaned carousel with centered stacked screens */
.econf-app-gallery-host {
  isolation: isolate;
}

.econf-app-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.econf-app-gallery__slide {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  inset: auto !important;
  width: auto !important;
  height: 100% !important;
  max-width: min(72%, 320px) !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  opacity: 0;
  filter: blur(10px) saturate(.9) brightness(.96) drop-shadow(0 24px 32px rgba(0,0,0,.34));
  transform: translate(-50%, -50%) translateX(0) scale(.78) !important;
  transform-origin: 50% 52% !important;
  transition:
    opacity .68s cubic-bezier(.16,1,.3,1),
    transform .78s cubic-bezier(.16,1,.3,1),
    filter .68s cubic-bezier(.16,1,.3,1) !important;
  pointer-events: none;
  will-change: opacity, transform, filter;
}

.econf-app-gallery__slide.is-prev {
  z-index: 1;
  opacity: .72;
  filter: blur(7px) saturate(.92) brightness(.98) drop-shadow(0 18px 26px rgba(0,0,0,.28));
  transform: translate(-50%, -50%) translateX(-34%) scale(.82) !important;
}

.econf-app-gallery__slide.is-next {
  z-index: 1;
  opacity: .72;
  filter: blur(7px) saturate(.92) brightness(.98) drop-shadow(0 18px 26px rgba(0,0,0,.28));
  transform: translate(-50%, -50%) translateX(34%) scale(.82) !important;
}

.econf-app-gallery__slide.is-active {
  z-index: 3;
  opacity: 1;
  filter: saturate(1.02) contrast(1.01) drop-shadow(0 28px 34px rgba(0,0,0,.34));
  transform: translate(-50%, -50%) translateX(0) scale(1) !important;
}

.econf-app-gallery__dots {
  position: absolute;
  z-index: 8;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
  padding: 9px 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(18,18,18,.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.econf-app-gallery__dot {
  width: 6px;
  height: 6px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  transition: height .32s ease, background .32s ease, box-shadow .32s ease, transform .22s ease;
  cursor: pointer;
}

.econf-app-gallery__dot:hover {
  transform: scale(1.08);
}

.econf-app-gallery__dot.is-active {
  height: 19px;
  border-radius: 999px;
  background: #ff5a14;
  box-shadow: 0 0 16px rgba(255,90,20,.28);
}

/* Clean up the right visual area so the screens are clearer. */
.ec26-connect__visual,

.ec26-connect__visual-frame,

.ec26-connect__visual-orbit,

.ec26-connect__visual-crop.econf-app-gallery-host {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(100%, 560px) !important;
  height: min(calc(100% - 56px), 660px) !important;
  max-height: 660px !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
}

.ec26-connect__visual-crop.econf-app-gallery-host .econf-app-gallery__slide {
  left: 50% !important;
  top: 50% !important;
}

.ec26-connect__visual-frame:hover .ec26-connect__visual-crop img {
  filter: none;
}


@media (max-width: 1120px) {
  .ec26-connect__visual-crop.econf-app-gallery-host {
    width: min(100%, 520px) !important;
    height: min(calc(100% - 44px), 620px) !important;
  }
}

@media (max-width: 720px) {
  .ec26-connect__visual-crop.econf-app-gallery-host {
    width: min(100%, 470px) !important;
    height: min(calc(100% - 34px), 560px) !important;
    max-height: none !important;
  }

  .econf-app-gallery__slide {
    max-width: min(72%, 270px) !important;
  }

  .econf-app-gallery__slide.is-prev {
    transform: translate(-50%, -50%) translateX(-31%) scale(.8) !important;
  }

  .econf-app-gallery__slide.is-next {
    transform: translate(-50%, -50%) translateX(31%) scale(.8) !important;
  }

  .econf-app-gallery__dots {
    right: 6px;
    gap: 7px;
    padding: 8px 6px;
  }
}

@media (max-width: 430px) {
  .ec26-connect__visual-crop.econf-app-gallery-host {
    width: min(100%, 410px) !important;
    height: min(calc(100% - 28px), 510px) !important;
  }

  .econf-app-gallery__slide {
    max-width: min(74%, 230px) !important;
  }

  .econf-app-gallery__slide.is-prev {
    transform: translate(-50%, -50%) translateX(-28%) scale(.79) !important;
  }

  .econf-app-gallery__slide.is-next {
    transform: translate(-50%, -50%) translateX(28%) scale(.79) !important;
  }

  .econf-app-gallery__dots {
    right: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .econf-app-gallery__slide {
    transition: none !important;
    filter: none !important;
  }
}

/* v3 — desktop sizing fix + single page scrollbar */
html {
  overflow-x: clip !important;
  overflow-y: auto;
}

body {
  overflow-x: clip !important;
  overflow-y: visible;
}

@media (min-width: 1121px) {
  .ec26-connect__visual-crop.econf-app-gallery-host {
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(96%, 620px) !important;
    height: 620px !important;
    min-height: 620px !important;
    max-height: 620px !important;
    transform: translate(-50%, -50%) !important;
  }

  .ec26-connect__visual-frame {
    overflow: hidden !important;
    background: #101010 !important;
  }

  .econf-app-gallery__slide {
    height: 100% !important;
    width: auto !important;
    max-width: 320px !important;
  }

  .econf-app-gallery__dots {
    right: -2px;
  }
}

/* v4 — restore full-width desktop visual frame */
@media (min-width: 1121px) {
  .ec26-connect__visual {
    display: block !important;
  }

  .ec26-connect__visual-frame {
    width: 100% !important;
  }
}

/* v5 — mobile layout fix for ECONF Connect visual block */
.ec26-connect__visual,
.ec26-connect__visual-frame {
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  height: auto !important;
}

.ec26-connect__visual {
  display: block !important;
}

.ec26-connect__visual-frame {
  width: 100% !important;
}

@media (max-width: 767px) {
  .ec26-connect__visual {
    padding: 10px !important;
  }

  .ec26-connect__visual-frame {
    min-height: clamp(430px, 135vw, 565px) !important;
    overflow: hidden !important;
  }

  .ec26-connect__visual-crop.econf-app-gallery-host {
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* v6 — restore desktop/tablet layout, keep current mobile behavior */
.ec26-connect__visual {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  padding: 18px !important;
  transform: none !important;
  overflow: visible !important;
  background: transparent !important;
}

.ec26-connect__visual-frame {
  position: relative !important;
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 680px !important;
  transform: none !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 55% 50%, rgba(255, 90, 20, 0.15), transparent 44%),
    #070707 !important;
  isolation: isolate !important;
}

.ec26-connect__visual-orbit {
  position: absolute !important;
  z-index: 0 !important;
  left: 50% !important;
  right: auto !important;
  top: 52% !important;
  bottom: auto !important;
  width: 540px !important;
  height: 540px !important;
  max-height: none !important;
  transform: translate(-50%, -50%) !important;
  overflow: visible !important;
}

.ec26-connect__visual-crop.econf-app-gallery-host {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  width: min(96%, 555px) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 555 / 674 !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  background: transparent !important;
}

.econf-app-gallery__slide {
  left: 50% !important;
  top: 50% !important;
}

.econf-app-gallery__dots {
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 1120px) and (min-width: 768px) {
  .ec26-connect__visual {
    min-height: 720px !important;
    padding: 14px !important;
  }

  .ec26-connect__visual-frame {
    min-height: 680px !important;
    border-radius: 22px !important;
  }

  .ec26-connect__visual-crop.econf-app-gallery-host {
    width: min(78%, 555px) !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translateX(-50%) !important;
  }

  .ec26-connect__visual-orbit {
    width: 500px !important;
    height: 500px !important;
  }
}

@media (max-width: 767px) {
  .ec26-connect__visual {
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
  }

  .ec26-connect__visual-frame {
    height: auto !important;
    min-height: clamp(430px, 135vw, 565px) !important;
    border-radius: 17px !important;
  }

  .ec26-connect__visual-orbit {
    top: 50% !important;
    width: min(112vw, 420px) !important;
    height: min(112vw, 420px) !important;
    transform: translate(-50%, -50%) !important;
  }

  .ec26-connect__visual-crop.econf-app-gallery-host {
    top: 50% !important;
    bottom: auto !important;
    width: min(104%, 430px) !important;
    height: min(calc(100% - 28px), 510px) !important;
    aspect-ratio: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 430px) {
  .ec26-connect__visual-crop.econf-app-gallery-host {
    width: min(100%, 410px) !important;
    height: min(calc(100% - 28px), 510px) !important;
  }
}
