/* Toggle A */
      input:checked ~ .dot {
        transform: translateX(100%);
        background-color: #48bb78;
      }
      
      /* Toggle B */
      input:checked ~ .dot {
        transform: translateX(100%);
        background-color: #644A9E;
      }

       /* Toggle C */
       input:checked ~ .dot {
        transform: translateX(100%);
        background-color: #644A9E;
      }


/* styles.css */
body {
    font-family: 'Helvetica', Arial, sans-serif;
}




      .range-slider, .multi-range-slider {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        margin-top: 2.5rem;
        margin-bottom: 2rem;
      }
      
      .multi-range-slider .range-slider {
        margin: 0;
      }
      
      .range {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        width: 100%;
      }
      
      .range:focus {
        outline: 0;
      }
      
 
      
      .multi-range-slider .range-slider::before, .multi-range-slider .range-slider::after {
        content: none !important;
      }
  
      
      .range::-webkit-slider-runnable-track {
        width: 100%;
        height: 1rem;
        cursor: pointer;
        border-radius: 9999px;
        background-color: #cfd8e3;
        animate: 0.2s;
      }
      
      .range::-webkit-slider-thumb {
        z-index: 10;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        position: relative;
        -webkit-appearance: none;
                appearance: none;
        cursor: pointer;
        border-radius: 9999px;
        background-color: #ffffff;
        height: 2rem;
        width: 2rem;
        border-width: 4px;
        border-style: solid;
        border-color: #644a9e;
        transform: translateY(calc(-50% + 0.5rem));
      }
      
      .tooltip {
        position: absolute;
        display: block;
        text-align: center;
        color: #ffffff;
        line-height: 1;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
        border-radius: 0.125rem;
        font-size: 1rem;
        --transform-translate-x: 0;
        --transform-translate-y: 0;
        --transform-rotate: 0;
        --transform-skew-x: 0;
        --transform-skew-y: 0;
        --transform-scale-x: 1;
        --transform-scale-y: 1;
        transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
        --transform-translate-x: -50%;
        left: 50%;
        top: 2.25rem;
        background: #644a9e;
      }
      
      .tooltip:before {
        position: absolute;
        --transform-translate-x: 0;
        --transform-translate-y: 0;
        --transform-rotate: 0;
        --transform-skew-x: 0;
        --transform-skew-y: 0;
        --transform-scale-x: 1;
        --transform-scale-y: 1;
        transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
        --transform-translate-x: -50%;
        left: 50%;
        bottom: -0.5rem;
        width: 0;
        height: 0;
        border-width: 4px;
        border-style: solid;
        border-color: transparent;
        content: "";
        border-top-color: #644a9e;
      }
      
      .multi-range-slider .range-slider {
        position: absolute;
      }


      /* The container must be positioned relative: */
.custom-select {
  position: relative;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}



/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #4e4e4e transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #4e4e4e transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div, .select-selected {
  color: #393838;
  padding: 6px 10px;
  border: 1px solid transparent;
  text-align: start;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: white;
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 0.375rem;
  z-index: 99;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}


/* Highlight active step */
#signUpForm .form-header .stepIndicator.active {
    font-weight: 600;
    color: #644a9e;
}

/* Highlight completed step */
#signUpForm .form-header .stepIndicator.finish {
    font-weight: 600;
    color: #644a9e; /* Ensure the completed steps maintain the color */
}

/* Step indicators before the active step */
#signUpForm .form-header .stepIndicator::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9;
    width: 20px;
    height: 20px;
    background-color: #c3dafe; /* Default color for uncompleted steps */
    border-radius: 50%;
    border: 3px solid #ebf4ff;
}

/* Active step indicator before */
#signUpForm .form-header .stepIndicator.active::before {
    background-color: #644a9e; /* Set active step circle color */
    border: 3px solid #c3dafe; /* Border for active step */
}

