:root {
    /* Set default values or leave empty to be set by JS */
    --price-circle-bg: #e2e8f0;
    --price-circle-font-color: #4a5568;
    --price-circle-hover-bg: #cfd8e3; 
}

.clsDefault {
    font-size: smaller;
    font-style: italic;
}

    .flex-inline {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .animateTile:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -ms-transform: scale(1.03);
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
        z-index: 900;
    }

    /* Main container for the Shop By Price widget */
    .price-widget-container {
        background-color: #ffffff;
        /* border-radius: 1rem; /* Generous rounded corners */
        box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1), 0 5px 15px -5px rgba(0, 0, 0, 0.05); /* Deeper shadow for prominence */
        padding: 2rem;
        padding-bottom: 4rem;
        width: 100%;
        /* max-width: 600px; /* Wider to comfortably fit horizontal circles */
        box-sizing: border-box;
    }

        /* Widget heading */
        .price-widget-container h3 {
            font-size: 1.75rem; /* Larger, more prominent heading */
            /* font-weight: 800; /* Extra bold */
            color: #1a202c; /* Dark text for contrast */
            margin-bottom: 2.5rem;
            text-align: center;
            font-family: 'Segoe UI',Arial,sans-serif;
        }

    /* Container for the circular price range buttons */
    .price-circles-group {
        display: flex;
        flex-wrap: wrap; /* Allows circles to wrap onto the next line on smaller screens */
        justify-content: center; /* Centers circles horizontally */
        gap: 1rem; /* Space between each circle */
        margin-bottom: 0; /* No margin at the bottom if no custom range section */
    }

    /* Styling for each individual price circle */
.price-circle {
    width: 160px; /* Diameter of the circle */
    height: 160px; /* Diameter of the circle */
    border-radius: 50%; /* Makes the div a perfect circle */
    background-color: var(--price-circle-bg); /* Light gray background */
    color: var(--price-circle-font-color); /* Dark gray text color */
    display: flex;
    flex-direction: column; /* Stack price label and value vertically */
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent; /* Default transparent border */
    box-sizing: border-box; /* Include padding and border in sizing */
    flex-shrink: 0; /* Prevent circles from shrinking on wrapping */
}

    .price-circle:hover {
        /* background-color: #cfd8e3;  /* Slightly darker gray on hover */
        transform: translateY(-3px); /* Subtle lift effect */
        /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Soft shadow on hover */
        background-color: var(--price-circle-hover-bg); /* A distinct blue for active state */
        /* color: #ffffff; /* White text for active state */
        border-color: #2563eb; /* Darker blue border */
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 0 5px 15px rgba(59, 130, 246, 0.3); /* Blue glowing effect */
        /* transform: scale(1.02); /* Slightly larger when active */
    }

       .price-circles-group a{
            border: none;
            text-decoration:none;
        }

        /* Active/Selected circle state - inspired by Walmart's selection style */
        .price-circle.active {
            background-color: #3b82f6; /* A distinct blue for active state */
            color: #ffffff; /* White text for active state */
            border-color: #2563eb; /* Darker blue border */
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 0 5px 15px rgba(59, 130, 246, 0.3); /* Blue glowing effect */
            transform: scale(1.02); /* Slightly larger when active */
        }

    /* Styling for the smaller text label within the circle (e.g., "Up to") */
    .price-label {
        font-size: 0.75rem; /* Small text */
        font-weight: 500;
        margin-bottom: 0.1rem; /* Small space between label and value */
        line-height: 1; /* Tighter line height */
    }

    /* Styling for the main price value within the circle (e.g., "$100", "$10 - $20") */
    .price-value {
        font-size: 1.25rem; /* Larger, prominent price text */
        font-weight: 700; /* Bold price */
        line-height: 1; /* Tighter line height */
    }

    /* Responsive adjustments for circles */
    @media (max-width: 500px) {
        .price-circle {
            width: 75px; /* Slightly smaller circles on smaller screens */
            height: 75px;
            font-size: 0.7rem;
        }

        .price-value {
            font-size: 1.1rem; /* Adjust price value font size */
        }

        .price-widget-container {
            padding: 1rem;
        }
    }