@sc-360-v2/storefront-cms-library 0.5.51 → 0.5.52

package/dist/modal.scss

@@ -108,8 +108,10 @@ $active_btn_text_color: #fff;
       align-items: center;
       justify-content: center;
       border-radius: 4px;
+
       span {
         display: flex;
+
         svg {
           width: 20px;
           height: 20px;
@@ -134,6 +136,7 @@ $active_btn_text_color: #fff;
     width: 100%;
     margin-top: 24px;
   }
+
   .modal-footer-wrapper {
     display: flex;
     width: 100%;
@@ -142,6 +145,7 @@ $active_btn_text_color: #fff;
     .wishlist_button_wrapper {
       position: relative;
       width: 100%;
+
       .wishlist_btn {
         width: 100%;
         display: flex;
@@ -149,11 +153,13 @@ $active_btn_text_color: #fff;
         align-items: center;
         color: var(--_thm-py-bs-dt-se-tt-cr);
         height: 100%;
+
         &:hover {
           color: var(--_thm-py-bs-hr-se-tt-cr);
           text-decoration: underline;
         }
       }
+
       .wishlist_list_overlay {
         position: absolute;
         z-index: 10;
@@ -177,9 +183,11 @@ $active_btn_text_color: #fff;
           font-size: 16px;
           font-weight: 500;
           text-align: center;
+
           .dots {
             display: inline-flex;
-            width: 20px; /* fixed space so text doesn’t shift */
+            width: 20px;
+            /* fixed space so text doesn’t shift */
             justify-content: space-between;
             align-items: flex-end;
             margin-left: 6px;
@@ -198,9 +206,11 @@ $active_btn_text_color: #fff;
           .dots span:nth-child(1) {
             animation-delay: 0s;
           }
+
           .dots span:nth-child(2) {
             animation-delay: 0.3s;
           }
+
           .dots span:nth-child(3) {
             animation-delay: 0.6s;
           }
@@ -209,14 +219,17 @@ $active_btn_text_color: #fff;
             0% {
               opacity: 0;
             }
+
             50% {
               opacity: 1;
             }
+
             100% {
               opacity: 0;
             }
           }
         }
+
         .wishlist_overlay_header {
           display: flex;
           justify-content: space-between;
@@ -225,6 +238,7 @@ $active_btn_text_color: #fff;
           font-size: 14px;
           font-weight: 600;
         }
+
         .wishlist_list_items {
           display: flex;
           flex-direction: column;
@@ -239,6 +253,7 @@ $active_btn_text_color: #fff;
             cursor: pointer;
             position: relative;
             margin: 4px;
+
             &.active {
               color: var(--_thm-py-bs-dt-se-tt-cr);
             }
@@ -280,7 +295,7 @@ $active_btn_text_color: #fff;
               }
             }
 
-            input:checked + .custom_checkbox {
+            input:checked+.custom_checkbox {
               background-color: var(--_thm-py-bs-dt-se-bd-cr);
               border-color: var(--_thm-py-bs-dt-se-br-cr);
 
@@ -314,13 +329,16 @@ $active_btn_text_color: #fff;
             width: 100%;
             font-weight: 500;
             text-decoration: none !important;
+
             &.primary {
               background-color: var(--_thm-py-bs-dt-se-bd-cr);
               color: var(--_thm-py-bs-dt-se-tt-cr);
               font-size: 14px;
             }
+
             &.secondary {
               color: var(--_thm-sy-bs-dt-se-bd-cr);
+
               &:hover {
                 color: var(--_thm-sy-bs-hr-se-bd-cr);
 
@@ -353,6 +371,7 @@ $active_btn_text_color: #fff;
       width: 100%;
       display: flex;
       justify-content: center;
+
       &:hover {
         background-color: var(--_thm-sy-bs-hr-se-bd-cr);
         color: var(--_thm-sy-bs-hr-se-tt-cr);
@@ -388,6 +407,7 @@ $active_btn_text_color: #fff;
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
@@ -426,13 +446,11 @@ $input-height: 32px;
 $input-padding: 10px 12px;
 
 // Z-Index
-$z-index-modal: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex, 10) + 10);
+$z-index-modal: calc(1000 + var(--_cs-et-zIndex, 10) + 10);
 $z-index-backdrop: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 11);
 $z-index-wrapper: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
 $z-index-minimized: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 12);
-$z-index-min-cart: calc(
-  var(--_higher-zIndex) + var(--_cs-et-zIndex) + 13
-); // Higher z-index for min cart
+$z-index-min-cart: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 13); // Higher z-index for min cart
 
 // Shadows
 $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
@@ -461,6 +479,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     overflow: scroll;
     display: flex;
     flex-direction: column;
+
     .modal-body {
       height: auto;
       display: flex;
@@ -474,20 +493,24 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         .retry-order-container {
           max-width: 960px;
           margin: 0 auto;
+
           .chk_payment-options {
             form {
               display: flex;
               flex-direction: column;
               gap: 24px;
             }
+
             display: flex;
             flex-direction: column;
             margin-block: 12px;
+
             .chk_payment_options_form {
               display: flex;
               flex-direction: column;
               overflow: hidden;
             }
+
             .payment_program {
               // padding: 0 12px;
 
@@ -507,24 +530,29 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
+
                   &_title {
                     font-size: 14px;
                     font-weight: 600;
                     color: var(--_gray-600);
                   }
                 }
+
                 &_pds {
                   font-size: 14px;
                   font-weight: 600;
+
                   &_label {
                     font-size: 14px;
                     color: var(--_gray-600);
                   }
+
                   &_value {
                     font-size: 14px;
                     color: var(--_gray-900);
                   }
                 }
+
                 .chk_checkbox_wrapper {
                   display: flex;
                   width: fit-content;
@@ -535,6 +563,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                     padding: 12px 16px;
                     border-radius: 4px;
                     color: var(--_gray-600);
+
                     &:hover {
                       background-color: var(--_gray-100);
                     }
@@ -543,6 +572,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                   input[type="checkbox"] {
                     display: none;
                   }
+
                   .payment_program_title {
                     font-size: 16px;
                     font-weight: 700;
@@ -583,7 +613,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                     }
                   }
 
-                  input[type="checkbox"]:checked + label {
+                  input[type="checkbox"]:checked+label {
                     .custom-checkbox {
                       background-color: #004dff;
                       border-color: #004dff;
@@ -596,9 +626,11 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 }
               }
             }
+
             .gift_crd_chk_payment_option {
               border: 1px solid var(--_gray-300);
               border-radius: 6px;
+
               .add_gift_card {
                 display: flex;
                 gap: 12px;
@@ -622,23 +654,28 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                   }
                 }
               }
+
               .payment_heading {
                 padding: 16px;
+
                 .chk_payment_options_heading {
                   padding: 0;
                   font-weight: 600;
                 }
               }
+
               // gift card styles
               .chk_gft_crd_wrapper {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 padding: 16px 16px 0 16px;
+
                 &_item {
                   display: flex;
                   align-items: center;
                   gap: 16px;
+
                   &_icon {
                     width: 40px;
                     height: 40px;
@@ -648,29 +685,36 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                     justify-content: center;
                     align-items: center;
                   }
+
                   &_info {
                     display: flex;
                     flex-direction: column;
+
                     &_title {
                       font-size: 14px;
                       margin-bottom: 4px;
                       font-weight: 600;
                     }
+
                     &_desc {
                       display: flex;
                       gap: 4px;
+
                       &_value {
                         font-size: 12px;
                         color: var(--_gray-600);
                       }
+
                       &_label {
                         font-size: 12px;
                         color: var(--_gray-900);
                       }
                     }
                   }
+
                   &_pin {
                     margin-left: 36px;
+
                     input[type="number"] {
                       border: 1px solid var(--_gray-300);
                       border-radius: 4px;
@@ -678,6 +722,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                       width: 95px;
                       height: 44px;
                       padding-inline: 10px;
+
                       &:focus {
                         outline: 2px solid var(--_primary-100);
                         border: 1px solid var(--_primary-300);
@@ -696,21 +741,25 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                   align-items: center;
                   gap: 8px;
                   padding-left: 10px;
+
                   input[type="number"] {
                     background-color: var(--_base-white);
                     padding-right: 10px;
                   }
+
                   &:focus-within {
                     outline: 2px solid var(--_primary-100);
                     border: 1px solid var(--_primary-300);
                   }
                 }
               }
+
               .chk_gft_crd_wrapper {
                 &_btn {
                   text-align: left;
                   margin-bottom: 16px;
                   color: var(--_thm-py-bs-dt-se-tt-cr);
+
                   &:hover {
                     text-decoration: underline;
                   }
@@ -730,6 +779,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                   border-bottom: 1px solid var(--_gray-200);
                   padding-bottom: 16px;
                 }
+
                 .pp_ppm_section {
                   background-color: var(--_base-white);
                   border-bottom: 1px solid var(--_gray-300);
@@ -738,44 +788,53 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                   display: flex;
                   justify-content: space-between;
                   gap: 8px;
+
                   .pp_ppm_section_label {
                     font-size: 14px;
                     font-weight: 700;
                     color: var(--_gray-900);
                   }
+
                   .pp_ppm_section_value {
                     font-size: 14px;
                     font-weight: 600;
                     color: var(--_gray-600);
+
                     .pp_ppm_section_value_label {
                       font-weight: 500;
                       color: var(--_gray-500);
                     }
+
                     .pp_ppm_section_value_amount {
                       font-weight: 500;
                       color: var(--_gray-500);
                     }
                   }
                 }
+
                 .payment_methods {
                   // padding: 12px;
                   display: grid;
                   gap: 8px;
+
                   .chk_payment_option {
                     .add_new_credit_card {
                       padding: 16px 16px 0px 16px;
                       display: flex;
                       justify-content: space-between;
                       font-weight: 600;
+
                       .cc_tertiary_btn {
                         // color: var(--_thm-py-bs-dt-se-tt-cr);
                         color: var(--_thm-cs-tt-ls-as);
                         font-size: 14px;
+
                         &:hover {
                           text-decoration: underline;
                         }
                       }
                     }
+
                     .chk_payment_section_wrapper {
                       width: 100%;
                       display: flex;
@@ -787,30 +846,37 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                         justify-content: space-between;
                         align-items: center;
                         width: 100%;
+
                         .chk_payment_section_col_left {
                           display: flex;
                           gap: 12px;
+
                           svg {
                             width: 24px;
                             height: 24px;
                           }
+
                           .chk_payment_section_method {
                             display: flex;
                             flex-direction: column;
+
                             .chk_payment_section_method_name {
                               font-size: 14px;
                               font-weight: 700;
                               line-height: 20px;
                               color: var(--_gray-700);
                             }
-                            & > div {
+
+                            &>div {
                               display: flex;
                               gap: 2px;
+
                               .label {
                                 font-size: 12px;
                                 color: var(--_gray-500);
                                 font-weight: 400;
                               }
+
                               .price {
                                 font-size: 12px;
                                 color: var(--_gray-900);
@@ -819,6 +885,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                             }
                           }
                         }
+
                         &_col_right {
                           .chk_currency_inp {
                             height: 44px;
@@ -834,13 +901,16 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                             padding: 8px 12px;
                             border: 1px solid var(--_gray-300);
                             border-radius: 4px;
+
                             &:focus-within {
                               border: 1px solid var(--_primary-200);
                               outline: 2px solid var(--_primary-50);
                             }
+
                             input {
                               height: inherit;
                               background-color: var(--_base-white);
+
                               &:disabled {
                                 opacity: 0.8;
                                 cursor: not-allowed;
@@ -854,8 +924,8 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                         color: var(--_gray-900);
                         font-size: 16px;
                         font-weight: 700;
-                        .chk_primary_btn_link {
-                        }
+
+                        .chk_primary_btn_link {}
                       }
 
                       // payment other options styles
@@ -864,24 +934,31 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                         justify-content: space-between;
                         gap: 80px;
                         padding: 16px;
+
                         .chk_pmnt_other_options_left_container {
                           display: flex;
                           gap: 12px;
+
                           .chk_pmnt_option_info_wrapper {
                             display: flex;
                             gap: 12px;
+
                             .cards {
                               display: flex;
                               flex-direction: column;
                               gap: 8px;
+
                               .chk_payment_options_name {
                                 font-weight: 600;
                               }
+
                               span {
                                 font-size: 12px;
+
                                 .chk_payment_options_label {
                                   color: var(--_gray-600);
                                 }
+
                                 .chk_payment_options_value {
                                   color: var(--_gray-900);
                                 }
@@ -889,6 +966,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                             }
                           }
                         }
+
                         .chk_pmnt_other_options_container {
                           padding: 16px;
                         }
@@ -909,6 +987,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                         display: flex;
                         gap: 12px;
                         align-items: flex-start;
+
                         .chk_payment_option__info_wrapper {
                           display: flex;
                           gap: 0px;
@@ -982,25 +1061,31 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                         }
                       }
                     }
+
                     .chk_cred_form_details {
                       border-top: 1px solid var(--_gray-100);
                       padding: 16px;
+
                       .chk_basic_form_title {
                         font-size: 14px;
                         margin-bottom: 16px;
                         font-weight: 600;
                       }
+
                       .chk_form_fields {
                         h3 {
                           font-size: 14px;
                           margin-bottom: 8px;
                         }
+
                         display: flex;
                         flex-direction: column;
                         gap: 24px;
                         width: 500px;
+
                         .chk_form_field {
                           width: 100%;
+
                           &.expiry_details {
                             width: 80px;
                           }
@@ -1016,6 +1101,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                             padding-bottom: 2px;
                             color: var(--_gray-700);
                           }
+
                           .chk_form_field_inp {
                             width: -webkit-fill-available;
                             height: 40px;
@@ -1025,14 +1111,17 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                             border-radius: 6px;
                             height: 40px;
                             padding: 8px 12px;
+
                             &::placeholder {
                               color: var(--_gray-600);
                             }
+
                             input &:focus-within {
                               border: 1px solid var(--_primary-300);
                               outline: 2px solid var(--_primary-100);
                             }
                           }
+
                           .error_msg {
                             display: block;
                             color: var(--_error-700);
@@ -1054,7 +1143,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                             input[type="checkbox"] {
                               display: none;
 
-                              &:checked + .custom-checkbox::after {
+                              &:checked+.custom-checkbox::after {
                                 opacity: 1;
                               }
                             }
@@ -1084,27 +1173,33 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                             }
                           }
                         }
+
                         .expiry_details {
                           display: flex;
                           gap: 12px;
+
                           .cvv_inp {
                             width: 110px;
                           }
                         }
                       }
+
                       .chk_form_actions {
                         display: flex;
                         gap: 12px;
+
                         .chk_sav_btn {
                           padding: 12px 16px;
                           background-color: var(--_thm-py-bs-dt-se-bd-cr);
                           border-radius: 6px;
                           color: var(--_base-white);
                           font-size: 14px;
+
                           &:hover {
                             background-color: var(--_primary-500);
                           }
                         }
+
                         .chk_can_btn {
                           padding: 12px 16px;
                           background-color: transparent;
@@ -1121,6 +1216,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                       }
                     }
                   }
+
                   .add_credit_card {
                     display: flex;
                     gap: 12px;
@@ -1144,10 +1240,12 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                         font-weight: 600;
                       }
                     }
+
                     .chk_payment_cred_section_col_right {
                       .chk_currency_inp_sec {
                         display: flex;
                         justify-content: end;
+
                         .chk_currency_inp {
                           border: 1px solid var(--_gray-200);
                           min-width: 100px;
@@ -1160,17 +1258,20 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                           padding-inline: 12px;
                         }
                       }
+
                       .cur_conversion {
                         font-size: 14px;
                       }
                     }
                   }
+
                   .add_new_credit_card {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
                     padding-inline: 16px;
                   }
+
                   .cc_tertiary_btn {
                     // color: var(--_thm-py-bs-dt-se-tt-cr);
                     color: var(--_thm-cs-tt-ls-as);
@@ -1203,6 +1304,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 text-decoration: underline;
               }
             }
+
             .chk_payment_options_heading {
               color: var(--_gray-900);
               font-size: 16px;
@@ -1215,6 +1317,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               gap: 8px;
             }
           }
+
           .chk_payment_cred_section {
             display: flex;
             justify-content: space-between;
@@ -1232,32 +1335,39 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               align-items: center;
               padding: 8px 12px;
               gap: 12px;
+
               &:focus-within {
                 border: 1px solid var(--_primary-200);
                 outline: 2px solid var(--_primary-50);
               }
+
               input {
                 height: inherit;
                 background-color: var(--_base-white);
+
                 &:disabled {
                   opacity: 0.8;
                   cursor: not-allowed;
                 }
               }
             }
+
             .chk_payment_cred_section_col_left {
               .chk_payment_cred_section_col_left_crd_details {
                 display: flex;
                 gap: 80px;
                 align-items: center;
-                & > div {
+
+                &>div {
                   display: flex;
                   gap: 12px;
+
                   .card_icon {
                     width: 60px;
                     height: 40px;
                     border-radius: 4px;
                   }
+
                   .card_details {
                     .card_details_num {
                       font-weight: 600;
@@ -1265,13 +1375,16 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                       font-size: 14px;
                       line-height: 20px;
                     }
-                    & > div {
+
+                    &>div {
                       display: flex;
+
                       .card_details_label {
                         color: var(--_gray-500);
                         font-size: 12px;
                         font-weight: 400;
                       }
+
                       .card_details_value {
                         color: var(--_gray-900);
                         font-size: 12px;
@@ -1288,11 +1401,13 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           .chk_gift_card_details {
             border-top: 1px solid var(--_gray-300);
             padding: 16px;
+
             .chk_gift_card_form {
               display: flex;
               flex-direction: column;
               gap: 16px;
               max-width: 480px;
+
               .chk_gift_cart_form_title {
                 font-size: 14px;
                 font-weight: 600;
@@ -1302,37 +1417,45 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 display: flex;
                 gap: 12px;
                 width: 100%;
+
                 .chk_gift_inp_field {
                   display: flex;
                   flex-direction: column;
                   gap: 6px;
                   width: 100%;
+
                   label {
                     color: var(--_gray-600);
                   }
+
                   .chk_gift_inp {
                     border: 1px solid var(--_gray-300);
                     border-radius: 6px;
                     height: 40px;
                     padding-inline: 10px;
+
                     &:placeholder-shown {
                       padding-left: 10px;
                       color: var(--_gray-400);
                     }
+
                     &:focus {
                       border: 1px solid var(--_primary-300);
                       outline: 2px solid var(--_primary-100);
                     }
                   }
+
                   &.pin {
                     width: 110px;
                   }
+
                   .error_msg {
                     display: block;
                     color: var(--_error-700);
                     font-size: 12px;
                   }
                 }
+
                 .error_msg {
                   color: var(--_error-700);
                   font-size: 14px;
@@ -1340,19 +1463,23 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               }
             }
           }
+
           .chk_form_actions {
             display: flex;
             gap: 12px;
+
             .chk_sav_btn {
               padding: 12px 16px;
               background-color: var(--_thm-py-bs-dt-se-bd-cr);
               border-radius: 6px;
               color: var(--_base-white);
               font-size: 14px;
+
               &:hover {
                 background-color: var(--_thm-py-bs-hr-se-bd-cr);
               }
             }
+
             .chk_can_btn {
               padding: 12px 16px;
               background-color: transparent;
@@ -1373,6 +1500,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       // Payment with checkout end
 
       .dropdown-with-input-section {
+
         // border: 0.5px solid var(--_gray-300);
         .dropdown-menu {
           margin-left: -7px !important;
@@ -1383,12 +1511,14 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         display: flex;
         flex-direction: column;
         width: 100%;
+
         .wishlist-modal-section {
           padding: 16px 24px 24px 24px;
           gap: 16px !important;
           overflow-x: hidden;
           display: flex;
           flex-direction: column;
+
           input[type="text"] {
             height: 40px;
             border: 1px solid var(--_gray-300);
@@ -1397,6 +1527,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           }
         }
       }
+
       // .action-buttons {
       //   display: flex;
       //   gap: 1rem;
@@ -1451,6 +1582,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         height: 100%;
         width: 100%;
         background-color: var(--_gray-100);
+
         .process_load_wrapper {
           .process_loader_content {
             display: flex;
@@ -1458,15 +1590,18 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             /* gap: 8px; */
             justify-content: center;
             align-items: center;
+
             p {
               margin-top: 8px;
             }
+
             .process_loader_box {
               .processing_loader {
                 position: relative;
                 width: 64px;
                 height: 64px;
                 margin-bottom: 24px;
+
                 &::before,
                 &::after {
                   content: "";
@@ -1490,14 +1625,17 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                   animation: processing_loader_spin 1s linear infinite;
                 }
               }
+
               h3 {
                 margin-block: 10px;
               }
             }
+
             @keyframes processing_loader_spin {
               0% {
                 transform: rotate(0deg);
               }
+
               100% {
                 transform: rotate(360deg);
               }
@@ -1506,6 +1644,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         }
       }
     }
+
     &.fullscreen {
       transition:
         all 0.5s ease-in-out,
@@ -1558,6 +1697,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       z-index: var(--_higher-zIndex);
       // padding: 0 16px;
       border-bottom: 1px solid #d0d5dd;
+
       .title-bar {
         display: flex;
         justify-content: space-between;
@@ -1575,8 +1715,10 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             display: flex;
             gap: 8px;
             align-items: center;
+
             span {
               display: flex;
+
               svg {
                 width: 20px;
                 height: 20px;
@@ -1609,10 +1751,12 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             }
           }
         }
+
         .right_col {
           display: flex;
           align-items: center;
           gap: 12px;
+
           .bulk-order-pad-header-body {
             .checkout_btn {
               padding: 8px 16px;
@@ -1621,6 +1765,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               color: var(--_base-white);
             }
           }
+
           .employee_bulk_order_header {
             display: flex;
             justify-self: end;
@@ -1631,6 +1776,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               align-items: center;
               gap: 6px;
             }
+
             .svg_icon {
               display: flex;
               align-items: center;
@@ -1646,6 +1792,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               gap: 4px;
               position: relative;
               line-height: 20px;
+
               &:after {
                 content: "";
                 width: 1px;
@@ -1668,6 +1815,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             .emp_info {
               display: flex;
               padding-right: 16px;
+
               .emp_info_item {
                 color: var(--_gray-600);
                 font-size: 14px;
@@ -1676,12 +1824,14 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 align-items: center;
                 position: relative;
                 line-height: 20px;
+
                 .emp_count {
                   font-size: 16px;
                   color: var(--_gray-900);
                   font-weight: 600;
                   margin-left: 4px;
                 }
+
                 &:not(:last-child):after {
                   content: "";
                   background: var(--_gray-400);
@@ -1702,10 +1852,12 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 }
               }
             }
+
             .emp_options_wrapper {
               display: flex;
               align-items: center;
               gap: 8px;
+
               &::after {
                 content: "";
                 display: inline-block;
@@ -1714,6 +1866,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 width: 1px;
                 margin-inline-start: 18px;
               }
+
               &::before {
                 content: "";
                 display: inline-block;
@@ -1722,6 +1875,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 width: 1px;
                 margin-inline: 8px;
               }
+
               .user_icon {
                 width: 30px;
                 height: 30px;
@@ -1729,16 +1883,20 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 justify-content: center;
                 align-items: center;
                 cursor: pointer;
+
                 &.active {
                   background-color: var(--_gray-50);
                 }
-                & > span {
+
+                &>span {
                   display: flex;
                 }
+
                 &:hover {
                   background-color: var(--_gray-100);
                 }
               }
+
               .emp_options {
                 position: absolute;
                 top: 44px;
@@ -1748,6 +1906,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 border-radius: 4px;
                 z-index: 10;
                 box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
+
                 .emp_options_header {
                   padding: 12px;
                   font-size: 14px;
@@ -1755,13 +1914,16 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                   color: var(--_gray-600);
                   border-bottom: 1px solid var(--_gray-200);
                 }
+
                 .emp_options_list {
                   padding: 12px;
+
                   .emp_options_list_item {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
                     gap: 8px;
+
                     .emp_options_list_item_label {
                       display: flex;
                       gap: 12px;
@@ -1772,28 +1934,33 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                     //   color: var(--_thm-py-bs-dt-se-tt-cr);
                     // }
                   }
+
                   p {
                     font-size: 12px;
                     color: var(--_gray-500);
                     padding-block: 4px 16px;
                   }
                 }
+
                 .emp_options_footer {
                   display: flex;
                   border-top: 1px solid var(--_gray-200);
 
-                  & > div {
+                  &>div {
                     flex-basis: 50%;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     padding: 16px;
                     cursor: pointer;
+
                     &:first-child {
                       border-right: 1px solid var(--_gray-200);
                     }
+
                     &:hover {
                       background-color: var(--_primary-25);
+
                       svg path {
                         stroke: var(--_thm-py-bs-dt-se-tt-cr);
                       }
@@ -1805,14 +1972,17 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
             .em_or_ss_wp {
               position: relative;
+
               &:hover {
                 .em_or_ss_wp_cr {
                   display: block;
                 }
+
                 .em_or_ss_wp_bn {
                   background-color: var(--_gray-50);
                 }
               }
+
               .em_or_ss_wp_bn {
                 display: flex;
                 justify-content: center;
@@ -1823,11 +1993,13 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
                 cursor: pointer;
                 top: 120%;
+
                 &.disabled {
                   opacity: 0.5;
                   pointer-events: none;
                 }
               }
+
               .em_or_ss_wp_cr {
                 position: absolute;
                 z-index: calc(var(--_higher-zIndex) + var(--_emp-bulk-order-settings-zIndex));
@@ -1837,6 +2009,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 background-color: var(--_base-white);
                 box-shadow: 0px 0px 24px rgb(0, 0, 0, 0.1);
                 display: none;
+
                 .em_or_ss_wp_cr_hr {
                   color: var(--_gray-600);
                   font-weight: 600;
@@ -1844,8 +2017,10 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                   padding: 12px;
                   border-bottom: 1px solid var(--_gray-200);
                 }
+
                 ul {
                   list-style: none;
+
                   li {
                     padding: 10px 12px;
                     font-size: 14px;
@@ -1857,12 +2032,15 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                     cursor: pointer;
                     margin: 4px;
                     border-radius: 4px;
-                    & > span svg path {
+
+                    &>span svg path {
                       stroke: var(--_gray-500);
                     }
-                    & > span {
+
+                    &>span {
                       display: flex;
                     }
+
                     &:hover {
                       background-color: var(--_primary-25);
                       color: var(--_thm-py-bs-dt-se-tt-cr);
@@ -1876,6 +2054,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               display: flex;
               align-items: center;
               gap: 12px;
+
               &::after {
                 content: "";
                 display: inline-block;
@@ -1883,6 +2062,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 width: 1px;
                 background-color: var(--_gray-200);
               }
+
               &::before {
                 content: "";
                 display: inline-block;
@@ -1890,6 +2070,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 width: 1px;
                 background-color: var(--_gray-200);
               }
+
               .emp_btn {
                 padding: 8px 12px;
                 border-radius: 4px;
@@ -1898,13 +2079,16 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 &.emp_primary {
                   color: var(--_base-white);
                   background-color: var(--_primary-500);
+
                   &:hover {
                     background-color: var(--_primary-500);
                   }
                 }
+
                 &.emp_tertiary_secondary {
                   color: var(--_gray-600);
                   margin-inline: 4px;
+
                   &:hover {
                     background-color: var(--_gray-50);
                     color: var(--_gray-900);
@@ -1912,16 +2096,19 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
                 }
               }
             }
+
             .emp_review_cart_btn {
               padding: 8px 16px;
               border: 1px solid var(--_gray-300);
               border-radius: 6px;
               color: var(--_gray-700);
               cursor: pointer;
+
               &:hover {
                 background-color: var(--_gray-50);
               }
             }
+
             .emp_discard_btn {
               padding-inline: 16px;
               border-radius: 6px;
@@ -1930,20 +2117,25 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               height: 32px;
               display: flex;
               align-items: center;
+
               &.disabled {
                 pointer-events: none;
                 opacity: 0.8;
               }
+
               &:hover {
                 background-color: var(--_gray-50);
               }
             }
+
             .action_item {
               cursor: pointer;
             }
+
             .em_order_settings_act {
               width: 40px;
             }
+
             .em_btn_act {
               padding-inline: 16px;
               height: 32px;
@@ -1961,18 +2153,22 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             }
           }
         }
+
         .actions {
           display: flex;
           align-items: center;
           gap: 12px;
           margin-left: 12px;
+
           svg {
             width: 16px;
             height: 16px;
+
             path {
               stroke: var(--_gray-600);
             }
           }
+
           span {
             width: 32px;
             height: 32px;
@@ -1983,10 +2179,12 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
             display: flex;
             align-items: center;
             justify-content: center;
+
             &[title="Enter Fullscreen"] {
               svg {
                 width: 14px;
                 height: 14px;
+
                 path {
                   stroke: var(--_gray-500);
                 }
@@ -1997,11 +2195,13 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
               color: var(--_gray-900);
               background-color: var(--_gray-100);
               border-radius: 4px;
+
               svg path {
                 stroke: var(--_gray-900);
               }
             }
           }
+
           .sc_modal-close svg {
             width: 20px !important;
             height: 20px !important;
@@ -2065,11 +2265,13 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       .summary {
         display: flex;
         gap: 24px;
+
         span {
           font-weight: 700;
           line-height: 20px;
           font-size: 14px;
           color: var(--_gray-900);
+
           .footer_label {
             font-weight: 400;
             color: var(--_gray-500);
@@ -2117,12 +2319,14 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           // &:hover {
           //   background: $primary-hover;
           // }
-          & > span {
+          &>span {
             display: flex;
+
             svg path {
               stroke: var(--_base-white);
             }
           }
+
           &.disabled {
             opacity: 0.4;
             pointer-events: none;
@@ -2146,23 +2350,30 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       transform 0.4s ease-in-out;
     right: 20px;
     bottom: 20px;
-    padding: 0; /* Remove padding from the main min container */
+    padding: 0;
+    /* Remove padding from the main min container */
     border-radius: $radius;
     box-shadow: $shadow-md;
     z-index: $z-index-minimized;
     display: none;
-    flex-direction: row; /* Align items in a row */
+    flex-direction: row;
+    /* Align items in a row */
     align-items: center;
-    gap: 10px; /* Adjust gap between elements */
+    gap: 10px;
+    /* Adjust gap between elements */
     font-size: $font-size-base;
-    background-color: transparent; /* Make the main container transparent */
+    background-color: transparent;
+    /* Make the main container transparent */
 
     .min-toolbar {
       background-color: var(--_base-white);
       display: flex;
-      align-items: center; /* Align items vertically in the toolbar */
-      padding-inline-start: 16px; /* Add padding to the toolbar */
-      border-radius: $radius 0 0 $radius; /* Rounded left corners */
+      align-items: center;
+      /* Align items vertically in the toolbar */
+      padding-inline-start: 16px;
+      /* Add padding to the toolbar */
+      border-radius: $radius 0 0 $radius;
+      /* Rounded left corners */
       gap: 16px;
     }
 
@@ -2181,8 +2392,10 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     .cart-btn {
       background: $primary;
       color: $white;
-      border: none; /* Remove border */
-      border-radius: 0 $radius $radius 0; /* Rounded right corners */
+      border: none;
+      /* Remove border */
+      border-radius: 0 $radius $radius 0;
+      /* Rounded right corners */
       padding: 12px 16px;
       font-weight: 600;
       font-size: $font-size-sm;
@@ -2212,13 +2425,16 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         display: flex;
         align-items: center;
         justify-content: center;
+
         &:hover {
           background-color: var(--_gray-50);
           border-radius: 4px;
+
           svg path {
             stroke: var(--_gray-900);
           }
         }
+
         &[title="Maximize"] {
           svg {
             width: 14px;
@@ -2244,6 +2460,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       }
     }
   }
+
   .action-buttons {
     display: flex;
     gap: 1rem;
@@ -2253,10 +2470,12 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     padding: 16px 24px;
     border-top: 1px solid var(--_gray-200);
     gap: 12px;
+
     button {
       padding: 12px 16px;
       border-radius: 6px;
     }
+
     .create-btn {
       display: flex;
       justify-content: center;
@@ -2264,10 +2483,12 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       gap: 8px;
       background-color: var(--_thm-py-bs-dt-se-bd-cr);
       color: var(--_base-white);
+
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
       }
+
       .loader {
         animation: rotate-icon 1s linear infinite;
         display: inline-block;
@@ -2282,6 +2503,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         background-color: var(--_primary-500);
       }
     }
+
     .discard-btn {
       &:hover {
         background-color: var(--_gray-50);
@@ -2295,7 +2517,8 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
-}
+}