/* Completed step indicator before */
#signUpForm .form-header .stepIndicator.finish::before {
    background-color: #644a9e; /* Same as active step */
    border: 3px solid #c3dafe;
}

/* Line between steps */
#signUpForm .form-header .stepIndicator::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 100%;
    height: 3px;
    background-color: #f3f3f3; /* Default background line */
}

/* Active step line */
#signUpForm .form-header .stepIndicator.active::after {
    background-color: #644a9e; /* Active step line color */
}

/* Completed step line */
#signUpForm .form-header .stepIndicator.finish::after {
    background-color: #644a9e !important; /* Completed step line color */
}

/* Hide line after the last step */
#signUpForm .form-header .stepIndicator:last-child::after {
    display: none;
}




#signUpForm .form-header .stepIndicator:last-child:after {
    display: none;
}



#signUpForm input.invalid {
    border: 2px solid #ffaba5;
}



#signUpForm .step {
    display: none;
}
.img_logo {
    background-size: contain;
    background-image: url(/img/image-logo-1.png);
}

.slider-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

#scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.scroll-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 8px; /* Add padding or spacing as needed */
    border: 2px solid #purple-300;
    border-radius: 50%;
    background-color: #purple-200;
    width: auto; /* Adjust the width as needed */
    white-space: nowrap;
}


[x-cloak] {
    display: none !important;
}
.pagination-list .active {
    background-color: #644a9e;
    color: white;
    /* Existing styles */
}

.filter-option {
    padding: 8px;
    cursor: pointer;
}

.selected {
    border-radius: 40px;
    background-color: #644a9e;
    color: #fff !important;
    border-bottom: 2px solid #888;
}

.pagination-list {
    display: flex;
    list-style-type: none;
    padding: 0;
}

    .pagination-list li {
        margin: 0 5px;
        padding: 5px 10px;
        border: 1px solid #ddd;
        cursor: pointer;
    }
.custom-margin-bottom {
    margin-bottom: 2rem;
}
/*edit and add prodct image resize css*/
img#thumbImage {
    height: 100px;
    object-fit: contain;
}
.thumbImage {
    height: 100px;
    object-fit: contain;
}
.varianthumbImage {
    height: 80px;
    object-fit: contain !important;
}
/*start cart  scroll styling*/
#style-2::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}
#style-1 {
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: 100vh; /* Set maximum height */
    scrollbar-width: thin; /* Set the width of the scrollbar to be thin */
    scrollbar-color: grey transparent; /* Set the color of the scrollbar thumb and track */
}

    /* Custom styling for WebKit browsers (such as Chrome, Safari) */
    #style-1::-webkit-scrollbar {
        width: 8px; /* Set the width of the scrollbar */
    }

    #style-1::-webkit-scrollbar-thumb {
        background-color: grey; /* Set the color of the scrollbar thumb */
    }
#cart-fixedbar {
/* padding-right:11px;*/
}
.custom-validation {
 font-size:12px !important;
 color:red !important;
}
.inner-shadow {
    position: relative;
}

    .inner-shadow::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: inset 0px 0px 6px 3px rgba(0, 0, 0, 0.06);
        pointer-events: none; /* ensures the shadow does not interfere with any interactions */
    }
.accordion-header .icon {
    transition: transform 0.3s ease;
}

.accordion-content:not(.hidden) ~ .accordion-header .icon {
    transform: rotate(45deg); /* Rotate the icon for open state if needed */
}

.chart-container {
    height: 300px;
    width: 100%;
    position: relative;
}
@media screen and (max-width: 768px) {
    .scroll-container {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-left: 0; /* No extra padding */
        padding-right: 0; /* No extra padding */
        gap: 8%; /* Gap between items */
    }

    .scroll-item-mobile {
        flex: 0 0 calc(100% / 3); /* 3 items visible at once */
        scroll-snap-align: start; /* Align to the start */
        width:auto;
    }

    /* Optional: Hide scrollbar for cleaner look */
    .scroll-container::-webkit-scrollbar {
        display: none;
    }
}