@charset "UTF-8";
.cns-category-filter {
  display: flex;
  gap: 16px;
}
.cns-category-filter .cns-category-btn {
  display: flex;
  padding: 12px 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  /* 中文-明體/標題 h3 */
  font-family: "Noto Serif TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 36px */
  letter-spacing: 3px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  background: rgba(0, 145, 216, 0.1);
  outline: none;
}
.cns-category-filter .cns-category-btn.active {
  background: var(--Primary-01, #0091D8);
  color: var(--Gray-07, #FFF);
}
@media (max-width: 767px) {
  .cns-category-filter {
    flex-direction: column;
  }
}

.cns-filter-container {
  width: 100%;
  max-width: 588px;
  margin: 0 auto;
}

.cns-clinic-display {
  display: flex;
  max-width: 100%;
  width: 588px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 24px;
}
.cns-clinic-display .cns-clinic-card {
  width: calc((100% - 24px) / 2);
}
@media (max-width: 767px) {
  .cns-clinic-display .cns-clinic-card {
    width: 100%;
  }
}
.cns-clinic-display .cns-clinic-card header.cns-clinic-title {
  border-radius: 10px;
  background: var(--Primary-01, #0091D8);
  color: var(--Gray-07, #FFF);
}
.cns-clinic-display .cns-clinic-card header.cns-clinic-title h3 {
  margin: 0;
  /* 中文-明體/內文 Btn-CN */
  font-family: "Noto Serif TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: 2px;
  text-align: center;
  padding: 12px 0;color:#fff;
}
.cns-clinic-display .cns-clinic-card main.cns-clinic-content {
  padding: 24px 12px;
  border-radius: 10px;
  background: var(--Gray-07, #FFF);
  box-shadow: -15px -15px 40px 0 rgba(255, 255, 255, 0.6), 0 15px 40px 0 rgba(0, 0, 0, 0.05);
}
.cns-clinic-display .cns-clinic-card main.cns-clinic-content .cns-doctor > div {
  border-radius: 10px;
  background: rgba(0, 145, 216, 0.2);
  color: var(--Secondary-03, #0E5F87);
  font-family: "Noto Serif TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: 2px;
  width: 100%;
  padding: 12px 0;
  border: none;
  text-align: center;
}
.cns-clinic-display .cns-clinic-card main.cns-clinic-content .cns-current-number > div {
  border-radius: 10px;
  background: rgba(0, 186, 192, 0.1);
  color: var(--Secondary-03, #0E8387);
  font-family: "Noto Serif TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: 2px;
  width: 100%;
  padding: 12px 0;
  border: none;
  text-align: center;
}
.cns-clinic-display .cns-clinic-card main.cns-clinic-content .cns-number-large.current {
  color: #DD7975;
  leading-trim: both;
  text-edge: cap;
  font-family: Prata;
  font-size: 64px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 64px */
  text-align: center;
  padding: 24px 0;
}
.cns-clinic-display .cns-clinic-card main.cns-clinic-content .cns-doctor-info {
  color: var(--Gray-01, #1A1A1A);
  /* 中文-明體/標題 h2 */
  font-family: "Noto Serif TC";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 48px */
  letter-spacing: 3px;
  padding: 24px 0;
  text-align: center;
}
.cns-clinic-display .cns-clinic-card main.cns-clinic-content .cns-number-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
}
.cns-clinic-display .cns-clinic-card main.cns-clinic-content .cns-next-label {
  color: var(--Gray-04, #8F8F8F);
  /* 中文-明體/內文 Btn-CN */
  font-family: "Noto Serif TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: 2px;
}
.cns-clinic-display .cns-clinic-card main.cns-clinic-content .cns-next-number {
  color: var(--Gray-04, #8F8F8F);
  leading-trim: both;
  text-edge: cap;
  font-family: Prata;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 32px */
  transform: translateY(3px);
}

/* 刷新按鈕容器樣式 */
.cns-refresh-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}

/* 刷新按鈕樣式 */
.cns-refresh-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  background-color: #0091d8;
  color: white;
  font-family: "Noto Serif TC", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cns-refresh-btn.disabled {
  opacity: 0.5;
}
.cns-refresh-btn::before {
  content: "↻";
  font-size: 18px;
  display: inline-block;
}

/* 刷新按鈕旋轉動畫 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 刷新圖標 */
/* 倒數計時器容器樣式 */
.cns-countdown-container {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

/* 倒數計時器圓形樣式 */
.cns-countdown-circle {
  position: relative;
  width: 40px;
  height: 40px;
  color: var(--Gray-01, #1A1A1A);
  /* 中文-明體/標題 h2 */
  font-family: "Noto Serif TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 48px */
  letter-spacing: 3px;
}

/* 倒數計時器 SVG 樣式 */
.cns-countdown-svg {
  width: 100%;
  height: 100%;
}

/* 倒數計時器背景圓圈樣式 */
.cns-countdown-bg {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 2;
}

/* 倒數計時器進度圓圈樣式 */
.cns-countdown-progress {
  fill: none;
  stroke: #0091d8;
  stroke-width: 2;
  stroke-dasharray: 113;
  /* 2 * π * 18 (半徑) */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

/* 倒數計時器文字樣式 */
.cns-countdown-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Noto Serif TC", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.cns-time-grid {
  width: 588px;
  max-width: 100%;
  margin: 0 auto 24px auto;
}
.cns-time-grid header {
  border-radius: 10px;
  background: var(--Primary-01, #0091D8);
  color: var(--Gray-07, #FFF);
  font-family: "Noto Serif TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 2px;
  text-align: center;
  padding: 12px 0;
  margin-bottom: 12px;
}
.cns-time-grid main {
  border-radius: 10px;
  background: var(--Gray-07, #FFF);
  /* shadow/01 */
  box-shadow: -15px -15px 40px 0 rgba(255, 255, 255, 0.6), 0 15px 40px 0 rgba(0, 0, 0, 0.05);
  padding: 12px 24px;
}
.cns-time-grid main .cns-current-period {
  display: flex;
  gap: 24px;
  text-align: center;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.cns-time-grid main .cns-current-period .cns-period-name {
  color: var(--Gray-01, #1A1A1A);
  /* 中文-明體/標題 h2 */
  font-family: "Noto Serif TC";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 48px */
  letter-spacing: 3px;
}
.cns-time-grid main .cns-current-period .cns-period-time {
  color: var(--Gray-01, #1A1A1A);
  /* 中文-明體/標題 h4 */
  font-family: "Noto Serif TC";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 30px */
  letter-spacing: 2px;
}

/*# sourceMappingURL=cns-front.css.map */