#vs-yandex-pickup{
    --vs-green:#12a66b;
    --vs-green-dark:#087b4c;
    --vs-text:#172433;
    --vs-muted:#6d7985;
    --vs-line:#e3e9ed;
    width:100%;
    margin:0;
    padding:0;
    font-family:Arial,"Segoe UI",sans-serif;
    color:var(--vs-text);
}
#vs-yandex-pickup,
#vs-yandex-pickup *{
    box-sizing:border-box;
}
#vs-yandex-pickup .vs-shell{
    width:100%;
    height:min(760px, calc(100dvh - 145px));
    min-height:620px;
    display:grid;
    grid-template-columns:minmax(320px,390px) minmax(0,1fr);
    background:#fff;
    border:1px solid var(--vs-line);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 34px rgba(28,44,57,.08);
}
#vs-yandex-pickup .vs-sidebar{
    height:100%;
    min-height:0;
    min-width:0;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-right:1px solid var(--vs-line);
}
#vs-yandex-pickup .vs-head{
    flex:0 0 auto;
    padding:17px 17px 13px;
    border-bottom:1px solid var(--vs-line);
}
#vs-yandex-pickup .vs-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 13px;
}
#vs-yandex-pickup .vs-title-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(145deg,var(--vs-green),var(--vs-green-dark));
    box-shadow:0 8px 18px rgba(18,166,107,.22);
}
#vs-yandex-pickup .vs-title-icon svg{
    width:21px;
    height:21px;
    fill:#fff;
}
#vs-yandex-pickup .vs-title h1{
    margin:0 !important;
    padding:0 !important;
    font-size:19px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    color:var(--vs-text) !important;
}
#vs-yandex-pickup .vs-search{
    position:relative;
}
#vs-yandex-pickup .vs-search svg{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    width:17px;
    height:17px;
    stroke:#83909a;
    pointer-events:none;
}
#vs-yandex-pickup .vs-search input{
    width:100% !important;
    height:43px !important;
    margin:0 !important;
    padding:0 38px 0 40px !important;
    border:1px solid #dce3e8 !important;
    border-radius:12px !important;
    outline:none !important;
    background:#f8fafb !important;
    color:#263644 !important;
    font:14px Arial,"Segoe UI",sans-serif !important;
    box-shadow:none !important;
}
#vs-yandex-pickup .vs-search input:focus{
    border-color:#8fd6b7 !important;
    background:#fff !important;
    box-shadow:0 0 0 3px rgba(18,166,107,.09) !important;
}
#vs-yandex-pickup .vs-clear{
    position:absolute;
    right:7px;
    top:6px;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:#71808b !important;
    font-size:19px !important;
    line-height:30px !important;
    cursor:pointer;
    display:none;
}
#vs-yandex-pickup .vs-filter{
    margin-top:9px;
}
#vs-yandex-pickup .vs-filter select{
    width:100% !important;
    height:39px !important;
    margin:0 !important;
    padding:0 34px 0 11px !important;
    border:1px solid #dce3e8 !important;
    border-radius:11px !important;
    background:#fff !important;
    color:#3a4957 !important;
    font:14px Arial,"Segoe UI",sans-serif !important;
    box-shadow:none !important;
}
#vs-yandex-pickup .vs-count{
    flex:0 0 auto;
    padding:10px 17px;
    border-bottom:1px solid var(--vs-line);
    background:#fafcfd;
    color:#657380;
    font-size:12px;
    font-weight:700;
}
#vs-yandex-pickup .vs-list{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:7px;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#bec8cf #f2f5f6;
}
#vs-yandex-pickup .vs-item{
    display:block;
    padding:12px 11px;
    border:1px solid transparent;
    border-radius:12px;
    cursor:pointer;
    transition:background .14s ease,border-color .14s ease;
}
#vs-yandex-pickup .vs-item:hover{
    background:#f4f8f6;
}
#vs-yandex-pickup .vs-item.is-hidden{
    display:none;
}
#vs-yandex-pickup .vs-item-top{
    display:flex;
    align-items:flex-start;
    gap:9px;
}
#vs-yandex-pickup .vs-dot{
    width:10px;
    height:10px;
    flex:0 0 10px;
    margin-top:4px;
    border-radius:50%;
    background:var(--vs-green);
    box-shadow:0 0 0 4px rgba(18,166,107,.12);
}
#vs-yandex-pickup .vs-item h3{
    margin:0 !important;
    padding:0 !important;
    color:#172433 !important;
    font-size:14px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
}
#vs-yandex-pickup .vs-district{
    margin-top:3px;
    color:var(--vs-green-dark);
    font-size:11px;
    font-weight:700;
}
#vs-yandex-pickup .vs-address{
    margin:6px 0 0 19px !important;
    color:var(--vs-muted) !important;
    font-size:12px !important;
    line-height:1.42 !important;
}
#vs-yandex-pickup .vs-map{
    position:relative;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    overflow:hidden;
    background:#f1f3f5;
}
/*
 * The native Bitrix map component may output its own wrapper sizes.
 * Force only its outer map area to fill our grid cell.
 */
