@charset "utf-8";

.underline{text-decoration: underline;}

/* 复选框样式1 */
.u_checkbox{display: flex;align-items: center;gap: 0.1rem;cursor: pointer;}
.u_checkbox input{display: none;}
.u_checkbox span{position: relative;width: 0.2rem;height: 0.2rem;border: 1px solid #bbb;border-radius: 0.04rem;transition: all 0.3s;}
.u_checkbox span::after{content: '';position: absolute;left: 50%;top: 50%;width: 0.1rem;height: 0.05rem;border: 0.01rem solid #834428;border-top: none;border-right: none;transform: translate(-50%, -70%) rotate(-45deg);opacity: 0;transition: all 0.3s;font-weight: bold;}
.u_checkbox input:checked + span{border-color: #834428;}
.u_checkbox input:checked + span::after{opacity: 1;}
.u_checkbox input:disabled + span{cursor: not-allowed;background-color: #ddd;}

/* 复选框样式2 */
.u_checkbox1{display: flex;align-items: center;gap: 0.1rem;cursor: pointer;}
.u_checkbox1 input{display: none;}
.u_checkbox1 span{position: relative;width: 0.2rem;height: 0.2rem;border: 1px solid #bbb;border-radius: 0.2rem;transition: all 0.3s;}
.u_checkbox1 span::after{content: '';position: absolute;left: 50%;top: 50%;width: 0.1rem;height: 0.05rem;border: 0.01rem solid #fff;border-top: none;border-right: none;transform: translate(-50%, -70%) rotate(-45deg);opacity: 0;transition: all 0.3s;font-weight: bold;}
.u_checkbox1 input:checked + span{background-color: var(--colDf);border-color: transparent;}
.u_checkbox1 input:checked + span::after{opacity: 1;}

/* 单选框样式 */
.u_radio{display: flex;align-items: center;gap: 0.1rem;cursor: pointer;}
.u_radio input{display: none;}
.u_radio span{position: relative;width: 0.2rem;height: 0.2rem;border: 1px solid #ddd;border-radius: 0.2rem;transition: all 0.3s;}
.u_radio span::after{content: '';position: absolute;left: 50%;top: 50%;width: 0.1rem;height: 0.05rem;border: 0.01rem solid #fff;border-top: none;border-right: none;transform: translate(-50%, -70%) rotate(-45deg);opacity: 0;transition: all 0.3s;font-weight: bold;}
.u_radio input:checked + span{background-color: var(--colDf);border-color: transparent;}
.u_radio input:checked + span::after{opacity: 1;}

/* 数字输入框 */
.input_number{display: inline-flex;align-items: center;width: 1.2rem;border: 1px solid #EDEDED;border-radius: 0.1rem;overflow: hidden;cursor: pointer;user-select: none;}
.input_number .input_number_btn{position: relative;display: flex;align-items: center;justify-content: center;width: 0.3rem;height: 0.3rem;flex-shrink: 0;}
.input_number .input_number_btn::before,
.input_number .input_number_btn::after{width: 0.1rem;height: 0.01rem;content:'';position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);background-color: #666;font-weight: normal;transition: all 0.3s;}
.input_number .input_number_btn::after{transform: translate(-50%,-50%) rotate(90deg);}
.input_number .input_number_btn.reduce{border-right: 1px solid #EDEDED;}
.input_number .input_number_btn.add{border-left: 1px solid #EDEDED;}
.input_number .input_number_btn.reduce::after{display: none;}
.input_number .input_number_btn:hover{background-color: #f8f8f8;}
.input_number .input_number_btn:hover::before,
.input_number .input_number_btn:hover::after{background-color: #333;}
.input_number .input_number_input{flex: 1;height: 0.3rem;padding: 0 0.05rem;}
.input_number .input_number_input input{width: 100%;height: 100%;border: 0 none;text-align: center;font-size: 0.14rem;color: #000;font-weight: 400;}