1.radio-container {
2  margin: 0 auto;
3  max-width: 300px;
4}
5
6.radio-wrapper {
7  margin-bottom: 20px;
8}
9
10.radio-button {
11  display: flex;
12  align-items: center;
13  cursor: pointer;
14  transition: all 0.2s ease-in-out;
15}
16
17.radio-button:hover {
18  transform: translateY(-2px);
19}
20
21.radio-button input[type="radio"] {
22  display: none;
23}
24
25.radio-checkmark {
26  display: inline-block;
27  position: relative;
28  width: 16px;
29  height: 16px;
30  margin-right: 10px;
31  border: 2px solid #333;
32  border-radius: 50%;
33}
34
35.radio-checkmark:before {
36  content: "";
37  position: absolute;
38  top: 50%;
39  left: 50%;
40  transform: translate(-50%, -50%) scale(0);
41  width: 8px;
42  height: 8px;
43  border-radius: 50%;
44  background-color: #333;
45  transition: all 0.2s ease-in-out;
46}
47
48.radio-button input[type="radio"]:checked ~ .radio-checkmark:before {
49  transform: translate(-50%, -50%) scale(1);
50}
51
52.radio-label {
53  font-size: 16px;
54  font-weight: 600;
55}
56