@sc-360-v2/storefront-cms-library 0.5.27 → 0.5.29

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 (13) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/cart.scss +16 -2
  3. package/dist/category-groups-element.scss +4 -0
  4. package/dist/category-groups-quota-details.scss +451 -0
  5. package/dist/checkout.scss +306 -1
  6. package/dist/faq.scss +574 -564
  7. package/dist/line.scss +9 -7
  8. package/dist/types/builder/tools/element-edit/cart.d.ts +16 -0
  9. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +13 -1
  10. package/dist/types/builder/tools/element-edit/designInstance.d.ts +13 -0
  11. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +31 -1
  12. package/dist/variant-picker.scss +1050 -126
  13. package/package.json +1 -1
package/dist/checkout.scss CHANGED
@@ -23,11 +23,13 @@ $dark-color: #343a40;
23
23
  )
24
24
  );
25
25
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
26
+
26
27
  & > div {
27
28
  &.wrapper {
28
29
  width: 100%;
29
30
  }
30
31
  }
32
+
31
33
  // .react-international-phone-input-container .react-international-phone-input {
32
34
  // width: 100%;
33
35
  // }
@@ -37,6 +39,7 @@ $dark-color: #343a40;
37
39
  flex-direction: column;
38
40
  gap: 12px;
39
41
  margin-top: 12px;
42
+
40
43
  & > div {
41
44
  display: flex;
42
45
  gap: 12px;
@@ -82,6 +85,7 @@ $dark-color: #343a40;
82
85
  );
83
86
  padding: var(--_ctm-mob-dn-ct-te-pg, var(--_ctm-tab-dn-ct-te-pg, var(--_ctm-dn-ct-te-pg)));
84
87
  }
88
+
85
89
  .checkout_auth_wrapper {
86
90
  display: flex;
87
91
  justify-content: space-between;
@@ -122,6 +126,7 @@ $dark-color: #343a40;
122
126
  font-weight: var(--_thm-ty-p2-bd);
123
127
  line-height: var(--_thm-ty-p2-le-ht);
124
128
  }
129
+
125
130
  .forgot_password {
126
131
  font-size: 0.85rem;
127
132
  color: #0056d2;
@@ -140,16 +145,19 @@ $dark-color: #343a40;
140
145
  text-decoration: underline;
141
146
  }
142
147
  }
148
+
143
149
  .sign_in_form {
144
150
  .grid_container {
145
151
  form {
146
152
  margin-left: -10px;
153
+
147
154
  .react-grid-layout {
148
155
  .react-grid-item {
149
156
  .grid-item {
150
157
  padding: 0px;
151
158
  padding-bottom: 16px;
152
159
  background-color: transparent;
160
+
153
161
  &:has(.error_styles) {
154
162
  padding-bottom: 0px !important;
155
163
  }
@@ -160,6 +168,7 @@ $dark-color: #343a40;
160
168
  }
161
169
  }
162
170
  }
171
+
163
172
  .create_account_section {
164
173
  display: flex;
165
174
  justify-content: space-between;
@@ -242,6 +251,7 @@ $dark-color: #343a40;
242
251
  font-weight: var(--_thm-ty-p2-bd);
243
252
  line-height: var(--_thm-ty-p2-le-ht);
244
253
  }
254
+
245
255
  .btn_primary {
246
256
  padding: 8px 16px;
247
257
  }
@@ -342,6 +352,7 @@ $dark-color: #343a40;
342
352
  .sc-phone-container .sc-phone-input-wrapper {
343
353
  border-color: var(--_gray-300);
344
354
  }
355
+
345
356
  .sc-phone-container .sc-phone-country-btn {
346
357
  border-right-color: var(--_gray-300);
347
358
  }
@@ -426,8 +437,10 @@ $dark-color: #343a40;
426
437
  // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
427
438
  flex-direction: column;
428
439
  transition: max-height 800ms ease-in;
440
+
429
441
  &.open {
430
442
  transition: max-height 800ms ease-in;
443
+
431
444
  .accordion-header {
432
445
  // background-color: var(--_gray-200);
433
446
  background-color: var(
@@ -435,10 +448,12 @@ $dark-color: #343a40;
435
448
  var(--_ctm-tab-dn-an-tb-an-hr-bd-cr, var(--_ctm-dn-an-tb-an-hr-bd-cr))
436
449
  );
437
450
  }
451
+
438
452
  .accordion-body {
439
453
  transition: max-height 800ms ease-in;
440
454
  max-height: 100%;
441
455
  padding: 8px 0px 36px 2px;
456
+
442
457
  .shipping-address {
443
458
  max-height: fit-content;
444
459
  transition: max-height 800ms ease-in;
@@ -524,6 +539,7 @@ $dark-color: #343a40;
524
539
 
525
540
  span {
526
541
  display: flex;
542
+
527
543
  svg {
528
544
  // width: var(--_ctm-dn-an-tb-an-hr-in-se);
529
545
  width: var(
@@ -534,12 +550,14 @@ $dark-color: #343a40;
534
550
  --_ctm-mob-dn-an-tb-an-hr-in-se,
535
551
  var(--_ctm-tab-dn-an-tb-an-hr-in-se, var(--_ctm-dn-an-tb-an-hr-in-se))
536
552
  );
553
+
537
554
  path {
538
555
  stroke: var(--_ctm-dn-an-tb-an-hr-in-c1);
539
556
  }
540
557
  }
541
558
  }
542
559
  }
560
+
543
561
  .edit-btn {
544
562
  // cursor: pointer;
545
563
  // color: var(--_primary-400);
@@ -749,6 +767,7 @@ $dark-color: #343a40;
749
767
  max-height: 0px;
750
768
  overflow: hidden;
751
769
  padding: 0;
770
+
752
771
  .summary {
753
772
  .chk_shipping_method_label {
754
773
  display: flex;
@@ -842,12 +861,15 @@ $dark-color: #343a40;
842
861
  max-height: 0;
843
862
  display: flex;
844
863
  flex-direction: column;
864
+
845
865
  .btn_link {
846
866
  color: var(--_primary-400);
867
+
847
868
  &:hover {
848
869
  text-decoration: underline;
849
870
  }
850
871
  }
872
+
851
873
  // gap: 24px;
852
874
  background-color: var(
853
875
  --_ctm-mob-dn-an-tb-sg-ds-as-wr-as-cr-bd-cr,
@@ -918,6 +940,7 @@ $dark-color: #343a40;
918
940
  var(--_ctm-dn-an-tb-bs-ty-py-dt-se-tt-an)
919
941
  )
920
942
  );
943
+
921
944
  &:hover {
922
945
  text-decoration: underline;
923
946
  }
@@ -937,6 +960,7 @@ $dark-color: #343a40;
937
960
  font-size: 18px;
938
961
  font-weight: 600;
939
962
  color: var(--_gray-900);
963
+
940
964
  .icon {
941
965
  background-color: #f1f1f1;
942
966
  width: 24px;
@@ -945,12 +969,14 @@ $dark-color: #343a40;
945
969
  justify-content: center;
946
970
  align-items: center;
947
971
  cursor: pointer;
972
+
948
973
  svg {
949
974
  width: 20px;
950
975
  height: 20px;
951
976
  }
952
977
  }
953
978
  }
979
+
954
980
  .select_as_default {
955
981
  background-color: #f5f8ff;
956
982
  padding: 12px 16px;
@@ -997,6 +1023,7 @@ $dark-color: #343a40;
997
1023
  --_ctm-mob-dn-an-tb-fm-wr-fm-cr-br-wh,
998
1024
  var(--_ctm-tab-dn-an-tb-fm-wr-fm-cr-br-wh, var(--_ctm-dn-an-tb-fm-wr-fm-cr-br-wh))
999
1025
  );
1026
+
1000
1027
  @media (max-width: 500px) {
1001
1028
  max-width: 100%;
1002
1029
  }
@@ -1061,9 +1088,11 @@ $dark-color: #343a40;
1061
1088
  --_ctm-mob-dn-an-tb-fm-wr-is-pg,
1062
1089
  var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
1063
1090
  );
1091
+
1064
1092
  &::placeholder {
1065
1093
  color: var(--_gray-400);
1066
1094
  }
1095
+
1067
1096
  input &:focus-within {
1068
1097
  border: 1px solid var(--_primary-300);
1069
1098
  outline: 2px solid var(--_primary-100);
@@ -1075,6 +1104,7 @@ $dark-color: #343a40;
1075
1104
  --_ctm-mob-dn-an-tb-fm-wr-is-ft-fy,
1076
1105
  var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-fy, var(--_ctm-dn-an-tb-fm-wr-is-ft-fy))
1077
1106
  );
1107
+
1078
1108
  &::placeholder {
1079
1109
  color: var(--_gray-300);
1080
1110
  }
@@ -1088,6 +1118,7 @@ $dark-color: #343a40;
1088
1118
  font-size: 12px;
1089
1119
  color: #ff0000;
1090
1120
  }
1121
+
1091
1122
  label {
1092
1123
  display: flex;
1093
1124
  align-items: center;
@@ -1248,6 +1279,7 @@ $dark-color: #343a40;
1248
1279
  );
1249
1280
  margin-bottom: 4px;
1250
1281
  }
1282
+
1251
1283
  .chk_multi_address_product_feautes {
1252
1284
  font-size: 14px;
1253
1285
  color: var(--_gray-600);
@@ -1346,6 +1378,7 @@ $dark-color: #343a40;
1346
1378
  gap: 16px;
1347
1379
  white-space: nowrap;
1348
1380
  align-items: center;
1381
+
1349
1382
  &:not(:last-child) {
1350
1383
  margin-bottom: 12px;
1351
1384
  }
@@ -1365,12 +1398,15 @@ $dark-color: #343a40;
1365
1398
  svg {
1366
1399
  width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
1367
1400
  height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
1401
+
1368
1402
  path {
1369
1403
  stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
1370
1404
  }
1371
1405
  }
1406
+
1372
1407
  &:hover {
1373
1408
  cursor: pointer;
1409
+
1374
1410
  svg {
1375
1411
  path {
1376
1412
  stroke: var(--_error-700);
@@ -1378,6 +1414,7 @@ $dark-color: #343a40;
1378
1414
  }
1379
1415
  }
1380
1416
  }
1417
+
1381
1418
  .chk_shiping_address_form_input {
1382
1419
  padding: 8px 12px;
1383
1420
  width: -webkit-fill-available;
@@ -1588,7 +1625,8 @@ $dark-color: #343a40;
1588
1625
  width: 20px;
1589
1626
  margin-right: 12px;
1590
1627
  height: 20px;
1591
- border: 1px solid transparent; /* blue ring */
1628
+ border: 1px solid transparent;
1629
+ /* blue ring */
1592
1630
  border-radius: 50%;
1593
1631
  display: inline-block;
1594
1632
  box-sizing: border-box;
@@ -1759,6 +1797,7 @@ $dark-color: #343a40;
1759
1797
 
1760
1798
  .custom_radio {
1761
1799
  position: relative;
1800
+
1762
1801
  input[type="radio"] {
1763
1802
  margin-right: 12px;
1764
1803
  width: 16px;
@@ -1767,6 +1806,7 @@ $dark-color: #343a40;
1767
1806
  cursor: pointer;
1768
1807
  display: none;
1769
1808
  }
1809
+
1770
1810
  .radio-style {
1771
1811
  width: 20px;
1772
1812
  height: 20px;
@@ -1777,6 +1817,7 @@ $dark-color: #343a40;
1777
1817
  box-sizing: border-box;
1778
1818
  transition: all 0.2s;
1779
1819
  }
1820
+
1780
1821
  input[type="radio"]:checked + .radio-style {
1781
1822
  background-color: var(--_base-white);
1782
1823
  border: 5px solid var(--_thm-py-bs-dt-se-br-cr);
@@ -1793,6 +1834,7 @@ $dark-color: #343a40;
1793
1834
  .order_level_shipping {
1794
1835
  display: flex;
1795
1836
  gap: 24px;
1837
+
1796
1838
  .order_level_shipping_img {
1797
1839
  width: 120px;
1798
1840
  height: 120px;
@@ -1801,6 +1843,7 @@ $dark-color: #343a40;
1801
1843
  }
1802
1844
  }
1803
1845
  }
1846
+
1804
1847
  // .sg__md__sn {
1805
1848
  // display: flex;
1806
1849
  // flex-wrap: wrap;
@@ -1828,10 +1871,12 @@ $dark-color: #343a40;
1828
1871
  display: flex;
1829
1872
  flex-direction: column;
1830
1873
  gap: 24px;
1874
+
1831
1875
  @media (max-width: 650px) {
1832
1876
  width: 100%;
1833
1877
  }
1834
1878
  }
1879
+
1835
1880
  display: flex;
1836
1881
  flex-direction: column;
1837
1882
  margin-top: 12px;
@@ -1842,6 +1887,7 @@ $dark-color: #343a40;
1842
1887
  var(--_ctm-dn-an-tb-pt-md-pt-md-wr-im-gp)
1843
1888
  )
1844
1889
  );
1890
+
1845
1891
  .chk_payment_options_form {
1846
1892
  display: flex;
1847
1893
  flex-direction: column;
@@ -1854,6 +1900,7 @@ $dark-color: #343a40;
1854
1900
  )
1855
1901
  );
1856
1902
  }
