#solar-cell-calculation-form label sup{
  bottom: 0.1em;
}
.pricepermonth{
  display:grid
}
.pricepermonth label,.phasesec label{
  font-weight: 600;
}
.phasesec label{
  margin-top: 20px;
}
.pricepermonth input{
  line-height: 2.5;
    border-radius: 25px;
    border: none;
    padding: 0px 20px 0px 20px;
    font-size: 20px;
}
.phasesec,.timesec{
  display: grid;
  grid-template-columns: 0fr 1fr;
  grid-template-areas:
        "rowone rowone"
        "rowtwo rowtwo";
}
.rowone{
  grid-area: rowone;
}
.rowtwo{
  grid-area: rowtwo;
}
.phasesec .rowtwo{
  display: flex;
  justify-content: space-between
}
.timesec label{
	display: none;
}
.timesec .rowone input{
	width: 100%;
	height: 10px;
    border-radius: 20px;
    background: linear-gradient(90deg,rgba(255, 222, 23, 1) 0%, rgba(247, 148, 29, 1) 35%, rgba(28, 117, 188, 1) 70%, rgba(0, 87, 156, 1) 100%);
}
.timesec .rowone{
  margin-top: 30px;
}
.timesec .rowtwo{
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}
.timesec input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 50px;
  background: url(/wp-content/uploads/2025/10/btn-time.svg);
  cursor: pointer;
  margin-left:-2px;
}
.daytime,.nighttime{
	display: grid;
}
.daytime span{
	color: #FFDE17;
	font-size: 25px;
	font-weight: 600;
}
.daytime #time-of-use-day{
	font-size: 50px;
    color: #fff;
    text-align: center;
}
.nighttime span{
	color: #81D4FA;
	font-size: 25px;
	font-weight: 600;
}
.nighttime #time-of-use-night{
	font-size: 50px;
    color: #fff;
    text-align: center;
}
#solar-cell-calculation-form button{
	background: linear-gradient(180deg, rgba(129, 212, 250, 1) 0%, rgba(163, 233, 164, 1) 100%);
    border: 5px solid #fff;
    color: #fff;
    width: 140px;
    height: 140px;
    border-radius: 100px;
    font-size: 30px;
    font-weight: 600;
    text-shadow: 1px 1px 3px #646464;
    margin: -120px auto 150px !important;
    display: grid;
    padding: 40px 0;
    cursor: pointer;
}
.phasesec .rowtwo div{
	display: flex;
    align-items: center;
}
.phasesec .rowtwo div span{
	padding-left: 20px;
}

/* ซ่อน radio ดั้งเดิม */
.phasesec .rowtwo input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 90px;
  height: 45px;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease;
  background: #707070;
}

.phasesec .rowtwo input[type="radio"]:checked {
  background: linear-gradient(180deg, rgba(129, 212, 250, 1) 0%, rgba(163, 233, 164, 1) 100%);
}

/* เมื่อ hover */
.phasesec .rowtwo input[type="radio"]:hover {
  background: #585858;
}
.phasesec .rowtwo input[type="radio"]:checked:hover  {
  background: linear-gradient(180deg, rgba(129, 212, 250, 1) 0%, rgba(163, 233, 164, 1) 100%);
}

/* จุดในกลางวงกลมเมื่อเลือก */
.phasesec .rowtwo input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 35px;
  height: 35px;
  background: #fff;
  border-radius: 50%;
  transition: 0.4s;
  transform: translateX(0px) translate(0px, 0px);
}

.phasesec .rowtwo input[type="radio"]:before{
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 35px;
  height: 35px;
  background: #fff;
  border-radius: 50%;
  transition: 0.4s;
  transform: translateX(45px) translate(0px, 0px);
}




@media (max-width: 768px){
  .pricepermonth label, .phasesec label{
    font-size: 20px;
  }
  .phasesec .rowtwo input[type="radio"]{
    width: 45px;
    height: 30px;
  }
  .phasesec .rowtwo input[type="radio"]:checked::before{
    width: 20px;
    height: 20px;
  }
  .phasesec .rowtwo input[type="radio"]:before{
    width: 20px;
    height: 20px;
    transform: translateX(15px) translate(0px, 0px);
  }
  .phasesec .rowtwo div span{
    font-size: 16px;
    padding-left: 5px;
    padding-top: 5px;
  }
  .timesec .rowtwo{
    margin-top: 40px;
  }
  .daytime span{
    font-size: 20px;
  }
  .nighttime span{
    font-size: 20px;
  }
  .daytime #time-of-use-day{
    font-size: 40px;
  }
  .nighttime #time-of-use-night{
    font-size: 40px;
  }
  #solar-cell-calculation-form button{
    width: 100px;
    height: 100px;
    margin: -90px auto 150px !important;
    padding: 28px 0;
    font-size: 20px;
  }

}