:root {
    --body-bg: #f2f1f2;
    --theme-color: #3772F0;
    --primary-text: #3772F0;
    --primary-anchor: #3772F0;
    --primary-btn-bg: #3772F0;
    --primary-bg: #3772F0;
    --placeholder: #676767;
    --text-dark: #000000;
    --text-light: #FFFFFF;
    --dark-bg: #000000;
    --light-bg: #FFFFFF;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif !important;
    background-color: var(--body-bg) !important;
    min-height: 100vh;
}

.btn-primary {
    background-color: var(--primary-btn-bg) !important;
    border: 1px solid var(--primary-btn-bg) !important;
}

.text-primary {
    color: var(--primary-text) !important;
}

a {
    color: var(--primary-anchor) !important;
}

input {
    padding: 8px 15px;
    border-radius: 6px;
    border: 1px solid #676767;
    outline: unset;
}

input:focus {
    border-color: var(--theme-color);
    outline: unset;
}

input::-webkit-input-placeholder {
    color: var(--placeholder);
    /* font-size: 18px; */
}
input,textarea{
    outline: unset;
}


.title {
    font: normal normal 600 32px/39px Inter;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: 20px;
}

/* ============= HEADER START====================== */
.header{
    background-color: #f8f9fa;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
}
.header .header-inner {
    padding: 10px 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.header .header-inner .logo-search--wrapper{
    gap: 30px;
    width: 40%;
}

.header .header-inner .search-bar {
    position: relative;
    width: 100%;
}

.header .header-inner .search-bar input {
    padding-left: 35px;
    background-color: #f1f1f1;
    border-radius: 5px;
}

.header .header-inner .search-bar .fa-search {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #6c757d;
}

.header .header-inner .timer {
    font-weight: bold;
}

.header .header-inner .notification-icon {
    font-size: 20px;
    cursor: pointer;
    background-color: #3772f0;
    padding: 5px;
    border-radius: 50px;
    --size: 40px;
    width: var(--size);
    height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
}
.header .header-inner .notification-icon i{
    color: white;
    font-weight: 300;
}

.header .header-inner .user-profile {
    display: flex;
    align-items: center;
    position: relative;
}

.header .header-inner .user-profile img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    cursor: pointer;
}

.header .header-inner .user-info {
    text-align: right;
}
.header .header-inner .user-info h6{
   margin-bottom: 0 ;
}
.header .header-inner .user-info p{
    margin-bottom: 0 ;
 }

 .header .header-inner .footer-wrapper{
    width: 100%;
    padding: var(--bs-modal-padding);
 }
/* ============= HEADER END ====================== */

/* ============= MODAL START ====================== */
.modal-footer-wrapper{
    width: 100%;
    padding: var(--bs-modal-padding);
 }
 .modal label{
    font-weight: 500;
 }
 .modal input{
    background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #D6D6D6;
border-radius: 8px;
 }

/* ============= MODAL END ====================== */

/* ============================Toogle Switch Start ===========================*/ 
.toogle-wrapper .switch {
    display: none;
}
  