1903
+
1857
1904
  .payment_program {
1858
1905
  // padding: 0 12px;
1859
1906
 
@@ -1905,6 +1952,7 @@ $dark-color: #343a40;
1905
1952
  var(--_ctm-dn-an-tb-pt-md-pt-md-wr-im-gp)
1906
1953
  )
1907
1954
  );
1955
+
1908
1956
  .payment_program_header {
1909
1957
  display: flex;
1910
1958
  justify-content: space-between;
@@ -1917,15 +1965,18 @@ $dark-color: #343a40;
1917
1965
  display: flex;
1918
1966
  justify-content: space-between;
1919
1967
  align-items: center;
1968
+
1920
1969
  &_title {
1921
1970
  font-size: 14px;
1922
1971
  font-weight: 600;
1923
1972
  color: var(--_gray-600);
1924
1973
  }
1925
1974
  }
1975
+
1926
1976
  &_pds {
1927
1977
  font-size: 14px;
1928
1978
  font-weight: 600;
1979
+
1929
1980
  &_label {
1930
1981
  font-size: 14px;
1931
1982
  // color: var(--_gray-600);
@@ -1937,6 +1988,7 @@ $dark-color: #343a40;
1937
1988
  )
1938
1989
  );
1939
1990
  }
1991
+
1940
1992
  &_value {
1941
1993
  // font-size: 14px;
1942
1994
  // color: var(--_gray-900);
@@ -2043,9 +2095,11 @@ $dark-color: #343a40;
2043
2095
  // }
2044
2096
  // }
2045
2097
  }
2098
+
2046
2099
  .gift_crd_chk_payment_option {
2047
2100
  border: 1px solid var(--_gray-300);
2048
2101
  border-radius: 6px;
2102
+
2049
2103
  .add_gift_card {
2050
2104
  display: flex;
2051
2105
  gap: 12px;
@@ -2069,8 +2123,10 @@ $dark-color: #343a40;
2069
2123
  }
2070
2124
  }
2071
2125
  }
