Form by SSpisso

1/* Body */
2.container {
3  display: grid;
4  grid-template-columns: auto;
5  gap: 0px;
6}
7
8hr {
9  height: 1px;
10  background-color: rgba(16, 86, 82, .75);
11  ;
12  border: none;
13}
14
15.card {
16  width: 400px;
17  background: rgb(255, 250, 235);
18  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);
19}
20
21.title {
22  width: 100%;
23  height: 40px;
24  position: relative;
25  display: flex;
26  align-items: center;
27  padding-left: 20px;
28  border-bottom: 1px solid rgba(16, 86, 82, .75);
29  ;
30  font-weight: 700;
31  font-size: 11px;
32  color: #000000;
33}
34
35/* Cart */
36.cart {
37  border-radius: 19px 19px 0px 0px;
38}
39
40.cart .steps {
41  display: flex;
42  flex-direction: column;
43  padding: 20px;
44}
45
46.cart .steps .step {
47  display: grid;
48  gap: 10px;
49}
50
51.cart .steps .step span {
52  font-size: 13px;
53  font-weight: 600;
54  color: #000000;
55  margin-bottom: 8px;
56  display: block;
57}
58
59.cart .steps .step p {
60  font-size: 11px;
61  font-weight: 600;
62  color: #000000;
63}
64
65/* Promo */
66.promo form {
67  display: grid;
68  grid-template-columns: 1fr 80px;
69  gap: 10px;
70  padding: 0px;
71}
72
73.input_field {
74  width: auto;
75  height: 36px;
76  padding: 0 0 0 12px;
77  border-radius: 5px;
78  outline: none;
79  border: 1px solid  rgb(16, 86, 82);
80  background-color: rgb(251, 243, 228);
81  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
82}
83
84.input_field:focus {
85  border: 1px solid transparent;
86  box-shadow: 0px 0px 0px 2px rgb(251, 243, 228);
87  background-color: rgb(201, 193, 178);
88}
89
90.promo form button {
91  display: flex;
92  flex-direction: row;
93  justify-content: center;
94  align-items: center;
95  padding: 10px 18px;
96  gap: 10px;
97  width: 100%;
98  height: 36px;
99  background: rgba(16, 86, 82, .75);
100  box-shadow: 0px 0.5px 0.5px #F3D2C9, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
101  border-radius: 5px;
102  border: 0;
103  font-style: normal;
104  font-weight: 600;
105  font-size: 12px;
106  line-height: 15px;
107  color: #000000;
108}
109
110/* Checkout */
111.payments .details {
112  display: grid;
113  grid-template-columns: 10fr 1fr;
114  padding: 0px;
115  gap: 5px;
116}
117
118.payments .details span:nth-child(odd) {
119  font-size: 12px;
120  font-weight: 600;
121  color: #000000;
122  margin: auto auto auto 0;
123}
124
125.payments .details span:nth-child(even) {
126  font-size: 13px;
127  font-weight: 600;
128  color: #000000;
129  margin: auto 0 auto auto;
130}
131
132.checkout .footer {
133  display: flex;
134  align-items: center;
135  justify-content: space-between;
136  padding: 10px 10px 10px 20px;
137  background-color: rgba(16, 86, 82, .5);
138}
139
140.price {
141  position: relative;
142  font-size: 22px;
143  color: #2B2B2F;
144  font-weight: 900;
145}
146
147.checkout .checkout-btn {
148  display: flex;
149  flex-direction: row;
150  justify-content: center;
151  align-items: center;
152  width: 150px;
153  height: 36px;
154  background: rgba(16, 86, 82, .55);
155  box-shadow: 0px 0.5px 0.5px rgba(16, 86, 82, .75), 0px 1px 0.5px rgba(16, 86, 82, .75);
156  ;
157  border-radius: 7px;
158  border: 1px solid rgb(16, 86, 82);
159  ;
160  color: #000000;
161  font-size: 13px;
162  font-weight: 600;
163  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
164}
165
166