/**=====================
     Category scss
==========================**/
.category-section {
     .category-row {
          >div {
               &:first-child {
                    border-right: 1px solid #eee;

                    body.dark & {
                         border-color: #454851;
                    }

                    @media (max-width: 991.98px) {
                         border: none;
                    }

                    [dir="rtl"] & {
                         border-right: unset;
                         border-left: 1px solid #eee;

                         @media (max-width: 991.98px) {
                              border: none;
                         }
                    }
               }
          }
     }

     .custom-nav-tabs {
          // position: sticky;
          top: 20px;
          gap: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));
          padding-bottom: calc(5px + (7 - 5) * ((100vw - 320px) / (1920 - 320)));
          flex-direction: column;

          @media (max-width: 991.98px) {
               flex-direction: unset;
          }

          &::-webkit-scrollbar {
               width: calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320)));
               height: calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320)));
          }

          &::-webkit-scrollbar-track {
               background: $section-bg;
               border-radius: 10px;
          }

          &::-webkit-scrollbar-thumb {
               background: rgba(#eee, 0.212);
               border-radius: 10px;
          }

          .nav-item {
               @media (max-width: 991.98px) {
                    min-width: unset;
               }
          }

          .nav-link {    
               background-color: $white;
               overflow: hidden;
               padding: calc(8px + .0075*(100vw - 320px));
               position: relative;
               box-shadow: none;
               flex-direction: column;
               align-items: center;
               border: 1px solid #eee;
               border-radius: 10px;

               body.dark & {
                    background-color: #252934;
                    border-color: #454851;
               }

               @media (max-width: 991.98px) {
                    padding-right: 18px;
                    border-radius: 8px;
               }

               i {
                    display: none;
                    margin-left: auto;
                    margin-right: 9px;
                    --Iconsax-Color: var(--primary-color);

                    [dir="rtl"] & {
                         margin-left: 9px;
                         margin-right: auto;
                         transform: rotate(-180deg);
                    }
               }

               &.active,
               &:hover {
                    border-color: transparent;
                    color: #fff;

                    body.dark & {
                         .text-box {
                              span {
                                   color: var(--primary-color);
                              }
                         }
                    }
                    

                    i {
                         display: block;

                         @media (max-width: 991.98px) {
                              display: none;
                         }
                    }
               }

               .img-box {
                    width: 100%;
                    height: calc(66px + (95 - 66) * ((100vw - 320px) / (1920 - 320)));
                    padding: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
                    margin: 0;

                    @media (max-width: 991.98px) {
                         border-radius: 5px;
                    }

                    body.dark & {
                         background-color: #171B27;

                         img {
                              filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(117%) contrast(100%);
                         }
                    }
               }

               .text-box {
                    body.dark & {
                         span {
                              color: $white;
                         }

                         small {
                              color: rgba($white, 0.6);
                         }
                    }

                    span {
                         // display: flex;
                         line-height: 1.3;
                         -webkit-line-clamp: 1;
                         -webkit-box-orient: vertical;
                         display: -webkit-box;
                         overflow: hidden;
                         text-align: left;
                         height: unset;

                         @media (max-width: 991.98px) {
                              white-space: nowrap;
                         }

                    }

                    small {
                         display: flex;
                         color: $light-color;
                         line-height: 1.3;

                         @media (max-width: 991.98px) {
                              white-space: nowrap;
                         }
                    }
               }
          }
     }
}
.custom-nav-tabs{
     .nav-item{
          .nav-link{
               img{
                    width: 50px;
                    height: 100% !important;
                    object-fit: contain;
               }
               .img-box{
                    margin-bottom: 12px !important;
               }
               &.categories{
                    padding: 6px;
                    flex-direction: unset;
                    border-radius: 100px;
                    gap: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));

                    .img-box{
                         width: calc(40px + (52 - 40) * ((100vw - 320px) / (1920 - 320)));
                         min-width: calc(40px + (52 - 40) * ((100vw - 320px) / (1920 - 320)));   
                         height: calc(40px + (52 - 40) * ((100vw - 320px) / (1920 - 320)));
                         border-radius: 100%;
                         margin-bottom: 0 !important;
                    }
               }
          }
     }
}
.tab-content-2 {
     &.custom-nav-tabs {
          gap: 14px;
          padding-bottom: 14px;
          margin-bottom: 18px;
          border-bottom: 1px solid #eee;
          flex-direction: unset;

          body.dark & {
               border-bottom: 1px solid #454851;
          }

          &::-webkit-scrollbar {
               width: 4px;
               height: 4px;
          }

          &::-webkit-scrollbar-track {
               background: $section-bg;
               border-radius: 10px;
          }

          &::-webkit-scrollbar-thumb {
               background: rgba(#eee, 0.212);
               border-radius: 10px;
          }

          .nav-item {
               min-width: unset;
               width: fit-content;
          }

          .nav-link {
               overflow: hidden;
               padding: 10px 28px;
               position: relative;
               white-space: nowrap;
               background-color: $section-bg;
               box-shadow: none;
               flex-direction: unset;
               transition: all 0.25s ease-in-out;
               align-items: center;
               border: 1px solid #eee;
               border-radius: 100px;
               gap: 12px;

               body.dark & {
                    background-color: #323640;
                    border-color: #454851;

                    .text-box {
                         span {
                              color: $white;
                         }
                    }
               }

               i {
                    display: none;
                    margin-left: auto;
                    margin-right: 9px;
                    --Iconsax-Color: var(--primary-color);
               }

               &.active,
               &:hover {
                    border-color: transparent;
                    background-color: var(--primary-color);
                    color: $white;

                    span {
                         color: $white !important;

                         body.dark & {
                              color: $white;
                         }
                    }

                    i {
                         display: block;
                    }

                    body.dark & {
                         border-color: transparent;
                         background-color: var(--primary-color);
                         color: $white;
                    }
               }

               .text-box {
                    span {
                         display: flex;
                         line-height: 1.3;
                         margin: unset;
                         width: unset;
                         transition: all 0.25s ease-in-out;
                    }
               }
          }
     }
}

.category-img {
     border-radius: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
     position: relative;
     overflow: hidden;
     display: block;

     img {
          aspect-ratio: 113/100;
          object-fit: cover;
     }

     &:hover {
          &::after {
               animation: shine 1.15s;
          }
     }

     .category-span {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
          background: linear-gradient(0deg, $title-color 21%, rgba($title-color, 0) 100%);
          color: $white;
          margin: 0;
          padding: calc(32px + (50 - 32) * ((100vw - 320px) / (1920 - 320))) 10px calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          display: block;
     }
}

.category-span {
     text-align: center;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     display: -webkit-box;
     overflow: hidden;
     margin-top: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
     font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
     font-weight: 500;
     color: $title-color;
}

.accordion {
     .accordion-item {
          border: none;

          .accordion-button {
               background-color: transparent;
               width: max-content;
               padding: 0;
               border: none;
               box-shadow: none;

               &:not(.collapsed) {
                    &:after {
                         background-image: url(@/svg/arrow.svg);
                    }
               }
          }
     }

     &.categories-accordion {
          .accordion-item {
               .accordion-header {
                    .title {
                         width: 100%;
                         cursor: pointer;
                    }
               }
          }
     }
}