2126
+
2072
2127
  .payment_heading {
2073
2128
  padding: 16px;
2129
+
2074
2130
  .chk_payment_options_heading {
2075
2131
  padding: 0;
2076
2132
  font-weight: 600;
@@ -2140,6 +2196,7 @@ $dark-color: #343a40;
2140
2196
  border-bottom: 1px solid var(--_gray-200);
2141
2197
  padding-bottom: 16px;
2142
2198
  }
2199
+
2143
2200
  .pp_ppm_section {
2144
2201
  // background: #f5f5f5;
2145
2202
  // padding: 12px 16px;
@@ -2192,6 +2249,7 @@ $dark-color: #343a40;
2192
2249
  display: flex;
2193
2250
  justify-content: space-between;
2194
2251
  gap: 8px;
2252
+
2195
2253
  .pp_ppm_section_label {
2196
2254
  font-size: 14px;
2197
2255
  // font-weight: 700;
@@ -2274,10 +2332,12 @@ $dark-color: #343a40;
2274
2332
  )
2275
2333
  );
2276
2334
  }
2335
+
2277
2336
  .pp_ppm_section_value {
2278
2337
  font-size: 14px;
2279
2338
  font-weight: 600;
2280
2339
  color: var(--_gray-600);
2340
+
2281
2341
  .pp_ppm_section_value_label {
2282
2342
  // font-weight: 500;
2283
2343
  // color: var(--_gray-500);
@@ -2289,6 +2349,7 @@ $dark-color: #343a40;
2289
2349
  )
2290
2350
  );
2291
2351
  }
2352
+
2292
2353
  .pp_ppm_section_value_amount {
2293
2354
  // font-weight: 500;
2294
2355
  // color: var(--_gray-500);
@@ -2302,25 +2363,30 @@ $dark-color: #343a40;
2302
2363
  }
2303
2364
  }
2304
2365
  }
2366
+
2305
2367
  .payment_methods {
2306
2368
  // padding: 12px;
2307
2369
  display: grid;
2308
2370
  gap: 8px;
2371
+
2309
2372
  .chk_payment_option {
2310
2373
  .add_new_credit_card {
2311
2374
  padding: 16px 16px 0px 16px;
2312
2375
  display: flex;
2313
2376
  justify-content: space-between;
2314
2377
  font-weight: 600;
2378
+
2315
2379
  .cc_tertiary_btn {
2316
2380
  // color: var(--_primary-400);
2317
2381
  color: var(--_thm-cs-tt-ls-as);
2318
2382
  font-size: 14px;
2383
+
2319
2384
  &:hover {
2320
2385
  text-decoration: underline;
2321
2386
  }
2322
2387
  }
2323
2388
  }
2389
+
2324
2390
  .chk_payment_section_wrapper {
2325
2391
  width: 100%;
2326
2392
  display: flex;
@@ -2380,6 +2446,7 @@ $dark-color: #343a40;
2380
2446
  display: flex;
2381
2447
  justify-content: space-between;
2382
2448
  width: 100%;
2449
+
2383
2450
  @media (max-width: 650px) {
2384
2451
  flex-wrap: wrap;
2385
2452
  gap: 20px;
@@ -2389,23 +2456,28 @@ $dark-color: #343a40;
2389
2456
  display: flex;
2390
2457
  gap: 12px;
2391
2458
  width: 70%;
2459
+
2392
2460
  @media (max-width: 650px) {
2393
2461
  & > div {
2394
2462
  width: 100%;
2395
2463
  }
2396
2464
  }
2465
+
2397
2466
  svg {
2398
2467
  width: 24px;
2399
2468
  height: 24px;
2400
2469
  }
2470
+
2401
2471
  .chk_payment_section_method {
2402
2472
  display: flex;
2403
2473
  flex-direction: column;
2474
+
2404
2475
  .chk_payment_section_method_details {
2405
2476
  display: flex;
2406
2477
  flex-direction: column;
2407
2478
  gap: 6px;
2408
2479
  margin-bottom: 8px;
2480
+
2409
2481
  // align-items: center;
2410
2482
  // gap: 12px;
2411
2483
  .chk_payment_section_method_name {
@@ -2450,9 +2522,62 @@ $dark-color: #343a40;
2450
2522
  )
2451
2523
  );
2452
2524
  }
2525
+
2453
2526
  .po-container {
2454
2527
  // padding: 24px;
2455
2528
  max-width: 800px;
2529
+
2530
+ .error_msg {
2531
+ margin-top: 4px;
2532
+ }
2533
+
2534
+ input[type="text"] {
2535
+ width: -webkit-fill-available;
2536
+ height: 40px;
2537
+ background-color: var(
2538
+ --_ctm-mob-dn-an-tb-fm-wr-is-bd-cr,
2539
+ var(
2540
+ --_ctm-tab-dn-an-tb-fm-wr-is-bd-cr,
2541
+ var(--_ctm-dn-an-tb-fm-wr-is-bd-cr)
2542
+ )
2543
+ );
2544
+ border-color: var(
2545
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-cr,
2546
+ var(
2547
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-cr,
2548
+ var(--_ctm-dn-an-tb-fm-wr-is-br-cr)
2549
+ )
2550
+ );
2551
+ border-style: var(
2552
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-se,
2553
+ var(
2554
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-se,
2555
+ var(--_ctm-dn-an-tb-fm-wr-is-br-se)
2556
+ )
2557
+ );
2558
+ border-width: var(
2559
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-wh,
2560
+ var(
2561
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-wh,
2562
+ var(--_ctm-dn-an-tb-fm-wr-is-br-wh)
2563
+ )
2564
+ );
2565
+ border-radius: var(
2566
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-rs,
2567
+ var(
2568
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-rs,
2569
+ var(--_ctm-dn-an-tb-fm-wr-is-br-rs)
2570
+ )
2571
+ );
2572
+ padding: var(
2573
+ --_ctm-mob-dn-an-tb-fm-wr-is-pg,
2574
+ var(
2575
+ --_ctm-tab-dn-an-tb-fm-wr-is-pg,
2576
+ var(--_ctm-dn-an-tb-fm-wr-is-pg)
2577
+ )
2578
+ );
2579
+ }
2580
+
2456
2581
  .po-grid {
2457
2582
  width: 320px;
2458
2583
  display: grid;
@@ -2519,35 +2644,42 @@ $dark-color: #343a40;
2519
2644
  }
2520
2645
 
2521
2646
  position: relative;
2647
+
2522
2648
  &:first-child {
2523
2649
  &:focus-within {
2524
2650
  z-index: 2;
2525
2651
  }
2526
2652
  }
2653
+
2527
2654
  &:nth-child(2) {
2528
2655
  &:focus-within {
2529
2656
  z-index: 2;
2530
2657
  }
2531
2658
  }
2659
+
2532
2660
  &:nth-child(3) {
2533
2661
  &:focus-within {
2534
2662
  z-index: 2;
2535
2663
  }
2536
2664
  }
2665
+
2537
2666
  &:focus-within {
2538
2667
  border: 1px solid var(--_primary-200);
2539
2668
  outline: 2px solid var(--_primary-50);
2540
2669
  }
2541
2670
  }
2671
+
2542
2672
  .p1-input {
2543
2673
  border-top-right-radius: 0;
2544
2674
  border-bottom-right-radius: 0;
2545
2675
  }
2676
+
2546
2677
  .p2-input {
2547
2678
  border-radius: 0;
2548
2679
  border-left: none;
2549
2680
  border-right: none;
2550
2681
  }
2682
+
2551
2683
  .p3-input {
2552
2684
  border-top-left-radius: 0;
2553
2685
  border-bottom-left-radius: 0;
@@ -2555,9 +2687,11 @@ $dark-color: #343a40;
2555
2687
  }
2556
2688
  }
2557
2689
  }
2690
+
2558
2691
  & > div {
2559
2692
  display: flex;
2560
2693
  gap: 2px;
2694
+
2561
2695
  .label {
2562
2696
  font-size: 12px;
2563
2697
  // color: var(--_gray-500);
@@ -2597,6 +2731,7 @@ $dark-color: #343a40;
2597
2731
  )
2598
2732
  );
2599
2733
  }
2734
+
2600
2735
  .price {
2601
2736
  font-size: 12px;
2602
2737
  // color: var(--_gray-900);
@@ -2639,12 +2774,14 @@ $dark-color: #343a40;
2639
2774
  }
2640
2775
  }