#vs-yandex-pickup .vs-map > div{
    width:100% !important;
    height:100% !important;
}
#vs-yandex-pickup .vs-map [id^="BX_YMAP_"],
#vs-yandex-pickup .vs-map [id*="BX_YMAP_"]{
    width:100% !important;
    height:100% !important;
    min-height:620px !important;
}

@media(max-width:900px){
    #vs-yandex-pickup .vs-shell{
        height:auto;
        min-height:0;
        grid-template-columns:1fr;
        grid-template-rows:430px 540px;
        border-radius:13px;
    }
    #vs-yandex-pickup .vs-map{
        grid-row:1;
    }
    #vs-yandex-pickup .vs-sidebar{
        grid-row:2;
        border-right:0;
        border-top:1px solid var(--vs-line);
    }
    #vs-yandex-pickup .vs-map [id^="BX_YMAP_"],
    #vs-yandex-pickup .vs-map [id*="BX_YMAP_"]{
        min-height:430px !important;
    }
}
@media(max-width:520px){
    #vs-yandex-pickup .vs-shell{
        grid-template-rows:360px 520px;
    }
    #vs-yandex-pickup .vs-head{
        padding:11px 12px 9px;
    }
    #vs-yandex-pickup .vs-title{
        margin-bottom:8px;
    }
    #vs-yandex-pickup .vs-title-icon{
        width:35px;
        height:35px;
        flex-basis:35px;
        border-radius:11px;
    }
    #vs-yandex-pickup .vs-title h1{
        font-size:16px !important;
    }
    #vs-yandex-pickup .vs-search input{
        height:40px !important;
        font-size:13px !important;
    }
    #vs-yandex-pickup .vs-filter select{
        height:36px !important;
        font-size:13px !important;
    }
    #vs-yandex-pickup .vs-count{
        padding:8px 12px;
    }
    #vs-yandex-pickup .vs-map [id^="BX_YMAP_"],
    #vs-yandex-pickup .vs-map [id*="BX_YMAP_"]{
        min-height:360px !important;
    }
}

/* =========================================================
   FULL-WIDTH / ADAPTIVE BITRIX LAYOUT
   Break the pickup interface out of the narrow Bitrix
   content container and use the available browser width.
   ========================================================= */
#vs-yandex-pickup{
    width:100vw !important;
    max-width:100vw !important;
    position:relative !important;
    left:50% !important;
    right:50% !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
    padding:14px clamp(10px,1.25vw,24px) 24px !important;
    overflow:visible !important;
}

#vs-yandex-pickup .vs-shell{
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    grid-template-columns:clamp(320px,24vw,430px) minmax(0,1fr) !important;
    height:calc(100dvh - 135px) !important;
    min-height:650px !important;
    max-height:900px !important;
}

/* OpenStreetMap / Leaflet map must fill every pixel of the right column */
#vs-yandex-pickup .vs-map,
#vs-yandex-pickup .vs-map > div,
#vs-yandex-pickup .vs-map [id^="BX_YMAP_"],
#vs-yandex-pickup .vs-map [id*="BX_YMAP_"]{
    width:100% !important;
    max-width:none !important;
    height:100% !important;
}

/* Large desktop / ultrawide */
@media(min-width:1600px){
    #vs-yandex-pickup{
        padding-left:24px !important;
        padding-right:24px !important;
    }
    #vs-yandex-pickup .vs-shell{
        grid-template-columns:400px minmax(0,1fr) !important;
    }
}

