/**
 * wifi安裝頁面樣式 (page-wifi.php)
 *
 * @package mytheme
 */

/* ===== wifi安裝頁面 ===== */

/* wifi路由器 */

.wifi-router-section {
  padding: 60px 0 138px;
}

.wifi-router-container {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 41px;
  text-align: center;
  color: #0b2341;
  font-family: Inter;
  margin: 36px auto 64px;
}
.router-items {
  width: 326px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.router-yellow-bg-title {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: #ffdc37;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #000;
}

.router-des-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.router-des-wrapper-child {
  align-self: stretch;
  height: 2px;
  position: relative;
  border-top: 2px solid #ffac27;
  box-sizing: border-box;
}
.wifi-6-mu-mimoofdma {
  align-self: stretch;
  position: relative;
  font-size: 20px;
  line-height: 40px;
  color: #000;
}

.router-blue-title {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: #0b2341;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff;
}
.mesh-onemesh {
  align-self: stretch;
  height: 96px;
  position: relative;
  font-size: 20px;
  line-height: 48px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mu-mimoofdma {
  align-self: stretch;
  position: relative;
  font-size: 20px;
  line-height: 48px;
  color: #000;
}

/* wifi 分享器 */
.wifi-card-section {
  padding: 64px 0 83px;
  background-image: url("../../images/wifi-router-table-stylish-living-room-modern-house.webp");
}
.wifi-cards {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  gap: 40px;
  text-align: left;
  font-size: 24px;
  color: #fff;
  font-family: Inter;
  margin-top: 36px;
}
.wifi-card {
  width: 572px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.wifi-card-title-yellow {
  align-self: stretch;
  height: 62px;
  background: linear-gradient(90deg, #ff942b, #ffdc37);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.wi-fi {
  position: relative;
  line-height: 48px;
  color: #fff;
  font-weight: 500;
  text-shadow: 0px 4px 12.3px rgba(0, 0, 0, 0.25);
}
.wifi-des-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  color: #000;
}
.wifi-des-item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.wifi-item-gray-title {
  height: 50px;
  width: 152px;
  font-weight: 500;
  border-radius: 60px;
  background-color: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.wifi-des-item2 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.wifi-des-item4 {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  text-align: center;
}
.wifi-card-title-blue {
  width: 572px;
  height: 62px;
  background-color: #0b2341;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 67px;
  box-sizing: border-box;
}

/* home wifi */
.wifi-home-section {
  padding: 202px 0 142px;
}

.home-wifi-yellow-circle-title {
  width: 200px;
  height: 200px;
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  background: linear-gradient(90deg, #ff942b 0%, #ffdc37 100%);
  text-align: center;
  align-content: center;
  line-height: 48px;
  margin: 28px auto 36px;
}

.home-wifi-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  text-align: center;
  font-size: 20px;
  color: #000;
  font-family: Inter;
  margin: 36px auto 38px;
}
.home-wifi-des-wrapper {
  width: 1073px;
  display: flex;
  align-items: flex-start;
  gap: 87px;
  justify-content: center;
}
.home-wifi-des {
  height: 42px;
  width: 446px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.home-wifi-des-yellow-title {
  height: 42px;
  width: 206px;
  font-weight: 500;
  border-radius: 60px 0px 0px 60px;
  background: linear-gradient(-90deg, rgba(255, 220, 55, 0.1), #ffdc37);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.home-wifi-des-note {
  width: 524px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-shrink: 0;
}
.home-wifi-des-note-title {
  width: 154px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  border: 1px solid #0b2341;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  justify-content: center;
}

.note-text {
  line-height: 36px;
  text-align: left;
}
.wifi-6 {
  height: 71px;
  width: 350px;
  position: relative;
  font-size: 20px;
  line-height: 36px;
  text-align: left;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wifi-page-des-container {
  position: relative;
  width: 100%;
  max-width: 780px;
  height: 237px;
  margin-bottom: -40px;
  padding-top: 62px;
  padding-left: 40px;
}

/* 背景和缺角用偽元素，避免切到圖片陰影 */
.wifi-page-des-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff0d0;
  /* 右下角缺角效果 */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 45px),
    calc(100% - 45px) 100%,
    0 100%
  );
  z-index: -1;
}

.page-des-dec {
  position: absolute;
  right: 0;
  bottom: 0;
  /* PNG 圖片沿邊緣陰影 */
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.25));
}

.wifi-page-des-text {
  max-width: 700px;
  line-height: 36px;
}

@media (max-width: 480px) {
  /* wifi router */
  .wifi-router-section {
    padding: 13px 0 44px;
  }

  .wifi-router-container {
    flex-direction: column;
    margin: 16px auto 20px;
    gap: 24px;
  }

  .router-items {
    flex-direction: row;
    gap: 10px;
  }

  .router-des-title {
    color: #0b2341;
    font-weight: 700;
  }

  .router-yellow-bg-title,
  .router-blue-title {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    font-weight: 700;
  }

  .router-des-wrapper {
    max-width: 120px;
    width: 100%;
  }

  .router-des-wrapper:nth-child(3) .wifi-6-mu-mimoofdma {
    width: 120px;
  }

  .mesh-onemesh {
    height: auto;
  }

  /* wifi card */
  .wifi-card-section {
    padding: 16px 0 17.47px;
    background-image: url(../../images/wifi-router-table-stylish-living-room-modern-house-rwd.webp);
  }

  .wifi-cards {
    flex-direction: column;
    margin: 16px auto 0;
    gap: 21.2px;
  }

  .wifi-card {
    width: 100%;
    gap: 21.09px;
  }

  .wifi-des-wrapper {
    gap: 18.06px;
  }

  .wifi-des-item {
    gap: 12.59px;
  }

  .wifi-card-title-yellow,
  .wifi-card-title-blue {
    text-shadow: 0 2.098px 6.451px rgba(0, 0, 0, 0.25);
    height: 32.52px;
    width: 100%;
    color: #fff;
  }

  .wi-fi {
    color: #fff;
  }

  .wifi-item-gray-title {
    width: 80px;
    height: 26px;
  }

  /* home wifi */
  .wifi-home-section {
    padding: 60px 0 12px;
  }

  .home-wifi-yellow-circle-title {
    width: 110px;
    height: 110px;
    line-height: 27.034px;
    text-shadow: 0 2.253px 2.253px rgba(0, 0, 0, 0.25);
    margin: 16px auto;
  }

  .home-wifi-des-wrapper {
    width: 100%;
    flex-direction: column;
    gap: 10px;
    max-width: 288px;
  }

  .home-wifi-des {
    gap: 12px;
    width: 100%;
    height: auto;
    justify-content: flex-end;
  }

  .home-wifi-container {
    gap: 25.86px;
    margin: 0 auto 17.84px;
  }

  .home-wifi-des-note {
    width: 100%;
    gap: 12px;
    justify-content: flex-end;
  }

  .home-wifi-des-yellow-title {
    width: 116px;
    height: 24px;
    font-size: 13.517px;
  }

  .home-wifi-des-note-title {
    width: 86px;
    height: 20px;
    font-size: 13.517px;
  }

  .wifi-des-text,
  .note-text {
    font-size: 11.264px !important;
    width: 160px;
    text-align: left;
  }

  .wifi-page-des-container {
    height: 165px;
    padding-top: 20px;
    padding-left: 0;
    display: flex;
    justify-content: center;
    margin-bottom: -19px;
  }

  .wifi-page-des-container::before {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 31px),
      calc(100% - 17px) 100%,
      0 100%
    );
  }

  .wifi-page-des-text {
    max-width: 242px;
  }

  .page-des-dec {
    width: 17px;
    height: 33px;
  }
}