2641
2776
  }
2777
+
2642
2778
  &_col_right {
2643
2779
  @media (max-width: 650px) {
2644
2780
  width: 100% !important;
2645
2781
  align-items: start !important;
2646
2782
  margin-left: 35px;
2647
2783
  }
2784
+
2648
2785
  width: 30%;
2649
2786
  display: flex;
2650
2787
  flex-direction: column;
@@ -2662,6 +2799,7 @@ $dark-color: #343a40;
2662
2799
  color: var(--_gray-900);
2663
2800
  font-size: 16px;
2664
2801
  font-weight: 700;
2802
+
2665
2803
  .chk_primary_btn_link {
2666
2804
  background-color: var(
2667
2805
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-bd-cr,
@@ -2832,10 +2970,12 @@ $dark-color: #343a40;
2832
2970
  var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-cr-im-gp)
2833
2971
  )
2834
2972
  );
2973
+
2835
2974
  &_item {
2836
2975
  display: flex;
2837
2976
  align-items: center;
2838
2977
  gap: 16px;
2978
+
2839
2979
  &_icon {
2840
2980
  width: 40px;
2841
2981
  height: 40px;
@@ -2845,9 +2985,11 @@ $dark-color: #343a40;
2845
2985
  justify-content: center;
2846
2986
  align-items: center;
2847
2987
  }
2988
+
2848
2989
  &_info {
2849
2990
  display: flex;
2850
2991
  flex-direction: column;
2992
+
2851
2993
  &_title {
2852
2994
  // font-size: 14px;
2853
2995
  // margin-bottom: 4px;
@@ -2892,8 +3034,10 @@ $dark-color: #343a40;
2892
3034
  )
2893
3035
  );
2894
3036
  }
3037
+
2895
3038
  &_desc {
2896
3039
  display: flex;
3040
+
2897
3041
  &_value {
2898
3042
  font-size: 12px;
2899
3043
  // color: var(--_gray-900);
@@ -2933,6 +3077,7 @@ $dark-color: #343a40;
2933
3077
  )
2934
3078
  );
2935
3079
  }
3080
+
2936
3081
  &_label {
2937
3082
  // font-size: 12px;
2938
3083
  // color: var(--_gray-900);
@@ -2976,8 +3121,10 @@ $dark-color: #343a40;
2976
3121
  }
2977
3122
  }
2978
3123
  }
3124
+
2979
3125
  &_pin {
2980
3126
  margin-left: 36px;
3127
+
2981
3128
  input[type="number"] {
2982
3129
  border: 1px solid var(--_gray-300);
2983
3130
  border-radius: 4px;
@@ -2985,6 +3132,7 @@ $dark-color: #343a40;
2985
3132
  width: 95px;
2986
3133
  height: 44px;
2987
3134
  padding-inline: 10px;
3135
+
2988
3136
  &:focus {
2989
3137
  outline: 2px solid var(--_primary-100);
2990
3138
  border: 1px solid var(--_primary-300);
@@ -3003,10 +3151,12 @@ $dark-color: #343a40;
3003
3151
  align-items: center;
3004
3152
  gap: 8px;
3005
3153
  padding-left: 10px;
3154
+
3006
3155
  input[type="number"] {
3007
3156
  background-color: var(--_base-white);
3008
3157
  padding-right: 10px;
3009
3158
  }
3159
+
3010
3160
  background-color: var(
3011
3161
  --_ctm-mob-dn-an-tb-fm-wr-is-bd-cr,
3012
3162
  var(
@@ -3046,12 +3196,14 @@ $dark-color: #343a40;
3046
3196
  --_ctm-mob-dn-an-tb-fm-wr-is-pg,
3047
3197
  var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
3048
3198
  );
3199
+
3049
3200
  &:focus-within {
3050
3201
  outline: 2px solid var(--_primary-100);
3051
3202
  border: 1px solid var(--_primary-300);
3052
3203
  }
3053
3204
  }
3054
3205
  }
3206
+
3055
3207
  .chk_gft_crd_wrapper {
3056
3208
  &_btn {
3057
3209
  // text-align: left;
@@ -3169,6 +3321,7 @@ $dark-color: #343a40;
3169
3321
  var(--_ctm-dn-an-tb-bs-ty-py-dt-se-tt-an)
3170
3322
  )
3171
3323
  );
3324
+
3172
3325
  &:hover {
3173
3326
  text-decoration: underline;
3174
3327
  }
@@ -3181,24 +3334,31 @@ $dark-color: #343a40;
3181
3334
  justify-content: space-between;
3182
3335
  gap: 80px;
3183
3336
  padding: 16px;
3337
+
3184
3338
  .chk_pmnt_other_options_left_container {
3185
3339
  display: flex;
3186
3340
  gap: 12px;
3341
+
3187
3342
  .chk_pmnt_option_info_wrapper {
3188
3343
  display: flex;
3189
3344
  gap: 12px;
3345
+
3190
3346
  .cards {
3191
3347
  display: flex;
3192
3348
  flex-direction: column;
3193
3349
  gap: 8px;
3350
+
3194
3351
  .chk_payment_options_name {
3195
3352
  font-weight: 600;
3196
3353
  }
3354
+
3197
3355
  span {
3198
3356
  font-size: 12px;
3357
+
3199
3358
  .chk_payment_options_label {
3200
3359
  color: var(--_gray-600);
3201
3360
  }
3361
+
3202
3362
  .chk_payment_options_value {
3203
3363
  color: var(--_gray-900);
3204
3364
  }
@@ -3206,6 +3366,7 @@ $dark-color: #343a40;
3206
3366
  }
3207
3367
  }
3208
3368
  }
3369
+
3209
3370
  .chk_pmnt_other_options_container {
3210
3371
  padding: 16px;
3211
3372
  }
@@ -3226,6 +3387,7 @@ $dark-color: #343a40;
3226
3387
  display: flex;
3227
3388
  gap: 12px;
3228
3389
  align-items: flex-start;
3390
+
3229
3391
  .chk_payment_option__info_wrapper {
3230
3392
  display: flex;
3231
3393
  gap: 0px;
@@ -3336,6 +3498,7 @@ $dark-color: #343a40;
3336
3498
  }
3337
3499
  }
3338
3500
  }
3501
+
3339
3502
  .chk_gift_card_wrapper {
3340
3503
  display: flex;
3341
3504
  flex-direction: column;
@@ -3444,15 +3607,18 @@ $dark-color: #343a40;
3444
3607
  display: flex;
3445
3608
  justify-content: space-between;
3446
3609
  gap: 8px;
3610
+
3447
3611
  .pp_ppm_section_label {
3448
3612
  font-size: 14px;
3449
3613
  font-weight: 700;
3450
3614
  color: var(--_gray-900);
3451
3615
  }
3616
+
3452
3617
  .pp_ppm_section_value {
3453
3618
  font-size: 14px;
3454
3619
  font-weight: 700;
3455
3620
  color: var(--_gray-600);
3621
+
3456
3622
  .pp_ppm_section_value_label {
3457
3623
  // font-weight: 500;
3458
3624
  // color: var(--_gray-500);
@@ -3527,6 +3693,7 @@ $dark-color: #343a40;
3527
3693
  )
3528
3694
  );
3529
3695
  }
3696
+
3530
3697
  .pp_ppm_section_value_amount {
3531
3698
  // font-weight: 500;
3532
3699
  // color: var(--_gray-500);
@@ -3603,10 +3770,12 @@ $dark-color: #343a40;
3603
3770
  }
3604
3771
  }
3605
3772
  }
3773
+
3606
3774
  .payment_methods {
3607
3775
  // padding: 12px;
3608
3776
  display: grid;
3609
3777
  gap: 8px;
3778
+
3610
3779
  .chk_payment_option {
3611
3780
  .chk_payment_section_wrapper {
3612
3781
  width: 100%;
@@ -3662,14 +3831,17 @@ $dark-color: #343a40;
3662
3831
  var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-is-im-gp)
3663
3832
  )
3664
3833
  );
