.wrapper .box{background:#fff;border-radius:10px;}
.wrapper .box label{display:flex;height:54px;width:100%;align-items:center;border:1px solid #d3d3d3;border-radius:5px;margin:10px 0;padding-left:11px;cursor:pointer;transition:all .3s ease}
#value-1:checked~.value-1,#value-2:checked~.value-2,#value-3:checked~.value-3,#value-4:checked~.value-4{background:#f65024;border-color:#f65024}
.wrapper .box label .select-dots{height:20px;width:20px;background:#d9d9d9;border-radius:50%;position:relative;transition:all .3s ease}
#value-1:checked~.value-1 .select-dots,#value-2:checked~.value-2 .select-dots,#value-3:checked~.value-3 .select-dots,#value-4:checked~.value-4 .select-dots{background:#fff}
.box label .select-dots::before{position:absolute;content:"";top:50%;left:50%;transform:translate(-50%,-50%) scale(2);width:8px;height:8px;border-radius:50%;transition:all .3s ease}
#value-1:checked~.value-1 .select-dots::before,#value-2:checked~.value-2 .select-dots::before,#value-3:checked~.value-3 .select-dots::before,#value-4:checked~.value-4 .select-dots::before{background:#f65024;transform:translate(-50%,-50%) scale(1)}
.wrapper .box label .text{color:#333;font-size:18px;font-weight:400;padding-left:10px;transition:color .3s ease}
#value-1:checked~.value-1 .text,#value-2:checked~.value-2 .text,#value-3:checked~.value-3 .text,#value-4:checked~.value-4 .text{color:#fff}
.wrapper .box input[type="radio"]{display:none}