1.radio-input input {
2  display: none;
3}
4
5.radio-input {
6  display: flex;
7  flex-direction: column;
8  padding: 12px;
9  background: #fff;
10  color: #000;
11  border-radius: 10px;
12  box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);
13  width: 320px;
14}
15
16.info {
17  margin-bottom: 10px;
18  display: flex;
19  align-items: center;
20  justify-content: space-between;
21}
22
23.question {
24  color: rgb(49, 49, 49);
25  font-size: 1rem;
26  line-height: 1rem;
27  font-weight: 800;
28}
29
30.steps {
31  background-color: rgb(0, 0, 0);
32  padding: 4px;
33  color: #fff;
34  border-radius: 4px;
35  font-size: 12px;
36  line-height: 12px;
37  font-weight: 600;
38}
39
40.radio-input  label {
41  display: flex;
42  background-color: #fff;
43  padding: 14px;
44  margin: 8px 0 0 0;
45  font-size: 13px;
46  font-weight: 600;
47  border-radius: 10px;
48  cursor: pointer;
49  border: 1px solid rgba(187, 187, 187, 0.164);
50  color: #000;
51  transition: .3s ease;
52}
53
54.radio-input  label:hover {
55  background-color: rgba(24, 24, 24, 0.13);
56  border: 1px solid #bbb;
57}
58
59.result {
60  margin-top: 10px;
61  font-weight: 600;
62  font-size: 12px;
63  display: none;
64  transition: display .4s ease;
65}
66
67.result.success {
68  color: green;
69}
70
71.result.error {
72  color: red;
73}
74
75.radio-input input:checked + label {
76  border-color: red;
77  color: red;
78}
79
80.radio-input input[value="value-2"]:checked + label {
81  border-color: rgb(22, 245, 22);
82  color: rgb(16, 184, 16);
83}
84
85.radio-input:has(input[value="value-2"]:checked) .result.success {
86  display: flex;
87}
88
89.radio-input:has(input:not([value="value-2"]):checked ) .result.error {
90  display: flex;
91}