/* Normal laptops */
@media(min-width:901px) and (max-width:1250px){
    #vs-yandex-pickup{
        padding:10px 10px 20px !important;
    }
    #vs-yandex-pickup .vs-shell{
        grid-template-columns:340px minmax(0,1fr) !important;
        height:calc(100dvh - 120px) !important;
        min-height:620px !important;
    }
}

/* Tablet: map on top, list below */
@media(max-width:900px){
    #vs-yandex-pickup{
        width:100% !important;
        max-width:100% !important;
        left:auto !important;
        right:auto !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding:8px !important;
    }
    #vs-yandex-pickup .vs-shell{
        height:auto !important;
        max-height:none !important;
        min-height:0 !important;
        grid-template-columns:1fr !important;
        grid-template-rows:minmax(380px,48dvh) minmax(500px,52dvh) !important;
    }
    #vs-yandex-pickup .vs-map,
    #vs-yandex-pickup .vs-map > div,
    #vs-yandex-pickup .vs-map [id^="BX_YMAP_"],
    #vs-yandex-pickup .vs-map [id*="BX_YMAP_"]{
        min-height:380px !important;
    }
}

/* Phones */
@media(max-width:520px){
    #vs-yandex-pickup{
        padding:4px !important;
    }
    #vs-yandex-pickup .vs-shell{
        border-radius:10px !important;
        grid-template-rows:350px 520px !important;
    }
    #vs-yandex-pickup .vs-map,
    #vs-yandex-pickup .vs-map > div,
    #vs-yandex-pickup .vs-map [id^="BX_YMAP_"],
    #vs-yandex-pickup .vs-map [id*="BX_YMAP_"]{
        min-height:350px !important;
    }
}

/* Very small phones */
@media(max-width:380px){
    #vs-yandex-pickup .vs-shell{
        grid-template-rows:320px 500px !important;
    }
    #vs-yandex-pickup .vs-map,
    #vs-yandex-pickup .vs-map > div,
    #vs-yandex-pickup .vs-map [id^="BX_YMAP_"],
    #vs-yandex-pickup .vs-map [id*="BX_YMAP_"]{
        min-height:320px !important;
    }
}


/* =========================================================
   LEAFLET MAP VIEWPORT FIX
   ========================================================= */
#vs-yandex-pickup .vs-map{
    position:relative !important;
    overflow:hidden !important;
    min-height:0 !important;
}
#vs-yandex-pickup .vs-map > div{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
}
#vs-yandex-pickup .vs-map [id^="BX_YMAP_"],
#vs-yandex-pickup .vs-map [id*="BX_YMAP_"]{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
}


#vs-yandex-pickup .vs-item.is-active{
    background:#e9f8f1 !important;
    border-color:#aee2ca !important;
    box-shadow:inset 3px 0 0 var(--vs-green);
}
#vs-yandex-pickup .vs-item.is-active .vs-dot{
    background:var(--vs-green-dark);
    box-shadow:0 0 0 5px rgba(18,166,107,.16);
}


/* Leaflet must fill the entire right panel */
#vs-yandex-pickup .vs-map{
    position:relative !important;
    overflow:hidden !important;
    min-width:0 !important;
    min-height:0 !important;
}
#vs-yandex-pickup #vs-osm-map{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
}
#vs-yandex-pickup .vs-item.is-active{
    background:#e9f8f1 !important;
    border-color:#aee2ca !important;
    box-shadow:inset 3px 0 0 var(--vs-green) !important;
}
#vs-yandex-pickup .vs-item.is-active .vs-dot{
    background:var(--vs-green-dark) !important;
    box-shadow:0 0 0 5px rgba(18,166,107,.16) !important;
}
#vs-yandex-pickup .vs-office-info{
    width:min(320px,72vw);
    color:#344250;
    font-family:Arial,"Segoe UI",sans-serif;
    font-size:12px;
    line-height:1.45;
}
#vs-yandex-pickup .vs-office-info .tag{
    display:inline-block;
    margin-bottom:7px;
    padding:5px 8px;
    border-radius:999px;
    background:#eaf8f1;
    color:#087b4c;
    font-size:10px;
    font-weight:700;
}
#vs-yandex-pickup .vs-office-info h2{
    margin:0 0 10px !important;
    color:#172433 !important;
    font-size:17px !important;
    line-height:1.25 !important;
}
#vs-yandex-pickup .vs-office-info .row{margin:8px 0}
#vs-yandex-pickup .vs-office-info .label{
    margin-bottom:2px;
    color:#89949d;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
}
#vs-yandex-pickup .vs-office-info .actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:12px;
}
#vs-yandex-pickup .vs-office-info .actions a,
#vs-yandex-pickup .vs-office-info .actions button{
    min-height:36px !important;
    margin:0 !important;
    padding:8px 9px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:9px !important;
    text-decoration:none !important;
    font:700 11px Arial,"Segoe UI",sans-serif !important;
    cursor:pointer !important;
}
#vs-yandex-pickup .vs-office-info .route{background:#12a66b !important;color:#fff !important}
#vs-yandex-pickup .vs-office-info .copy{background:#edf2f4 !important;color:#32434e !important}



