1.modal {
2  width: 450px;
3  background: linear-gradient(180deg, #DCF9E0 0%, #FFFFFF 30.21%);
4  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
5  border-radius: 16px;
6}
7
8.banner {
9  width: 100%;
10  height: 30px;
11  margin: 0;
12  background-size: 100%;
13  background-repeat: no-repeat;
14}
15
16.title {
17  font-weight: 700;
18  font-size: 17px;
19  line-height: 21px;
20  text-align: center;
21  color: #2B2B2F;
22  margin-bottom: 15px;
23}
24
25.description {
26  max-width: 80%;
27  margin: auto;
28  font-weight: 600;
29  font-size: 11px;
30  line-height: 16px;
31  text-align: center;
32  color: #5F5D6B;
33}
34
35.tab-container {
36  display: flex;
37  flex-direction: row;
38  align-items: flex-start;
39  position: relative;
40  padding: 2px;
41  background-color: #ebebec;
42  border-radius: 9px;
43  margin: 10px 20px 0px 20px;
44}
45
46.indicator {
47  content: "";
48  width: 50%;
49  height: 28px;
50  background: #FFFFFF;
51  position: absolute;
52  top: 2px;
53  left: 2px;
54  z-index: 9;
55  border: 0.5px solid rgba(0, 0, 0, 0.04);
56  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
57  border-radius: 7px;
58  transition: all 0.2s ease-out;
59}
60
61.tab {
62  width: 50%;
63  height: 28px;
64  position: relative;
65  z-index: 99;
66  background-color: transparent;
67  border: 0;
68  outline: none;
69  flex: none;
70  align-self: stretch;
71  flex-grow: 1;
72  cursor: pointer;
73  font-weight: 500;
74}
75
76.tab--1:hover ~ .indicator {
77  left: 2px;
78}
79
80.tab--2:hover ~ .indicator {
81  left: calc(50% - 2px);
82}
83
84.benefits {
85  padding: 20px;
86  display: flex;
87  flex-direction: column;
88  gap: 20px;
89}
90
91.benefits > span {
92  font-size: 15px;
93  color: #2B2B2F;
94  font-weight: 700;
95}
96
97.benefits ul {
98  display: flex;
99  flex-direction: column;
100  gap: 10px;
101}
102
103.benefits ul li {
104  display: flex;
105  align-items: center;
106  justify-content: flex-start;
107  gap: 10px;
108}
109
110.benefits ul li span {
111  font-weight: 600;
112  font-size: 12px;
113  color: #5F5D6B;
114}
115
116.modal--footer {
117  display: flex;
118  align-items: center;
119  justify-content: space-between;
120  padding: 20px;
121  border-top: 1px solid #ebebec;
122}
123
124.price {
125  position: relative;
126  font-size: 32px;
127  color: #2B2B2F;
128  font-weight: 900;
129}
130
131.price sup {
132  font-size: 13px;
133}
134
135.price sub {
136  width: fit-content;
137  position: absolute;
138  font-size: 11px;
139  color: #5F5D6B;
140  bottom: 5px;
141  display: inline-block;
142}
143
144.upgrade-btn {
145  display: flex;
146  flex-direction: row;
147  justify-content: center;
148  align-items: center;
149  width: 215px;
150  height: 40px;
151  background: #0bdd12;
152  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
153  border-radius: 7px;
154  border: 0;
155  outline: none;
156  color: #ffffff;
157  font-size: 13px;
158  font-weight: 600;
159  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
160}
161
162.upgrade-btn:hover {
163  background-color: #07b90d;
164}
165
166.form {
167  display: flex;
168  flex-direction: column;
169  gap: 10px;
170}