/**
 * 關於我們頁面樣式 (page-about.php)
 *
 * @package mytheme
 */

/* since */

.ciaoli-since-section {
  position: relative;
  padding: 36px 0 64px;
}

.ciaoli-since-section .section-des {
  margin-top: 28px;
}

/* why choose ciaoli */

.why-choose-ciaoli-section {
  position: relative;
  padding: 118px 0 142px;
}

.why-choose-sec-dot-bg {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.ciaoli-img {
  width: 896px;
  height: auto;
  margin-bottom: 28px;
}

.why-choose-ciaoli-items {
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 77px;
  text-align: left;
  font-size: 20px;
  color: #000;
  font-family: Inter;
  margin: 36px auto 106px;
}
.why-choose-ciaoli-item {
  width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.why-choose-item-title-wrapper {
  align-self: stretch;
  height: 170px;
  border-radius: 100px;
  background: #fff; /* 卡片內容的白色背景 */

  /* 2. 漸層框線核心代碼 */
  border: 3px solid transparent; /* 先設定透明框線佔位 */
  background-image:
    linear-gradient(#fff, #fff), linear-gradient(90deg, #ff942b, #ffdc37); /* 第一層白底，第二層漸層 */
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 7px solid transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 47px 23px;
}
.why-choose-item-title {
  position: relative;
  line-height: 48px;
}
.why-choose-item-text {
  align-self: stretch;
  position: relative;
}

/* compare section */
.compare-section {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  gap: 10px;
  text-align: left;
  font-size: 20px;
  color: #000;
  font-family: Inter;
  margin-bottom: 12px;
}
.compare-title {
  display: flex;
  max-width: 896px;
  width: 100%;
  height: 99px;
  position: absolute;
  margin: 0 !important;
  top: -70px;
  z-index: 0;
  flex-shrink: 0;
  justify-content: space-between;
}
.compare-yellow-bg-title {
  border-radius: 30px;
  background-color: #ffdc37;
  width: 378px;
  height: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 10px 18px;
  box-sizing: border-box;
}
.compare-header-title {
  position: relative;
  line-height: 48px;
  white-space: nowrap;
}

.white-text {
  color: #ececec;
}
.compare-blue-bg-title {
  border-radius: 30px;
  background-color: #0b2341;
  width: 378px;
  height: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 10px 18px;
  box-sizing: border-box;
  color: #ececec;
}
.compare-container {
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  gap: 100px;
  z-index: 1;
  flex-shrink: 0;
  text-align: center;
  font-size: 18px;
}
.compare-item {
  width: 419px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  z-index: 0;
}
.compare-text {
  align-self: stretch;
  height: 64px;
  box-shadow: 0px 4px 19.3px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 19px;
  box-sizing: border-box;
}
.compare-item2 {
  width: 419px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  z-index: 1;
}
.compare-text7 {
  align-self: stretch;
  height: 64px;
  border-radius: 20px;
  background-color: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 19px;
  box-sizing: border-box;
}
.compare-middle-item {
  width: 140px;
  margin: 0 !important;
  position: absolute;
  top: 12px;
  left: 399px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 52px;
  z-index: 2;
  color: #fff;
}
.compare-middle-text {
  align-self: stretch;
  height: 40px;
  border-radius: 60px;
  background-color: #ff942b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  box-sizing: border-box;
}
.p13 {
  color: #fff;
  height: 40px;
  width: 100px;
  position: relative;
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.why-choose-ciaoli-section .custom-btn {
  margin-top: 36px;
}

/* 桌面版隱藏分頁點 */
.why-choose-slider-dots {
  display: none;
}

@media (max-width: 480px) {
  /* since */
  .ciaoli-since-section {
    padding: 12px 0 40px;
  }

  .ciaoli-img {
    margin-bottom: 12px;
  }

  .ciaoli-since-section .section-des {
    margin-top: 12px;
  }

  /* why */

  .why-choose-ciaoli-section {
    padding: 20px 0 12px;
  }

  .why-choose-ciaoli-item {
    gap: 10.57px;
  }

  .compare-middle-item {
    max-width: 67px;
    left: 50%;
    transform: translateX(-50%);
  }

  .compare-container {
    gap: 32.41px;
  }
  .compare-item,
  .compare-item2 {
    max-width: 138.5px;
  }

  .why-choose-item-title-wrapper {
    height: 100px;
    width: 100px;
    border: 4px solid transparent;
    padding: 0;
  }

  .why-choose-item-title {
    font-size: 13px;
  }

  .why-choose-item-text {
    text-align: center;
  }

  .compare-title {
    max-width: 290.39px;
  }

  .compare-yellow-bg-title,
  .compare-blue-bg-title {
    max-width: 122.51px;
  }

  .why-choose-ciaoli-section .custom-btn {
    margin-top: 20px;
  }

  /* 手機版輪播樣式 - 使用 transform 移動容器 */
  .why-choose-slider-wrapper {
    width: 100%;
    margin: 16px auto 12px;
  }

  .why-choose-ciaoli-items {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    margin: 0;
    will-change: transform;
  }

  .why-choose-ciaoli-item {
    flex-shrink: 0;
    width: 100px;
  }

  /* 分頁點樣式 */
  .why-choose-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 94px;
  }

  .why-choose-slider-dots .slider-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: none;
    background-color: #0b2341;
    cursor: pointer;
    padding: 0;
    position: relative;
  }

  .why-choose-slider-dots .slider-dot::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: #fff;
    border-radius: 50%;
    transition: opacity 0.3s ease;
  }

  .why-choose-slider-dots .slider-dot.active::before {
    opacity: 0;
  }
}