/* =========================================================
   BTS / EMU / UZPOST FILTER BUTTONS
   Added without changing the original map/list CSS above.
   ========================================================= */
#vs-yandex-pickup .vs-carrier-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:9px;
}
#vs-yandex-pickup .vs-carrier-btn{
    min-width:0 !important;
    min-height:38px !important;
    margin:0 !important;
    padding:7px 8px !important;
    border:1px solid #dce3e8 !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#475766 !important;
    font:700 11px/1.2 Arial,"Segoe UI",sans-serif !important;
    cursor:pointer !important;
    transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease;
}
#vs-yandex-pickup .vs-carrier-btn:hover{
    background:#f4f8f6 !important;
    border-color:#aee2ca !important;
    color:#087b4c !important;
}
#vs-yandex-pickup .vs-carrier-btn.is-active{
    background:#e9f8f1 !important;
    border-color:#8fd6b7 !important;
    color:#087b4c !important;
    box-shadow:inset 0 0 0 1px rgba(18,166,107,.08) !important;
}
@media(max-width:520px){
    #vs-yandex-pickup .vs-carrier-buttons{
        gap:5px;
        margin-top:7px;
    }
    #vs-yandex-pickup .vs-carrier-btn{
        min-height:34px !important;
        padding:6px 5px !important;
        font-size:10px !important;
        border-radius:9px !important;
    }
}
@media(max-width:380px){
    #vs-yandex-pickup .vs-carrier-buttons{
        grid-template-columns:1fr 1fr;
    }
}

/* =========================================================
   CENTER OFFICE MODAL / BLURRED BACKGROUND
   ========================================================= */
body.vs-office-modal-open{
    overflow:hidden !important;
}
#vs-yandex-pickup .vs-modal{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}
#vs-yandex-pickup .vs-modal.is-open{
    display:flex;
}
#vs-yandex-pickup .vs-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(18,28,36,.46);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}
#vs-yandex-pickup .vs-modal-card{
    position:relative;
    z-index:1;
    width:min(620px,calc(100vw - 28px));
    max-height:min(82vh,760px);
    overflow:auto;
    padding:26px 26px 24px;
    border:1px solid rgba(255,255,255,.62);
    border-radius:20px;
    background:rgba(255,255,255,.97);
    box-shadow:0 28px 80px rgba(0,0,0,.28);
    animation:vsModalIn .16s ease-out;
}
@keyframes vsModalIn{
    from{opacity:0;transform:translateY(8px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
#vs-yandex-pickup .vs-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid #dfe6ea !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#263644 !important;
    font:400 27px/1 Arial,sans-serif !important;
    cursor:pointer !important;
    box-shadow:0 5px 18px rgba(25,38,49,.10) !important;
}
#vs-yandex-pickup .vs-modal-close:hover{
    background:#f3f7f5 !important;
    border-color:#aee2ca !important;
    color:var(--vs-green-dark) !important;
}
#vs-yandex-pickup .vs-modal-card .vs-office-info{
    width:100%;
    max-width:none;
    padding-right:34px;
    font-size:14px;
    line-height:1.5;
}
#vs-yandex-pickup .vs-modal-card .vs-office-info h2{
    margin-bottom:16px !important;
    font-size:22px !important;
    padding-right:18px !important;
}
#vs-yandex-pickup .vs-modal-card .vs-office-info .row{
    margin:11px 0;
    padding-bottom:10px;
    border-bottom:1px solid #edf1f3;
}
#vs-yandex-pickup .vs-modal-card .vs-office-info .row:last-of-type{
    border-bottom:0;
}
#vs-yandex-pickup .vs-modal-card .vs-office-info .label{
    margin-bottom:4px;
    font-size:10px;
}
#vs-yandex-pickup .vs-modal-card .vs-office-info .actions{
    margin-top:18px;
}
#vs-yandex-pickup .vs-modal-card .vs-office-info .actions a,
#vs-yandex-pickup .vs-modal-card .vs-office-info .actions button{
    min-height:44px !important;
    font-size:12px !important;
}
#vs-yandex-pickup .vs-loading{
    padding:28px 16px;
    text-align:center;
    color:#7a8791;
    font-size:13px;
}
#vs-yandex-pickup .vs-error{
    margin:12px;
    padding:14px;
    border:1px solid #efcaca;
    border-radius:12px;
    background:#fff6f6;
    color:#9d2520;
    font-size:13px;
    line-height:1.45;
}
@media(max-width:520px){
    #vs-yandex-pickup .vs-modal{
        padding:10px;
        align-items:flex-end;
    }
    #vs-yandex-pickup .vs-modal-card{
        width:100%;
        max-height:88vh;
        border-radius:20px 20px 12px 12px;
        padding:22px 18px 18px;
    }
    #vs-yandex-pickup .vs-modal-card .vs-office-info{
        padding-right:25px;
        font-size:13px;
    }
    #vs-yandex-pickup .vs-modal-card .vs-office-info h2{
        font-size:18px !important;
    }
}


