Form by zanina-yassine

1.modal {
2  width: fit-content;
3  height: fit-content;
4  background: #FFFFFF;
5  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);
6  border-radius: 26px;
7  max-width: 450px;
8}
9
10.form {
11  display: flex;
12  flex-direction: column;
13  gap: 20px;
14  padding: 20px;
15}
16
17.payment--options {
18  width: calc(100% - 40px);
19  display: grid;
20  grid-template-columns: 33% 34% 33%;
21  gap: 20px;
22  padding: 10px;
23}
24
25.payment--options button {
26  height: 55px;
27  background: #F2F2F2;
28  border-radius: 11px;
29  padding: 0;
30  border: 0;
31  outline: none;
32}
33
34.payment--options button svg {
35  height: 18px;
36}
37
38.payment--options button:last-child svg {
39  height: 22px;
40}
41
42.separator {
43  width: calc(100% - 20px);
44  display: grid;
45  grid-template-columns: 1fr 2fr 1fr;
46  gap: 10px;
47  color: #8B8E98;
48  margin: 0 10px;
49}
50
51.separator > p {
52  word-break: keep-all;
53  display: block;
54  text-align: center;
55  font-weight: 600;
56  font-size: 11px;
57  margin: auto;
58}
59
60.separator .line {
61  display: inline-block;
62  width: 100%;
63  height: 1px;
64  border: 0;
65  background-color: #e8e8e8;
66  margin: auto;
67}
68
69.credit-card-info--form {
70  display: flex;
71  flex-direction: column;
72  gap: 15px;
73}
74
75.input_container {
76  width: 100%;
77  height: fit-content;
78  display: flex;
79  flex-direction: column;
80  gap: 5px;
81}
82
83.split {
84  display: grid;
85  grid-template-columns: 4fr 2fr;
86  gap: 15px;
87}
88
89.split input {
90  width: 100%;
91}
92
93.input_label {
94  font-size: 10px;
95  color: #8B8E98;
96  font-weight: 600;
97}
98
99.input_field {
100  width: auto;
101  height: 40px;
102  padding: 0 0 0 16px;
103  border-radius: 9px;
104  outline: none;
105  background-color: #F2F2F2;
106  border: 1px solid #e5e5e500;
107  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
108}
109
110.input_field:focus {
111  border: 1px solid transparent;
112  box-shadow: 0px 0px 0px 2px #242424;
113  background-color: transparent;
114}
115
116.purchase--btn {
117  height: 55px;
118  background: #F2F2F2;
119  border-radius: 11px;
120  border: 0;
121  outline: none;
122  color: #ffffff;
123  font-size: 13px;
124  font-weight: 700;
125  background: linear-gradient(180deg, #363636 0%, #1B1B1B 50%, #000000 100%);
126  box-shadow: 0px 0px 0px 0px #FFFFFF, 0px 0px 0px 0px #000000;
127  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
128}
129
130.purchase--btn:hover {
131  box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #0000003a;
132}
133
134/* Reset input number styles */
135.input_field::-webkit-outer-spin-button,
136.input_field::-webkit-inner-spin-button {
137  -webkit-appearance: none;
138  margin: 0;
139}
140
141.input_field[type=number] {
142  -moz-appearance: textfield;
143}