@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (155) hide show
  1. package/dist/add-existing-form.scss +68 -68
  2. package/dist/add-products-tab-details.scss +4071 -4071
  3. package/dist/add-products-tab-uom-details.scss +1106 -1106
  4. package/dist/add-products-tab.scss +2377 -2377
  5. package/dist/allocation-header-quota-details.scss +609 -609
  6. package/dist/allocations-quota-details.scss +525 -525
  7. package/dist/amount-estimator.scss +1192 -1192
  8. package/dist/animation-control.scss +23 -23
  9. package/dist/badge.scss +408 -408
  10. package/dist/brand-basic-elements.scss +387 -387
  11. package/dist/brand.scss +142 -142
  12. package/dist/breadcrumbs.scss +966 -966
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-order-pad.scss +692 -692
  15. package/dist/bundleCategories.scss +301 -301
  16. package/dist/bundleDetails.scss +6189 -6189
  17. package/dist/buy-for-tab-container.scss +141 -141
  18. package/dist/buy-for-tab.scss +649 -649
  19. package/dist/buy-for-tabs-container-item.scss +80 -80
  20. package/dist/buyForPopup.scss +339 -339
  21. package/dist/cart-details.scss +3986 -3986
  22. package/dist/cart-products-sidebar.scss +211 -211
  23. package/dist/cart-summary.scss +2826 -2826
  24. package/dist/cart-wrapper.scss +127 -127
  25. package/dist/cartAttributes.scss +1422 -1422
  26. package/dist/cartDropdownOverlay.scss +653 -653
  27. package/dist/cartGrouping.scss +89 -89
  28. package/dist/category-groups-element.scss +739 -739
  29. package/dist/category-groups-quota-details.scss +626 -626
  30. package/dist/category.scss +137 -137
  31. package/dist/categoryDetails.scss +61 -61
  32. package/dist/categoryWidget.scss +34 -34
  33. package/dist/checkbox-radio.scss +124 -124
  34. package/dist/code-temp.scss +59 -59
  35. package/dist/colorpicker_v2.scss +62 -62
  36. package/dist/common-element.scss +35 -35
  37. package/dist/confirm-modal.scss +370 -370
  38. package/dist/confirmationModal.scss +139 -139
  39. package/dist/contact-us.scss +105 -105
  40. package/dist/container.scss +168 -168
  41. package/dist/countdown.scss +899 -899
  42. package/dist/coupon.scss +1519 -1519
  43. package/dist/custom-fonts.scss +100 -100
  44. package/dist/customization-tree.scss +162 -162
  45. package/dist/default-dropdown.scss +259 -259
  46. package/dist/dropdownTemplate.scss +699 -699
  47. package/dist/editCartItem.scss +110 -110
  48. package/dist/embed-temp.scss +73 -73
  49. package/dist/embroider-preview-element.scss +94 -94
  50. package/dist/embroider-template-1-v2.scss +1105 -1105
  51. package/dist/embroider-template-1.scss +501 -501
  52. package/dist/embroidery.scss +247 -247
  53. package/dist/employee-bulk-order.scss +4060 -4060
  54. package/dist/emtpy-templates.scss +165 -165
  55. package/dist/faq.scss +696 -696
  56. package/dist/fb-dropdown.scss +135 -135
  57. package/dist/filter-results.scss +361 -361
  58. package/dist/filters.scss +3040 -3040
  59. package/dist/flex-text-editor.scss +271 -271
  60. package/dist/form-preview.scss +530 -530
  61. package/dist/gallery-slider-temp.scss +1776 -1776
  62. package/dist/global-styles.scss +198 -198
  63. package/dist/grid.scss +169 -169
  64. package/dist/icon-library.scss +78 -78
  65. package/dist/image-for-product.scss +21 -21
  66. package/dist/image-temp.scss +203 -203
  67. package/dist/item-stock.scss +93 -93
  68. package/dist/kitDetails.scss +5739 -5739
  69. package/dist/kits.scss +305 -305
  70. package/dist/language-selector.scss +948 -948
  71. package/dist/last-x-orders.scss +285 -285
  72. package/dist/layouter-item.scss +141 -141
  73. package/dist/layouter-pro-item.scss +139 -139
  74. package/dist/layouter-pro.scss +134 -134
  75. package/dist/layouter.scss +491 -491
  76. package/dist/light-box-v2.scss +155 -155
  77. package/dist/lightbox.scss +78 -78
  78. package/dist/loader.scss +37 -37
  79. package/dist/login.scss +29 -11
  80. package/dist/map.scss +1359 -1359
  81. package/dist/marchandiserSets.scss +141 -141
  82. package/dist/mega-menu-container.scss +152 -152
  83. package/dist/menu-item.scss +19 -19
  84. package/dist/menu-v2.scss +999 -999
  85. package/dist/menu.scss +174 -174
  86. package/dist/multi-select-dropdown.scss +316 -316
  87. package/dist/my-templates.scss +477 -477
  88. package/dist/my-wishlist.scss +27 -27
  89. package/dist/option-bar.scss +886 -886
  90. package/dist/order-processing.scss +61 -61
  91. package/dist/order-status.scss +2187 -2187
  92. package/dist/overflow-module.scss +63 -63
  93. package/dist/past-orders.scss +1039 -1039
  94. package/dist/payment-methods.scss +307 -307
  95. package/dist/phone-input.scss +208 -208
  96. package/dist/pickup-locations.scss +1359 -1359
  97. package/dist/position-module.scss +95 -95
  98. package/dist/prefix-list.scss +86 -86
  99. package/dist/product-actions.scss +2872 -2872
  100. package/dist/product-basic-elements.scss +600 -600
  101. package/dist/product-customizations.scss +155 -155
  102. package/dist/product-highlights.scss +348 -348
  103. package/dist/product-image-allocation.scss +1477 -1477
  104. package/dist/product-inventory.scss +1621 -1621
  105. package/dist/product-labels.scss +265 -265
  106. package/dist/product-options.scss +1444 -1444
  107. package/dist/product-price.scss +3392 -3392
  108. package/dist/product-promotions.scss +3224 -3224
  109. package/dist/product-sizechart.scss +1921 -1921
  110. package/dist/product.scss +140 -140
  111. package/dist/profile.scss +824 -824
  112. package/dist/quantity-selector.scss +1074 -1074
  113. package/dist/quick-inventory-check.scss +285 -285
  114. package/dist/quick-links.scss +627 -627
  115. package/dist/quota-details.scss +526 -526
  116. package/dist/quotes.scss +847 -847
  117. package/dist/repeater-embla-controls.scss +211 -211
  118. package/dist/repeater-grid-toggle.scss +206 -206
  119. package/dist/repeater-item.scss +152 -152
  120. package/dist/repeater.scss +946 -946
  121. package/dist/request-for-quotes.scss +841 -841
  122. package/dist/responsive-behaviour.scss +29 -29
  123. package/dist/rfqs.scss +861 -861
  124. package/dist/scroll.scss +414 -414
  125. package/dist/search-results-heading.scss +309 -309
  126. package/dist/search.scss +689 -689
  127. package/dist/section.scss +276 -276
  128. package/dist/shareCartSideBar.scss +254 -254
  129. package/dist/shipping-estimator.scss +41 -41
  130. package/dist/shipping-payments.scss +2518 -2518
  131. package/dist/simple-list.scss +338 -338
  132. package/dist/skeleton.scss +64 -64
  133. package/dist/spotlight.scss +1706 -1706
  134. package/dist/stack.scss +171 -171
  135. package/dist/static-global.scss +292 -292
  136. package/dist/static-text.scss +52 -52
  137. package/dist/stockStatus.scss +70 -70
  138. package/dist/store-locations.scss +1592 -1592
  139. package/dist/sub-category.scss +74 -74
  140. package/dist/submit-quote.scss +275 -275
  141. package/dist/tab-container-item.scss +80 -80
  142. package/dist/tab-container.scss +141 -141
  143. package/dist/table.scss +9 -0
  144. package/dist/tabs.scss +440 -440
  145. package/dist/text-temp.scss +109 -109
  146. package/dist/theme-classes.scss +421 -421
  147. package/dist/toaster.scss +392 -392
  148. package/dist/toggle-button.scss +32 -32
  149. package/dist/transform-properties-module.scss +20 -20
  150. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  151. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  152. package/dist/user-elements.scss +2896 -2896
  153. package/dist/widget.scss +153 -153
  154. package/dist/wishlist-overlay.scss +48 -48
  155. package/package.json +1 -1