/* Leaflet-specific layout and controls */
#vs-yandex-pickup #vs-osm-map{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    z-index:1;
    background:#e8ecef;
}
#vs-yandex-pickup .leaflet-container{
    font-family:Arial,"Segoe UI",sans-serif;
}
#vs-yandex-pickup .leaflet-control-attribution{
    font-size:10px;
}
#vs-yandex-pickup .leaflet-tooltip{
    border:0;
    border-radius:8px;
    box-shadow:0 5px 18px rgba(0,0,0,.14);
    color:#243442;
    font:700 11px Arial,"Segoe UI",sans-serif;
}

/* =========================================================
   UZBEKISTAN FOCUS MAP — IMPROVED
   Outside Uzbekistan: dark-gray vector map with NO labels.
   Uzbekistan: normal OpenStreetMap colors + labels.
   ========================================================= */
#vs-yandex-pickup .vs-map{
    background:#24282c !important;
}

#vs-yandex-pickup #vs-dark-map-base{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:0 !important;
    overflow:hidden !important;
    background:#24282c !important;
    pointer-events:none !important;
}

#vs-yandex-pickup #vs-dark-map-base .maplibregl-map,
#vs-yandex-pickup #vs-dark-map-base .maplibregl-canvas-container,
#vs-yandex-pickup #vs-dark-map-base .maplibregl-canvas{
    width:100% !important;
    height:100% !important;
    pointer-events:none !important;
}

#vs-yandex-pickup #vs-osm-map{
    z-index:2 !important;
    background:transparent !important;
}

#vs-yandex-pickup .leaflet-container{
    background:transparent !important;
}

/* Keep the clipped Uzbekistan raster completely normal and readable. */
#vs-yandex-pickup .leaflet-vs-uz-tiles-pane canvas,
#vs-yandex-pickup .leaflet-vs-uz-tiles-pane img{
    filter:none !important;
    opacity:1 !important;
}

/* Crisp border at every zoom without the oversized black outline. */
#vs-yandex-pickup .leaflet-vs-uz-border-pane path,
#vs-yandex-pickup .leaflet-vs-uz-border-halo-pane path{
    vector-effect:non-scaling-stroke;
    shape-rendering:geometricPrecision;
}

/* Leaflet controls stay over the background renderer. */
#vs-yandex-pickup .leaflet-control-container{
    position:relative;
    z-index:800;
}

/* Hide MapLibre UI completely — Leaflet owns all interaction and controls. */
#vs-yandex-pickup #vs-dark-map-base .maplibregl-control-container{
    display:none !important;
}

#vs-yandex-pickup #vs-dark-map-base.maplibregl-map{
    width:100% !important;
    height:100% !important;
    background:#24282c !important;
}