/* Add new styles */

.AB-history-item {
    margin-bottom: 10px !important;
    position: relative !important;
    aspect-ratio: 3/4 !important;
    /* display: flex; */
    align-items: center !important;
    flex: 1 1 100% !important; /* 2 images per row on smaller screens */
    max-width: 100% !important;
    height: fit-content !important;
    
}

.AB-history-item:hover, .AB-history-item.selected {
    border-color: #007bff !important;
}

.my-tryons-content {
    display: flex ;
    flex-wrap: wrap !important;
    justify-content: space-between !important; /* Distribute space evenly */
}


.AB-history-item img {
    object-fit: contain !important;
}

.AB-history-item .btn {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    padding: 4px 8px !important;  /* Added padding for better spacing */
    background: none !important;
    border: none !important;
    opacity: 1 !important;
    transition: opacity 0.3s !important;
    cursor: pointer !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 4px !important;
}

.AB-history-item .btn::before {  /* Plus sign */
    content: '+';
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    margin-right: 2px !important;  /* Space between + and TRYON */
}

.AB-history-item .btn::after {  /* TRYON text */
    content: 'TRYON' !important;
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.AB-history-item .btn:hover {
    background-color: #333333 !important;
}

.AB-history-item .btn:hover::before,
.AB-history-item .btn:hover::after {
    color: white !important;
}


.AB-history-item .btn.rotate::before {
    display: inline-block !important;  /* Needed for rotation */
    animation: rotate 1s infinite linear !important;
}

.AB-history-item .btn:hover::after {
    opacity: 1 !important;
}

.AB-history-item {
    position: relative !important;
    margin-bottom: 20px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }


 

 
  

  .AB-button-text {
    font-size: 10px !important;
  }

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.slider-container {
    width: 80% !important;
    position: relative !important;
}

.body-type-slider {
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 4px !important;
    background: #e9ecef !important;
    border-radius: 2px !important;
    outline: none !important;
    margin: 18px 0; /* Add margin to make room for dots */
} 

.slider-dots {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    pointer-events: none !important; /* Let clicks pass through to slider */
}

.slider-dot {
    width: 12px !important;
    height: 12px !important;
    background-color: #e9ecef !important;
    border: 2px solid #fff !important; /* Add white border for contrast */
    border-radius: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important; /* Re-enable clicks on dots */
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

.slider-dot.active {
    background-color: #343a40 !important;
}

/* Keep your existing slider thumb and track styles */
.body-type-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: #343a40 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    margin-top: -8px !important;
    position: relative !important;
    z-index: 2 !important; /* Ensure thumb stays above dots */
}

.body-type-slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #343a40 var(--value-percent, 50%), #e9ecef var(--value-percent, 50%)) !important;
    border-radius: 2px !important;
    height: 2px !important;
}

.body-type-slider::-moz-range-track {
    background: linear-gradient(to right, #343a40 var(--value-percent, 50%), #e9ecef var(--value-percent, 50%)) !important;
    border-radius: 2px !important;
    height: 2px !important;
}

.body-type-slider::-ms-track {
    background: linear-gradient(to right, #343a40 var(--value-percent, 50%), #e9ecef var(--value-percent, 50%)) !important;
    border-radius: 2px !important;
    height: 2px !important;
    border: none !important;
    color: transparent !important;
}
/* max width 700px */
@media screen and (max-width: 468px) {
    .AB-history-item {
        /* one image per row */
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}