/* Basic styles for location selector */
.locsel-wrapper{
    position:relative;
    max-width:600px;
    margin:0 auto;
}
.locsel-results{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    z-index:999999 !important;
    background:#fff !important;
    border:1px solid #ddd !important;
    border-top:0 !important;
    max-height:300px !important;
    overflow-y:auto !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.2) !important;
    border-radius:0 0 4px 4px !important;
    margin-top:-1px !important;
    display:block !important;
}
/* Inside modal: use static positioning so overflow-y on modal-content does not clip */
.locsel-modal .locsel-results{
    position:static !important;
    box-shadow:none !important;
    border:1px solid #ddd !important;
    border-radius:4px !important;
    margin-top:4px !important;
}
.locsel-list{list-style:none;margin:0;padding:0}
.locsel-item{
    padding:12px 15px;
    border-top:1px solid #eee;
    cursor:pointer;
    transition:background 0.2s;
    font-size:14px;
}
.locsel-item:first-child{border-top:none}
.locsel-item:hover{background:#f0f7ff;color:#2bbef9}
#locsel-search,#locsel-popup-search{
    width:100%;
    padding:12px 15px;
    font-size:16px;
    border:2px solid #ddd;
    border-radius:4px;
    transition:border-color 0.3s;
    outline:none;
    box-sizing:border-box;
}
#locsel-search:focus,#locsel-popup-search:focus{
    border-color:#2bbef9;
}
#locsel-map,#locsel-popup-map{border:1px solid #ddd;border-radius:4px;margin-top:20px}

/* Popup Modal */
.locsel-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.locsel-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.75);z-index:1;cursor:pointer}
.locsel-modal-content{position:relative;z-index:2;background:#fff;padding:30px;border-radius:12px;max-width:650px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,0.4);animation:slideUp 0.3s}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Loading state */
.locsel-loading{padding:12px;text-align:center;color:#666}
.locsel-loading .loader{display:inline-block;border:3px solid #f3f3f3;border-top:3px solid #2bbef9;border-radius:50%;width:16px;height:16px;animation:locsel-spin 1s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes locsel-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.locsel-modal-content h2{margin:0 0 10px;font-size:26px;color:#333;font-weight:600}
.locsel-modal-content p{margin:0 0 20px;color:#666;font-size:15px}
.locsel-modal-close{position:absolute;top:15px;right:15px;background:#f5f5f5;border:none;font-size:28px;cursor:pointer;color:#666;line-height:1;padding:0;width:36px;height:36px;border-radius:50%;transition:all 0.2s}
.locsel-modal-close:hover{background:#e0e0e0;color:#333;transform:rotate(90deg)}

/* Dark blue top navbar */
.locsel-topbar{
    background:#1b2a4a;
    color:#fff;
    width:100%;
    padding:0 20px;
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    height:36px;
    box-sizing:border-box;
    z-index:9999;
    position:relative;
}
.locsel-topbar *{
    box-sizing:border-box;
}
.locsel-topbar-city{
    display:inline-flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
    font-weight:600;
    transition:color 0.2s;
}
.locsel-topbar-city:hover{
    color:#5bc0eb;
}
.locsel-topbar-city svg{
    width:14px;
    height:14px;
    fill:currentColor;
    flex-shrink:0;
}
.locsel-topbar-info{
    display:inline-flex;
    align-items:center;
    gap:16px;
    color:rgba(255,255,255,0.85);
    font-size:12px;
}
.locsel-topbar-info span{
    display:inline-flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
}
.locsel-topbar-info .locsel-label{
    color:rgba(255,255,255,0.55);
}
.locsel-topbar-info .locsel-value{
    color:#fff;
    font-weight:600;
}
.locsel-topbar-notdeliverable{
    color:#ff6b6b;
    font-weight:600;
    font-size:12px;
}

@media(max-width:768px){
    .locsel-topbar{
        flex-wrap:wrap;
        height:auto;
        padding:6px 12px;
        gap:8px;
        font-size:12px;
    }
    .locsel-topbar-info{
        gap:10px;
        font-size:11px;
    }
}