@media (max-width: 768px) {
    #customSelectModal {
        display: none; /* Keep hidden by default, shown via JS */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6); /* Darker backdrop */
        z-index: 1000;

        /* --- CENTERING CHANGES START --- */
       
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        /* --- CENTERING CHANGES END --- */

        overflow: hidden; /* Prevent body scroll when modal is active */
    }

    .custom-select-content {
        background: #ffffff; /* White background */
        width: 100%; /* Adjust width for better centering on smaller screens */
        max-width: 400px; /* Max width for larger mobiles/tablets to not be too wide */
        max-height: 80vh; /* Allow it to be taller than 70vh for more content if needed */

        /* --- ALL CORNERS ROUNDED --- */
        border-radius: 16px; /* Apply border-radius to all corners uniformly */
        /* Removed individual border-top-left/right/bottom-left/right-radius as border-radius covers all */
        /* --- ALL CORNERS ROUNDED --- */

        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow for centered modal */
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        animation: fade-in 0.3s ease-out; /* Changed to fade-in for centered modal */
        overflow: hidden; /* Crucial: Ensures content within respects parent's border-radius */
        position: relative;
        display: flex;
        flex-direction: column;
    }

    /* --- ANIMATION CHANGE --- */
    /* Changed from slide-up to fade-in for a centered modal */
    @keyframes fade-in {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
    }
    /* --- ANIMATION CHANGE --- */


    /* Options list to mimic Android select options */
    #customSelectList {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-grow: 1;
        overflow-y: auto; /* Scrollable within modal */
        background: #ffffff;
        /* --- ALL CORNERS ROUNDED (for the list itself to not clip) --- */
        /* Important: When list has overflow-y:auto and fills its parent,
           it needs its own border-radius if it's the last element. */
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        /* If header itself should also have top rounded corners (good practice), add: */
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        /* --- ALL CORNERS ROUNDED (for the list itself) --- */
        position: relative;
    }

    #customSelectList li {
        padding: 16px 24px;
        font-size: 16px;
        color: #202124;
        border-bottom: 1px solid #e0e0e0;
        cursor: pointer;
        background: #ffffff;
        transition: background 0.2s ease;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    #customSelectList li:last-child {
        border-bottom: none;
    }
   
    #customSelectList li:hover,
    #customSelectList li:active {
        background: #f5f5f5;
    }

    /* Maintain no-scroll behavior */
    .no-scroll {
        overflow: hidden;
    }
}