:root {
  --echi-slider-safe-space: 30%;
  --echi-slider-max-textbox-width: 500px;
  --echi-slider-textbox-bg: rgba(0, 0, 0, 0.45);
  --echi-slider-textbox-padding: 1.2rem 1.5rem;
  --echi-slider-textbox-radius: 6px;
  --echi-slider-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  --echi-font-h1: clamp(1.5rem, 4vw, 2.5rem);
  --echi-font-h2: clamp(1.3rem, 3.5vw, 2rem);
  --echi-font-h3: clamp(1.2rem, 3vw, 1.6rem);
  --echi-font-h4: clamp(1rem, 2.5vw, 1.4rem);
  --echi-font-p: clamp(0.9rem, 2vw, 1.2rem);
}

@media (max-width: 1024px) {
  :root {
    --echi-slider-safe-space: 20%;
    --echi-slider-textbox-padding: 1rem 1.2rem;

    --echi-font-h1: clamp(1.4rem, 3.5vw, 2.2rem);
    --echi-font-h2: clamp(1.2rem, 3vw, 1.8rem);
    --echi-font-h3: clamp(1.1rem, 2.8vw, 1.5rem);
    --echi-font-h4: clamp(1rem, 2.5vw, 1.3rem);
    --echi-font-p: clamp(0.95rem, 2.2vw, 1.2rem);
  }
}

@media (max-width: 480px) {
  :root {
    --echi-slider-safe-space: 15%;
    --echi-slider-textbox-padding: 0.8rem 1rem;

    --echi-font-h1: clamp(1.2rem, 5vw, 1.6rem);
    --echi-font-h2: clamp(1.1rem, 4.5vw, 1.4rem);
    --echi-font-h3: clamp(1rem, 4vw, 1.3rem);
    --echi-font-h4: clamp(0.95rem, 3.5vw, 1.1rem);
    --echi-font-p: clamp(0.9rem, 3vw, 1rem);
  }
}

.echi-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.echi-carousel-wrapper {
  display: flex;
  transition: transform 0.6s ease-in-out;
  will-change: transform;
}

.echi-carousel-slide {
  flex: 0 0 100%;
  position: relative;
}

.echi-carousel-slide picture,
.echi-carousel-slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.echi-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  width: 58px;
  height: 48px;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 5;
}

.echi-carousel-arrow-left { left: 10px; }
.echi-carousel-arrow-right { right: 10px; }


.echi-carousel-textbox {
  position: absolute;
  z-index: 2;
  max-width: var(--echi-slider-max-textbox-width);
  width: 85%;
  background-color: var(--echi-slider-textbox-bg);
  padding: var(--echi-slider-textbox-padding);
  border-radius: var(--echi-slider-textbox-radius);
  box-shadow: var(--echi-slider-shadow);
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
  opacity: 0;
  color: #fff !important;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}

.echi-carousel-slide.active .echi-carousel-textbox {
  opacity: 1;
  transform: translate(-50%, -50%);
}


.pos-top-left    { top: var(--echi-slider-safe-space); left: var(--echi-slider-safe-space); transform: translate(0, 0); text-align: left; }
.pos-top-center  { top: var(--echi-slider-safe-space); left: 50%; transform: translate(-50%, 0); text-align: center; }
.pos-top-right   { top: var(--echi-slider-safe-space); right: var(--echi-slider-safe-space); left: auto; transform: translate(0, 0); text-align: right; }

.pos-center-left { top: 50%; left: var(--echi-slider-safe-space); transform: translate(0, -50%); text-align: left; }
.pos-center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.pos-center-right { top: 50%; right: var(--echi-slider-safe-space); left: auto; transform: translate(0, -50%); text-align: right; }

.pos-bottom-left  { bottom: var(--echi-slider-safe-space); left: var(--echi-slider-safe-space); transform: translate(0, 0); text-align: left; }
.pos-bottom-center { bottom: var(--echi-slider-safe-space); left: 50%; transform: translate(-50%, 0); text-align: center; }
.pos-bottom-right { bottom: var(--echi-slider-safe-space); right: var(--echi-slider-safe-space); left: auto; transform: translate(0, 0); text-align: right; }

.echi-carousel-textbox h1 { font-size: var(--echi-font-h1); }
.echi-carousel-textbox h2 { font-size: var(--echi-font-h2); }
.echi-carousel-textbox h3 { font-size: var(--echi-font-h3); }
.echi-carousel-textbox h4,
.echi-carousel-textbox h5,
.echi-carousel-textbox h6 { font-size: var(--echi-font-h4); }

.echi-carousel-textbox p,
.echi-carousel-textbox span,
.echi-carousel-textbox a,
.echi-carousel-textbox button {
  font-size: var(--echi-font-p);
  line-height: 1.5;
}

.echi-carousel-textbox h1,
.echi-carousel-textbox h2,
.echi-carousel-textbox h3,
.echi-carousel-textbox h4,
.echi-carousel-textbox h5,
.echi-carousel-textbox h6,
.echi-carousel-textbox p,
.echi-carousel-textbox span,
.echi-carousel-textbox a,
.echi-carousel-textbox button {
  color: #fff !important;
}