package/dist/shipping-payments.scss CHANGED
@@ -1,2518 +1,2518 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $primary-color: var(--_primary-400);
6
- $secondary-color: var(--_gray-300);
7
- $light-color: #f5f5f5;
8
- $dark-color: #343a40;
9
-
10
- $activeElementSelector: "[data-has-clicked='true']";
11
- [data-div-type="element"] {
12
- &[data-element-type="shipping-payment"] {
13
- width: calc(
14
- 1% *
15
- var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
16
- );
17
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_ctm-lt-mn))));
18
- & > div {
19
- &.wrapper {
20
- width: 100%;
21
- min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
22
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
23
-
24
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
25
- background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
26
- background-attachment: var(
27
- --_ctm-mob-dn-bd-at,
28
- var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at))
29
- );
30
- background-position: var(
31
- --_ctm-mob-dn-bd-pn,
32
- var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn))
33
- );
34
- background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
35
- background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
36
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
37
- border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
38
- border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
39
- border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
40
- box-shadow: var(
41
- --_hover-show-shadow,
42
- var(
43
- --_sf-hr-bx-sw,
44
- var(
45
- --_show-shadow,
46
- var(
47
- --_ctm-mob-dn-dt-se-sw-ae,
48
- var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
49
- )
50
- var(
51
- --_ctm-mob-dn-dt-se-sw-br,
52
- var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
53
- )
54
- var(
55
- --_ctm-mob-dn-dt-se-sw-sd,
56
- var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
57
- )
58
- var(
59
- --_ctm-mob-dn-dt-se-sw-cr,
60
- var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
61
- )
62
- )
63
- )
64
- );
65
- }
66
-
67
- .chk_checkout_accordion {
68
- display: flex;
69
- padding: var(--_ctm-lt-pg);
70
- flex-direction: column;
71
- gap: 4px;
72
- word-break: keep-all;
73
- padding-bottom: 24px;
74
-
75
- .chk_checkout_title {
76
- color: var(--_gray-900);
77
- font-size: 24px;
78
- font-weight: 700;
79
- line-height: 32px;
80
- }
81
-
82
- .accordion {
83
- border-radius: 4px;
84
- display: flex;
85
- // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
86
- flex-direction: column;
87
- transition: max-height 800ms ease-in;
88
- &.open {
89
- transition: max-height 800ms ease-in;
90
- .accordion-header {
91
- background-color: var(--_gray-200);
92
- }
93
- .accordion-body {
94
- transition: max-height 800ms ease-in;
95
- max-height: 2000px;
96
- padding-block: 12px 24px;
97
- .shipping-address {
98
- max-height: fit-content;
99
- transition: max-height 800ms ease-in;
100
- }
101
- }
102
- }
103
-
104
- // accordion heaer
105
- .accordion-header {
106
- padding: 12px;
107
- display: flex;
108
- justify-content: space-between;
109
- align-items: center;
110
- cursor: pointer;
111
- background-color: #f5f5f5;
112
- border-color: #f5f5f5;
113
- border-radius: 4px;
114
- height: 55px;
115
-
116
- .accordion-title {
117
- margin-right: 1rem;
118
- white-space: nowrap;
119
- display: flex;
120
- align-items: center;
121
- gap: 12px;
122
- font-size: 16px;
123
- font-weight: 600;
124
- line-height: 24px;
125
-
126
- span {
127
- display: flex;
128
- }
129
- }
130
- .edit-btn {
131
- cursor: pointer;
132
- color: var(--_primary-400);
133
-
134
- &:hover {
135
- color: var(--_primary-500);
136
- }
137
- }
138
- }
139
-
140
- // accordion body
141
- .accordion-body {
142
- transition: max-height 800ms ease-in;
143
-
144
- max-height: 0px;
145
- overflow: hidden;
146
- padding: 0;
147
- // shipping address
148
- .shipping-address {
149
- transition: max-height 800ms ease-in;
150
- max-height: 0;
151
- display: flex;
152
- flex-direction: column;
153
- gap: 16px;
154
-
155
- .btn_link {
156
- color: var(--_primary-400);
157
- &:hover {
158
- text-decoration: underline;
159
- }
160
- }
161
-
162
- .chk_saved_address_button {
163
- cursor: pointer;
164
- border-radius: 6px;
165
- color: var(--_primary-400);
166
- display: flex;
167
- align-items: center;
168
- gap: 4px;
169
- }
170
-
171
- .shipping_address_container {
172
- display: flex;
173
- flex-direction: column;
174
- gap: 24px;
175
- max-width: 485px;
176
- }
177
-
178
- .shipping_address_heading_container {
179
- display: flex;
180
- justify-content: space-between;
181
- align-items: center;
182
- font-weight: 600;
183
- color: var(--_gray-900);
184
- .icon {
185
- display: flex;
186
- align-items: center;
187
- cursor: pointer;
188
- }
189
- }
190
-
191
- form {
192
- display: flex;
193
- flex-direction: column;
194
- gap: 0.75rem;
195
- // max-width: 85%;
196
-
197
- @media (max-width: 500px) {
198
- max-width: 100%;
199
- }
200
- }
201
-
202
- .chk_shipping_address_form_group {
203
- display: flex;
204
- justify-content: space-between;
205
- flex-direction: row;
206
- gap: 12px;
207
- }
208
-
209
- .chk_shipping_address_input_container {
210
- display: flex;
211
- width: 100%;
212
- }
213
-
214
- .chk_shipping_address_input_wrapper {
215
- display: flex;
216
- flex-direction: column;
217
- gap: 16px;
218
- width: 100%;
219
- }
220
-
221
- .chk_shipping_address_form_label {
222
- color: var(--_gray-600);
223
- font-size: 14px;
224
- padding-bottom: 6px;
225
- }
226
-
227
- .chk_shiping_address_form_input {
228
- padding: 8px 12px;
229
- width: -webkit-fill-available;
230
- background-color: var(--_base-white);
231
- color: var(--_gray-600);
232
- border: 1px solid var(--_gray-300);
233
- border-radius: 6px;
234
- height: 40px;
235
-
236
- &:focus-within {
237
- border: 1px solid var(--_primary-300);
238
- outline: 2px solid var(--_primary-100);
239
- }
240
- }
241
-
242
- input[type="checkbox"] {
243
- width: auto;
244
- }
245
-
246
- .error-msg {
247
- font-size: 12px;
248
- color: #ff0000;
249
- }
250
- label {
251
- display: flex;
252
- align-items: center;
253
- gap: 0.5rem;
254
- font-size: 14px;
255
- }
256
-
257
- .checkbox-group {
258
- display: flex;
259
- align-items: center;
260
- justify-content: start;
261
- gap: 8px;
262
- }
263
-
264
- .chk_shipping_address_use_as_billing_address_chkbx {
265
- display: flex;
266
- align-items: center;
267
- gap: 0.5rem;
268
- color: var(--_gray-600);
269
- font-size: 14px;
270
-
271
- .custom-checkbox {
272
- width: 20px;
273
- height: 20px;
274
- border: 1px solid #d0d5dd;
275
- border-radius: 4px;
276
- position: relative;
277
- background-color: #fff;
278
- transition: all 0.2s ease;
279
-
280
- &::after {
281
- content: "";
282
- position: absolute;
283
- display: none;
284
- left: 5px;
285
- top: 0.5px;
286
- width: 5px;
287
- height: 10px;
288
- border: solid #fff;
289
- border-width: 0 2px 2px 0;
290
- transform: rotate(45deg);
291
- }
292
- }
293
- }
294
-
295
- input[type="checkbox"]:checked + label {
296
- .custom-checkbox {
297
- background-color: #004dff;
298
- border-color: #004dff;
299
-
300
- &::after {
301
- display: block;
302
- }
303
- }
304
- }
305
- }
306
-
307
- .summary {
308
- .chk_shipping_method_label {
309
- display: flex;
310
- align-items: center;
311
- gap: 4px;
312
- color: var(--_gray-500);
313
- }
314
-
315
- .chk_shipping_method_heading {
316
- color: var(--_gray-500);
317
- font-weight: 600;
318
- }
319
- }
320
-
321
- .chk_multi_address {
322
- display: flex;
323
- flex-direction: column;
324
- width: 100%;
325
- gap: 48px;
326
-
327
- &_product_container {
328
- display: flex;
329
- flex-direction: column;
330
- gap: 16px;
331
- width: 100%;
332
- }
333
-
334
- &_product_info_container {
335
- display: flex;
336
- flex-direction: row;
337
- justify-content: space-between;
338
- align-items: flex-start;
339
- width: 100%;
340
-
341
- @media (max-width: 500px) {
342
- flex-direction: column;
343
- }
344
- }
345
-
346
- &_product_left_container {
347
- display: flex;
348
- flex: 1 0 0;
349
- width: 100%;
350
- gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
351
- }
352
-
353
- &_product_image {
354
- height: var(--_ctm-lt-me-as-pt-ie-ht);
355
- width: var(--_ctm-lt-me-as-pt-ie-wh);
356
- border: 1px solid var(--_gray-100);
357
- border-radius: 6px;
358
- }
359
-
360
- &_product_info_wrapper {
361
- display: flex;
362
- flex-direction: column;
363
- gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4);
364
-
365
- .chk_multi_address_product_name {
366
- color: var(--_gray-900);
367
- font-size: 18px;
368
- font-weight: 700;
369
- line-height: 28px;
370
- }
371
-
372
- .chk_multi_address_product_info {
373
- color: var(--_gray-600);
374
- font-size: 14px;
375
- list-style: 20px;
376
- }
377
- }
378
-
379
- &_product_right_container {
380
- display: flex;
381
- flex-direction: row;
382
- gap: 30px;
383
- align-items: center;
384
-
385
- @media (max-width: 500px) {
386
- align-self: flex-end;
387
- }
388
-
389
- .chk_multi_address_product_price {
390
- color: var(--_gray-900);
391
- font-size: 20px;
392
- font-weight: 700;
393
- }
394
- }
395
-
396
- &_qty_wrapper {
397
- display: flex;
398
- flex-direction: row;
399
- align-items: center;
400
- gap: 4px;
401
-
402
- .chk_multi_address_product_info {
403
- color: var(--_gray-600);
404
- font-size: 12px;
405
- line-height: 18px;
406
- }
407
-
408
- .chk_multi_address_product_qty {
409
- color: var(--_gray-900);
410
- font-size: 12px;
411
- font-weight: 700;
412
- }
413
- }
414
-
415
- &_shipping_option_container {
416
- display: flex;
417
- flex-direction: column;
418
- gap: 6px;
419
-
420
- @media (max-width: 500px) {
421
- flex-direction: row;
422
- }
423
- }
424
-
425
- &_shiping_option_heading_wrapper {
426
- display: grid;
427
- grid-template-columns: 0.5fr 2fr 2fr 20px;
428
- gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
429
- white-space: nowrap;
430
- align-items: center;
431
-
432
- @media (max-width: 500px) {
433
- grid-template-columns: auto;
434
- }
435
-
436
- .chk_multi_address_product_label {
437
- color: var(--_gray-600);
438
- font-size: 12px;
439
- }
440
- }
441
-
442
- .chk_multi_address_icon {
443
- svg {
444
- width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
445
- height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
446
- path {
447
- stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
448
- // Overrides the stroke-width presentation attribute baked into the icon markup.
449
- stroke-width: prepareMediaVariable(--_ctm-dn-me-sg-as-dn-dd-in-se-wh, 1.25);
450
- }
451
- }
452
- &:hover {
453
- cursor: pointer;
454
- svg {
455
- path {
456
- stroke: var(--_error-700);
457
- }
458
- }
459
- }
460
- }
461
- .chk_shiping_address_form_input {
462
- padding: 8px 12px;
463
- width: -webkit-fill-available;
464
- border: 1px solid var(--_gray-300);
465
- border-radius: 6px;
466
- height: 40px;
467
- background-color: var(--_base-white);
468
-
469
- &:focus-within {
470
- border: 1px solid var(--_primary-300);
471
- outline: 2px solid var(--_primary-100);
472
- }
473
-
474
- .custom-arrows {
475
- position: absolute;
476
- right: 6px;
477
- top: 50%;
478
- transform: translateY(-50%);
479
- display: flex;
480
- flex-direction: column;
481
-
482
- .arrow {
483
- all: unset;
484
- cursor: pointer;
485
- font-size: 10px;
486
- line-height: 1;
487
- }
488
- }
489
-
490
- // .input-field {
491
- // padding: 8px 12px;
492
- // width: -webkit-fill-available;
493
- // border: 1px solid var(--_gray-300);
494
- // border-radius: 6px;
495
- // height: 40px;
496
- // background-color: var(--_base-white);
497
-
498
- // &:focus-within {
499
- // border: 1px solid var(--_primary-300);
500
- // outline: 2px solid var(--_primary-100);
501
- // }
502
- // }
503
- }
504
- }
505
-
506
- .shipping-method {
507
- display: flex;
508
- flex-direction: column;
509
- gap: var(--_ctm-lt-sg-md-le-gp);
510
-
511
- &__grid {
512
- display: grid;
513
- grid-template-columns: 1fr;
514
- gap: var(--_ctm-lt-sg-md-le-gp);
515
-
516
- @media (min-width: 768px) {
517
- grid-template-columns: 1fr 1fr;
518
- gap: 32px;
519
- }
520
- }
521
-
522
- &__group {
523
- display: flex;
524
- flex-direction: column;
525
- gap: 8px;
526
-
527
- .chk_shipping_method_heading {
528
- color: var(--_gray-700);
529
- font-weight: 700;
530
- font-size: 16px;
531
- }
532
- }
533
-
534
- &__options {
535
- display: flex;
536
- flex-direction: column;
537
- gap: 12px;
538
- }
539
-
540
- &__option {
541
- display: flex;
542
- align-items: center;
543
- cursor: pointer;
544
- transition: all 0.2s ease;
545
-
546
- .custom_radio {
547
- width: 20px;
548
- margin-right: 12px;
549
- height: 20px;
550
- border: 1px solid transparent; /* blue ring */
551
- border-radius: 50%;
552
- display: inline-block;
553
- box-sizing: border-box;
554
- background-color: white;
555
- transition: all 0.2s ease;
556
-
557
- input[type="radio"]:checked + .radio-style {
558
- background-color: var(--_thm-py-bs-dt-se-bd-cr);
559
- border: 6px solid;
560
- }
561
- }
562
-
563
- .chk_shipping_method_label {
564
- color: var(--_gray-600);
565
- font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
566
- font-size: 14px;
567
- font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
568
- font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
569
- line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
570
- letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
571
- text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
572
- }
573
-
574
- .chk_shipping_method_value {
575
- color: var(--_gray-900);
576
- font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
577
- text-transform: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-tt-tm);
578
- word-wrap: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-wp);
579
- word-break: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-bk);
580
- font-size: 14px;
581
- font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
582
- font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
583
- line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht);
584
- letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-lr-sg);
585
- text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ue);
586
- }
587
-
588
- // input[type="radio"] {
589
- // margin-right: 12px;
590
- // width: 16px;
591
- // height: 16px;
592
- // accent-color: #2563eb;
593
- // cursor: pointer;
594
- // // display: none;
595
- // }
596
-
597
- .custom_radio {
598
- position: relative;
599
- input[type="radio"] {
600
- margin-right: 12px;
601
- width: 16px;
602
- height: 16px;
603
- accent-color: #2563eb;
604
- cursor: pointer;
605
- display: none;
606
- }
607
- .radio-style {
608
- width: 20px;
609
- height: 20px;
610
- border-radius: 50%;
611
- border: 1px solid #d0d5dd;
612
- background: white;
613
- display: inline-block;
614
- box-sizing: border-box;
615
- transition: all 0.2s;
616
- }
617
- input[type="radio"]:checked + .radio-style {
618
- background-color: var(--_base-white);
619
- border: 5px solid var(--_thm-py-bs-dt-se-br-cr);
620
- }
621
- }
622
-
623
- &.selected {
624
- background-color: var(--_base-white);
625
- border-color: var(--_thm-py-bs-dt-se-br-cr);
626
- }
627
- }
628
-
629
- // order level shipping
630
- .order_level_shipping {
631
- display: flex;
632
- gap: 24px;
633
- .order_level_shipping_img {
634
- width: 120px;
635
- height: 120px;
636
- background-color: var(--_gray-100);
637
- border-radius: 6px;
638
- }
639
- }
640
- }
641
-
642
- // payment options
643
- .chk_payment-options {
644
- display: flex;
645
- flex-direction: column;
646
- gap: var(--_ctm-lt-pt-os-gp-bn-cs);
647
- .gift_crd_chk_payment_option {
648
- border: 1px solid var(--_gray-300);
649
- border-radius: 4px;
650
- margin-bottom: 12px;
651
- .add_gift_card {
652
- display: flex;
653
- gap: 12px;
654
- padding: 16px;
655
-
656
- .gc_icon {
657
- svg {
658
- width: 18px;
659
- height: 14px;
660
- }
661
- }
662
-
663
- .gc_info {
664
- display: flex;
665
- justify-content: space-between;
666
- width: 100%;
667
- gap: 6px;
668
-
669
- .gc_title {
670
- font-size: 14px;
671
- font-weight: 600;
672
- }
673
- }
674
- .gc_tertiary_btn {
675
- color: var(--_primary-400);
676
-
677
- &:hover {
678
- color: var(--_primary-500);
679
- text-decoration: underline;
680
- }
681
- }
682
- }
683
- .chk_gft_crd_wrapper {
684
- display: flex;
685
- justify-content: space-between;
686
- align-items: center;
687
- padding: 16px;
688
- & > button {
689
- color: var(--_primary-400);
690
- &:hover {
691
- text-decoration: underline;
692
- }
693
- }
694
- &_item {
695
- display: flex;
696
- align-items: center;
697
- gap: 16px;
698
- &_icon {
699
- width: 40px;
700
- height: 40px;
701
- border: 1px solid var(--_gray-200);
702
- border-radius: 6px;
703
- display: flex;
704
- justify-content: center;
705
- align-items: center;
706
- }
707
- &_info {
708
- display: flex;
709
- flex-direction: column;
710
- &_title {
711
- font-size: 14px;
712
- margin-bottom: 4px;
713
- font-weight: 600;
714
- }
715
- &_desc {
716
- display: flex;
717
- &_value {
718
- font-size: 12px;
719
- color: var(--_gray-600);
720
- }
721
- &_label {
722
- font-size: 12px;
723
- color: var(--_gray-900);
724
- }
725
- }
726
- }
727
- &_pin {
728
- margin-left: 36px;
729
- input[type="number"] {
730
- border: 1px solid var(--_gray-300);
731
- border-radius: 4px;
732
- background-color: var(--_base-white);
733
- width: 95px;
734
- height: 44px;
735
- padding-inline: 10px;
736
- &:disabled {
737
- opacity: 0.8;
738
- cursor: not-allowed;
739
- }
740
- &:focus {
741
- outline: 2px solid var(--_primary-100);
742
- border: 1px solid var(--_primary-300);
743
- }
744
- }
745
- }
746
- }
747
-
748
- &_input {
749
- border: 1px solid var(--_gray-300);
750
- border-radius: 4px;
751
- background-color: var(--_base-white);
752
- height: 44px;
753
- width: 120px;
754
- display: flex;
755
- align-items: center;
756
- gap: 8px;
757
- padding-left: 10px;
758
- input[type="number"] {
759
- background-color: var(--_base-white);
760
- padding-right: 10px;
761
- &:disabled {
762
- opacity: 0.8;
763
- cursor: not-allowed;
764
- }
765
- }
766
- &:focus-within {
767
- outline: 2px solid var(--_primary-100);
768
- border: 1px solid var(--_primary-300);
769
- }
770
- }
771
- }
772
- }
773
- .payment_program {
774
- // padding: 0 12px;
775
- .payment_program_header {
776
- display: flex;
777
- justify-content: space-between;
778
- gap: 8px;
779
- align-items: center;
780
-
781
- margin-bottom: 16px;
782
-
783
- .payment_program_header_label {
784
- display: flex;
785
- justify-content: space-between;
786
- align-items: center;
787
- &_title {
788
- font-size: 14px;
789
- font-weight: 600;
790
- color: var(--_gray-600);
791
- }
792
- .payment_program_header_pds {
793
- &_label {
794
- font-size: 14px;
795
- color: var(--_gray-600);
796
- }
797
- &_value {
798
- font-size: 14px;
799
- color: var(--_gray-900);
800
- }
801
- }
802
- }
803
- }
804
- }
805
-
806
- .chk_payment_option_wrapper {
807
- display: flex;
808
- flex-direction: column;
809
- border: 1px solid var(--_gray-300);
810
- margin-bottom: 12px;
811
- border-radius: 4px;
812
- overflow: hidden;
813
-
814
- .pp_pmnt_method_groups {
815
- .pp_ppm_section {
816
- background: var(---base-white);
817
- border-bottom: 1px solid var(--_gray-300);
818
- padding: 12px 16px;
819
- font-size: 12px;
820
- display: flex;
821
- justify-content: space-between;
822
- gap: 8px;
823
- &:not(:first-child) {
824
- border-top: 1px solid var(--_gray-200);
825
- }
826
- .pp_ppm_section_label {
827
- font-size: 14px;
828
- font-weight: 700;
829
- color: var(--_gray-900);
830
- }
831
- .pp_ppm_section_value {
832
- font-size: 14px;
833
- font-weight: 700;
834
- color: var(--_gray-600);
835
- .pp_ppm_section_value_lable {
836
- font-weight: 500;
837
- color: var(--_gray-500);
838
- }
839
- }
840
- }
841
- .payment_methods {
842
- // padding: 12px;
843
- display: grid;
844
- gap: 8px;
845
- // .chk_payment_option {
846
- // .chk_payment_options_heading {
847
- // padding: 16px;
848
- // display: flex;
849
- // justify-content: space-between;
850
- // }
851
- // .chk_payment_section {
852
- // width: 100%;
853
- // display: flex;
854
- // justify-content: space-between;
855
- // padding: 16px;
856
-
857
- // .chk_payment_section {
858
- // display: flex;
859
- // justify-content: space-between;
860
- // align-items: center;
861
- // width: 100%;
862
- // .chk_payment_section_col_left {
863
- // display: flex;
864
- // gap: 12px;
865
- // svg {
866
- // width: 24px;
867
- // height: 24px;
868
- // }
869
- // .chk_payment_section_method {
870
- // display: flex;
871
- // flex-direction: column;
872
- // .chk_payment_section_method_name {
873
- // font-size: 14px;
874
- // font-weight: 700;
875
- // line-height: 20px;
876
- // color: var(--_gray-700);
877
- // }
878
- // & > div {
879
- // display: flex;
880
- // .label {
881
- // font-size: 12px;
882
- // color: var(--_gray-500);
883
- // }
884
- // .price {
885
- // font-size: 12px;
886
- // color: var(--_gray-900);
887
- // }
888
- // }
889
- // }
890
- // }
891
- // &_col_right {
892
- // .chk_currency_inp {
893
- // height: 44px;
894
- // border: 1px solid var(--_gray-200);
895
- // border-radius: 4px;
896
- // background-color: var(--_base-white);
897
- // display: flex;
898
- // width: 120px;
899
- // overflow: hidden;
900
- // align-items: center;
901
- // padding-inline: 12px;
902
- // gap: 12px;
903
- // &:focus-within {
904
- // border: 1px solid var(--_primary-200);
905
- // outline: 2px solid var(--_primary-50);
906
- // }
907
- // input {
908
- // height: inherit;
909
- // &:disabled {
910
- // opacity: 0.8;
911
- // cursor: not-allowed;
912
- // }
913
- // }
914
- // }
915
- // }
916
- // }
917
-
918
- // .chk_payment_options_heading {
919
- // color: var(--_gray-900);
920
- // font-size: 16px;
921
- // font-weight: 700;
922
- // }
923
-
924
- // // gift card styles
925
-
926
- // // payment other options styles
927
- // .chk_pmnt_other_options {
928
- // display: flex;
929
- // justify-content: space-between;
930
- // gap: 80px;
931
- // padding: 16px;
932
- // .chk_pmnt_other_options_left_container {
933
- // display: flex;
934
- // gap: 12px;
935
- // .chk_pmnt_option_info_wrapper {
936
- // display: flex;
937
- // gap: 12px;
938
- // .cards {
939
- // display: flex;
940
- // flex-direction: column;
941
- // gap: 8px;
942
- // .chk_payment_options_name {
943
- // font-weight: 600;
944
- // }
945
- // span {
946
- // font-size: 12px;
947
- // .chk_payment_options_label {
948
- // color: var(--_gray-600);
949
- // }
950
- // .chk_payment_options_value {
951
- // color: var(--_gray-900);
952
- // }
953
- // }
954
- // }
955
- // }
956
- // }
957
- // .chk_pmnt_other_options_container {
958
- // padding: 16px;
959
- // }
960
- // }
961
-
962
- // &__other_option_wrapper {
963
- // display: flex;
964
- // width: 100%;
965
- // justify-content: space-between;
966
- // padding: 16px;
967
-
968
- // @media (max-width: 500px) {
969
- // flex-direction: column;
970
- // }
971
- // }
972
-
973
- // &_left_container {
974
- // display: flex;
975
- // gap: 12px;
976
- // align-items: flex-start;
977
- // .chk_payment_option__info_wrapper {
978
- // display: flex;
979
- // gap: 0px;
980
- // }
981
-
982
- // @media (max-width: 500px) {
983
- // flex-wrap: wrap;
984
- // }
985
- // }
986
-
987
- // &__left_wrapper {
988
- // display: flex;
989
- // flex-direction: column;
990
- // align-items: flex-start;
991
- // gap: 16px;
992
- // }
993
-
994
- // &__card_icon {
995
- // width: 60px;
996
- // height: 40px;
997
- // }
998
-
999
- // &__info_wrapper {
1000
- // display: flex;
1001
- // flex-direction: column;
1002
-
1003
- // .chk_payment_options_name {
1004
- // color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1005
- // font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1006
- // font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1007
- // font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1008
- // font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1009
- // line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1010
- // letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1011
- // text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1012
- // }
1013
-
1014
- // .chk_payment_options_label {
1015
- // color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1016
- // font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1017
- // font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1018
- // font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1019
- // font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1020
- // line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1021
- // letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1022
- // text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1023
- // }
1024
-
1025
- // .chk_payment_options_value {
1026
- // color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1027
- // font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1028
- // font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1029
- // font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1030
- // font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1031
- // line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1032
- // letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1033
- // text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1034
- // }
1035
- // }
1036
-
1037
- // &_right_container {
1038
- // display: flex;
1039
- // gap: 6px;
1040
- // align-items: flex-start;
1041
-
1042
- // @media (max-width: 500px) {
1043
- // justify-content: flex-end;
1044
- // }
1045
- // }
1046
-
1047
- // &_input {
1048
- // display: flex;
1049
- // padding: 9px 12px;
1050
- // align-items: center;
1051
- // max-width: 96px;
1052
- // background-color: var(--_base-white);
1053
- // border: 1px solid var(--_gray-300);
1054
- // border-radius: 6px;
1055
- // color: var(--_gray-700);
1056
-
1057
- // &:focus-within {
1058
- // border: 1px solid var(--_primary-300);
1059
- // outline: 2px solid var(--_primary-100);
1060
- // }
1061
-
1062
- // .icon {
1063
- // svg {
1064
- // path {
1065
- // stroke: var(--_primary-400);
1066
- // }
1067
- // }
1068
- // }
1069
-
1070
- // .input_field {
1071
- // background-color: var(--_base-white);
1072
- // border: 1px solid var(--_gray-300);
1073
- // border-radius: 6px;
1074
- // color: var(--_gray-700);
1075
-
1076
- // &:focus-within {
1077
- // border: 1px solid var(--_primary-300);
1078
- // outline: 2px solid var(--_primary-100);
1079
- // }
1080
- // }
1081
- // }
1082
- // }
1083
- // }
1084
- .chk_payment_section {
1085
- display: flex;
1086
- justify-content: space-between;
1087
- align-items: center;
1088
- width: 100%;
1089
- padding: 16px;
1090
- .chk_payment_section_col_left {
1091
- display: flex;
1092
- gap: 12px;
1093
- svg {
1094
- width: 24px;
1095
- height: 24px;
1096
- }
1097
- .chk_payment_section_method {
1098
- display: flex;
1099
- flex-direction: column;
1100
- gap: 12px;
1101
- .chk_payment_section_method_name {
1102
- font-size: 14px;
1103
- font-weight: 700;
1104
- line-height: 20px;
1105
- color: var(--_gray-700);
1106
- }
1107
- .po-container {
1108
- .po-grid {
1109
- display: flex;
1110
- gap: 8px;
1111
- & > div {
1112
- border: 1px solid var(--_gray-300);
1113
- background-color: var(--_base-white);
1114
- border-radius: 4px;
1115
- width: 90px;
1116
- height: 28px;
1117
- overflow: hidden;
1118
- input {
1119
- padding-inline: 10px;
1120
- height: 100%;
1121
- }
1122
- }
1123
- }
1124
- }
1125
- & > div {
1126
- display: flex;
1127
- gap: 16px;
1128
- .label {
1129
- font-size: 12px;
1130
- color: var(--_gray-500);
1131
- }
1132
- .price {
1133
- font-size: 12px;
1134
- color: var(--_gray-900);
1135
- }
1136
- }
1137
- }
1138
- }
1139
- &_col_right {
1140
- .chk_currency_inp_sec {
1141
- display: flex;
1142
- justify-content: end;
1143
- .chk_currency_inp {
1144
- height: 44px;
1145
- border: 1px solid var(--_gray-200);
1146
- border-radius: 4px;
1147
- background-color: var(--_base-white);
1148
- display: flex;
1149
- width: 120px;
1150
- overflow: hidden;
1151
- align-items: center;
1152
- padding-inline: 12px;
1153
- gap: 12px;
1154
- &:focus-within {
1155
- border: 1px solid var(--_primary-200);
1156
- outline: 2px solid var(--_primary-50);
1157
- }
1158
- input {
1159
- height: inherit;
1160
- &:disabled {
1161
- opacity: 0.8;
1162
- cursor: not-allowed;
1163
- }
1164
- }
1165
- }
1166
- }
1167
- .cur_conversion {
1168
- font-size: 12px;
1169
- }
1170
- }
1171
-
1172
- .chk_payment_options_heading {
1173
- color: var(--_gray-900);
1174
- font-size: 16px;
1175
- font-weight: 700;
1176
- }
1177
-
1178
- // gift card styles
1179
-
1180
- // payment other options styles
1181
- .chk_pmnt_other_options {
1182
- display: flex;
1183
- justify-content: space-between;
1184
- gap: 80px;
1185
- padding: 16px;
1186
- .chk_pmnt_other_options_left_container {
1187
- display: flex;
1188
- gap: 12px;
1189
- .chk_pmnt_option_info_wrapper {
1190
- display: flex;
1191
- gap: 12px;
1192
- .cards {
1193
- display: flex;
1194
- flex-direction: column;
1195
- gap: 8px;
1196
- .chk_payment_options_name {
1197
- font-weight: 600;
1198
- }
1199
- span {
1200
- font-size: 12px;
1201
- .chk_payment_options_label {
1202
- color: var(--_gray-600);
1203
- }
1204
- .chk_payment_options_value {
1205
- color: var(--_gray-900);
1206
- }
1207
- }
1208
- }
1209
- }
1210
- }
1211
- .chk_pmnt_other_options_container {
1212
- padding: 16px;
1213
- }
1214
- }
1215
-
1216
- &__other_option_wrapper {
1217
- display: flex;
1218
- width: 100%;
1219
- justify-content: space-between;
1220
- padding: 16px;
1221
-
1222
- @media (max-width: 500px) {
1223
- flex-direction: column;
1224
- }
1225
- }
1226
-
1227
- &_left_container {
1228
- display: flex;
1229
- gap: 12px;
1230
- align-items: flex-start;
1231
- .chk_payment_option__info_wrapper {
1232
- display: flex;
1233
- gap: 0px;
1234
- }
1235
-
1236
- @media (max-width: 500px) {
1237
- flex-wrap: wrap;
1238
- }
1239
- }
1240
-
1241
- &__left_wrapper {
1242
- display: flex;
1243
- flex-direction: column;
1244
- align-items: flex-start;
1245
- gap: 16px;
1246
- }
1247
-
1248
- &__card_icon {
1249
- width: 60px;
1250
- height: 40px;
1251
- }
1252
-
1253
- &__info_wrapper {
1254
- display: flex;
1255
- flex-direction: column;
1256
-
1257
- .chk_payment_options_name {
1258
- color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1259
- font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1260
- text-transform: var(--_ctm-dn-pt-os-dn-pt-ne-dn-tt-tm);
1261
- word-wrap: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-wp);
1262
- word-break: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-bk);
1263
- font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1264
- font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1265
- font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1266
- line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1267
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1268
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1269
- }
1270
-
1271
- .chk_payment_options_label {
1272
- color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1273
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1274
- text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm);
1275
- word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp);
1276
- word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk);
1277
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1278
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1279
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1280
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1281
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1282
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1283
- }
1284
-
1285
- .chk_payment_options_value {
1286
- color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1287
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1288
- text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm);
1289
- word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp);
1290
- word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk);
1291
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1292
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1293
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1294
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1295
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1296
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1297
- }
1298
- }
1299
-
1300
- &_right_container {
1301
- display: flex;
1302
- gap: 6px;
1303
- align-items: flex-start;
1304
-
1305
- @media (max-width: 500px) {
1306
- justify-content: flex-end;
1307
- }
1308
- }
1309
-
1310
- &_input {
1311
- display: flex;
1312
- padding: 9px 12px;
1313
- align-items: center;
1314
- max-width: 96px;
1315
- background-color: var(--_base-white);
1316
- border: 1px solid var(--_gray-300);
1317
- border-radius: 6px;
1318
- color: var(--_gray-700);
1319
-
1320
- &:focus-within {
1321
- border: 1px solid var(--_primary-300);
1322
- outline: 2px solid var(--_primary-100);
1323
- }
1324
-
1325
- .icon {
1326
- svg {
1327
- path {
1328
- stroke: var(--_primary-400);
1329
- }
1330
- }
1331
- }
1332
-
1333
- .input_field {
1334
- background-color: var(--_base-white);
1335
- border: 1px solid var(--_gray-300);
1336
- border-radius: 6px;
1337
- color: var(--_gray-700);
1338
-
1339
- &:focus-within {
1340
- border: 1px solid var(--_primary-300);
1341
- outline: 2px solid var(--_primary-100);
1342
- }
1343
- }
1344
- }
1345
- }
1346
- .add_new_credit_card {
1347
- padding: 16px 16px 0px 16px;
1348
- display: flex;
1349
- justify-content: space-between;
1350
- .cc_tertiary_btn {
1351
- color: var(--_primary-400);
1352
- &:hover {
1353
- text-decoration: underline;
1354
- }
1355
- }
1356
- }
1357
-
1358
- .chk_payment_cred_section {
1359
- display: flex;
1360
- justify-content: space-between;
1361
- align-items: center;
1362
- padding: 16px 16px 8px 16px;
1363
-
1364
- .chk_currency_inp {
1365
- height: 44px;
1366
- border: 1px solid var(--_gray-200);
1367
- border-radius: 4px;
1368
- background-color: var(--_base-white);
1369
- display: flex;
1370
- width: 120px;
1371
- overflow: hidden;
1372
- align-items: center;
1373
- padding-inline: 12px;
1374
- gap: 12px;
1375
- &:focus-within {
1376
- border: 1px solid var(--_primary-200);
1377
- outline: 2px solid var(--_primary-50);
1378
- }
1379
- input {
1380
- height: inherit;
1381
- }
1382
- }
1383
- .chk_payment_cred_section_col_left {
1384
- .chk_payment_cred_section_col_left_crd_details {
1385
- display: flex;
1386
- gap: 80px;
1387
- align-items: center;
1388
- & > div {
1389
- display: flex;
1390
- gap: 12px;
1391
- .card_icon {
1392
- width: 60px;
1393
- height: 40px;
1394
- border-radius: 4px;
1395
- }
1396
- .card_details {
1397
- .card_details_num {
1398
- font-size: 12px;
1399
- font-weight: 600;
1400
- color: var(--_gray-900);
1401
- }
1402
- & > div {
1403
- display: flex;
1404
- .card_details_label {
1405
- font-size: 12px;
1406
- color: var(--_gray-500);
1407
- }
1408
- .card_details_value {
1409
- font-size: 12px;
1410
- color: var(--_gray-900);
1411
- }
1412
- }
1413
- }
1414
- }
1415
- }
1416
- }
1417
- }
1418
-
1419
- .chk_payment_remove_card {
1420
- padding-inline: 16px;
1421
- margin-bottom: 16px;
1422
- .error_msg {
1423
- font-size: 12px;
1424
- color: var(--_error-700);
1425
- }
1426
- }
1427
- }
1428
- }
1429
- }
1430
-
1431
- .chk_billing_address {
1432
- width: 100%;
1433
- display: flex;
1434
- flex-direction: column;
1435
- background-color: var(--_base-white);
1436
- box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1437
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1438
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1439
- var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
1440
-
1441
- &_form_container {
1442
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1443
- padding-top: 24px;
1444
- display: flex;
1445
- flex-direction: column;
1446
- gap: 24px;
1447
- }
1448
-
1449
- .chk_payment_options_heading {
1450
- font-size: 16px;
1451
- color: var(--_gray-900);
1452
- font-weight: 600;
1453
- &.pl_0 {
1454
- padding-left: 0px;
1455
- }
1456
- }
1457
-
1458
- &_form_wrapper {
1459
- display: flex;
1460
- flex-direction: column;
1461
- gap: 24px;
1462
- border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1463
- }
1464
-
1465
- .shipping_address_container {
1466
- display: flex;
1467
- flex-direction: column;
1468
- gap: 24px;
1469
- }
1470
-
1471
- .shipping_address_heading_container {
1472
- display: flex;
1473
- justify-content: space-between;
1474
- align-items: center;
1475
-
1476
- .chk_heading_info {
1477
- color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
1478
- font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
1479
- text-transform: var(--_ctm-dn-sg-md-dn-hg-dn-tt-tm);
1480
- word-wrap: var(--_ctm-dn-sg-md-dn-hg-dn-wd-wp);
1481
- word-break: var(--_ctm-dn-sg-md-dn-hg-dn-wd-bk);
1482
- font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
1483
- font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
1484
- font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
1485
- line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
1486
- letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
1487
- text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
1488
- }
1489
- .icon {
1490
- cursor: pointer;
1491
- }
1492
- }
1493
-
1494
- form {
1495
- display: flex;
1496
- flex-direction: column;
1497
- gap: 0.75rem;
1498
- max-width: 85%;
1499
-
1500
- @media (max-width: 500px) {
1501
- max-width: 100%;
1502
- }
1503
- }
1504
-
1505
- .chk_shipping_address_form_group {
1506
- display: flex;
1507
- justify-content: space-between;
1508
- flex-direction: row;
1509
- gap: 12px;
1510
- }
1511
-
1512
- .chk_shipping_address_input_container {
1513
- display: flex;
1514
- width: 100%;
1515
- }
1516
-
1517
- .chk_shipping_address_input_wrapper {
1518
- display: flex;
1519
- flex-direction: column;
1520
- gap: var(--_ctm-lt-ll-ad-it-gp);
1521
- width: 100%;
1522
- }
1523
-
1524
- .chk_shipping_address_form_label {
1525
- color: var(--_gray-600);
1526
- font-size: 14px;
1527
- }
1528
-
1529
- .chk_shiping_address_form_input {
1530
- padding: 8px 12px;
1531
- width: -webkit-fill-available;
1532
- height: 40px;
1533
- background-color: var(--_base-white);
1534
- border-radius: 6px;
1535
- border: 1px solid var(--_gray-300);
1536
-
1537
- &:focus-within {
1538
- border: 1px solid var(--_primary-300);
1539
- outline: 2px solid var(--_primary-100);
1540
- }
1541
-
1542
- // .input-field {
1543
- // padding: 8px 12px;
1544
- // width: -webkit-fill-available;
1545
- // background-color: var(--_base-white);
1546
- // border-radius: 6px;
1547
- // border: 1px solid var(--_gray-300);
1548
-
1549
- // &:focus-within {
1550
- // border: 1px solid var(--_primary-300);
1551
- // outline: 2px solid var(--_primary-100);
1552
- // }
1553
- // }
1554
- }
1555
-
1556
- input[type="checkbox"] {
1557
- width: auto;
1558
- }
1559
-
1560
- .error-msg {
1561
- font-size: 12px;
1562
- color: #ff0000;
1563
- }
1564
-
1565
- .chk_shipping_address_use_as_billing_address_chkbx {
1566
- display: flex;
1567
- align-items: center;
1568
- gap: 0.5rem;
1569
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1570
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1571
- text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm);
1572
- word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp);
1573
- word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk);
1574
- &.flex__overflow {
1575
- white-space: normal;
1576
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1577
- }
1578
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1579
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1580
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1581
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1582
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1583
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1584
-
1585
- .custom-checkbox {
1586
- width: 20px;
1587
- height: 20px;
1588
- border: 1px solid #d0d5dd;
1589
- border-radius: 4px;
1590
- position: relative;
1591
- background-color: #fff;
1592
- transition: all 0.2s ease;
1593
-
1594
- &::after {
1595
- content: "";
1596
- position: absolute;
1597
- display: none;
1598
- left: 5px;
1599
- top: 0.5px;
1600
- width: 5px;
1601
- height: 10px;
1602
- border: solid #fff;
1603
- border-width: 0 2px 2px 0;
1604
- transform: rotate(45deg);
1605
- }
1606
- }
1607
- }
1608
-
1609
- input[type="checkbox"]:checked + label {
1610
- .custom-checkbox {
1611
- background-color: #004dff;
1612
- border-color: #004dff;
1613
-
1614
- &::after {
1615
- display: block;
1616
- }
1617
- }
1618
- }
1619
-
1620
- .checkbox-group {
1621
- display: flex;
1622
- align-items: center;
1623
- justify-content: start;
1624
- gap: 8px;
1625
- }
1626
-
1627
- &_same_as_billing_address_chkbx {
1628
- color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1629
- font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1630
- text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm);
1631
- word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp);
1632
- word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk);
1633
- font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1634
- font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1635
- font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1636
- line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1637
- letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1638
- text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1639
- }
1640
-
1641
- &_button_wrapper {
1642
- display: flex;
1643
- align-items: center;
1644
- gap: 16px;
1645
- }
1646
- }
1647
-
1648
- .payment_heading {
1649
- padding: 12px;
1650
- display: flex;
1651
- justify-content: space-between;
1652
- border-bottom: 1px solid var(--_gray-100);
1653
- font-weight: 600;
1654
- .gc_tertiary_btn {
1655
- color: var(--_primary-400);
1656
- &:hover {
1657
- text-decoration: underline;
1658
- }
1659
- }
1660
- }
1661
-
1662
- .chk_payment_gift_card {
1663
- border: 1px solid var(--_gray-200);
1664
- border-radius: 6px;
1665
-
1666
- .chk_payment_options_heading {
1667
- padding: 16px;
1668
- border-bottom: 1px solid var(--_gray-200);
1669
- display: flex;
1670
- justify-content: space-between;
1671
- .payment_options_heading {
1672
- font-size: 14px;
1673
- font-weight: 600;
1674
- }
1675
- .chk_primary_btn_link {
1676
- color: var(--_primary-400);
1677
- &:hover {
1678
- text-decoration: underline;
1679
- }
1680
- }
1681
- }
1682
- // gift card styles
1683
-
1684
- // .chk_gft_crd_wrapper {
1685
- // &_btn {
1686
- // text-align: left;
1687
- // margin-bottom: 16px;
1688
- // color: var(--_primary-400);
1689
- // &:hover {
1690
- // text-decoration: underline;
1691
- // }
1692
- // }
1693
- // }
1694
- }
1695
-
1696
- .chk_gft_crd_container {
1697
- width: 100%;
1698
- display: flex;
1699
- flex-direction: column;
1700
- gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1701
- background-color: var(--_base-white);
1702
- border: 1px solid var(--_gray-300);
1703
- border-radius: 4px;
1704
- overflow: hidden;
1705
-
1706
- .chk_gft_crd_option_heading {
1707
- display: flex;
1708
- justify-content: space-between;
1709
- align-items: center;
1710
- padding: 8px 12px;
1711
- border-bottom: 1px solid var(--_gray-300);
1712
- }
1713
-
1714
- // gift card styles
1715
- .chk_gft_crd_wrapper {
1716
- display: flex;
1717
- justify-content: space-between;
1718
- align-items: center;
1719
- padding: 16px 16px 0 16px;
1720
- &_item {
1721
- display: flex;
1722
- align-items: center;
1723
- gap: 16px;
1724
- &_icon {
1725
- width: 40px;
1726
- height: 40px;
1727
- border: 1px solid var(--_gray-200);
1728
- border-radius: 6px;
1729
- display: flex;
1730
- justify-content: center;
1731
- align-items: center;
1732
- }
1733
- &_info {
1734
- display: flex;
1735
- flex-direction: column;
1736
- &_title {
1737
- font-size: 14px;
1738
- margin-bottom: 4px;
1739
- font-weight: 600;
1740
- }
1741
- &_desc {
1742
- display: flex;
1743
- &_value {
1744
- font-size: 12px;
1745
- color: var(--_gray-600);
1746
- }
1747
- &_label {
1748
- font-size: 12px;
1749
- color: var(--_gray-900);
1750
- }
1751
- }
1752
- }
1753
- &_pin {
1754
- margin-left: 36px;
1755
- input[type="number"] {
1756
- border: 1px solid var(--_gray-300);
1757
- border-radius: 4px;
1758
- background-color: var(--_base-white);
1759
- width: 95px;
1760
- height: 44px;
1761
- padding-inline: 10px;
1762
- &:focus {
1763
- outline: 2px solid var(--_primary-100);
1764
- border: 1px solid var(--_primary-300);
1765
- }
1766
- }
1767
- }
1768
- }
1769
-
1770
- &_input {
1771
- border: 1px solid var(--_gray-300);
1772
- border-radius: 4px;
1773
- background-color: var(--_base-white);
1774
- height: 44px;
1775
- width: 120px;
1776
- display: flex;
1777
- align-items: center;
1778
- gap: 8px;
1779
- padding-left: 10px;
1780
- input[type="number"] {
1781
- background-color: var(--_base-white);
1782
- padding-right: 10px;
1783
- }
1784
- &:focus-within {
1785
- outline: 2px solid var(--_primary-100);
1786
- border: 1px solid var(--_primary-300);
1787
- }
1788
- }
1789
-
1790
- .chk_gft_crd_wrapper_btn {
1791
- color: var(--_primary-400);
1792
- &:hover {
1793
- text-decoration: un;
1794
- }
1795
- }
1796
- }
1797
-
1798
- // payment other options styles
1799
- .chk_pmnt_other_options {
1800
- display: flex;
1801
- justify-content: space-between;
1802
- gap: 80px;
1803
- padding: 16px;
1804
- .chk_pmnt_other_options_left_container {
1805
- display: flex;
1806
- gap: 12px;
1807
- .chk_pmnt_option_info_wrapper {
1808
- display: flex;
1809
- gap: 12px;
1810
- .cards {
1811
- display: flex;
1812
- flex-direction: column;
1813
- gap: 8px;
1814
- .chk_payment_options_name {
1815
- font-weight: 600;
1816
- }
1817
- span {
1818
- font-size: 12px;
1819
- .chk_payment_options_label {
1820
- color: var(--_gray-600);
1821
- }
1822
- .chk_payment_options_value {
1823
- color: var(--_gray-900);
1824
- }
1825
- }
1826
- }
1827
- }
1828
- }
1829
- .chk_pmnt_other_options_container {
1830
- padding: 16px;
1831
- }
1832
- }
1833
-
1834
- &__other_option_wrapper {
1835
- display: flex;
1836
- width: 100%;
1837
- justify-content: space-between;
1838
- padding: 16px;
1839
-
1840
- @media (max-width: 500px) {
1841
- flex-direction: column;
1842
- }
1843
- }
1844
-
1845
- &_left_container {
1846
- display: flex;
1847
- gap: 12px;
1848
- align-items: flex-start;
1849
- & > div {
1850
- display: flex;
1851
- gap: 12px;
1852
- }
1853
-
1854
- @media (max-width: 500px) {
1855
- flex-wrap: wrap;
1856
- }
1857
- }
1858
-
1859
- &__left_wrapper {
1860
- display: flex;
1861
- flex-direction: column;
1862
- align-items: flex-start;
1863
- gap: 16px;
1864
- }
1865
-
1866
- &__card_icon {
1867
- width: 60px;
1868
- height: 40px;
1869
- }
1870
-
1871
- &__info_wrapper {
1872
- display: flex;
1873
- flex-direction: column;
1874
-
1875
- .chk_payment_options_name {
1876
- color: var(--_gray-900);
1877
- font-size: 16px;
1878
- font-weight: 600;
1879
- }
1880
-
1881
- .chk_payment_options_label {
1882
- color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1883
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1884
- text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm);
1885
- word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp);
1886
- word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk);
1887
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1888
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1889
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1890
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1891
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1892
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1893
- }
1894
-
1895
- .chk_payment_options_value {
1896
- color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1897
- font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1898
- text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm);
1899
- word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp);
1900
- word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk);
1901
- font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1902
- font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1903
- font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1904
- line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1905
- letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1906
- text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1907
- }
1908
- }
1909
-
1910
- &_right_container {
1911
- display: flex;
1912
- gap: 6px;
1913
- align-items: flex-start;
1914
-
1915
- @media (max-width: 500px) {
1916
- justify-content: flex-end;
1917
- }
1918
- }
1919
-
1920
- &_input {
1921
- display: flex;
1922
- padding: 8px 12px;
1923
- width: -webkit-fill-available;
1924
- background-color: var(--_base-white);
1925
- border-radius: 6px;
1926
- border: 1px solid var(--_gray-300);
1927
-
1928
- &:focus-within {
1929
- border: 1px solid var(--_primary-300);
1930
- outline: 2px solid var(--_primary-100);
1931
- }
1932
-
1933
- .icon {
1934
- svg {
1935
- path {
1936
- stroke: var(--_primary-400);
1937
- }
1938
- }
1939
- }
1940
-
1941
- .input_field {
1942
- padding: 8px 12px;
1943
- width: -webkit-fill-available;
1944
- background-color: var(--_base-white);
1945
- border-radius: 6px;
1946
- border: 1px solid var(--_gray-300);
1947
-
1948
- &:focus-within {
1949
- border: 1px solid var(--_primary-300);
1950
- outline: 2px solid var(--_primary-100);
1951
- }
1952
- }
1953
- }
1954
- }
1955
- }
1956
-
1957
- .react-international-phone-country-selector-button {
1958
- border: none !important;
1959
- height: auto !important;
1960
- }
1961
-
1962
- .react-international-phone-input {
1963
- height: auto;
1964
- border: none !important;
1965
- color: var(--_ctm-dn-it-bx-dn-cr);
1966
- font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1967
- text-transform: var(--_ctm-dn-it-bx-dn-tt-tm);
1968
- word-wrap: var(--_ctm-dn-it-bx-dn-wd-wp);
1969
- word-break: var(--_ctm-dn-it-bx-dn-wd-bk);
1970
- font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1971
- font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1972
- font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1973
- line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1974
- letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1975
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
1976
- var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1977
- text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1978
- text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1979
- }
1980
-
1981
- .chk_checkbox_wrapper {
1982
- display: flex;
1983
- width: fit-content;
1984
- align-items: center;
1985
- gap: 12px;
1986
-
1987
- input[type="checkbox"] {
1988
- display: none;
1989
- }
1990
- .payment_program_title {
1991
- font-size: 14px;
1992
- font-weight: 500;
1993
- color: var(--_gray-900);
1994
- }
1995
-
1996
- .chk_payment_options_use_as_billing_address_chkbx {
1997
- display: flex;
1998
- align-items: center;
1999
- cursor: pointer;
2000
- gap: 10px;
2001
- color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
2002
- font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
2003
- text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm);
2004
- word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp);
2005
- word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk);
2006
- &.flex__overflow {
2007
- white-space: normal;
2008
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2009
- }
2010
- font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
2011
- font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
2012
- font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
2013
- line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
2014
- letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
2015
- text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
2016
-
2017
- .custom-checkbox {
2018
- width: 20px;
2019
- height: 20px;
2020
- border: 1px solid #d0d5dd;
2021
- border-radius: 4px;
2022
- position: relative;
2023
- background-color: #fff;
2024
- transition: all 0.2s ease;
2025
-
2026
- &::after {
2027
- content: "";
2028
- position: absolute;
2029
- display: none;
2030
- left: 5px;
2031
- top: 0.5px;
2032
- width: 5px;
2033
- height: 10px;
2034
- border: solid #fff;
2035
- border-width: 0 2px 2px 0;
2036
- transform: rotate(45deg);
2037
- }
2038
- }
2039
- }
2040
-
2041
- .chk_shipping_address_use_as_billing_address_chkbx {
2042
- display: flex;
2043
- align-items: center;
2044
- cursor: pointer;
2045
- gap: 10px;
2046
- color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
2047
- font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
2048
- text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm);
2049
- word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp);
2050
- word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk);
2051
- &.flex__overflow {
2052
- white-space: normal;
2053
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2054
- }
2055
- font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
2056
- font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
2057
- font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
2058
- line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
2059
- letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
2060
- text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
2061
-
2062
- .custom-checkbox {
2063
- width: 20px;
2064
- height: 20px;
2065
- border: 1px solid #d0d5dd;
2066
- border-radius: 4px;
2067
- position: relative;
2068
- background-color: #fff;
2069
- transition: all 0.2s ease;
2070
-
2071
- &::after {
2072
- content: "";
2073
- position: absolute;
2074
- display: none;
2075
- left: 5px;
2076
- top: 0.5px;
2077
- width: 5px;
2078
- height: 10px;
2079
- border: solid #fff;
2080
- border-width: 0 2px 2px 0;
2081
- transform: rotate(45deg);
2082
- }
2083
- }
2084
- }
2085
-
2086
- input[type="checkbox"]:checked + label {
2087
- .custom-checkbox {
2088
- background-color: #004dff;
2089
- border-color: #004dff;
2090
-
2091
- &::after {
2092
- display: block;
2093
- }
2094
- }
2095
- }
2096
- }
2097
- .chk_address_actions {
2098
- display: flex;
2099
- gap: 12px;
2100
- }
2101
- .chk_payment-card__note {
2102
- padding: 8px 6px;
2103
- display: flex;
2104
- align-items: center;
2105
- gap: 6px;
2106
- padding: 8px 16px;
2107
- background-color: var(--_warning-100);
2108
- color: var(--_warning-700);
2109
-
2110
- .icon {
2111
- svg {
2112
- width: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
2113
- height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
2114
- path {
2115
- stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
2116
- // Overrides the stroke-width presentation attribute baked into the icon markup.
2117
- stroke-width: prepareMediaVariable(--_ctm-dn-pt-os-dn-ne-dn-se-wh, 1.25);
2118
- }
2119
- }
2120
- }
2121
- }
2122
-
2123
- .accordion-summary {
2124
- flex: 1;
2125
- display: flex;
2126
- flex-direction: column;
2127
- gap: 0.25rem;
2128
-
2129
- .summary-content {
2130
- display: flex;
2131
- flex-direction: row;
2132
- justify-content: space-between;
2133
- gap: 0.5rem;
2134
-
2135
- .chk_shipping-summary {
2136
- display: flex;
2137
- flex-direction: column;
2138
- gap: var(--_ctm-lt-sd-sg-as-le-gp);
2139
- max-width: 700px;
2140
-
2141
- .chk_address {
2142
- display: flex;
2143
- flex-direction: column;
2144
- // gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
2145
- gap: 12px;
2146
-
2147
- .chk_saved_address_name {
2148
- color: var(--_gray-900);
2149
- font-size: 16px;
2150
- font-weight: 600;
2151
- }
2152
-
2153
- .chk_saved_address {
2154
- color: var(--_gray-600);
2155
- font-size: 12px;
2156
- }
2157
-
2158
- .chk_saved_address_label {
2159
- color: var(--_gray-500);
2160
- font-size: 12px;
2161
- }
2162
-
2163
- .chk_saved_address_value {
2164
- color: var(--_gray-900);
2165
- font-size: 12px;
2166
- }
2167
- .address_skeletons {
2168
- display: flex;
2169
- gap: 8px;
2170
- margin-bottom: 4px;
2171
- }
2172
- }
2173
-
2174
- .contact {
2175
- font-size: 0.875rem;
2176
- color: var(--_gray-900);
2177
- line-height: 1.4;
2178
- }
2179
- }
2180
-
2181
- .right-btn {
2182
- gap: 24px;
2183
-
2184
- &:has(.chk_saved_address_button.selected) {
2185
- display: flex !important;
2186
- }
2187
- .chk_saved_address_button {
2188
- display: flex;
2189
- align-items: center;
2190
- gap: 4px;
2191
- color: var(--_primary-400);
2192
- }
2193
- }
2194
-
2195
- &:hover {
2196
- .right-btn {
2197
- display: flex;
2198
- }
2199
- }
2200
- }
2201
- }
2202
- }
2203
- }
2204
- }
2205
-
2206
- // credit card form syles
2207
- .chk_cred_form_details {
2208
- border-top: 1px solid var(--_gray-100);
2209
- padding: 16px;
2210
- .chk_basic_form_title {
2211
- font-size: 14px;
2212
- margin-bottom: 16px;
2213
- font-weight: 600;
2214
- }
2215
- .chk_form_fields {
2216
- h3 {
2217
- font-size: 14px;
2218
- margin-bottom: 8px;
2219
- }
2220
- display: flex;
2221
- flex-direction: column;
2222
- gap: 24px;
2223
- width: 500px;
2224
- .chk_form_field {
2225
- width: 100%;
2226
- .est__dropdown {
2227
- align-items: start;
2228
- .est__dropdown__button {
2229
- width: 100%;
2230
- .value__selected {
2231
- align-items: center;
2232
- justify-content: start;
2233
- }
2234
- }
2235
- }
2236
- &.expiry_details {
2237
- width: 80px;
2238
- }
2239
-
2240
- display: flex;
2241
- flex-direction: column;
2242
- gap: 6px;
2243
- width: 100%;
2244
-
2245
- .chk_form_field_label {
2246
- font-size: 14px;
2247
- color: var(--_gray-600);
2248
- }
2249
- .chk_form_field_inp {
2250
- height: 40px;
2251
- border: 1px solid var(--_gray-300);
2252
- border-radius: 4px;
2253
- padding-inline: 10px;
2254
- &:placeholder-shown {
2255
- color: var(--_gray-400);
2256
- padding-left: 16px;
2257
- }
2258
- &:focus {
2259
- border: 1px solid var(--_primary-300);
2260
- outline: 2px solid var(--_primary-100);
2261
- }
2262
- }
2263
- .error_msg {
2264
- display: block;
2265
- color: var(--_error-700);
2266
- font-size: 12px;
2267
- }
2268
- }
2269
-
2270
- .checkbox {
2271
- width: auto;
2272
-
2273
- label {
2274
- display: flex;
2275
- align-items: center;
2276
- gap: 8px;
2277
- cursor: pointer;
2278
- position: relative;
2279
- user-select: none;
2280
-
2281
- input[type="checkbox"] {
2282
- display: none;
2283
-
2284
- &:checked + .custom-checkbox::after {
2285
- opacity: 1;
2286
- }
2287
- }
2288
-
2289
- .custom-checkbox {
2290
- width: 16px;
2291
- height: 16px;
2292
- border: 2px solid var(--_primary-400);
2293
- border-radius: 4px;
2294
- position: relative;
2295
- display: inline-block;
2296
- box-sizing: border-box;
2297
-
2298
- &::after {
2299
- content: "";
2300
- position: absolute;
2301
- left: 3px;
2302
- top: 0px;
2303
- width: 4px;
2304
- height: 8px;
2305
- border: solid var(--_primary-400);
2306
- border-width: 0 1px 1px 0;
2307
- transform: rotate(45deg);
2308
- opacity: 0;
2309
- transition: opacity 0.2s ease-in-out;
2310
- }
2311
- }
2312
- }
2313
- }
2314
- .expiry_details {
2315
- display: flex;
2316
- gap: 12px;
2317
- .cvv_inp {
2318
- width: 110px;
2319
- }
2320
- }
2321
- }
2322
- }
2323
-
2324
- // giftcard form styles
2325
- .chk_gift_card_details {
2326
- border-top: 1px solid var(--_gray-300);
2327
- padding: 16px;
2328
- .chk_gift_card_form {
2329
- display: flex;
2330
- flex-direction: column;
2331
- gap: 16px;
2332
- max-width: 480px;
2333
- .chk_gift_cart_form_title {
2334
- font-size: 14px;
2335
- font-weight: 600;
2336
- }
2337
-
2338
- .chk_gift_form_fields {
2339
- display: flex;
2340
- gap: 12px;
2341
- width: 100%;
2342
- .chk_gift_inp_field {
2343
- display: flex;
2344
- flex-direction: column;
2345
- gap: 6px;
2346
- width: 100%;
2347
- label {
2348
- color: var(--_gray-600);
2349
- }
2350
- .chk_gift_inp {
2351
- border: 1px solid var(--_gray-300);
2352
- border-radius: 6px;
2353
- height: 40px;
2354
- padding-inline: 10px;
2355
- &:placeholder-shown {
2356
- padding-left: 10px;
2357
- color: var(--_gray-400);
2358
- }
2359
- &:focus {
2360
- border: 1px solid var(--_primary-300);
2361
- outline: 2px solid var(--_primary-100);
2362
- }
2363
- }
2364
- &.pin {
2365
- width: 110px;
2366
- }
2367
- .error_msg {
2368
- display: block;
2369
- color: var(--_error-700);
2370
- font-size: 12px;
2371
- }
2372
- }
2373
- .error_msg {
2374
- color: var(--_error-700);
2375
- font-size: 14px;
2376
- }
2377
- }
2378
- }
2379
- }
2380
- .chk_form_actions {
2381
- display: flex;
2382
- gap: 12px;
2383
- .chk_sav_btn {
2384
- padding: 12px 16px;
2385
- background-color: var(--_primary-400);
2386
- border-radius: 6px;
2387
- color: var(--_base-white);
2388
- &:hover {
2389
- background-color: var(--_primary-500);
2390
- }
2391
- }
2392
- .chk_can_btn {
2393
- padding: 12px 16px;
2394
- background-color: transparent;
2395
- border-radius: 6px;
2396
- color: var(--_gray-600);
2397
- padding-inline: 10px;
2398
- &:hover {
2399
- background-color: var(--_gray-50);
2400
- color: var(--_gray-900);
2401
- }
2402
- }
2403
- }
2404
-
2405
- .tertiary_primary_btn {
2406
- font-size: 12px;
2407
- color: var(--_primary-400);
2408
- display: inline-flex;
2409
- width: fit-content;
2410
- &:hover {
2411
- color: var(--_primary-500);
2412
- text-decoration: underline;
2413
- }
2414
- }
2415
- .chk_primary_bnt {
2416
- padding: 12px 24px;
2417
- background-color: var(--_primary-400);
2418
- color: var(--_base-white);
2419
- font-weight: 600;
2420
- border-radius: 6px;
2421
- width: max-content;
2422
- &:hover {
2423
- background-color: var(--_primary-500);
2424
- }
2425
- }
2426
- .chk_secondary_bnt {
2427
- padding: 16px 24px;
2428
- background-color: transparent;
2429
- color: var(--_gray-600);
2430
- font-weight: 600;
2431
- border-radius: 6px;
2432
-
2433
- &:hover {
2434
- background-color: var(--_gray-50);
2435
- color: var(--_gray-900);
2436
- }
2437
- }
2438
- }
2439
-
2440
- .add_credit_card {
2441
- display: flex;
2442
- align-items: center;
2443
- gap: 12px;
2444
- padding: 16px;
2445
-
2446
- .cc_icon {
2447
- svg {
2448
- width: 18px;
2449
- height: 14px;
2450
- }
2451
- }
2452
-
2453
- .cc_info {
2454
- display: flex;
2455
- align-items: center;
2456
- // flex-direction: column;
2457
- gap: 6px;
2458
- justify-content: space-between;
2459
- width: 100%;
2460
-
2461
- .cc_title {
2462
- font-size: 14px;
2463
- font-weight: 600;
2464
- }
2465
- .chk_payment_cred_section_col_right {
2466
- .chk_currency_inp_sec {
2467
- display: flex;
2468
- justify-content: end;
2469
- .chk_currency_inp {
2470
- border: 1px solid var(--_gray-200);
2471
- min-width: 100px;
2472
- display: flex;
2473
- gap: 12px;
2474
- height: 40px;
2475
- border-radius: 4px;
2476
- align-items: center;
2477
- max-width: 120px;
2478
- padding-inline: 12px;
2479
- }
2480
- }
2481
- .cur_conversion {
2482
- font-size: 14px;
2483
- }
2484
- }
2485
- }
2486
- }
2487
- .add_new_credit_card {
2488
- display: flex;
2489
- justify-content: space-between;
2490
- align-items: center;
2491
- padding-inline: 16px;
2492
- }
2493
- .cc_tertiary_btn {
2494
- color: var(--_primary-400);
2495
-
2496
- &:hover {
2497
- color: var(--_primary-500);
2498
- text-decoration: underline;
2499
- }
2500
- }
2501
-
2502
- // &[data-view-state="full"] {
2503
- // width: auto;
2504
- // margin: 0;
2505
- // justify-self: stretch !important;
2506
- // align-self: stretch !important;
2507
- // cursor: auto;
2508
- // &:is(#{$activeElementSelector}) {
2509
- // & > div {
2510
- // &[data-div-type="wrapper__layer"] {
2511
- // --_sf-vt-zz: visible;
2512
- // --_sf-op-zz: 1;
2513
- // }
2514
- // }
2515
- // }
2516
- // }
2517
- }
2518
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $primary-color: var(--_primary-400);
6
+ $secondary-color: var(--_gray-300);
7
+ $light-color: #f5f5f5;
8
+ $dark-color: #343a40;
9
+
10
+ $activeElementSelector: "[data-has-clicked='true']";
11
+ [data-div-type="element"] {
12
+ &[data-element-type="shipping-payment"] {
13
+ width: calc(
14
+ 1% *
15
+ var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
16
+ );
17
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_ctm-lt-mn))));
18
+ & > div {
19
+ &.wrapper {
20
+ width: 100%;
21
+ min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
22
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
23
+
24
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
25
+ background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
26
+ background-attachment: var(
27
+ --_ctm-mob-dn-bd-at,
28
+ var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at))
29
+ );
30
+ background-position: var(
31
+ --_ctm-mob-dn-bd-pn,
32
+ var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn))
33
+ );
34
+ background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
35
+ background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
36
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
37
+ border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
38
+ border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
39
+ border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
40
+ box-shadow: var(
41
+ --_hover-show-shadow,
42
+ var(
43
+ --_sf-hr-bx-sw,
44
+ var(
45
+ --_show-shadow,
46
+ var(
47
+ --_ctm-mob-dn-dt-se-sw-ae,
48
+ var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
49
+ )
50
+ var(
51
+ --_ctm-mob-dn-dt-se-sw-br,
52
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
53
+ )
54
+ var(
55
+ --_ctm-mob-dn-dt-se-sw-sd,
56
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
57
+ )
58
+ var(
59
+ --_ctm-mob-dn-dt-se-sw-cr,
60
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
61
+ )
62
+ )
63
+ )
64
+ );
65
+ }
66
+
67
+ .chk_checkout_accordion {
68
+ display: flex;
69
+ padding: var(--_ctm-lt-pg);
70
+ flex-direction: column;
71
+ gap: 4px;
72
+ word-break: keep-all;
73
+ padding-bottom: 24px;
74
+
75
+ .chk_checkout_title {
76
+ color: var(--_gray-900);
77
+ font-size: 24px;
78
+ font-weight: 700;
79
+ line-height: 32px;
80
+ }
81
+
82
+ .accordion {
83
+ border-radius: 4px;
84
+ display: flex;
85
+ // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
86
+ flex-direction: column;
87
+ transition: max-height 800ms ease-in;
88
+ &.open {
89
+ transition: max-height 800ms ease-in;
90
+ .accordion-header {
91
+ background-color: var(--_gray-200);
92
+ }
93
+ .accordion-body {
94
+ transition: max-height 800ms ease-in;
95
+ max-height: 2000px;
96
+ padding-block: 12px 24px;
97
+ .shipping-address {
98
+ max-height: fit-content;
99
+ transition: max-height 800ms ease-in;
100
+ }
101
+ }
102
+ }
103
+
104
+ // accordion heaer
105
+ .accordion-header {
106
+ padding: 12px;
107
+ display: flex;
108
+ justify-content: space-between;
109
+ align-items: center;
110
+ cursor: pointer;
111
+ background-color: #f5f5f5;
112
+ border-color: #f5f5f5;
113
+ border-radius: 4px;
114
+ height: 55px;
115
+
116
+ .accordion-title {
117
+ margin-right: 1rem;
118
+ white-space: nowrap;
119
+ display: flex;
120
+ align-items: center;
121
+ gap: 12px;
122
+ font-size: 16px;
123
+ font-weight: 600;
124
+ line-height: 24px;
125
+
126
+ span {
127
+ display: flex;
128
+ }
129
+ }
130
+ .edit-btn {
131
+ cursor: pointer;
132
+ color: var(--_primary-400);
133
+
134
+ &:hover {
135
+ color: var(--_primary-500);
136
+ }
137
+ }
138
+ }
139
+
140
+ // accordion body
141
+ .accordion-body {
142
+ transition: max-height 800ms ease-in;
143
+
144
+ max-height: 0px;
145
+ overflow: hidden;
146
+ padding: 0;
147
+ // shipping address
148
+ .shipping-address {
149
+ transition: max-height 800ms ease-in;
150
+ max-height: 0;
151
+ display: flex;
152
+ flex-direction: column;
153
+ gap: 16px;
154
+
155
+ .btn_link {
156
+ color: var(--_primary-400);
157
+ &:hover {
158
+ text-decoration: underline;
159
+ }
160
+ }
161
+
162
+ .chk_saved_address_button {
163
+ cursor: pointer;
164
+ border-radius: 6px;
165
+ color: var(--_primary-400);
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 4px;
169
+ }
170
+
171
+ .shipping_address_container {
172
+ display: flex;
173
+ flex-direction: column;
174
+ gap: 24px;
175
+ max-width: 485px;
176
+ }
177
+
178
+ .shipping_address_heading_container {
179
+ display: flex;
180
+ justify-content: space-between;
181
+ align-items: center;
182
+ font-weight: 600;
183
+ color: var(--_gray-900);
184
+ .icon {
185
+ display: flex;
186
+ align-items: center;
187
+ cursor: pointer;
188
+ }
189
+ }
190
+
191
+ form {
192
+ display: flex;
193
+ flex-direction: column;
194
+ gap: 0.75rem;
195
+ // max-width: 85%;
196
+
197
+ @media (max-width: 500px) {
198
+ max-width: 100%;
199
+ }
200
+ }
201
+
202
+ .chk_shipping_address_form_group {
203
+ display: flex;
204
+ justify-content: space-between;
205
+ flex-direction: row;
206
+ gap: 12px;
207
+ }
208
+
209
+ .chk_shipping_address_input_container {
210
+ display: flex;
211
+ width: 100%;
212
+ }
213
+
214
+ .chk_shipping_address_input_wrapper {
215
+ display: flex;
216
+ flex-direction: column;
217
+ gap: 16px;
218
+ width: 100%;
219
+ }
220
+
221
+ .chk_shipping_address_form_label {
222
+ color: var(--_gray-600);
223
+ font-size: 14px;
224
+ padding-bottom: 6px;
225
+ }
226
+
227
+ .chk_shiping_address_form_input {
228
+ padding: 8px 12px;
229
+ width: -webkit-fill-available;
230
+ background-color: var(--_base-white);
231
+ color: var(--_gray-600);
232
+ border: 1px solid var(--_gray-300);
233
+ border-radius: 6px;
234
+ height: 40px;
235
+
236
+ &:focus-within {
237
+ border: 1px solid var(--_primary-300);
238
+ outline: 2px solid var(--_primary-100);
239
+ }
240
+ }
241
+
242
+ input[type="checkbox"] {
243
+ width: auto;
244
+ }
245
+
246
+ .error-msg {
247
+ font-size: 12px;
248
+ color: #ff0000;
249
+ }
250
+ label {
251
+ display: flex;
252
+ align-items: center;
253
+ gap: 0.5rem;
254
+ font-size: 14px;
255
+ }
256
+
257
+ .checkbox-group {
258
+ display: flex;
259
+ align-items: center;
260
+ justify-content: start;
261
+ gap: 8px;
262
+ }
263
+
264
+ .chk_shipping_address_use_as_billing_address_chkbx {
265
+ display: flex;
266
+ align-items: center;
267
+ gap: 0.5rem;
268
+ color: var(--_gray-600);
269
+ font-size: 14px;
270
+
271
+ .custom-checkbox {
272
+ width: 20px;
273
+ height: 20px;
274
+ border: 1px solid #d0d5dd;
275
+ border-radius: 4px;
276
+ position: relative;
277
+ background-color: #fff;
278
+ transition: all 0.2s ease;
279
+
280
+ &::after {
281
+ content: "";
282
+ position: absolute;
283
+ display: none;
284
+ left: 5px;
285
+ top: 0.5px;
286
+ width: 5px;
287
+ height: 10px;
288
+ border: solid #fff;
289
+ border-width: 0 2px 2px 0;
290
+ transform: rotate(45deg);
291
+ }
292
+ }
293
+ }
294
+
295
+ input[type="checkbox"]:checked + label {
296
+ .custom-checkbox {
297
+ background-color: #004dff;
298
+ border-color: #004dff;
299
+
300
+ &::after {
301
+ display: block;
302
+ }
303
+ }
304
+ }
305
+ }
306
+
307
+ .summary {
308
+ .chk_shipping_method_label {
309
+ display: flex;
310
+ align-items: center;
311
+ gap: 4px;
312
+ color: var(--_gray-500);
313
+ }
314
+
315
+ .chk_shipping_method_heading {
316
+ color: var(--_gray-500);
317
+ font-weight: 600;
318
+ }
319
+ }
320
+
321
+ .chk_multi_address {
322
+ display: flex;
323
+ flex-direction: column;
324
+ width: 100%;
325
+ gap: 48px;
326
+
327
+ &_product_container {
328
+ display: flex;
329
+ flex-direction: column;
330
+ gap: 16px;
331
+ width: 100%;
332
+ }
333
+
334
+ &_product_info_container {
335
+ display: flex;
336
+ flex-direction: row;
337
+ justify-content: space-between;
338
+ align-items: flex-start;
339
+ width: 100%;
340
+
341
+ @media (max-width: 500px) {
342
+ flex-direction: column;
343
+ }
344
+ }
345
+
346
+ &_product_left_container {
347
+ display: flex;
348
+ flex: 1 0 0;
349
+ width: 100%;
350
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
351
+ }
352
+
353
+ &_product_image {
354
+ height: var(--_ctm-lt-me-as-pt-ie-ht);
355
+ width: var(--_ctm-lt-me-as-pt-ie-wh);
356
+ border: 1px solid var(--_gray-100);
357
+ border-radius: 6px;
358
+ }
359
+
360
+ &_product_info_wrapper {
361
+ display: flex;
362
+ flex-direction: column;
363
+ gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4);
364
+
365
+ .chk_multi_address_product_name {
366
+ color: var(--_gray-900);
367
+ font-size: 18px;
368
+ font-weight: 700;
369
+ line-height: 28px;
370
+ }
371
+
372
+ .chk_multi_address_product_info {
373
+ color: var(--_gray-600);
374
+ font-size: 14px;
375
+ list-style: 20px;
376
+ }
377
+ }
378
+
379
+ &_product_right_container {
380
+ display: flex;
381
+ flex-direction: row;
382
+ gap: 30px;
383
+ align-items: center;
384
+
385
+ @media (max-width: 500px) {
386
+ align-self: flex-end;
387
+ }
388
+
389
+ .chk_multi_address_product_price {
390
+ color: var(--_gray-900);
391
+ font-size: 20px;
392
+ font-weight: 700;
393
+ }
394
+ }
395
+
396
+ &_qty_wrapper {
397
+ display: flex;
398
+ flex-direction: row;
399
+ align-items: center;
400
+ gap: 4px;
401
+
402
+ .chk_multi_address_product_info {
403
+ color: var(--_gray-600);
404
+ font-size: 12px;
405
+ line-height: 18px;
406
+ }
407
+
408
+ .chk_multi_address_product_qty {
409
+ color: var(--_gray-900);
410
+ font-size: 12px;
411
+ font-weight: 700;
412
+ }
413
+ }
414
+
415
+ &_shipping_option_container {
416
+ display: flex;
417
+ flex-direction: column;
418
+ gap: 6px;
419
+
420
+ @media (max-width: 500px) {
421
+ flex-direction: row;
422
+ }
423
+ }
424
+
425
+ &_shiping_option_heading_wrapper {
426
+ display: grid;
427
+ grid-template-columns: 0.5fr 2fr 2fr 20px;
428
+ gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
429
+ white-space: nowrap;
430
+ align-items: center;
431
+
432
+ @media (max-width: 500px) {
433
+ grid-template-columns: auto;
434
+ }
435
+
436
+ .chk_multi_address_product_label {
437
+ color: var(--_gray-600);
438
+ font-size: 12px;
439
+ }
440
+ }
441
+
442
+ .chk_multi_address_icon {
443
+ svg {
444
+ width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
445
+ height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
446
+ path {
447
+ stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
448
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
449
+ stroke-width: prepareMediaVariable(--_ctm-dn-me-sg-as-dn-dd-in-se-wh, 1.25);
450
+ }
451
+ }
452
+ &:hover {
453
+ cursor: pointer;
454
+ svg {
455
+ path {
456
+ stroke: var(--_error-700);
457
+ }
458
+ }
459
+ }
460
+ }
461
+ .chk_shiping_address_form_input {
462
+ padding: 8px 12px;
463
+ width: -webkit-fill-available;
464
+ border: 1px solid var(--_gray-300);
465
+ border-radius: 6px;
466
+ height: 40px;
467
+ background-color: var(--_base-white);
468
+
469
+ &:focus-within {
470
+ border: 1px solid var(--_primary-300);
471
+ outline: 2px solid var(--_primary-100);
472
+ }
473
+
474
+ .custom-arrows {
475
+ position: absolute;
476
+ right: 6px;
477
+ top: 50%;
478
+ transform: translateY(-50%);
479
+ display: flex;
480
+ flex-direction: column;
481
+
482
+ .arrow {
483
+ all: unset;
484
+ cursor: pointer;
485
+ font-size: 10px;
486
+ line-height: 1;
487
+ }
488
+ }
489
+
490
+ // .input-field {
491
+ // padding: 8px 12px;
492
+ // width: -webkit-fill-available;
493
+ // border: 1px solid var(--_gray-300);
494
+ // border-radius: 6px;
495
+ // height: 40px;
496
+ // background-color: var(--_base-white);
497
+
498
+ // &:focus-within {
499
+ // border: 1px solid var(--_primary-300);
500
+ // outline: 2px solid var(--_primary-100);
501
+ // }
502
+ // }
503
+ }
504
+ }
505
+
506
+ .shipping-method {
507
+ display: flex;
508
+ flex-direction: column;
509
+ gap: var(--_ctm-lt-sg-md-le-gp);
510
+
511
+ &__grid {
512
+ display: grid;
513
+ grid-template-columns: 1fr;
514
+ gap: var(--_ctm-lt-sg-md-le-gp);
515
+
516
+ @media (min-width: 768px) {
517
+ grid-template-columns: 1fr 1fr;
518
+ gap: 32px;
519
+ }
520
+ }
521
+
522
+ &__group {
523
+ display: flex;
524
+ flex-direction: column;
525
+ gap: 8px;
526
+
527
+ .chk_shipping_method_heading {
528
+ color: var(--_gray-700);
529
+ font-weight: 700;
530
+ font-size: 16px;
531
+ }
532
+ }
533
+
534
+ &__options {
535
+ display: flex;
536
+ flex-direction: column;
537
+ gap: 12px;
538
+ }
539
+
540
+ &__option {
541
+ display: flex;
542
+ align-items: center;
543
+ cursor: pointer;
544
+ transition: all 0.2s ease;
545
+
546
+ .custom_radio {
547
+ width: 20px;
548
+ margin-right: 12px;
549
+ height: 20px;
550
+ border: 1px solid transparent; /* blue ring */
551
+ border-radius: 50%;
552
+ display: inline-block;
553
+ box-sizing: border-box;
554
+ background-color: white;
555
+ transition: all 0.2s ease;
556
+
557
+ input[type="radio"]:checked + .radio-style {
558
+ background-color: var(--_thm-py-bs-dt-se-bd-cr);
559
+ border: 6px solid;
560
+ }
561
+ }
562
+
563
+ .chk_shipping_method_label {
564
+ color: var(--_gray-600);
565
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
566
+ font-size: 14px;
567
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
568
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
569
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
570
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
571
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
572
+ }
573
+
574
+ .chk_shipping_method_value {
575
+ color: var(--_gray-900);
576
+ font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
577
+ text-transform: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-tt-tm);
578
+ word-wrap: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-wp);
579
+ word-break: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-bk);
580
+ font-size: 14px;
581
+ font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
582
+ font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
583
+ line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht);
584
+ letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-lr-sg);
585
+ text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ue);
586
+ }
587
+
588
+ // input[type="radio"] {
589
+ // margin-right: 12px;
590
+ // width: 16px;
591
+ // height: 16px;
592
+ // accent-color: #2563eb;
593
+ // cursor: pointer;
594
+ // // display: none;
595
+ // }
596
+
597
+ .custom_radio {
598
+ position: relative;
599
+ input[type="radio"] {
600
+ margin-right: 12px;
601
+ width: 16px;
602
+ height: 16px;
603
+ accent-color: #2563eb;
604
+ cursor: pointer;
605
+ display: none;
606
+ }
607
+ .radio-style {
608
+ width: 20px;
609
+ height: 20px;
610
+ border-radius: 50%;
611
+ border: 1px solid #d0d5dd;
612
+ background: white;
613
+ display: inline-block;
614
+ box-sizing: border-box;
615
+ transition: all 0.2s;
616
+ }
617
+ input[type="radio"]:checked + .radio-style {
618
+ background-color: var(--_base-white);
619
+ border: 5px solid var(--_thm-py-bs-dt-se-br-cr);
620
+ }
621
+ }
622
+
623
+ &.selected {
624
+ background-color: var(--_base-white);
625
+ border-color: var(--_thm-py-bs-dt-se-br-cr);
626
+ }
627
+ }
628
+
629
+ // order level shipping
630
+ .order_level_shipping {
631
+ display: flex;
632
+ gap: 24px;
633
+ .order_level_shipping_img {
634
+ width: 120px;
635
+ height: 120px;
636
+ background-color: var(--_gray-100);
637
+ border-radius: 6px;
638
+ }
639
+ }
640
+ }
641
+
642
+ // payment options
643
+ .chk_payment-options {
644
+ display: flex;
645
+ flex-direction: column;
646
+ gap: var(--_ctm-lt-pt-os-gp-bn-cs);
647
+ .gift_crd_chk_payment_option {
648
+ border: 1px solid var(--_gray-300);
649
+ border-radius: 4px;
650
+ margin-bottom: 12px;
651
+ .add_gift_card {
652
+ display: flex;
653
+ gap: 12px;
654
+ padding: 16px;
655
+
656
+ .gc_icon {
657
+ svg {
658
+ width: 18px;
659
+ height: 14px;
660
+ }
661
+ }
662
+
663
+ .gc_info {
664
+ display: flex;
665
+ justify-content: space-between;
666
+ width: 100%;
667
+ gap: 6px;
668
+
669
+ .gc_title {
670
+ font-size: 14px;
671
+ font-weight: 600;
672
+ }
673
+ }
674
+ .gc_tertiary_btn {
675
+ color: var(--_primary-400);
676
+
677
+ &:hover {
678
+ color: var(--_primary-500);
679
+ text-decoration: underline;
680
+ }
681
+ }
682
+ }
683
+ .chk_gft_crd_wrapper {
684
+ display: flex;
685
+ justify-content: space-between;
686
+ align-items: center;
687
+ padding: 16px;
688
+ & > button {
689
+ color: var(--_primary-400);
690
+ &:hover {
691
+ text-decoration: underline;
692
+ }
693
+ }
694
+ &_item {
695
+ display: flex;
696
+ align-items: center;
697
+ gap: 16px;
698
+ &_icon {
699
+ width: 40px;
700
+ height: 40px;
701
+ border: 1px solid var(--_gray-200);
702
+ border-radius: 6px;
703
+ display: flex;
704
+ justify-content: center;
705
+ align-items: center;
706
+ }
707
+ &_info {
708
+ display: flex;
709
+ flex-direction: column;
710
+ &_title {
711
+ font-size: 14px;
712
+ margin-bottom: 4px;
713
+ font-weight: 600;
714
+ }
715
+ &_desc {
716
+ display: flex;
717
+ &_value {
718
+ font-size: 12px;
719
+ color: var(--_gray-600);
720
+ }
721
+ &_label {
722
+ font-size: 12px;
723
+ color: var(--_gray-900);
724
+ }
725
+ }
726
+ }
727
+ &_pin {
728
+ margin-left: 36px;
729
+ input[type="number"] {
730
+ border: 1px solid var(--_gray-300);
731
+ border-radius: 4px;
732
+ background-color: var(--_base-white);
733
+ width: 95px;
734
+ height: 44px;
735
+ padding-inline: 10px;
736
+ &:disabled {
737
+ opacity: 0.8;
738
+ cursor: not-allowed;
739
+ }
740
+ &:focus {
741
+ outline: 2px solid var(--_primary-100);
742
+ border: 1px solid var(--_primary-300);
743
+ }
744
+ }
745
+ }
746
+ }
747
+
748
+ &_input {
749
+ border: 1px solid var(--_gray-300);
750
+ border-radius: 4px;
751
+ background-color: var(--_base-white);
752
+ height: 44px;
753
+ width: 120px;
754
+ display: flex;
755
+ align-items: center;
756
+ gap: 8px;
757
+ padding-left: 10px;
758
+ input[type="number"] {
759
+ background-color: var(--_base-white);
760
+ padding-right: 10px;
761
+ &:disabled {
762
+ opacity: 0.8;
763
+ cursor: not-allowed;
764
+ }
765
+ }
766
+ &:focus-within {
767
+ outline: 2px solid var(--_primary-100);
768
+ border: 1px solid var(--_primary-300);
769
+ }
770
+ }
771
+ }
772
+ }
773
+ .payment_program {
774
+ // padding: 0 12px;
775
+ .payment_program_header {
776
+ display: flex;
777
+ justify-content: space-between;
778
+ gap: 8px;
779
+ align-items: center;
780
+
781
+ margin-bottom: 16px;
782
+
783
+ .payment_program_header_label {
784
+ display: flex;
785
+ justify-content: space-between;
786
+ align-items: center;
787
+ &_title {
788
+ font-size: 14px;
789
+ font-weight: 600;
790
+ color: var(--_gray-600);
791
+ }
792
+ .payment_program_header_pds {
793
+ &_label {
794
+ font-size: 14px;
795
+ color: var(--_gray-600);
796
+ }
797
+ &_value {
798
+ font-size: 14px;
799
+ color: var(--_gray-900);
800
+ }
801
+ }
802
+ }
803
+ }
804
+ }
805
+
806
+ .chk_payment_option_wrapper {
807
+ display: flex;
808
+ flex-direction: column;
809
+ border: 1px solid var(--_gray-300);
810
+ margin-bottom: 12px;
811
+ border-radius: 4px;
812
+ overflow: hidden;
813
+
814
+ .pp_pmnt_method_groups {
815
+ .pp_ppm_section {
816
+ background: var(---base-white);
817
+ border-bottom: 1px solid var(--_gray-300);
818
+ padding: 12px 16px;
819
+ font-size: 12px;
820
+ display: flex;
821
+ justify-content: space-between;
822
+ gap: 8px;
823
+ &:not(:first-child) {
824
+ border-top: 1px solid var(--_gray-200);
825
+ }
826
+ .pp_ppm_section_label {
827
+ font-size: 14px;
828
+ font-weight: 700;
829
+ color: var(--_gray-900);
830
+ }
831
+ .pp_ppm_section_value {
832
+ font-size: 14px;
833
+ font-weight: 700;
834
+ color: var(--_gray-600);
835
+ .pp_ppm_section_value_lable {
836
+ font-weight: 500;
837
+ color: var(--_gray-500);
838
+ }
839
+ }
840
+ }
841
+ .payment_methods {
842
+ // padding: 12px;
843
+ display: grid;
844
+ gap: 8px;
845
+ // .chk_payment_option {
846
+ // .chk_payment_options_heading {
847
+ // padding: 16px;
848
+ // display: flex;
849
+ // justify-content: space-between;
850
+ // }
851
+ // .chk_payment_section {
852
+ // width: 100%;
853
+ // display: flex;
854
+ // justify-content: space-between;
855
+ // padding: 16px;
856
+
857
+ // .chk_payment_section {
858
+ // display: flex;
859
+ // justify-content: space-between;
860
+ // align-items: center;
861
+ // width: 100%;
862
+ // .chk_payment_section_col_left {
863
+ // display: flex;
864
+ // gap: 12px;
865
+ // svg {
866
+ // width: 24px;
867
+ // height: 24px;
868
+ // }
869
+ // .chk_payment_section_method {
870
+ // display: flex;
871
+ // flex-direction: column;
872
+ // .chk_payment_section_method_name {
873
+ // font-size: 14px;
874
+ // font-weight: 700;
875
+ // line-height: 20px;
876
+ // color: var(--_gray-700);
877
+ // }
878
+ // & > div {
879
+ // display: flex;
880
+ // .label {
881
+ // font-size: 12px;
882
+ // color: var(--_gray-500);
883
+ // }
884
+ // .price {
885
+ // font-size: 12px;
886
+ // color: var(--_gray-900);
887
+ // }
888
+ // }
889
+ // }
890
+ // }
891
+ // &_col_right {
892
+ // .chk_currency_inp {
893
+ // height: 44px;
894
+ // border: 1px solid var(--_gray-200);
895
+ // border-radius: 4px;
896
+ // background-color: var(--_base-white);
897
+ // display: flex;
898
+ // width: 120px;
899
+ // overflow: hidden;
900
+ // align-items: center;
901
+ // padding-inline: 12px;
902
+ // gap: 12px;
903
+ // &:focus-within {
904
+ // border: 1px solid var(--_primary-200);
905
+ // outline: 2px solid var(--_primary-50);
906
+ // }
907
+ // input {
908
+ // height: inherit;
909
+ // &:disabled {
910
+ // opacity: 0.8;
911
+ // cursor: not-allowed;
912
+ // }
913
+ // }
914
+ // }
915
+ // }
916
+ // }
917
+
918
+ // .chk_payment_options_heading {
919
+ // color: var(--_gray-900);
920
+ // font-size: 16px;
921
+ // font-weight: 700;
922
+ // }
923
+
924
+ // // gift card styles
925
+
926
+ // // payment other options styles
927
+ // .chk_pmnt_other_options {
928
+ // display: flex;
929
+ // justify-content: space-between;
930
+ // gap: 80px;
931
+ // padding: 16px;
932
+ // .chk_pmnt_other_options_left_container {
933
+ // display: flex;
934
+ // gap: 12px;
935
+ // .chk_pmnt_option_info_wrapper {
936
+ // display: flex;
937
+ // gap: 12px;
938
+ // .cards {
939
+ // display: flex;
940
+ // flex-direction: column;
941
+ // gap: 8px;
942
+ // .chk_payment_options_name {
943
+ // font-weight: 600;
944
+ // }
945
+ // span {
946
+ // font-size: 12px;
947
+ // .chk_payment_options_label {
948
+ // color: var(--_gray-600);
949
+ // }
950
+ // .chk_payment_options_value {
951
+ // color: var(--_gray-900);
952
+ // }
953
+ // }
954
+ // }
955
+ // }
956
+ // }
957
+ // .chk_pmnt_other_options_container {
958
+ // padding: 16px;
959
+ // }
960
+ // }
961
+
962
+ // &__other_option_wrapper {
963
+ // display: flex;
964
+ // width: 100%;
965
+ // justify-content: space-between;
966
+ // padding: 16px;
967
+
968
+ // @media (max-width: 500px) {
969
+ // flex-direction: column;
970
+ // }
971
+ // }
972
+
973
+ // &_left_container {
974
+ // display: flex;
975
+ // gap: 12px;
976
+ // align-items: flex-start;
977
+ // .chk_payment_option__info_wrapper {
978
+ // display: flex;
979
+ // gap: 0px;
980
+ // }
981
+
982
+ // @media (max-width: 500px) {
983
+ // flex-wrap: wrap;
984
+ // }
985
+ // }
986
+
987
+ // &__left_wrapper {
988
+ // display: flex;
989
+ // flex-direction: column;
990
+ // align-items: flex-start;
991
+ // gap: 16px;
992
+ // }
993
+
994
+ // &__card_icon {
995
+ // width: 60px;
996
+ // height: 40px;
997
+ // }
998
+
999
+ // &__info_wrapper {
1000
+ // display: flex;
1001
+ // flex-direction: column;
1002
+
1003
+ // .chk_payment_options_name {
1004
+ // color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1005
+ // font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1006
+ // font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1007
+ // font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1008
+ // font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1009
+ // line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1010
+ // letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1011
+ // text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1012
+ // }
1013
+
1014
+ // .chk_payment_options_label {
1015
+ // color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1016
+ // font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1017
+ // font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1018
+ // font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1019
+ // font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1020
+ // line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1021
+ // letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1022
+ // text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1023
+ // }
1024
+
1025
+ // .chk_payment_options_value {
1026
+ // color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1027
+ // font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1028
+ // font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1029
+ // font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1030
+ // font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1031
+ // line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1032
+ // letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1033
+ // text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1034
+ // }
1035
+ // }
1036
+
1037
+ // &_right_container {
1038
+ // display: flex;
1039
+ // gap: 6px;
1040
+ // align-items: flex-start;
1041
+
1042
+ // @media (max-width: 500px) {
1043
+ // justify-content: flex-end;
1044
+ // }
1045
+ // }
1046
+
1047
+ // &_input {
1048
+ // display: flex;
1049
+ // padding: 9px 12px;
1050
+ // align-items: center;
1051
+ // max-width: 96px;
1052
+ // background-color: var(--_base-white);
1053
+ // border: 1px solid var(--_gray-300);
1054
+ // border-radius: 6px;
1055
+ // color: var(--_gray-700);
1056
+
1057
+ // &:focus-within {
1058
+ // border: 1px solid var(--_primary-300);
1059
+ // outline: 2px solid var(--_primary-100);
1060
+ // }
1061
+
1062
+ // .icon {
1063
+ // svg {
1064
+ // path {
1065
+ // stroke: var(--_primary-400);
1066
+ // }
1067
+ // }
1068
+ // }
1069
+
1070
+ // .input_field {
1071
+ // background-color: var(--_base-white);
1072
+ // border: 1px solid var(--_gray-300);
1073
+ // border-radius: 6px;
1074
+ // color: var(--_gray-700);
1075
+
1076
+ // &:focus-within {
1077
+ // border: 1px solid var(--_primary-300);
1078
+ // outline: 2px solid var(--_primary-100);
1079
+ // }
1080
+ // }
1081
+ // }
1082
+ // }
1083
+ // }
1084
+ .chk_payment_section {
1085
+ display: flex;
1086
+ justify-content: space-between;
1087
+ align-items: center;
1088
+ width: 100%;
1089
+ padding: 16px;
1090
+ .chk_payment_section_col_left {
1091
+ display: flex;
1092
+ gap: 12px;
1093
+ svg {
1094
+ width: 24px;
1095
+ height: 24px;
1096
+ }
1097
+ .chk_payment_section_method {
1098
+ display: flex;
1099
+ flex-direction: column;
1100
+ gap: 12px;
1101
+ .chk_payment_section_method_name {
1102
+ font-size: 14px;
1103
+ font-weight: 700;
1104
+ line-height: 20px;
1105
+ color: var(--_gray-700);
1106
+ }
1107
+ .po-container {
1108
+ .po-grid {
1109
+ display: flex;
1110
+ gap: 8px;
1111
+ & > div {
1112
+ border: 1px solid var(--_gray-300);
1113
+ background-color: var(--_base-white);
1114
+ border-radius: 4px;
1115
+ width: 90px;
1116
+ height: 28px;
1117
+ overflow: hidden;
1118
+ input {
1119
+ padding-inline: 10px;
1120
+ height: 100%;
1121
+ }
1122
+ }
1123
+ }
1124
+ }
1125
+ & > div {
1126
+ display: flex;
1127
+ gap: 16px;
1128
+ .label {
1129
+ font-size: 12px;
1130
+ color: var(--_gray-500);
1131
+ }
1132
+ .price {
1133
+ font-size: 12px;
1134
+ color: var(--_gray-900);
1135
+ }
1136
+ }
1137
+ }
1138
+ }
1139
+ &_col_right {
1140
+ .chk_currency_inp_sec {
1141
+ display: flex;
1142
+ justify-content: end;
1143
+ .chk_currency_inp {
1144
+ height: 44px;
1145
+ border: 1px solid var(--_gray-200);
1146
+ border-radius: 4px;
1147
+ background-color: var(--_base-white);
1148
+ display: flex;
1149
+ width: 120px;
1150
+ overflow: hidden;
1151
+ align-items: center;
1152
+ padding-inline: 12px;
1153
+ gap: 12px;
1154
+ &:focus-within {
1155
+ border: 1px solid var(--_primary-200);
1156
+ outline: 2px solid var(--_primary-50);
1157
+ }
1158
+ input {
1159
+ height: inherit;
1160
+ &:disabled {
1161
+ opacity: 0.8;
1162
+ cursor: not-allowed;
1163
+ }
1164
+ }
1165
+ }
1166
+ }
1167
+ .cur_conversion {
1168
+ font-size: 12px;
1169
+ }
1170
+ }
1171
+
1172
+ .chk_payment_options_heading {
1173
+ color: var(--_gray-900);
1174
+ font-size: 16px;
1175
+ font-weight: 700;
1176
+ }
1177
+
1178
+ // gift card styles
1179
+
1180
+ // payment other options styles
1181
+ .chk_pmnt_other_options {
1182
+ display: flex;
1183
+ justify-content: space-between;
1184
+ gap: 80px;
1185
+ padding: 16px;
1186
+ .chk_pmnt_other_options_left_container {
1187
+ display: flex;
1188
+ gap: 12px;
1189
+ .chk_pmnt_option_info_wrapper {
1190
+ display: flex;
1191
+ gap: 12px;
1192
+ .cards {
1193
+ display: flex;
1194
+ flex-direction: column;
1195
+ gap: 8px;
1196
+ .chk_payment_options_name {
1197
+ font-weight: 600;
1198
+ }
1199
+ span {
1200
+ font-size: 12px;
1201
+ .chk_payment_options_label {
1202
+ color: var(--_gray-600);
1203
+ }
1204
+ .chk_payment_options_value {
1205
+ color: var(--_gray-900);
1206
+ }
1207
+ }
1208
+ }
1209
+ }
1210
+ }
1211
+ .chk_pmnt_other_options_container {
1212
+ padding: 16px;
1213
+ }
1214
+ }
1215
+
1216
+ &__other_option_wrapper {
1217
+ display: flex;
1218
+ width: 100%;
1219
+ justify-content: space-between;
1220
+ padding: 16px;
1221
+
1222
+ @media (max-width: 500px) {
1223
+ flex-direction: column;
1224
+ }
1225
+ }
1226
+
1227
+ &_left_container {
1228
+ display: flex;
1229
+ gap: 12px;
1230
+ align-items: flex-start;
1231
+ .chk_payment_option__info_wrapper {
1232
+ display: flex;
1233
+ gap: 0px;
1234
+ }
1235
+
1236
+ @media (max-width: 500px) {
1237
+ flex-wrap: wrap;
1238
+ }
1239
+ }
1240
+
1241
+ &__left_wrapper {
1242
+ display: flex;
1243
+ flex-direction: column;
1244
+ align-items: flex-start;
1245
+ gap: 16px;
1246
+ }
1247
+
1248
+ &__card_icon {
1249
+ width: 60px;
1250
+ height: 40px;
1251
+ }
1252
+
1253
+ &__info_wrapper {
1254
+ display: flex;
1255
+ flex-direction: column;
1256
+
1257
+ .chk_payment_options_name {
1258
+ color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
1259
+ font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
1260
+ text-transform: var(--_ctm-dn-pt-os-dn-pt-ne-dn-tt-tm);
1261
+ word-wrap: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-wp);
1262
+ word-break: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-bk);
1263
+ font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
1264
+ font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
1265
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
1266
+ line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
1267
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
1268
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
1269
+ }
1270
+
1271
+ .chk_payment_options_label {
1272
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1273
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1274
+ text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm);
1275
+ word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp);
1276
+ word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk);
1277
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1278
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1279
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1280
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1281
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1282
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1283
+ }
1284
+
1285
+ .chk_payment_options_value {
1286
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1287
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1288
+ text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm);
1289
+ word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp);
1290
+ word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk);
1291
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1292
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1293
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1294
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1295
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1296
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1297
+ }
1298
+ }
1299
+
1300
+ &_right_container {
1301
+ display: flex;
1302
+ gap: 6px;
1303
+ align-items: flex-start;
1304
+
1305
+ @media (max-width: 500px) {
1306
+ justify-content: flex-end;
1307
+ }
1308
+ }
1309
+
1310
+ &_input {
1311
+ display: flex;
1312
+ padding: 9px 12px;
1313
+ align-items: center;
1314
+ max-width: 96px;
1315
+ background-color: var(--_base-white);
1316
+ border: 1px solid var(--_gray-300);
1317
+ border-radius: 6px;
1318
+ color: var(--_gray-700);
1319
+
1320
+ &:focus-within {
1321
+ border: 1px solid var(--_primary-300);
1322
+ outline: 2px solid var(--_primary-100);
1323
+ }
1324
+
1325
+ .icon {
1326
+ svg {
1327
+ path {
1328
+ stroke: var(--_primary-400);
1329
+ }
1330
+ }
1331
+ }
1332
+
1333
+ .input_field {
1334
+ background-color: var(--_base-white);
1335
+ border: 1px solid var(--_gray-300);
1336
+ border-radius: 6px;
1337
+ color: var(--_gray-700);
1338
+
1339
+ &:focus-within {
1340
+ border: 1px solid var(--_primary-300);
1341
+ outline: 2px solid var(--_primary-100);
1342
+ }
1343
+ }
1344
+ }
1345
+ }
1346
+ .add_new_credit_card {
1347
+ padding: 16px 16px 0px 16px;
1348
+ display: flex;
1349
+ justify-content: space-between;
1350
+ .cc_tertiary_btn {
1351
+ color: var(--_primary-400);
1352
+ &:hover {
1353
+ text-decoration: underline;
1354
+ }
1355
+ }
1356
+ }
1357
+
1358
+ .chk_payment_cred_section {
1359
+ display: flex;
1360
+ justify-content: space-between;
1361
+ align-items: center;
1362
+ padding: 16px 16px 8px 16px;
1363
+
1364
+ .chk_currency_inp {
1365
+ height: 44px;
1366
+ border: 1px solid var(--_gray-200);
1367
+ border-radius: 4px;
1368
+ background-color: var(--_base-white);
1369
+ display: flex;
1370
+ width: 120px;
1371
+ overflow: hidden;
1372
+ align-items: center;
1373
+ padding-inline: 12px;
1374
+ gap: 12px;
1375
+ &:focus-within {
1376
+ border: 1px solid var(--_primary-200);
1377
+ outline: 2px solid var(--_primary-50);
1378
+ }
1379
+ input {
1380
+ height: inherit;
1381
+ }
1382
+ }
1383
+ .chk_payment_cred_section_col_left {
1384
+ .chk_payment_cred_section_col_left_crd_details {
1385
+ display: flex;
1386
+ gap: 80px;
1387
+ align-items: center;
1388
+ & > div {
1389
+ display: flex;
1390
+ gap: 12px;
1391
+ .card_icon {
1392
+ width: 60px;
1393
+ height: 40px;
1394
+ border-radius: 4px;
1395
+ }
1396
+ .card_details {
1397
+ .card_details_num {
1398
+ font-size: 12px;
1399
+ font-weight: 600;
1400
+ color: var(--_gray-900);
1401
+ }
1402
+ & > div {
1403
+ display: flex;
1404
+ .card_details_label {
1405
+ font-size: 12px;
1406
+ color: var(--_gray-500);
1407
+ }
1408
+ .card_details_value {
1409
+ font-size: 12px;
1410
+ color: var(--_gray-900);
1411
+ }
1412
+ }
1413
+ }
1414
+ }
1415
+ }
1416
+ }
1417
+ }
1418
+
1419
+ .chk_payment_remove_card {
1420
+ padding-inline: 16px;
1421
+ margin-bottom: 16px;
1422
+ .error_msg {
1423
+ font-size: 12px;
1424
+ color: var(--_error-700);
1425
+ }
1426
+ }
1427
+ }
1428
+ }
1429
+ }
1430
+
1431
+ .chk_billing_address {
1432
+ width: 100%;
1433
+ display: flex;
1434
+ flex-direction: column;
1435
+ background-color: var(--_base-white);
1436
+ box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
1437
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
1438
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
1439
+ var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);
1440
+
1441
+ &_form_container {
1442
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1443
+ padding-top: 24px;
1444
+ display: flex;
1445
+ flex-direction: column;
1446
+ gap: 24px;
1447
+ }
1448
+
1449
+ .chk_payment_options_heading {
1450
+ font-size: 16px;
1451
+ color: var(--_gray-900);
1452
+ font-weight: 600;
1453
+ &.pl_0 {
1454
+ padding-left: 0px;
1455
+ }
1456
+ }
1457
+
1458
+ &_form_wrapper {
1459
+ display: flex;
1460
+ flex-direction: column;
1461
+ gap: 24px;
1462
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
1463
+ }
1464
+
1465
+ .shipping_address_container {
1466
+ display: flex;
1467
+ flex-direction: column;
1468
+ gap: 24px;
1469
+ }
1470
+
1471
+ .shipping_address_heading_container {
1472
+ display: flex;
1473
+ justify-content: space-between;
1474
+ align-items: center;
1475
+
1476
+ .chk_heading_info {
1477
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
1478
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
1479
+ text-transform: var(--_ctm-dn-sg-md-dn-hg-dn-tt-tm);
1480
+ word-wrap: var(--_ctm-dn-sg-md-dn-hg-dn-wd-wp);
1481
+ word-break: var(--_ctm-dn-sg-md-dn-hg-dn-wd-bk);
1482
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
1483
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
1484
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
1485
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
1486
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
1487
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
1488
+ }
1489
+ .icon {
1490
+ cursor: pointer;
1491
+ }
1492
+ }
1493
+
1494
+ form {
1495
+ display: flex;
1496
+ flex-direction: column;
1497
+ gap: 0.75rem;
1498
+ max-width: 85%;
1499
+
1500
+ @media (max-width: 500px) {
1501
+ max-width: 100%;
1502
+ }
1503
+ }
1504
+
1505
+ .chk_shipping_address_form_group {
1506
+ display: flex;
1507
+ justify-content: space-between;
1508
+ flex-direction: row;
1509
+ gap: 12px;
1510
+ }
1511
+
1512
+ .chk_shipping_address_input_container {
1513
+ display: flex;
1514
+ width: 100%;
1515
+ }
1516
+
1517
+ .chk_shipping_address_input_wrapper {
1518
+ display: flex;
1519
+ flex-direction: column;
1520
+ gap: var(--_ctm-lt-ll-ad-it-gp);
1521
+ width: 100%;
1522
+ }
1523
+
1524
+ .chk_shipping_address_form_label {
1525
+ color: var(--_gray-600);
1526
+ font-size: 14px;
1527
+ }
1528
+
1529
+ .chk_shiping_address_form_input {
1530
+ padding: 8px 12px;
1531
+ width: -webkit-fill-available;
1532
+ height: 40px;
1533
+ background-color: var(--_base-white);
1534
+ border-radius: 6px;
1535
+ border: 1px solid var(--_gray-300);
1536
+
1537
+ &:focus-within {
1538
+ border: 1px solid var(--_primary-300);
1539
+ outline: 2px solid var(--_primary-100);
1540
+ }
1541
+
1542
+ // .input-field {
1543
+ // padding: 8px 12px;
1544
+ // width: -webkit-fill-available;
1545
+ // background-color: var(--_base-white);
1546
+ // border-radius: 6px;
1547
+ // border: 1px solid var(--_gray-300);
1548
+
1549
+ // &:focus-within {
1550
+ // border: 1px solid var(--_primary-300);
1551
+ // outline: 2px solid var(--_primary-100);
1552
+ // }
1553
+ // }
1554
+ }
1555
+
1556
+ input[type="checkbox"] {
1557
+ width: auto;
1558
+ }
1559
+
1560
+ .error-msg {
1561
+ font-size: 12px;
1562
+ color: #ff0000;
1563
+ }
1564
+
1565
+ .chk_shipping_address_use_as_billing_address_chkbx {
1566
+ display: flex;
1567
+ align-items: center;
1568
+ gap: 0.5rem;
1569
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1570
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1571
+ text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm);
1572
+ word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp);
1573
+ word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk);
1574
+ &.flex__overflow {
1575
+ white-space: normal;
1576
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1577
+ }
1578
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1579
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1580
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1581
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1582
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1583
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1584
+
1585
+ .custom-checkbox {
1586
+ width: 20px;
1587
+ height: 20px;
1588
+ border: 1px solid #d0d5dd;
1589
+ border-radius: 4px;
1590
+ position: relative;
1591
+ background-color: #fff;
1592
+ transition: all 0.2s ease;
1593
+
1594
+ &::after {
1595
+ content: "";
1596
+ position: absolute;
1597
+ display: none;
1598
+ left: 5px;
1599
+ top: 0.5px;
1600
+ width: 5px;
1601
+ height: 10px;
1602
+ border: solid #fff;
1603
+ border-width: 0 2px 2px 0;
1604
+ transform: rotate(45deg);
1605
+ }
1606
+ }
1607
+ }
1608
+
1609
+ input[type="checkbox"]:checked + label {
1610
+ .custom-checkbox {
1611
+ background-color: #004dff;
1612
+ border-color: #004dff;
1613
+
1614
+ &::after {
1615
+ display: block;
1616
+ }
1617
+ }
1618
+ }
1619
+
1620
+ .checkbox-group {
1621
+ display: flex;
1622
+ align-items: center;
1623
+ justify-content: start;
1624
+ gap: 8px;
1625
+ }
1626
+
1627
+ &_same_as_billing_address_chkbx {
1628
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
1629
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
1630
+ text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm);
1631
+ word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp);
1632
+ word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk);
1633
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
1634
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
1635
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
1636
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
1637
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
1638
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
1639
+ }
1640
+
1641
+ &_button_wrapper {
1642
+ display: flex;
1643
+ align-items: center;
1644
+ gap: 16px;
1645
+ }
1646
+ }
1647
+
1648
+ .payment_heading {
1649
+ padding: 12px;
1650
+ display: flex;
1651
+ justify-content: space-between;
1652
+ border-bottom: 1px solid var(--_gray-100);
1653
+ font-weight: 600;
1654
+ .gc_tertiary_btn {
1655
+ color: var(--_primary-400);
1656
+ &:hover {
1657
+ text-decoration: underline;
1658
+ }
1659
+ }
1660
+ }
1661
+
1662
+ .chk_payment_gift_card {
1663
+ border: 1px solid var(--_gray-200);
1664
+ border-radius: 6px;
1665
+
1666
+ .chk_payment_options_heading {
1667
+ padding: 16px;
1668
+ border-bottom: 1px solid var(--_gray-200);
1669
+ display: flex;
1670
+ justify-content: space-between;
1671
+ .payment_options_heading {
1672
+ font-size: 14px;
1673
+ font-weight: 600;
1674
+ }
1675
+ .chk_primary_btn_link {
1676
+ color: var(--_primary-400);
1677
+ &:hover {
1678
+ text-decoration: underline;
1679
+ }
1680
+ }
1681
+ }
1682
+ // gift card styles
1683
+
1684
+ // .chk_gft_crd_wrapper {
1685
+ // &_btn {
1686
+ // text-align: left;
1687
+ // margin-bottom: 16px;
1688
+ // color: var(--_primary-400);
1689
+ // &:hover {
1690
+ // text-decoration: underline;
1691
+ // }
1692
+ // }
1693
+ // }
1694
+ }
1695
+
1696
+ .chk_gft_crd_container {
1697
+ width: 100%;
1698
+ display: flex;
1699
+ flex-direction: column;
1700
+ gap: var(--_ctm-lt-pt-os-cr-hl-gp);
1701
+ background-color: var(--_base-white);
1702
+ border: 1px solid var(--_gray-300);
1703
+ border-radius: 4px;
1704
+ overflow: hidden;
1705
+
1706
+ .chk_gft_crd_option_heading {
1707
+ display: flex;
1708
+ justify-content: space-between;
1709
+ align-items: center;
1710
+ padding: 8px 12px;
1711
+ border-bottom: 1px solid var(--_gray-300);
1712
+ }
1713
+
1714
+ // gift card styles
1715
+ .chk_gft_crd_wrapper {
1716
+ display: flex;
1717
+ justify-content: space-between;
1718
+ align-items: center;
1719
+ padding: 16px 16px 0 16px;
1720
+ &_item {
1721
+ display: flex;
1722
+ align-items: center;
1723
+ gap: 16px;
1724
+ &_icon {
1725
+ width: 40px;
1726
+ height: 40px;
1727
+ border: 1px solid var(--_gray-200);
1728
+ border-radius: 6px;
1729
+ display: flex;
1730
+ justify-content: center;
1731
+ align-items: center;
1732
+ }
1733
+ &_info {
1734
+ display: flex;
1735
+ flex-direction: column;
1736
+ &_title {
1737
+ font-size: 14px;
1738
+ margin-bottom: 4px;
1739
+ font-weight: 600;
1740
+ }
1741
+ &_desc {
1742
+ display: flex;
1743
+ &_value {
1744
+ font-size: 12px;
1745
+ color: var(--_gray-600);
1746
+ }
1747
+ &_label {
1748
+ font-size: 12px;
1749
+ color: var(--_gray-900);
1750
+ }
1751
+ }
1752
+ }
1753
+ &_pin {
1754
+ margin-left: 36px;
1755
+ input[type="number"] {
1756
+ border: 1px solid var(--_gray-300);
1757
+ border-radius: 4px;
1758
+ background-color: var(--_base-white);
1759
+ width: 95px;
1760
+ height: 44px;
1761
+ padding-inline: 10px;
1762
+ &:focus {
1763
+ outline: 2px solid var(--_primary-100);
1764
+ border: 1px solid var(--_primary-300);
1765
+ }
1766
+ }
1767
+ }
1768
+ }
1769
+
1770
+ &_input {
1771
+ border: 1px solid var(--_gray-300);
1772
+ border-radius: 4px;
1773
+ background-color: var(--_base-white);
1774
+ height: 44px;
1775
+ width: 120px;
1776
+ display: flex;
1777
+ align-items: center;
1778
+ gap: 8px;
1779
+ padding-left: 10px;
1780
+ input[type="number"] {
1781
+ background-color: var(--_base-white);
1782
+ padding-right: 10px;
1783
+ }
1784
+ &:focus-within {
1785
+ outline: 2px solid var(--_primary-100);
1786
+ border: 1px solid var(--_primary-300);
1787
+ }
1788
+ }
1789
+
1790
+ .chk_gft_crd_wrapper_btn {
1791
+ color: var(--_primary-400);
1792
+ &:hover {
1793
+ text-decoration: un;
1794
+ }
1795
+ }
1796
+ }
1797
+
1798
+ // payment other options styles
1799
+ .chk_pmnt_other_options {
1800
+ display: flex;
1801
+ justify-content: space-between;
1802
+ gap: 80px;
1803
+ padding: 16px;
1804
+ .chk_pmnt_other_options_left_container {
1805
+ display: flex;
1806
+ gap: 12px;
1807
+ .chk_pmnt_option_info_wrapper {
1808
+ display: flex;
1809
+ gap: 12px;
1810
+ .cards {
1811
+ display: flex;
1812
+ flex-direction: column;
1813
+ gap: 8px;
1814
+ .chk_payment_options_name {
1815
+ font-weight: 600;
1816
+ }
1817
+ span {
1818
+ font-size: 12px;
1819
+ .chk_payment_options_label {
1820
+ color: var(--_gray-600);
1821
+ }
1822
+ .chk_payment_options_value {
1823
+ color: var(--_gray-900);
1824
+ }
1825
+ }
1826
+ }
1827
+ }
1828
+ }
1829
+ .chk_pmnt_other_options_container {
1830
+ padding: 16px;
1831
+ }
1832
+ }
1833
+
1834
+ &__other_option_wrapper {
1835
+ display: flex;
1836
+ width: 100%;
1837
+ justify-content: space-between;
1838
+ padding: 16px;
1839
+
1840
+ @media (max-width: 500px) {
1841
+ flex-direction: column;
1842
+ }
1843
+ }
1844
+
1845
+ &_left_container {
1846
+ display: flex;
1847
+ gap: 12px;
1848
+ align-items: flex-start;
1849
+ & > div {
1850
+ display: flex;
1851
+ gap: 12px;
1852
+ }
1853
+
1854
+ @media (max-width: 500px) {
1855
+ flex-wrap: wrap;
1856
+ }
1857
+ }
1858
+
1859
+ &__left_wrapper {
1860
+ display: flex;
1861
+ flex-direction: column;
1862
+ align-items: flex-start;
1863
+ gap: 16px;
1864
+ }
1865
+
1866
+ &__card_icon {
1867
+ width: 60px;
1868
+ height: 40px;
1869
+ }
1870
+
1871
+ &__info_wrapper {
1872
+ display: flex;
1873
+ flex-direction: column;
1874
+
1875
+ .chk_payment_options_name {
1876
+ color: var(--_gray-900);
1877
+ font-size: 16px;
1878
+ font-weight: 600;
1879
+ }
1880
+
1881
+ .chk_payment_options_label {
1882
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
1883
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
1884
+ text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm);
1885
+ word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp);
1886
+ word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk);
1887
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
1888
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
1889
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
1890
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
1891
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
1892
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
1893
+ }
1894
+
1895
+ .chk_payment_options_value {
1896
+ color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
1897
+ font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
1898
+ text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm);
1899
+ word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp);
1900
+ word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk);
1901
+ font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
1902
+ font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
1903
+ font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
1904
+ line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
1905
+ letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
1906
+ text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
1907
+ }
1908
+ }
1909
+
1910
+ &_right_container {
1911
+ display: flex;
1912
+ gap: 6px;
1913
+ align-items: flex-start;
1914
+
1915
+ @media (max-width: 500px) {
1916
+ justify-content: flex-end;
1917
+ }
1918
+ }
1919
+
1920
+ &_input {
1921
+ display: flex;
1922
+ padding: 8px 12px;
1923
+ width: -webkit-fill-available;
1924
+ background-color: var(--_base-white);
1925
+ border-radius: 6px;
1926
+ border: 1px solid var(--_gray-300);
1927
+
1928
+ &:focus-within {
1929
+ border: 1px solid var(--_primary-300);
1930
+ outline: 2px solid var(--_primary-100);
1931
+ }
1932
+
1933
+ .icon {
1934
+ svg {
1935
+ path {
1936
+ stroke: var(--_primary-400);
1937
+ }
1938
+ }
1939
+ }
1940
+
1941
+ .input_field {
1942
+ padding: 8px 12px;
1943
+ width: -webkit-fill-available;
1944
+ background-color: var(--_base-white);
1945
+ border-radius: 6px;
1946
+ border: 1px solid var(--_gray-300);
1947
+
1948
+ &:focus-within {
1949
+ border: 1px solid var(--_primary-300);
1950
+ outline: 2px solid var(--_primary-100);
1951
+ }
1952
+ }
1953
+ }
1954
+ }
1955
+ }
1956
+
1957
+ .react-international-phone-country-selector-button {
1958
+ border: none !important;
1959
+ height: auto !important;
1960
+ }
1961
+
1962
+ .react-international-phone-input {
1963
+ height: auto;
1964
+ border: none !important;
1965
+ color: var(--_ctm-dn-it-bx-dn-cr);
1966
+ font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
1967
+ text-transform: var(--_ctm-dn-it-bx-dn-tt-tm);
1968
+ word-wrap: var(--_ctm-dn-it-bx-dn-wd-wp);
1969
+ word-break: var(--_ctm-dn-it-bx-dn-wd-bk);
1970
+ font-size: var(--_ctm-dn-it-bx-dn-ft-se);
1971
+ font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
1972
+ font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1973
+ line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1974
+ letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1975
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
1976
+ var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1977
+ text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1978
+ text-decoration: var(--_ctm-dn-it-bx-dn-ue);
1979
+ }
1980
+
1981
+ .chk_checkbox_wrapper {
1982
+ display: flex;
1983
+ width: fit-content;
1984
+ align-items: center;
1985
+ gap: 12px;
1986
+
1987
+ input[type="checkbox"] {
1988
+ display: none;
1989
+ }
1990
+ .payment_program_title {
1991
+ font-size: 14px;
1992
+ font-weight: 500;
1993
+ color: var(--_gray-900);
1994
+ }
1995
+
1996
+ .chk_payment_options_use_as_billing_address_chkbx {
1997
+ display: flex;
1998
+ align-items: center;
1999
+ cursor: pointer;
2000
+ gap: 10px;
2001
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
2002
+ font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
2003
+ text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm);
2004
+ word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp);
2005
+ word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk);
2006
+ &.flex__overflow {
2007
+ white-space: normal;
2008
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2009
+ }
2010
+ font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
2011
+ font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
2012
+ font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
2013
+ line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
2014
+ letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
2015
+ text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
2016
+
2017
+ .custom-checkbox {
2018
+ width: 20px;
2019
+ height: 20px;
2020
+ border: 1px solid #d0d5dd;
2021
+ border-radius: 4px;
2022
+ position: relative;
2023
+ background-color: #fff;
2024
+ transition: all 0.2s ease;
2025
+
2026
+ &::after {
2027
+ content: "";
2028
+ position: absolute;
2029
+ display: none;
2030
+ left: 5px;
2031
+ top: 0.5px;
2032
+ width: 5px;
2033
+ height: 10px;
2034
+ border: solid #fff;
2035
+ border-width: 0 2px 2px 0;
2036
+ transform: rotate(45deg);
2037
+ }
2038
+ }
2039
+ }
2040
+
2041
+ .chk_shipping_address_use_as_billing_address_chkbx {
2042
+ display: flex;
2043
+ align-items: center;
2044
+ cursor: pointer;
2045
+ gap: 10px;
2046
+ color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
2047
+ font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
2048
+ text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm);
2049
+ word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp);
2050
+ word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk);
2051
+ &.flex__overflow {
2052
+ white-space: normal;
2053
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2054
+ }
2055
+ font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
2056
+ font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
2057
+ font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
2058
+ line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
2059
+ letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
2060
+ text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);
2061
+
2062
+ .custom-checkbox {
2063
+ width: 20px;
2064
+ height: 20px;
2065
+ border: 1px solid #d0d5dd;
2066
+ border-radius: 4px;
2067
+ position: relative;
2068
+ background-color: #fff;
2069
+ transition: all 0.2s ease;
2070
+
2071
+ &::after {
2072
+ content: "";
2073
+ position: absolute;
2074
+ display: none;
2075
+ left: 5px;
2076
+ top: 0.5px;
2077
+ width: 5px;
2078
+ height: 10px;
2079
+ border: solid #fff;
2080
+ border-width: 0 2px 2px 0;
2081
+ transform: rotate(45deg);
2082
+ }
2083
+ }
2084
+ }
2085
+
2086
+ input[type="checkbox"]:checked + label {
2087
+ .custom-checkbox {
2088
+ background-color: #004dff;
2089
+ border-color: #004dff;
2090
+
2091
+ &::after {
2092
+ display: block;
2093
+ }
2094
+ }
2095
+ }
2096
+ }
2097
+ .chk_address_actions {
2098
+ display: flex;
2099
+ gap: 12px;
2100
+ }
2101
+ .chk_payment-card__note {
2102
+ padding: 8px 6px;
2103
+ display: flex;
2104
+ align-items: center;
2105
+ gap: 6px;
2106
+ padding: 8px 16px;
2107
+ background-color: var(--_warning-100);
2108
+ color: var(--_warning-700);
2109
+
2110
+ .icon {
2111
+ svg {
2112
+ width: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
2113
+ height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
2114
+ path {
2115
+ stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
2116
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
2117
+ stroke-width: prepareMediaVariable(--_ctm-dn-pt-os-dn-ne-dn-se-wh, 1.25);
2118
+ }
2119
+ }
2120
+ }
2121
+ }
2122
+
2123
+ .accordion-summary {
2124
+ flex: 1;
2125
+ display: flex;
2126
+ flex-direction: column;
2127
+ gap: 0.25rem;
2128
+
2129
+ .summary-content {
2130
+ display: flex;
2131
+ flex-direction: row;
2132
+ justify-content: space-between;
2133
+ gap: 0.5rem;
2134
+
2135
+ .chk_shipping-summary {
2136
+ display: flex;
2137
+ flex-direction: column;
2138
+ gap: var(--_ctm-lt-sd-sg-as-le-gp);
2139
+ max-width: 700px;
2140
+
2141
+ .chk_address {
2142
+ display: flex;
2143
+ flex-direction: column;
2144
+ // gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
2145
+ gap: 12px;
2146
+
2147
+ .chk_saved_address_name {
2148
+ color: var(--_gray-900);
2149
+ font-size: 16px;
2150
+ font-weight: 600;
2151
+ }
2152
+
2153
+ .chk_saved_address {
2154
+ color: var(--_gray-600);
2155
+ font-size: 12px;
2156
+ }
2157
+
2158
+ .chk_saved_address_label {
2159
+ color: var(--_gray-500);
2160
+ font-size: 12px;
2161
+ }
2162
+
2163
+ .chk_saved_address_value {
2164
+ color: var(--_gray-900);
2165
+ font-size: 12px;
2166
+ }
2167
+ .address_skeletons {
2168
+ display: flex;
2169
+ gap: 8px;
2170
+ margin-bottom: 4px;
2171
+ }
2172
+ }
2173
+
2174
+ .contact {
2175
+ font-size: 0.875rem;
2176
+ color: var(--_gray-900);
2177
+ line-height: 1.4;
2178
+ }
2179
+ }
2180
+
2181
+ .right-btn {
2182
+ gap: 24px;
2183
+
2184
+ &:has(.chk_saved_address_button.selected) {
2185
+ display: flex !important;
2186
+ }
2187
+ .chk_saved_address_button {
2188
+ display: flex;
2189
+ align-items: center;
2190
+ gap: 4px;
2191
+ color: var(--_primary-400);
2192
+ }
2193
+ }
2194
+
2195
+ &:hover {
2196
+ .right-btn {
2197
+ display: flex;
2198
+ }
2199
+ }
2200
+ }
2201
+ }
2202
+ }
2203
+ }
2204
+ }
2205
+
2206
+ // credit card form syles
2207
+ .chk_cred_form_details {
2208
+ border-top: 1px solid var(--_gray-100);
2209
+ padding: 16px;
2210
+ .chk_basic_form_title {
2211
+ font-size: 14px;
2212
+ margin-bottom: 16px;
2213
+ font-weight: 600;
2214
+ }
2215
+ .chk_form_fields {
2216
+ h3 {
2217
+ font-size: 14px;
2218
+ margin-bottom: 8px;
2219
+ }
2220
+ display: flex;
2221
+ flex-direction: column;
2222
+ gap: 24px;
2223
+ width: 500px;
2224
+ .chk_form_field {
2225
+ width: 100%;
2226
+ .est__dropdown {
2227
+ align-items: start;
2228
+ .est__dropdown__button {
2229
+ width: 100%;
2230
+ .value__selected {
2231
+ align-items: center;
2232
+ justify-content: start;
2233
+ }
2234
+ }
2235
+ }
2236
+ &.expiry_details {
2237
+ width: 80px;
2238
+ }
2239
+
2240
+ display: flex;
2241
+ flex-direction: column;
2242
+ gap: 6px;
2243
+ width: 100%;
2244
+
2245
+ .chk_form_field_label {
2246
+ font-size: 14px;
2247
+ color: var(--_gray-600);
2248
+ }
2249
+ .chk_form_field_inp {
2250
+ height: 40px;
2251
+ border: 1px solid var(--_gray-300);
2252
+ border-radius: 4px;
2253
+ padding-inline: 10px;
2254
+ &:placeholder-shown {
2255
+ color: var(--_gray-400);
2256
+ padding-left: 16px;
2257
+ }
2258
+ &:focus {
2259
+ border: 1px solid var(--_primary-300);
2260
+ outline: 2px solid var(--_primary-100);
2261
+ }
2262
+ }
2263
+ .error_msg {
2264
+ display: block;
2265
+ color: var(--_error-700);
2266
+ font-size: 12px;
2267
+ }
2268
+ }
2269
+
2270
+ .checkbox {
2271
+ width: auto;
2272
+
2273
+ label {
2274
+ display: flex;
2275
+ align-items: center;
2276
+ gap: 8px;
2277
+ cursor: pointer;
2278
+ position: relative;
2279
+ user-select: none;
2280
+
2281
+ input[type="checkbox"] {
2282
+ display: none;
2283
+
2284
+ &:checked + .custom-checkbox::after {
2285
+ opacity: 1;
2286
+ }
2287
+ }
2288
+
2289
+ .custom-checkbox {
2290
+ width: 16px;
2291
+ height: 16px;
2292
+ border: 2px solid var(--_primary-400);
2293
+ border-radius: 4px;
2294
+ position: relative;
2295
+ display: inline-block;
2296
+ box-sizing: border-box;
2297
+
2298
+ &::after {
2299
+ content: "";
2300
+ position: absolute;
2301
+ left: 3px;
2302
+ top: 0px;
2303
+ width: 4px;
2304
+ height: 8px;
2305
+ border: solid var(--_primary-400);
2306
+ border-width: 0 1px 1px 0;
2307
+ transform: rotate(45deg);
2308
+ opacity: 0;
2309
+ transition: opacity 0.2s ease-in-out;
2310
+ }
2311
+ }
2312
+ }
2313
+ }
2314
+ .expiry_details {
2315
+ display: flex;
2316
+ gap: 12px;
2317
+ .cvv_inp {
2318
+ width: 110px;
2319
+ }
2320
+ }
2321
+ }
2322
+ }
2323
+
2324
+ // giftcard form styles
2325
+ .chk_gift_card_details {
2326
+ border-top: 1px solid var(--_gray-300);
2327
+ padding: 16px;
2328
+ .chk_gift_card_form {
2329
+ display: flex;
2330
+ flex-direction: column;
2331
+ gap: 16px;
2332
+ max-width: 480px;
2333
+ .chk_gift_cart_form_title {
2334
+ font-size: 14px;
2335
+ font-weight: 600;
2336
+ }
2337
+
2338
+ .chk_gift_form_fields {
2339
+ display: flex;
2340
+ gap: 12px;
2341
+ width: 100%;
2342
+ .chk_gift_inp_field {
2343
+ display: flex;
2344
+ flex-direction: column;
2345
+ gap: 6px;
2346
+ width: 100%;
2347
+ label {
2348
+ color: var(--_gray-600);
2349
+ }
2350
+ .chk_gift_inp {
2351
+ border: 1px solid var(--_gray-300);
2352
+ border-radius: 6px;
2353
+ height: 40px;
2354
+ padding-inline: 10px;
2355
+ &:placeholder-shown {
2356
+ padding-left: 10px;
2357
+ color: var(--_gray-400);
2358
+ }
2359
+ &:focus {
2360
+ border: 1px solid var(--_primary-300);
2361
+ outline: 2px solid var(--_primary-100);
2362
+ }
2363
+ }
2364
+ &.pin {
2365
+ width: 110px;
2366
+ }
2367
+ .error_msg {
2368
+ display: block;
2369
+ color: var(--_error-700);
2370
+ font-size: 12px;
2371
+ }
2372
+ }
2373
+ .error_msg {
2374
+ color: var(--_error-700);
2375
+ font-size: 14px;
2376
+ }
2377
+ }
2378
+ }
2379
+ }
2380
+ .chk_form_actions {
2381
+ display: flex;
2382
+ gap: 12px;
2383
+ .chk_sav_btn {
2384
+ padding: 12px 16px;
2385
+ background-color: var(--_primary-400);
2386
+ border-radius: 6px;
2387
+ color: var(--_base-white);
2388
+ &:hover {
2389
+ background-color: var(--_primary-500);
2390
+ }
2391
+ }
2392
+ .chk_can_btn {
2393
+ padding: 12px 16px;
2394
+ background-color: transparent;
2395
+ border-radius: 6px;
2396
+ color: var(--_gray-600);
2397
+ padding-inline: 10px;
2398
+ &:hover {
2399
+ background-color: var(--_gray-50);
2400
+ color: var(--_gray-900);
2401
+ }
2402
+ }
2403
+ }
2404
+
2405
+ .tertiary_primary_btn {
2406
+ font-size: 12px;
2407
+ color: var(--_primary-400);
2408
+ display: inline-flex;
2409
+ width: fit-content;
2410
+ &:hover {
2411
+ color: var(--_primary-500);
2412
+ text-decoration: underline;
2413
+ }
2414
+ }
2415
+ .chk_primary_bnt {
2416
+ padding: 12px 24px;
2417
+ background-color: var(--_primary-400);
2418
+ color: var(--_base-white);
2419
+ font-weight: 600;
2420
+ border-radius: 6px;
2421
+ width: max-content;
2422
+ &:hover {
2423
+ background-color: var(--_primary-500);
2424
+ }
2425
+ }
2426
+ .chk_secondary_bnt {
2427
+ padding: 16px 24px;
2428
+ background-color: transparent;
2429
+ color: var(--_gray-600);
2430
+ font-weight: 600;
2431
+ border-radius: 6px;
2432
+
2433
+ &:hover {
2434
+ background-color: var(--_gray-50);
2435
+ color: var(--_gray-900);
2436
+ }
2437
+ }
2438
+ }
2439
+
2440
+ .add_credit_card {
2441
+ display: flex;
2442
+ align-items: center;
2443
+ gap: 12px;
2444
+ padding: 16px;
2445
+
2446
+ .cc_icon {
2447
+ svg {
2448
+ width: 18px;
2449
+ height: 14px;
2450
+ }
2451
+ }
2452
+
2453
+ .cc_info {
2454
+ display: flex;
2455
+ align-items: center;
2456
+ // flex-direction: column;
2457
+ gap: 6px;
2458
+ justify-content: space-between;
2459
+ width: 100%;
2460
+
2461
+ .cc_title {
2462
+ font-size: 14px;
2463
+ font-weight: 600;
2464
+ }
2465
+ .chk_payment_cred_section_col_right {
2466
+ .chk_currency_inp_sec {
2467
+ display: flex;
2468
+ justify-content: end;
2469
+ .chk_currency_inp {
2470
+ border: 1px solid var(--_gray-200);
2471
+ min-width: 100px;
2472
+ display: flex;
2473
+ gap: 12px;
2474
+ height: 40px;
2475
+ border-radius: 4px;
2476
+ align-items: center;
2477
+ max-width: 120px;
2478
+ padding-inline: 12px;
2479
+ }
2480
+ }
2481
+ .cur_conversion {
2482
+ font-size: 14px;
2483
+ }
2484
+ }
2485
+ }
2486
+ }
2487
+ .add_new_credit_card {
2488
+ display: flex;
2489
+ justify-content: space-between;
2490
+ align-items: center;
2491
+ padding-inline: 16px;
2492
+ }
2493
+ .cc_tertiary_btn {
2494
+ color: var(--_primary-400);
2495
+
2496
+ &:hover {
2497
+ color: var(--_primary-500);
2498
+ text-decoration: underline;
2499
+ }
2500
+ }
2501
+
2502
+ // &[data-view-state="full"] {
2503
+ // width: auto;
2504
+ // margin: 0;
2505
+ // justify-self: stretch !important;
2506
+ // align-self: stretch !important;
2507
+ // cursor: auto;
2508
+ // &:is(#{$activeElementSelector}) {
2509
+ // & > div {
2510
+ // &[data-div-type="wrapper__layer"] {
2511
+ // --_sf-vt-zz: visible;
2512
+ // --_sf-op-zz: 1;
2513
+ // }
2514
+ // }
2515
+ // }
2516
+ // }
2517
+ }
2518
+ }