/* radio */
/* 隱藏原生 radio 按鈕 */
input[type="radio"] {
  display: none;
}

/* 自訂 radio 按鈕容器 */

.radioBox {
  display: flex;
  gap: 10px;
}

.custom-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
}

/* 自訂 radio 按鈕外觀 */
.custom-radio-button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fceee2; /* 未選中時的背景顏色 */
  display: inline-block;
  margin-right: 10px;
  position: relative;
  transition: background-color 0.3s;
}

/* 選中時的樣式 */
input[type="radio"]:checked + .custom-radio-button::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #008D6B; /* 選中時中央顯示的顏色 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 選中時的背景顏色（可選） */
input[type="radio"]:checked + .custom-radio-button {
  background-color: #fceee2;
}

/* select */
/* 隱藏預設的下拉式選單箭頭 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 48px;
  padding: 0 20px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  outline: unset;
  background-color: #fceee2;
  border-radius: 8px;
  color: #968e89;

}


/* 自定義下拉式選單箭頭 */
select::-ms-expand {
  display: none;
}

.select_style {
  width: 100%;
}

.selectBox {
  position: relative;
  width: 100%;
  display: inline-block;
  cursor: pointer;
}

/* 自定義箭頭樣式 */
.selectBox img {
  position: absolute;
  width: 12px;
  height: 10px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* check box */
/* 隱藏原生 checkbox 按鈕 */
.checkContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

input[type="checkbox"] {
  display: none;
}

/* 自訂 checkbox 按鈕容器 */
.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
}

/* 自訂 checkbox 按鈕外觀 */
.custom-checkbox-button {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-color: #fceee2; /* 未選中時的背景顏色 */
  display: inline-block;
  margin-right: 10px;
  position: relative;
  transition: background-color 0.3s;
}

/* 選中時的樣式 */
input[type="checkbox"]:checked + .custom-checkbox-button {
  background-color: #008D6B; /* 選中時的背景顏色 */
}

input[type="checkbox"]:checked + .custom-checkbox-button::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid #fff; /* 中間打勾符號的顏色 */
  border-width: 0 3px 3px 0;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}