.toogle-wrapper .switch + label {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #78768d;
    cursor: pointer;
    font-size: 12px;
    line-height: 15px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
.toogle-wrapper .switch + label::before,
.toogle-wrapper .switch + label::after {
    content: '';
    display: block;
}

.toogle-wrapper .switch + label::before {
    background-color: #D8D8D8;
    border-radius: 500px;
    height: 21px;
    margin-right: 8px;
    -webkit-transition: background-color 0.125s ease-out;
    transition: background-color 0.125s ease-out;
    width: 38px;
}

.toogle-wrapper .switch + label::after {
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
    height: 17px;
    left: 2px;
    position: absolute;
    top: 2px;
    -webkit-transition: -webkit-transform 0.125s ease-out;
    transition: -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out;
    transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
    width: 17px;
}
  
.toogle-wrapper .switch + label .switch-x-text {
    display: block;
    margin-right: .3em;
}
  
  .toogle-wrapper .switch + label .switch-x-toggletext {
      display: block;
      font-weight: bold;
      height: 15px;
    overflow: hidden;
    position: relative;
    width: 25px;
  }
  
  .toogle-wrapper .switch + label .switch-x-unchecked,
  .toogle-wrapper .switch + label .switch-x-checked {
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
}
  
  .toogle-wrapper .switch + label .switch-x-unchecked {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  
    .toogle-wrapper .switch + label .switch-x-checked {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    
    .toogle-wrapper .switch + label .switch-x-hiddenlabel {
        position: absolute;
        visibility: hidden;
  }
  
  .toogle-wrapper .switch:checked + label::before {
    background-color: #3772f0;
}

.toogle-wrapper .switch:checked + label::after {
    -webkit-transform: translate3d(16px, 0, 0);
    transform: translate3d(16px, 0, 0);
}

.toogle-wrapper .switch:checked + label .switch-x-unchecked {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

  .toogle-wrapper .switch:checked + label .switch-x-checked {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
  }
  
  /* ============================Toogle Switch Start ===========================*/ 



/* ================= suppliers Start ====================*/

.supplier-wrapper .supplier-inner-wrapper {
    display: flex;
    align-items: center;
    /* gap: 10px; */
    padding: 10px 0;
    /* flex-wrap: wrap; */
}


.single-supplier-container {
    width: 150px;
    height: 150px;
    border-radius: 13px;
    /* overflow: hidden; */
    border-color: transparent;
    padding: 5px;
}
.single-supplier-container input{
    opacity: 0;
    display: none;
}

.single-supplier-container .single-supplier-inner-container{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    cursor: pointer;
}

.single-supplier-container input:checked + .single-supplier-inner-container {
    border: 3px solid #3772F0;
}
.single-supplier-container .supplier-img-wrapper {
    width: 100px;
    height: 100px;
}
.single-supplier-container .supplier-img-wrapper img {
    max-width: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* ================= suppliers End =====================*/


/* ================= categories START =====================*/

.categories-wrapper{
    padding: 10px 0;
}
.categories-wrapper .categories-inner-wrapper .categories-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.categories-wrapper .categories-inner-wrapper .categories-header .title{
    margin: 0;
}
.categories-wrapper .categories-inner-wrapper .categories-header .switch-container{
    display: flex;
    /* align-items: center; */
    gap: 10px;
}
.categories-wrapper .categories-inner-wrapper .categories-header .switch-container span{
    font: normal normal 600 15px/19px Inter;
letter-spacing: 0px;
color: #000000;
}
.categories-wrapper .categories-inner-wrapper .categories-container{
    display: flex;
    flex-wrap: wrap;
    /* gap: 10px; */
    padding: 20px 0;
}

.single-category-wrapper{
    height: 100px;
    padding: 5px;
    border-radius: 12px;
}
.single-category-wrapper .single-category-inner-wrapper{
    display: flex;
    align-items: center;
    padding: 10px 18px;
    height: 100%;
    background-color: #fff;
    border-radius: 12px;
    gap: 10px;
    cursor: pointer;
}

.single-category-wrapper .single-category-inner-wrapper .icon-container {
    height: 67px;
    width: 67px;
    background: #F2F1F2 0% 0% no-repeat padding-box;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-category-wrapper .single-category-inner-wrapper .cat-desc p{
    font: normal normal 600 22px/33px Inter;
    margin-bottom: 0;
}
.single-category-wrapper.active .single-category-inner-wrapper{
    background-color: #3772F0;
    color:#fff
}

/* ================= categories END =====================*/


/* ================= Store  START =====================*/

.stores-wrapper .stores-inner-wrapper .store-items-container{
    display: flex;
    flex-wrap: wrap;
}

.store-single-product-wrapper{
    padding: 5px;
}

.store-single-product-wrapper .single-product-inner-wrapper{
    background-color: #fff;
    border-radius: 9px;
    padding: 10px 18px;
}
.store-single-product-wrapper .single-product-inner-wrapper .single-product-header {
    display: flex;
    gap: 10px;
}
.store-single-product-wrapper .single-product-inner-wrapper .single-product-header .store-product-img-container {
    width: 97px;
    height: 97px;
    background-color: #EBEBEB;
    border-radius: 9px;
    overflow: hidden;
}
.store-single-product-wrapper .single-product-inner-wrapper .single-product-header .store-product-img-container img{
    max-width: 100%;
    width: auto;
    height: 100%;
    /* object-fit: contain; */
}

.store-single-product-wrapper .single-product-inner-wrapper .single-product-header .product-des{
    padding: 5px;
}
.store-single-product-wrapper .single-product-inner-wrapper .single-product-header .product-des p{
    font: normal normal 600 14px/21px Inter;
    margin: 5px 0; 
}

.store-single-product-wrapper .single-product-inner-wrapper .single-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.store-single-product-wrapper .single-product-inner-wrapper .single-product-footer .proudct-price h2{
    margin: 0;
    font: normal normal 500 24px/33px Inter;
}
.store-single-product-wrapper .single-product-inner-wrapper .single-product-footer .product-actions-container {
    padding: 3px;
    background-color: #F2F1F2;
    border-radius: 23px;
    width: 120px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-single-product-wrapper .single-product-inner-wrapper .single-product-footer .product-actions-container .product-actions-inner-container {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    justify-content: space-between;
}

.store-single-product-wrapper .single-product-inner-wrapper .single-product-footer .product-actions-container .product-actions-inner-container button{
    width: 38px;
height: 38px;
border: 1px solid #EBEBEB;
border-radius: 20px;
}
.store-single-product-wrapper .single-product-inner-wrapper .single-product-footer .product-actions-container .product-actions-inner-container .btn-decrease{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    
}
.store-single-product-wrapper .single-product-inner-wrapper .single-product-footer .product-actions-container .product-actions-inner-container .btn-increase{
    background: #3772f0;
}

.store-single-product-wrapper .single-product-inner-wrapper .single-product-footer .product-actions-container .product-actions-inner-container span{
    font: normal normal 600 19px/35px Inter;
}


/* Scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.stores-wrapper .stores-inner-wrapper .store-items-container::-webkit-scrollbar {
    width: 8px; /* Adjust the width of the scrollbar */
  }
  
  /* Track of the scrollbar */
  .stores-wrapper .stores-inner-wrapper .store-items-container::-webkit-scrollbar-track {
    background: #f0f0f0; /* Light gray background for the track */
    border-radius: 10px; /* Rounded edges */
  }
  
  /* Handle (thumb) of the scrollbar */
  .stores-wrapper .stores-inner-wrapper .store-items-container::-webkit-scrollbar-thumb {
    background-color: #d4d4d4; /* Gray color for the scrollbar handle */
    border-radius: 10px; /* Rounded edges */
    border: 2px solid transparent; /* Ensures the handle stays rounded */
  }
  
  /* Handle (thumb) hover state */
  .stores-wrapper .stores-inner-wrapper .store-items-container::-webkit-scrollbar-thumb:hover {
    background-color: #b4b4b4; /* Darker color when hovered */
  }
  
  



/* ================= Store END =====================*/



/* ================= CART START =====================*/
.cart-wrapper{
    padding: 0 5px;
}
.cart-wrapper .cart-inner-wrapper{
    padding: 10px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #EBEBEB;
    border-radius: 13px;
}
.cart-wrapper .cart-inner-wrapper .categories-header{
    padding: 10px 18px;
}
.cart-wrapper .cart-inner-wrapper .cart-title-container{
    padding: 10px 18px;
}
.cart-wrapper .cart-inner-wrapper .cart-title-container .cart-body-title{
    font: normal normal 600 15px/19px Inter;
}

.cart-wrapper .cart-inner-wrapper .cart-title-container .delivery-date-wrapper{
    position: relative;
} 
.cart-wrapper .cart-inner-wrapper .cart-title-container .delivery-date-wrapper input[type="date"] {
    background: #F2F1F2 0% 0% no-repeat padding-box;
    border: 1px solid #E2E2E2;
    border-radius: 6px;
    width: 100%;
}
.cart-wrapper .cart-inner-wrapper .cart-title-container .delivery-date-wrapper label{
    position: absolute;
    
}
.cart-wrapper .cart-inner-wrapper .product-des .cart-count{
    font: normal normal normal 14px/18px Inter;
    color: #676767;
}
.cart-wrapper .cart-inner-wrapper .cart-inner-body-wrapper{
    padding: 10px 0;
}
.cart-wrapper .cart-inner-wrapper .cart-inner-body-wrapper .product-des .proudct-price h2{
    color: var(--unnamed-color-000000);
text-align: right;
font: normal normal 600 16px/35px Inter;
}

.cart-form-wrapper {
    padding: 20px;
}

.cart-form-wrapper .cart-title{
    font: normal normal 600 32px/39px Inter;
}

.single-address-wrapper {
    display: flex;
    gap: 10px;
    padding: 5px 0;
}

.single-address-wrapper label{
    font: normal normal 600 16px/24px Inter;
}
.cart-form-wrapper .add-new-address-btn-container{
    padding: 10px 0;
}
.cart-form-wrapper .add-new-address-btn-container button{
    font: normal normal 600 16px/24px Inter;
    letter-spacing: 0px;
    color: #3772F0;
    background-color: transparent;
    outline: unset;
    border: 0;
}

.cart-form-wrapper .instruction-container textarea{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 11px;
    width: 100%;
    resize: none;
    padding: 10px;
}

.payment-options-wrapper{
    padding: 25px 0 10px;
}

.single-payment-option{
    display: flex;
    gap: 10px;
    padding: 5px 0;
}
.single-payment-option label{
    font: normal normal 600 16px/24px Inter;
}

.cart-form-wrapper button[type="submit"]{
    background: #3772F0;
    border: unset;
    outline: unset;
    border-radius: 28px;
    color: #fff;
    height: 48px;
}

.payment-options-wrapper .payment-options-inner-wrapper .credit-cards-wrapper {
    border-top: 1px solid #D2D2D2;
    border-bottom: 1px solid #D2D2D2;
    padding: 15px 0;
    margin: 10px 0;
}


/* ================= CART END =====================*/



@media (max-width:991px){
    .store-single-product-wrapper .single-product-inner-wrapper .single-product-header{
        justify-content: space-between;
    }
}
@media (max-width:1024px){
    .supplier-wrapper .supplier-inner-wrapper{
        flex-wrap: wrap;
    }
}
@media (min-width:1024px){
    .single-supplier-container{
        width: 100%;
    }
}