3834
+
3665
3835
  &:hover {
3666
3836
  background-color: var(--_gray-50);
3667
3837
  }
3838
+
3668
3839
  .chk_payment_section {
3669
3840
  display: flex;
3670
3841
  justify-content: space-between;
3671
3842
  align-items: center;
3672
3843
  width: 100%;
3844
+
3673
3845
  .chk_payment_section_col_left {
3674
3846
  display: flex;
3675
3847
  gap: 12px;
@@ -3677,6 +3849,7 @@ $dark-color: #343a40;
3677
3849
  .chk_payment_section_method {
3678
3850
  display: flex;
3679
3851
  flex-direction: column;
3852
+
3680
3853
  .chk_payment_section_method_name {
3681
3854
  font-size: 14px;
3682
3855
  // font-weight: 700;
@@ -3718,8 +3891,10 @@ $dark-color: #343a40;
3718
3891
  )
3719
3892
  );
3720
3893
  }
3894
+
3721
3895
  & > div {
3722
3896
  display: flex;
3897
+
3723
3898
  .label {
3724
3899
  font-size: 12px;
3725
3900
  // color: var(--_gray-500);
@@ -3759,6 +3934,7 @@ $dark-color: #343a40;
3759
3934
  )
3760
3935
  );
3761
3936
  }
3937
+
3762
3938
  .price {
3763
3939
  font-size: 12px;
3764
3940
  // color: var(--_gray-900);
@@ -3801,6 +3977,7 @@ $dark-color: #343a40;
3801
3977
  }
3802
3978
  }
3803
3979
  }
3980
+
3804
3981
  &_col_right {
3805
3982
  }
3806
3983
  }
@@ -3817,10 +3994,12 @@ $dark-color: #343a40;
3817
3994
  justify-content: space-between;
3818
3995
  align-items: center;
3819
3996
  padding: 16px 16px 0 16px;
