@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.59

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