: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);

  /* 字体大小基准（pc） */
  --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: 50%;
    --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);
  }
  .echi-carousel-textbox a{
    margin: 15px auto !important;
    width: fit-content !important;
  }
}

@media (max-width: 480px) {
  :root {
    --echi-slider-safe-space: 50%;
    --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-textbox a{
    margin: 15px auto !important;
    width: fit-content !important;
  }
}

/* ========== 基础样式 ========== */

.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: 100%;
  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;
}

.echi-carousel-inner {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.echi-carousel-inner:hover {
  opacity: 0.95;
}

/* ========== 轮播圆点指示器 ========== */
.echi-carousel-dots {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 8px;
}

.echi-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
  margin: 0;
  display: block;
}
.echi-carousel-dots li{
  list-style-type: none !important;
}

.echi-carousel-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

.echi-carousel-dot.active {
  background-color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
  .echi-carousel-dots {
    bottom: 10px;
    gap: 6px;
  }
  
  .echi-carousel-dot {
    width: 8px;
    height: 8px;
  }
}