/* Directory Map (searchable) block — search UI.
   Enqueued (not inline) so it survives CSP / optimisation plugins.
   Styled to match Ušće: Poppins, green #A0CC3A accent, rounded, soft shadows. */

/* Full-width grey band. The block sits directly in the unconstrained `.page`
   wrapper, so a background on the section spans the whole viewport width while
   the inner `.cont-big` content stays centred. */
.object-map--search{
    background:#f2f2f2;
    padding-top:clamp(28px,4vw,56px);
    padding-bottom:clamp(28px,4vw,56px);
}

.object-map--search .object-map__search{
    padding:18px 0 8px;
}

/* Centred, prominent search zone so users can't miss it. */
.dms-search{
    max-width:640px;
    margin:0 auto;
}

.dms-search__label{
    display:block;
    text-align:center;
    font-family:"Poppins",sans-serif;
    font-weight:600;
    font-size:clamp(20px,2.4vw,28px);
    line-height:1.2;
    color:#1a1a1a;
    margin:0 0 6px;
}
.dms-search__hint{
    display:block;
    text-align:center;
    font-family:"Poppins",sans-serif;
    font-size:14px;
    line-height:1.4;
    color:#989898;
    margin:0 0 20px;
}

/* Input + icons */
.dms-field{
    position:relative;
    display:flex;
    align-items:center;
}
.dms-field__icon{
    position:absolute;
    left:20px;
    width:22px;height:22px;
    color:#989898;
    pointer-events:none;
    transition:color .18s ease;
}
.dms-input{
    width:100%;
    box-sizing:border-box;
    height:62px;
    border:1.5px solid #e6e6e6;
    border-radius:16px;
    padding:0 52px;
    font-family:"Poppins",sans-serif;
    font-size:17px;
    color:#1a1a1a;
    background:#fff;
    box-shadow:0 6px 22px rgba(0,0,0,.06);
    outline:none;
    transition:border-color .18s ease,box-shadow .18s ease;
}
.dms-input::placeholder{color:#b3b3b3;}
.dms-input:focus{
    border-color:#A0CC3A;
    box-shadow:0 0 0 4px rgba(160,204,58,.20),0 6px 22px rgba(0,0,0,.06);
}
.dms-field:focus-within .dms-field__icon{color:#A0CC3A;}

/* Clear (×) button — appears only when there's text. */
.dms-field__clear{
    position:absolute;
    right:14px;
    width:30px;height:30px;
    display:none;
    align-items:center;justify-content:center;
    padding:0;border:0;border-radius:50%;
    background:#f0f0f0;color:#676767;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}
.dms-field__clear:hover{background:#e6e6e6;color:#1a1a1a;}
.dms-field.has-value .dms-field__clear{display:flex;}

.dms-count{
    font-family:"Poppins",sans-serif;
    font-size:13px;color:#8a8a8a;
    margin:10px 4px 0;min-height:16px;text-align:center;
}

/* Results — reads as a connected dropdown card. */
.dms-results{
    list-style:none;margin:12px 0 6px;padding:6px;
    max-height:320px;overflow-y:auto;
    border:1px solid #eee;border-radius:16px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.dms-results:empty{display:none;}
.dms-result{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;text-align:left;
    background:transparent;border:0;border-radius:12px;
    padding:13px 14px;cursor:pointer;
    font-family:"Poppins",sans-serif;font-size:15px;color:#1a1a1a;
    transition:background .14s ease;
}
.dms-result:hover,.dms-result.is-active{background:#f4f9e8;}
.dms-result__name{font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dms-result__sprat{flex:0 0 auto;font-size:11px;font-weight:600;line-height:1;color:#5a7d12;background:#eef6da;border-radius:999px;padding:5px 10px;}
.dms-empty{padding:16px;text-align:center;color:#9b9b9b;font-size:14px;font-family:"Poppins",sans-serif;}

.object-map--search .object-map__container-item [data-store-id].is-located{fill:#A0CC3A !important;}

/* --- Always-on store logos ------------------------------------------------
   Logos are drawn directly INSIDE the floor SVG by directory-map-search.js,
   centred on and clipped to a circle on each shape. The theme's hover/click
   "cloud" popup (which links to the retailer page) is left intact so users can
   still click through — our SVG logos use pointer-events:none so they never
   block the shape's hover. */
.object-map--search .dms-logo{pointer-events:none;}

/* On mobile portrait the floor SVG is rotated -90deg (block-object-map.css:
   `.object-map__container-item svg:first-of-type`). Our logos live inside that
   SVG, so counter-rotate the logo image +90deg to keep it upright — mirroring
   the theme's own .ico / .rotating-icon, and using the SAME reset breakpoint so
   they straighten exactly when the map does. (The hover popup is outside the SVG,
   so it's unaffected.) */
.object-map--search .dms-logo image{
    transform: rotate(90deg);
    transform-origin: center;
    transform-box: fill-box;
}
@media screen and (min-width: 601px), screen and (orientation: landscape){
    .object-map--search .dms-logo image{
        transform: rotate(0);
    }
}

@media (max-width:600px){
    .dms-input{height:56px;font-size:16px;padding:0 48px;}
    .dms-field__icon{left:16px;}
}