/*
|--------------------------------------------------------------------------
| Location Selector Popup Styles
|--------------------------------------------------------------------------
*/


.lsp-wrapper {
    font-family: "Bricolage Grotesque", sans-serif;
}



.lsp-overlay {

    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.4);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:999999;

    opacity:0;
    visibility:hidden;

    transition:opacity .25s ease, visibility .25s ease;

    padding-bottom:80px;

}



.lsp-overlay.lsp-active {

    opacity:1;
    visibility:visible;

}




.lsp-popup {

    width:615px;
    max-width:90%;

    padding:45px;

    box-shadow:
    0 25px 70px rgba(0,0,0,.15);

    text-align:center;

    transform:translateY(20px) scale(0.95);

    transition:transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);

}




.lsp-active .lsp-popup {

    transform:translateY(0) scale(1);

}




.lsp-popup h2 {

    margin:0 0 35px;

    font-size:32px;

    line-height:1.2;

    font-weight:700;

    color:#111;

    letter-spacing:-0.5px;

}


 
.lsp-country {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:18px 20px;

    background:#fff;

    border:1.5px solid #e5e5e5;

    text-decoration:none;

    color:#111;

    font-size:16px;

    font-weight:600;

    transition:all .2s ease;

    cursor:pointer;

    border-radius:18px;

}


.lsp-country-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

}

.lsp-country:hover {

    transform:translateY(-2px);

    border-color:#d0d0d0;

    box-shadow:
    0 10px 30px rgba(0,0,0,.1);

    background:#fafafa;

}

.lsp-country:active {

    transform:translateY(0);

}


.lsp-country img {

    width:48px;

    height:30px;

    object-fit:cover;

    flex-shrink:0;

    border-radius:4px;

}


.lsp-country span {

    flex:1;

    text-align:center;

}


.lsp-close-hint {

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    font-size:12px;

    color:rgba(255,255,255,0.5);

    font-weight:400;

    pointer-events:none;

    letter-spacing:0.3px;

}




/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/
@media(max-width:700px){

.lsp-country-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:600px){


.lsp-popup {

    padding:32px;

    width:90%;

}



.lsp-popup h2 {

    font-size:26px;

    margin:0 0 28px;

}



.lsp-country {

    font-size:15px;

    padding:16px 18px;

    gap:12px;

}



.lsp-country img {

    width:42px;

    height:27px;

}


}