3997
+
3820
3998
  &_item {
3821
3999
  display: flex;
3822
4000
  align-items: center;
3823
4001
  gap: 16px;
4002
+
3824
4003
  &_icon {
3825
4004
  width: 40px;
3826
4005
  height: 40px;
@@ -3830,28 +4009,35 @@ $dark-color: #343a40;
3830
4009
  justify-content: center;
3831
4010
  align-items: center;
3832
4011
  }
4012
+
3833
4013
  &_info {
3834
4014
  display: flex;
3835
4015
  flex-direction: column;
4016
+
3836
4017
  &_title {
3837
4018
  font-size: 14px;
3838
4019
  margin-bottom: 4px;
3839
4020
  font-weight: 600;
3840
4021
  }
4022
+
3841
4023
  &_desc {
3842
4024
  display: flex;
4025
+
3843
4026
  &_value {
3844
4027
  font-size: 12px;
3845
4028
  color: var(--_gray-600);
3846
4029
  }
4030
+
3847
4031
  &_label {
3848
4032
  font-size: 12px;
3849
4033
  color: var(--_gray-900);
3850
4034
  }
3851
4035
  }
3852
4036
  }
4037
+
3853
4038
  &_pin {
3854
4039
  margin-left: 36px;
4040
+
3855
4041
  input[type="number"] {
3856
4042
  border: 1px solid var(--_gray-300);
3857
4043
  border-radius: 4px;
@@ -3859,6 +4045,7 @@ $dark-color: #343a40;
3859
4045
  width: 95px;
3860
4046
  height: 44px;
3861
4047
  padding-inline: 10px;
4048
+
3862
4049
  &:focus {
3863
4050
  outline: 2px solid var(--_primary-100);
3864
4051
  border: 1px solid var(--_primary-300);
@@ -3877,21 +4064,25 @@ $dark-color: #343a40;
3877
4064
  align-items: center;
3878
4065
  gap: 8px;
3879
4066
  padding-left: 10px;
4067
+
3880
4068
  input[type="number"] {
3881
4069
  background-color: var(--_base-white);
3882
4070
  padding-right: 10px;
3883
4071
  }
4072
+
3884
4073
  &:focus-within {
3885
4074
  outline: 2px solid var(--_primary-100);
3886
4075
  border: 1px solid var(--_primary-300);
3887
4076
  }
3888
4077
  }
3889
4078
  }
4079
+
3890
4080
  .chk_gft_crd_wrapper {
3891
4081
  &_btn {
3892
4082
  text-align: left;
3893
4083
  margin-bottom: 16px;
3894
4084
  color: var(--_primary-400);
4085
+
3895
4086
  &:hover {
3896
4087
  text-decoration: underline;
3897
4088
  }
@@ -3904,24 +4095,31 @@ $dark-color: #343a40;
3904
4095
  justify-content: space-between;
3905
4096
  gap: 80px;
3906
4097
  padding: 16px;
4098
+
3907
4099
  .chk_pmnt_other_options_left_container {
3908
4100
  display: flex;
3909
4101
  gap: 12px;
4102
+
3910
4103
  .chk_pmnt_option_info_wrapper {
3911
4104
  display: flex;
3912
4105
  gap: 12px;
4106
+
3913
4107
  .cards {
3914
4108
  display: flex;
3915
4109
  flex-direction: column;
3916
4110
  gap: 8px;
4111
+
3917
4112
  .chk_payment_options_name {
3918
4113
  font-weight: 600;
3919
4114
  }
4115
+
3920
4116
  span {
3921
4117
  font-size: 12px;
4118
+
3922
4119
  .chk_payment_options_label {
3923
4120
  color: var(--_gray-600);
3924
4121
  }
4122
+
3925
4123
  .chk_payment_options_value {
3926
4124
  color: var(--_gray-900);
3927
4125
  }
@@ -3929,6 +4127,7 @@ $dark-color: #343a40;
3929
4127
  }
3930
4128
  }
3931
4129
  }
4130
+
3932
4131
  .chk_pmnt_other_options_container {
3933
4132
  padding: 16px;
3934
4133
  }
@@ -3949,6 +4148,7 @@ $dark-color: #343a40;
3949
4148
  display: flex;
3950
4149
  gap: 12px;
3951
4150
  align-items: flex-start;
4151
+
3952
4152
  .chk_payment_option__info_wrapper {
3953
4153
  display: flex;
3954
4154
  gap: 0px;
@@ -4084,10 +4284,12 @@ $dark-color: #343a40;
4084
4284
  justify-content: space-between;
4085
4285
  align-items: center;
4086
4286
  padding: 16px 16px 0 16px;
4287
+
4087
4288
  &_item {
4088
4289
  display: flex;
4089
4290
  align-items: center;
4090
4291
  gap: 16px;
4292
+
4091
4293
  &_icon {
4092
4294
  width: 40px;
4093
4295
  height: 40px;
@@ -4097,28 +4299,35 @@ $dark-color: #343a40;
4097
4299
  justify-content: center;
4098
4300
  align-items: center;
4099
4301
  }
4302
+
4100
4303
  &_info {
4101
4304
  display: flex;
4102
4305
  flex-direction: column;
4306
+
4103
4307
  &_title {
4104
4308
  font-size: 14px;
4105
4309
  margin-bottom: 4px;
4106
4310
  font-weight: 600;
4107
4311
  }
4312
+
4108
4313
  &_desc {
4109
4314
  display: flex;
4315
+
4110
4316
  &_value {
4111
4317
  font-size: 12px;
4112
4318
  color: var(--_gray-600);
4113
4319
  }
4320
+
4114
4321
  &_label {
4115
4322
  font-size: 12px;
4116
4323
  color: var(--_gray-900);
4117
4324
  }
4118
4325
  }
4119
4326
  }
4327
+
4120
4328
  &_pin {
4121
4329
  margin-left: 36px;
4330
+
4122
4331
  input[type="number"] {
4123
4332
  border: 1px solid var(--_gray-300);
4124
4333
  border-radius: 4px;
@@ -4126,6 +4335,7 @@ $dark-color: #343a40;
4126
4335
  width: 95px;
4127
4336
  height: 44px;
4128
4337
  padding-inline: 10px;
4338
+
4129
4339
  &:focus {
4130
4340
  outline: 2px solid var(--_primary-100);
4131
4341
  border: 1px solid var(--_primary-300);
@@ -4144,21 +4354,25 @@ $dark-color: #343a40;
4144
4354
  align-items: center;
4145
4355
  gap: 8px;
4146
4356
  padding-left: 10px;
4357
+
4147
4358
  input[type="number"] {
4148
4359
  background-color: var(--_base-white);
4149
4360
  padding-right: 10px;
4150
4361
  }
4362
+
4151
4363
  &:focus-within {
4152
4364
  outline: 2px solid var(--_primary-100);
4153
4365
  border: 1px solid var(--_primary-300);
4154
4366
  }
4155
4367
  }
4156
4368
  }
4369
+
4157
4370
  .chk_gft_crd_wrapper {
4158
4371
  &_btn {
4159
4372
  text-align: left;
4160
4373
  margin-bottom: 16px;
4161
4374
  color: var(--_primary-400);
4375
+
4162
4376
  &:hover {
4163
4377
  text-decoration: underline;
4164
4378
  }
@@ -4171,24 +4385,31 @@ $dark-color: #343a40;
4171
4385
  justify-content: space-between;
4172
4386
  gap: 80px;
4173
4387
  padding: 16px;
4388
+
4174
4389
  .chk_pmnt_other_options_left_container {
4175
4390
  display: flex;
4176
4391
  gap: 12px;
4392
+
4177
4393
  .chk_pmnt_option_info_wrapper {
4178
4394
  display: flex;
4179
4395
  gap: 12px;
4396
+
4180
4397
  .cards {
4181
4398
  display: flex;
4182
4399
  flex-direction: column;
4183
4400
  gap: 8px;
4401
+
4184
4402
  .chk_payment_options_name {
4185
4403
  font-weight: 600;
4186
4404
  }
4405
+
4187
4406
  span {
4188
4407
  font-size: 12px;
4408
+
4189
4409
  .chk_payment_options_label {
4190
4410
  color: var(--_gray-600);
4191
4411
  }
4412
+
4192
4413
  .chk_payment_options_value {
4193
4414
  color: var(--_gray-900);
4194
4415
  }
@@ -4196,6 +4417,7 @@ $dark-color: #343a40;
4196
4417
  }
4197
4418
  }
4198
4419
  }
4420
+
4199
4421
  .chk_pmnt_other_options_container {
4200
4422
  padding: 16px;
4201
4423
  }
@@ -4216,6 +4438,7 @@ $dark-color: #343a40;
4216
4438
  display: flex;
4217
4439
  gap: 12px;
4218
4440
  align-items: flex-start;
4441
+
4219
4442
  & > div {
4220
4443
  display: flex;
4221
4444
  gap: 12px;
@@ -4316,6 +4539,7 @@ $dark-color: #343a40;
4316
4539
  }
4317
4540
  }
4318
4541
  }
4542
+
4319
4543
  .chk_payment_gift_card {
4320
4544
  display: flex;
4321
4545
  flex-direction: column;
@@ -4401,6 +4625,7 @@ $dark-color: #343a40;
4401
4625
  justify-content: space-between;
4402
4626
  gap: 8px;
4403
4627
  }
4628
+
4404
4629
  .chk_payment_options_heading {
4405
4630
  // color: var(--_gray-900);
4406
4631
  // font-size: 16px;
@@ -4453,6 +4678,7 @@ $dark-color: #343a40;
4453
4678
  display: flex;
4454
4679
  justify-content: space-between;
4455
4680
  gap: 8px;
4681
+
4456
4682
  .payment_options_heading {
4457
4683
  color: var(
4458
4684
  --_ctm-mob-dn-an-tb-pt-md-pt-pm-pm-te-cr,
@@ -4646,6 +4872,7 @@ $dark-color: #343a40;
4646
4872
  var(--_ctm-dn-an-tb-bs-ty-py-dt-se-tt-an)
4647
4873
  )
4648
4874
  );
4875
+
4649
4876
  &:hover {
4650
4877
  background-color: var(
4651
4878
  --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-bd-cr,
@@ -4844,6 +5071,7 @@ $dark-color: #343a40;
4844
5071
  --_ctm-mob-an-tb-bg-as-bg-te-lr-sg,
4845
5072
  var(--_ctm-tab-an-tb-bg-as-bg-te-lr-sg, var(--_ctm-an-tb-bg-as-bg-te-lr-sg))
4846
5073
  );
5074
+
4847
5075
  &.pl_0 {
4848
5076
  padding-left: 0px;
4849
5077
  }
@@ -4878,6 +5106,7 @@ $dark-color: #343a40;
4878
5106
  letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
4879
5107
  text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
4880
5108
  }
5109
+
4881
5110
  .icon {
4882
5111
  cursor: pointer;
4883
5112
  }
@@ -4993,6 +5222,7 @@ $dark-color: #343a40;
4993
5222
  --_ctm-mob-dn-an-tb-fm-wr-is-pg,
4994
5223
  var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
4995
5224
  );
5225
+
4996
5226
  &::placeholder {
4997
5227
  font-family: var(
4998
5228
  --_ctm-mob-dn-an-tb-fm-wr-is-ft-fy,
@@ -5183,6 +5413,7 @@ $dark-color: #343a40;
5183
5413
  padding: 12px 16px;
5184
5414
  border-radius: 4px;
5185
5415
  color: var(--_gray-600);
5416
+
5186
5417
  &:hover {
5187
5418
  background-color: var(--_gray-100);
5188
5419
  }
@@ -5191,6 +5422,7 @@ $dark-color: #343a40;
5191
5422
  input[type="checkbox"] {
5192
5423
  display: none;
5193
5424
  }
5425
+
5194
5426
  .payment_program_title {
5195
5427
  font-size: 16px;
5196
5428
  // font-weight: 500;
@@ -5363,6 +5595,7 @@ $dark-color: #343a40;
5363
5595
  }
5364
5596
  }
5365
5597
  }
5598
+
5366
5599
  .chk_address_actions {
5367
5600
  display: flex;
5368
5601
  gap: 12px;
@@ -5382,6 +5615,7 @@ $dark-color: #343a40;
5382
5615
  svg {
5383
5616
  width: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
5384
5617
  height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
5618
+
5385
5619
  path {
5386
5620
  stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
5387
5621
  }
@@ -5494,12 +5728,14 @@ $dark-color: #343a40;
5494
5728
  color: var(--_gray-600);
5495
5729
  line-height: 20px;
5496
5730
  font-weight: 600;
5731
+
5497
5732
  .chk_saved_address_contact {
5498
5733
  font-size: 14px;
5499
5734
  color: #101828;
5500
5735
  line-height: 20px;
5501
5736
  font-weight: 600;
5502
5737
  }
5738
+
5503
5739
  .chk_saved_address_label {
5504
5740
  color: var(--_gray-500);
5505
5741
  font-weight: 500;
@@ -5512,6 +5748,7 @@ $dark-color: #343a40;
5512
5748
  font-size: 14px;
5513
5749
  margin-right: 6px;
5514
5750
  }
5751
+
5515
5752
  .chk_saved_address_value + .chk_saved_address_label {
5516
5753
  margin-left: 6px;
5517
5754
  }
@@ -5522,6 +5759,7 @@ $dark-color: #343a40;
5522
5759
  display: flex;
5523
5760
  align-items: center;
5524
5761
  gap: 24px;
5762
+
5525
5763
  &.selected {
5526
5764
  display: block;
5527
5765
  }
@@ -5531,6 +5769,7 @@ $dark-color: #343a40;
5531
5769
  height: fit-content;
5532
5770
  align-items: center;
5533
5771
  }
5772
+
5534
5773
  .chk_saved_address_button {
5535
5774
  display: flex;
5536
5775
  align-items: center;
@@ -5542,6 +5781,7 @@ $dark-color: #343a40;
5542
5781
  var(--_ctm-dn-an-tb-bs-ty-py-hr-se-cr)
5543
5782
  )
5544
5783
  );
5784
+
5545
5785
  & > span {
5546
5786
  display: flex;
5547
5787
  }
@@ -5555,6 +5795,7 @@ $dark-color: #343a40;
5555
5795
  // height: fit-content;
5556
5796
  }
5557
5797
  }
5798
+
5558
5799
  &:hover {
5559
5800
  background-color: var(--_gray-50);
5560
5801
  }
@@ -5569,33 +5810,41 @@ $dark-color: #343a40;
5569
5810
  .chk_cred_form_details {
5570
5811
  border-top: 1px solid var(--_gray-100);
5571
5812
  padding: 16px;
5813
+
5572
5814
  .chk_basic_form_title {
5573
5815
  font-size: 14px;
5574
5816
  margin-bottom: 16px;
5575
5817
  font-weight: 600;
5576
5818
  }
5819
+
5577
5820
  .chk_form_fields {
5578
5821
  width: 100%;
5822
+
5579
5823
  h3 {
5580
5824
  font-size: 14px;
5581
5825
  margin-bottom: 8px;
5582
5826
  }
5827
+
5583
5828
  display: flex;
5584
5829
  flex-direction: column;
5585
5830
  gap: 24px;
5586
5831
  width: 500px;
5832
+
5587
5833
  .chk_form_field {
5588
5834
  width: 100%;
5835
+
5589
5836
  .est__dropdown__button {
5590
5837
  width: 100%;
5591
5838
  display: flex;
5592
5839
  justify-content: space-between;
5840
+
5593
5841
  .value__selected {
5594
5842
  justify-content: flex-start;
5595
5843
  align-items: center;
5596
5844
  display: flex;
5597
5845
  }
5598
5846
  }
5847
+
5599
5848
  &.expiry_details {
5600
5849
  width: 80px;
5601
5850
  }
@@ -5614,6 +5863,7 @@ $dark-color: #343a40;
5614
5863
  );
5615
5864
  color: var(--_gray-700);
5616
5865
  }
5866
+
5617
5867
  .chk_form_field_inp {
5618
5868
  width: -webkit-fill-available;
5619
5869
  height: 40px;
@@ -5646,6 +5896,7 @@ $dark-color: #343a40;
5646
5896
  --_ctm-mob-dn-an-tb-fm-wr-is-pg,
5647
5897
  var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
5648
5898
  );
5899
+
5649
5900
  &::placeholder {
5650
5901
  font-family: var(
5651
5902
  --_ctm-mob-dn-an-tb-fm-wr-is-ft-fy,
@@ -5684,11 +5935,13 @@ $dark-color: #343a40;
5684
5935
  var(--_ctm-tab-dn-an-tb-fm-wr-is-tt-an, var(--_ctm-dn-an-tb-fm-wr-is-tt-an))
5685
5936
  );
5686
5937
  }
5938
+
5687
5939
  input &:focus-within {
5688
5940
  border: 1px solid var(--_primary-300);
5689
5941
  outline: 2px solid var(--_primary-100);
5690
5942
  }
5691
5943
  }
5944
+
5692
5945
  .error_msg {
5693
5946
  display: block;
5694
5947
  color: var(--_error-700);
@@ -5740,9 +5993,11 @@ $dark-color: #343a40;
5740
5993
  }
5741
5994
  }
5742
5995
  }
5996
+
5743
5997
  .expiry_details {
5744
5998
  display: flex;
5745
5999
  gap: 12px;
6000
+
5746
6001
  .cvv_inp {
5747
6002
  width: 110px;
5748
6003
  }
@@ -5754,11 +6009,13 @@ $dark-color: #343a40;
5754
6009
  .chk_gift_card_details {
5755
6010
  border-top: 1px solid var(--_gray-300);
5756
6011
  padding: 16px;
6012
+
5757
6013
  .chk_gift_card_form {
5758
6014
  display: flex;
5759
6015
  flex-direction: column;
5760
6016
  gap: 16px;
5761
6017
  max-width: 480px;
6018
+
5762
6019
  .chk_gift_cart_form_title {
5763
6020
  font-size: 14px;
5764
6021
  font-weight: 600;
@@ -5768,37 +6025,45 @@ $dark-color: #343a40;
5768
6025
  display: flex;
5769
6026
  gap: 12px;
5770
6027
  width: 100%;
6028
+
5771
6029
  .chk_gift_inp_field {
5772
6030
  display: flex;
5773
6031
  flex-direction: column;
5774
6032
  gap: 6px;
5775
6033
  width: 100%;
6034
+
5776
6035
  label {
5777
6036
  color: var(--_gray-600);
5778
6037
  }
6038
+
5779
6039
  .chk_gift_inp {
5780
6040
  border: 1px solid var(--_gray-300);
5781
6041
  border-radius: 6px;
5782
6042
  height: 40px;
5783
6043
  padding-inline: 10px;
6044
+
5784
6045
  &:placeholder-shown {
5785
6046
  padding-left: 10px;
5786
6047
  color: var(--_gray-400);
5787
6048
  }
6049
+
5788
6050
  &:focus {
5789
6051
  border: 1px solid var(--_primary-300);
5790
6052
  outline: 2px solid var(--_primary-100);
5791
6053
  }
5792
6054
  }
6055
+
5793
6056
  &.pin {
5794
6057
  width: 110px;
5795
6058
  }
6059
+
5796
6060
  .error_msg {
5797
6061
  display: block;
5798
6062
  color: var(--_error-700);
5799
6063
  font-size: 12px;
5800
6064
  }
5801
6065
  }
6066
+
5802
6067
  .error_msg {
5803
6068
  color: var(--_error-700);
5804
6069
  font-size: 14px;
@@ -5806,20 +6071,24 @@ $dark-color: #343a40;
5806
6071
  }
5807
6072
  }
5808
6073
  }
6074
+
5809
6075
  .chk_form_actions {
5810
6076
  display: flex;
5811
6077
  gap: 12px;
6078
+
5812
6079
  .chk_sav_btn {
5813
6080
  padding: 12px 16px;
5814
6081
  background-color: var(--_thm-py-bs-dt-se-bd-cr);
5815
6082
  border-radius: 6px;
5816
6083
  color: var(--_thm-py-bs-dt-se-tt-cr);
5817
6084
  font-size: 14px;
6085
+
5818
6086
  &:hover {
5819
6087
  background-color: var(--_thm-py-bs-hr-se-bd-cr);
5820
6088
  color: var(--_thm-py-bs-hr-se-tt-cr);
5821
6089
  }
5822
6090
  }
6091
+
5823
6092
  .chk_can_btn {
5824
6093
  padding: 12px 16px;
5825
6094
  background-color: transparent;
@@ -5876,32 +6145,39 @@ $dark-color: #343a40;
5876
6145
  --_ctm-mob-dn-an-tb-fm-wr-is-pg,
5877
6146
  var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
5878
6147
  );
6148
+
5879
6149
  &:focus-within {
5880
6150
  border: 1px solid var(--_primary-200);
5881
6151
  outline: 2px solid var(--_primary-50);
5882
6152
  }
6153
+
5883
6154
  input {
5884
6155
  height: inherit;
5885
6156
  background-color: var(--_base-white);
6157
+
5886
6158
  &:disabled {
5887
6159
  opacity: 0.8;
5888
6160
  cursor: not-allowed;
5889
6161
  }
5890
6162
  }
5891
6163
  }
6164
+
5892
6165
  .chk_payment_cred_section_col_left {
5893
6166
  .chk_payment_cred_section_col_left_crd_details {
5894
6167
  display: flex;
5895
6168
  gap: 80px;
5896
6169
  align-items: center;
6170
+
5897
6171
  & > div {
5898
6172
  display: flex;
5899
6173
  gap: 12px;
6174
+
5900
6175
  .card_icon {
5901
6176
  width: 60px;
5902
6177
  height: 40px;
5903
6178
  border-radius: 4px;
5904
6179
  }
6180
+
5905
6181
  .card_details {
5906
6182
  .card_details_num {
5907
6183
  // font-size: 12px;
@@ -5945,8 +6221,10 @@ $dark-color: #343a40;
5945
6221
  )
5946
6222
  );
5947
6223
  }
6224
+
5948
6225
  & > div {
5949
6226
  display: flex;
6227
+
5950
6228
  .card_details_label {
5951
6229
  // font-size: 12px;
5952
6230
  // color: var(--_gray-500);
@@ -5987,6 +6265,7 @@ $dark-color: #343a40;
5987
6265
  )
5988
6266
  );
5989
6267
  }
6268
+
5990
6269
  .card_details_value {
5991
6270
  // font-size: 12px;
5992
6271
  // color: var(--_gray-900);
@@ -6037,6 +6316,7 @@ $dark-color: #343a40;
6037
6316
  .chk_payment_remove_card {
6038
6317
  padding-inline: 16px;
6039
6318
  margin-block: 8px;
6319
+
6040
6320
  .error_msg {
6041
6321
  font-size: 12px;
6042
6322
  color: var(--_error-700);
@@ -6120,6 +6400,7 @@ $dark-color: #343a40;
6120
6400
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-tt-an,
6121
6401
  var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-tt-an, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-tt-an))
6122
6402
  );
6403
+
6123
6404
  &:hover {
6124
6405
  text-decoration: var(
6125
6406
  --_ctm-mob-dn-an-tb-bs-ty-py-hr-se-ue,
@@ -6127,6 +6408,7 @@ $dark-color: #343a40;
6127
6408
  );
6128
6409
  }
6129
6410
  }
6411
+
6130
6412
  .chk_primary_bnt {
6131
6413
  // padding: 12px 24px;
6132
6414
  // background-color: var(--_primary-400);
@@ -6199,6 +6481,7 @@ $dark-color: #343a40;
6199
6481
  --_ctm-mob-dn-an-tb-bs-py-dt-se-tt-an,
6200
6482
  var(--_ctm-tab-dn-an-tb-bs-py-dt-se-tt-an, var(--_ctm-dn-an-tb-bs-py-dt-se-tt-an))
6201
6483
  );
6484
+
6202
6485
  &:hover {
6203
6486
  background-color: var(
6204
6487
  --_ctm-mob-dn-an-tb-bs-py-hr-se-bd-cr,
@@ -6262,6 +6545,7 @@ $dark-color: #343a40;
6262
6545
  );
6263
6546
  }
6264
6547
  }
6548
+
6265
6549
  .chk_secondary_bnt {
6266
6550
  padding: 16px 24px;
6267
6551
  background-color: transparent;
@@ -6281,10 +6565,12 @@ $dark-color: #343a40;
6281
6565
  justify-content: space-between;
6282
6566
  align-items: center;
6283
6567
  padding: 16px;
6568
+
6284
6569
  &_item {
6285
6570
  display: flex;
6286
6571
  align-items: center;
6287
6572
  gap: 16px;
6573
+
6288
6574
  &_icon {
6289
6575
  width: 40px;
6290
6576
  height: 40px;
@@ -6294,23 +6580,28 @@ $dark-color: #343a40;
6294
6580
  justify-content: center;
6295
6581
  align-items: center;
6296
6582
  }
6583
+
6297
6584
  &_info {
6298
6585
  display: flex;
6299
6586
  flex-direction: column;
6587
+
6300
6588
  &_title {
6301
6589
  font-size: 14px;
6302
6590
  margin-bottom: 4px;
6303
6591
  font-weight: 600;
6304
6592
  }
6593
+
6305
6594
  &_desc {
6306
6595
  display: flex;
6307
6596
  gap: 4px;
6597
+
6308
6598
  &_divider {
6309
6599
  width: 1px;
6310
6600
  height: 10px;
6311
6601
  background-color: #667085;
6312
6602
  display: block;
6313
6603
  }
6604
+
6314
6605
  &_value {
6315
6606
  font-size: 12px;
6316
6607
  font-family: var(
@@ -6351,6 +6642,7 @@ $dark-color: #343a40;
6351
6642
  // font-size: 12px;
6352
6643
  // color: var(--_gray-600);
6353
6644
  }
6645
+
6354
6646
  &_label {
6355
6647
  // font-size: 12px;
6356
6648
  // color: var(--_gray-900);
@@ -6394,8 +6686,10 @@ $dark-color: #343a40;
6394
6686
  }
6395
6687
  }
6396
6688
  }
6689
+
6397
6690
  &_pin {
6398
6691
  margin-left: 36px;
6692
+
6399
6693
  input[type="number"] {
6400
6694
  border: 1px solid var(--_gray-300);
6401
6695
  border-radius: 4px;
@@ -6403,10 +6697,12 @@ $dark-color: #343a40;
6403
6697
  width: 95px;
6404
6698
  height: 44px;
6405
6699
  padding-inline: 10px;
6700
+
6406
6701
  &:focus {
6407
6702
  outline: 2px solid var(--_primary-100);
6408
6703
  border: 1px solid var(--_primary-300);
6409
6704
  }
6705
+
6410
6706
  &:disabled {
6411
6707
  opacity: 0.8;
6412
6708
  cursor: not-allowed;
@@ -6425,20 +6721,24 @@ $dark-color: #343a40;
6425
6721
  align-items: center;
6426
6722
  gap: 8px;
6427
6723
  padding-left: 10px;
6724
+
6428
6725
  input[type="number"] {
6429
6726
  background-color: var(--_base-white);
6430
6727
  padding-right: 10px;
6728
+
6431
6729
  &:disabled {
6432
6730
  opacity: 0.8;
6433
6731
  cursor: not-allowed;
6434
6732
  }
6435
6733
  }
6734
+
6436
6735
  &:focus-within {
6437
6736
  outline: 2px solid var(--_primary-100);
6438
6737
  border: 1px solid var(--_primary-300);
6439
6738
  }
6440
6739
  }
6441
6740
  }
6741
+
6442
6742
  .chk_gft_crd_wrapper {
6443
6743
  &_btn {
6444
6744
  background-color: var(
@@ -6506,6 +6806,7 @@ $dark-color: #343a40;
6506
6806
  --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-tt-an,
6507
6807
  var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-tt-an, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-tt-an))
6508
6808
  );
6809
+
6509
6810
  &:hover {
6510
6811
  text-decoration: underline;
6511
6812
  }
@@ -6536,12 +6837,14 @@ $dark-color: #343a40;
6536
6837
  }
6537
6838
  }
6538
6839
  }
6840
+
6539
6841
  .add_new_credit_card {
6540
6842
  display: flex;
6541
6843
  justify-content: space-between;
6542
6844
  align-items: center;
6543
6845
  padding-inline: 16px;
6544
6846
  }
6847
+
6545
6848
  .cc_tertiary_btn {
6546
6849
  // color: var(--_primary-400);
6547
6850
  color: var(--_thm-cs-tt-ls-as);
@@ -6563,6 +6866,7 @@ $dark-color: #343a40;
6563
6866
  color: var(--_thm-cs-tt-ls-as);
6564
6867
  text-decoration: underline;
6565
6868
  }
6869
+
6566
6870
  &:disabled {
6567
6871
  opacity: 0.5;
6568
6872
  pointer-events: none;
@@ -6611,6 +6915,7 @@ $dark-color: #343a40;
6611
6915
  border: 1px solid var(--_primary-200);
6612
6916
  outline: 2px solid var(--_primary-50);
6613
6917
  }
6918
+
6614
6919
  input {
6615
6920
  height: inherit;
6616
6921
  }