:root {
  --color-red:#F95A70;
  --bs-btn-bg: var(--color-red);
  --deep-blue: #092542;
  --color-green: #0E9A9E;
  --selector-border-color: var(--bs-gray-700, #495057);
  --header-top-height: 40px;
}
body {
  font-family: 'Noto Sans TC', sans-serif;
  line-height: 1.42;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: bold;
}

.text-red{
  color: var(--color-red);
}
.bg-red{
  background-color: var(--color-red);
}
.text-blue{
  color: var(--deep-blue);
}
.bg-blue{
  background-color: var(--deep-blue);
}
.text-green{
  color: var(--color-green);
}
.bg-green{
  background-color: var(--color-green);
}

label{
  user-select: none;
}
h1{
  font-size: 32px;
}
#header{
  color: #FFFCFB;
  background-color: #102141;
  background-image: url("//www.digiwin.com/tw/images/diagnosis/tariff/bg.webp");
  background-size: cover;
  background-position: center bottom;
  backdrop-filter: saturate(.4);
  height: 100dvh;
  max-height: 480px;
  .header-top{
    font-size: 18px;
    height: var(--header-top-height);
    padding: 0 35px 0;
  }
  .header-title{
    height: calc(100% - var(--header-top-height));
    text-shadow: .1rem .1rem .2rem #09193a;
  }
}
.header-slogan{
  font-size: clamp(30px,3vw,48px);
}
.survey-title, .section-title, .accordion-header{
  color: var(--color-red);
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 2rem;
  border-left:1rem solid var(--color-red);
  padding-left: 1rem;
  position: relative;
  &::after{
    content: "";
    display: block;
    position: absolute;
    left: -1rem;
    bottom: -1rem;
    width: 100%;
    height: 6px;
    background-image: linear-gradient(to right,var(--color-red), var(--color-red) 30%, transparent 100%);
  }
}
.selector__label {
  display: block;
  padding: 1rem;
  border: 2px solid var(--selector-border-color);
  border-radius: 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  height: 100%;
  user-select: none;
  &:hover{
    background-color: var(--bs-light);
  }
}

.selector__input:checked + .selector__label {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary);
  color: var(--bs-white);
}
.selector__input-text {
  display: block;
  border: 2px solid var(--selector-border-color);
  border-radius: 0;
  padding: 1rem; 
  height: 100%;
  width: 100%;
  text-align: left; 
  font-size: 1rem;
  background-color: transparent;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
  &:focus{
    border-color: var(--bs-primary);
    outline: 0;
  }
}
.selector__input.d-none {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sec-progress{
  display:flex;
  align-items:center;
  margin-bottom:16px;
  container-type: inline-size;
  gap: 0;
  position: sticky;
  top:0;
  z-index: 10;
  background-color: #fff;
  padding: 1rem;
}
.sec-progress__node{
  width:50px;
  max-width:50px;
  aspect-ratio:1/1;
  border-radius:50%;
  border:2px solid var(--selector-border-color);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  user-select:none;
  cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s;
}
.sec-progress__node.is-on{
  background:var(--color-red);
  color:#fff;
  border-color:var(--color-red);
}
.sec-progress__node.is-finish{
  background:var(--selector-border-color);
  color:#fff;
  border-color:var(--selector-border-color);
}
.sec-progress__line{
  flex:1;
  width:4cqw;
  height:2px;
  background:var(--selector-border-color);
}

.q-title{
  font-size: 1.5em;
  font-weight: bold;
  padding: 1rem 0 .5rem;
}
.survey-user__input, .survey-user__select{
  width: 100%;
}
@media (min-width: 768px) {
  .survey-user__input, .survey-user__select{
    max-width:250px;
  }
}
#refresh-code{
  -webkit-appearance: none;
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
}
.radar-wrapper{
  width: 100%;
  height: 520px;
}
.chart-wrapper {
  width: 100%;
  max-width: 600px;
  height: 250px;
  margin-bottom: 2rem;
  margin-left:auto;
  margin-right:auto;
}
.result-section--insights .card{
  --bs-card-border-color: var(--color-green);
}
.accordion-button{
  background-color: transparent;
  color: var(--color-red);
  font-size: inherit;
  border:0;
  padding: 0;
  box-shadow:none;
  &:focus, &:not(.collapsed){
    border:0;
    box-shadow:none;
    background-color: transparent;
    color: var(--color-red);
  }
}
.accordion-item{
  border:0;
}
.underline{
  --underline-color: var(--color-green);
  position: relative;
  &::after{
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 464px;
    height: 2px;
    left: 50%;
    transform: translateX(-50%);
    background-image: radial-gradient(circle at center, var(--underline-color) 0%, transparent 80%);
  }
}