#csl-locator { max-width: 1200px; margin: 0 auto; font-family: Arial, sans-serif; }
#csl-locator h3 { font-size: 18px; margin-bottom: 10px; }
#csl-search-form { display: flex; gap: 10px; margin-bottom: 20px; }
#csl-search-form input, select { flex: 1; border: 1px solid #ccc;     border-radius: 50rem; padding: 0px 20px;}
#csl-search-form button { padding: 8px 26px; background: #a3a3a3; color: white; border: none; border-radius: 4px; cursor: pointer; }
.csl-results { display: flex; gap: 20px; }
.csl-list { flex: 1; overflow-y: auto; max-height: 600px; padding-right: 20px;}
.csl-item { border-bottom: 1px solid #eee; padding: 15px; background: #f9f9f9; margin-bottom: 15px; border-radius: 14px; }
.csl-logo { width: 50px; height: 50px; border-radius: 50%; margin-bottom: 10px; }
.csl-item h4 { color: #000000;
    margin: 0 0 5px;
    font-size: 1.15rem; }
.csl-item p { margin: 5px 0; font-size: 14px; }
.csl-view-map, .csl-item a { color: #007bff; text-decoration: none; margin-right: 10px; }
.csl-map { flex: 1; height: 600px; border: 1px solid #ccc; border-radius: 14px;}
.csl-country-list { margin-top: 20px; }
.csl-accordion { cursor: pointer; padding: 10px 18px; background: #f0f0f0; margin-bottom: 5px; border-radius: 14px; }
.csl-accordion-content { padding: 10px; background: white; }
.csl-accordion span i { color: #61CE70; }
/* Existing CSS */
.csl-accordion span { display: block; cursor: pointer; text-transform: uppercase; } /* Make whole span clickable */

/* Hide native arrow (works in Chrome, Edge, Safari) */
#csl-search-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;  /* 👈 move arrow 10px from right */
    padding-right: 30px; /* space so arrow doesn’t overlap text */
}

select#csl-country {
    text-transform: uppercase;
}

/* ============================================================= */
/* RESPONSIVE DESIGN – Mobile First (adds on top of your CSS)   */
/* Works perfectly with your current layout                     */
/* ============================================================= */

@media (max-width: 1024px) {
    #csl-search-form {
        flex-wrap: wrap;
    }
    #csl-search-form select,
    #csl-search-form input,
    #csl-search-form button {
        flex: 1 1 200px;
    }
    #csl-search-form button {
        flex: 1 1 100%;
        padding: 12px 20px;
    }
}

@media (max-width: 768px) {
    #csl-locator {
        padding: 0 7%;
    }

    #csl-search-form {
        gap: 12px;
        flex-direction: column;
    }

    #csl-search-form select,
    #csl-search-form input {
        width: 100%;
        max-height: 45px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    #csl-search-form button {
        min-height: 45px;
        font-size: 16px;
    }

    /* NEW LAYOUT: Filter → Map → Results (stacked vertically on mobile) */
    .csl-results {
        flex-direction: column;
        gap: 20px;
    }

    .csl-list,
    .csl-map {
        flex: none;
        width: 100%;
    }

    .csl-map {
        height: 250px !important; /* Override inline height */
        order: -1; /* This puts MAP right after the search form */
    }

    .csl-list {
        max-height: none;
        padding-right: 0;
        order: 2; /* Results appear BELOW the map */
    }

    .csl-item {
        padding: 16px;
    }

    .csl-item h4 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    #csl-locator h3 {
        font-size: 20px;
        text-align: left;
    }

    .csl-logo {
        width: 60px;
        height: 60px;
    }

    .csl-item {
        padding: 14px;
        border-radius: 12px;
    }

    .csl-item h4 {
        font-size: 17px;
    }

    .csl-item p {
        font-size: 14px;
    }

    .csl-accordion {
        padding: 14px 16px;
        font-size: 15px;
    }
    
    
}

/* Extra polish: Smooth transitions */
.csl-results,
.csl-map,
.csl-list {
    transition: all 0.3s ease;
}

/* Ensure map canvas takes full width on small screens */
#csl-map-canvas {
    width: 100% !important;
    height: 100% !important;
}

.csl-list {
    position: relative; /* Important: allows overlay to position correctly */
    min-height: 200px;  /* Optional: prevents collapse when empty */
    transition: filter 0.3s ease;
}

.csl-loading-blur {
    filter: blur(4px);
    pointer-events: none; /* Prevents clicking while loading */
    opacity: 0.7;
}

#csl-load-more:hover, #csl-load-more:focus  {
    background: #00b14f !important;  
    color: #fff !important;
}