/*
 * "Vijesti oko mene" (Views/NewsMap/Index.cshtml) and the small map of an article: the search and the stories on the
 * left, the map big on the right, full height under the header; on a phone the map first, then the rest. Square and
 * flat like the rest of the site; each kind of news its pin in the site's section colours.
 */

/* Google shrinks the boxes around an ad to the ad's height (an inline height: auto !important on each) unless they
   scroll by themselves: the map's box is one that could (it never does, the panel scrolls inside it), so an ad in the
   list never stretches the map down the page (the panel then had nothing to scroll and the stories went off screen). */
.news-map {
    --news-map-panel: 25rem;
    display: grid;
    grid-template-columns: var(--news-map-panel) minmax(0, 1fr);
    height: calc(100dvh - 7.25rem);
    min-height: 34rem;
    overflow: hidden auto;
    scrollbar-width: none;
    border-top: 3px solid var(--news-ink, #111827);
    background: #ffffff;
}

.news-map::-webkit-scrollbar {
    display: none;
}

/* ---------- The panel ---------- */

/* The whole panel scrolls (the kinds take room): the search and the stories with it, the map stays; at its end the
   wheel stops there (the page under it never scrolls on). */
.news-map-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--news-rule, #dfe3e8);
    background: #ffffff;
}

.news-map-head {
    padding: 1rem 1.1rem 0.6rem;
}

.news-map-head .eyebrow {
    margin: 0 0 0.2rem;
    color: var(--news-accent, #b42318);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.news-map-head h1 {
    margin: 0;
    font-family: var(--news-font-head, inherit);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.05;
}

.news-map-intro {
    margin: 0.45rem 0 0;
    color: #475467;
    font-size: 0.88rem;
    line-height: 1.4;
}

.news-map-controls {
    display: grid;
    gap: 0.55rem;
    padding: 0.4rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--news-rule, #dfe3e8);
}

.news-map-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0 0.7rem;
    border: 2px solid var(--news-ink, #111827);
    background: #ffffff;
}

.news-map-search i {
    color: #667085;
}

.news-map-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
}

.news-map-segment {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--news-rule-strong, #c9d0d8);
}

.news-map-segment[hidden] {
    display: none;
}

.news-map-option {
    flex: 1 1 auto;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-right: 1px solid var(--news-rule, #dfe3e8);
    background: #ffffff;
    color: var(--news-ink, #111827);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.news-map-option:last-child {
    border-right: 0;
}

.news-map-option:hover,
.news-map-option:focus-visible {
    background: #f2f4f7;
    color: var(--news-ink, #111827);
}

.news-map-option.is-active {
    background: var(--news-ink, #111827);
    color: #ffffff;
}

/* "Raspon": two days and a button under the windows. */
.news-map-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: end;
}

.news-map-range[hidden] {
    display: none;
}

.news-map-range label {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475467;
}

.news-map-range input {
    width: 100%;
    min-width: 0;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--news-rule-strong, #c9d0d8);
    border-radius: 0;
    background: #ffffff;
    color: var(--news-ink, #111827);
    font: inherit;
    font-size: 0.84rem;
    letter-spacing: 0;
    text-transform: none;
}

.news-map-range-go {
    padding: 0.42rem 0.8rem;
    border: 2px solid var(--news-ink, #111827);
    background: var(--news-ink, #111827);
    color: #ffffff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
}

.news-map-range-go:hover,
.news-map-range-go:focus-visible {
    background: var(--news-accent, #b42318);
    border-color: var(--news-accent, #b42318);
}

.news-map-option i {
    margin-right: 0.2rem;
}

.news-map-near {
    display: grid;
    gap: 0.4rem;
}

.news-map-near-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border: 2px solid var(--news-accent, #b42318);
    background: #ffffff;
    color: var(--news-accent, #b42318);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 900;
    cursor: pointer;
}

.news-map-near-button:hover,
.news-map-near-button:focus-visible,
.news-map-near-button.is-active {
    background: var(--news-accent, #b42318);
    color: #ffffff;
}


.news-map-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid var(--news-rule, #dfe3e8);
    color: #475467;
    font-size: 0.8rem;
    font-weight: 700;
}

.news-map-status p {
    min-width: 0;
    margin: 0;
}

/* "Poništi filtere": while anything is filtered, at the count line's end. */
.news-map-reset {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--news-ink, #111827);
    background: #ffffff;
    color: var(--news-ink, #111827);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

.news-map-reset[hidden] {
    display: none;
}

.news-map-reset i {
    color: var(--news-accent, #b42318);
}

.news-map-reset:hover,
.news-map-reset:focus-visible {
    background: #f6f7f9;
}

/* ---------- The stories ---------- */

.news-map-list {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-map-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--news-rule, #dfe3e8);
    cursor: pointer;
}

.news-map-item:hover,
.news-map-item.is-active {
    background: #f8f9fb;
    box-shadow: inset 3px 0 0 var(--news-accent, #b42318);
}

.news-map-item-pin {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    background: var(--kind, #667085);
    color: #ffffff;
    font-size: 0.9rem;
}

.news-map-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.55rem;
    margin: 0 0 0.2rem;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
}

.news-map-item-kind {
    color: var(--kind, #667085);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.news-map-item-title {
    display: block;
    color: var(--news-ink, #111827);
    font-family: var(--news-font-head, inherit);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
}

.news-map-item-title:hover,
.news-map-item-title:focus-visible {
    color: var(--news-accent, #b42318);
    text-decoration: underline;
}

/* Adios's summary of the story, two lines at most (the rest on the article's page). */
.news-map-item-summary {
    display: -webkit-box;
    margin: 0.2rem 0 0;
    overflow: hidden;
    color: #475467;
    font-size: 0.8rem;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.news-map-item-place {
    margin: 0.25rem 0 0;
    color: #475467;
    font-size: 0.78rem;
    font-weight: 600;
}

.news-map-item-place i {
    color: var(--news-accent, #b42318);
}

.news-map-empty {
    padding: 1.2rem 1.1rem;
    color: #667085;
    font-size: 0.88rem;
}

.news-map-item-body {
    position: relative;
    min-width: 0;
}

.news-map-item-place {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.65rem;
    margin-top: 0.4rem;
    padding-right: 5.5rem;
}

.news-map-item-portals {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.news-map-item .news-map-mark {
    width: 14px;
    height: 14px;
    margin-right: 0;
}

/* "Pogledaj": the article itself (a click anywhere else on the story shows it on the map). */
.news-map-item-open {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.5rem;
    border: 1.5px solid var(--news-ink, #111827);
    background: #ffffff;
    color: var(--news-ink, #111827);
    font-size: 0.72rem;
    font-weight: 900;
    text-decoration: none;
}

.news-map-item-open:hover,
.news-map-item-open:focus-visible {
    background: var(--news-ink, #111827);
    color: #ffffff;
}

/* The panel's ads (at the top and between the list's parts): gone where ads are off. */
.news-map-ad {
    padding: 0.6rem 1.1rem;
    border-bottom: 1px solid var(--news-rule, #dfe3e8);
}

.news-map-ad:not(:has(.ad-slot)) {
    display: none;
}

/* Partner deals between the list's parts: gone without deals. */
.news-map-deals {
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--news-rule, #dfe3e8);
    background: #fbfbfc;
}

.news-map-deals:not(:has(.affiliate-panel)) {
    display: none;
}

.news-map-deals .affiliate-panel {
    margin: 0;
}

/* The map's pages for search: each kind's week, as tiles (the kind's colour and its pin's icon). */
.news-map-landings {
    padding: 0.7rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--news-rule, #dfe3e8);
}

/* "Još 8 karata po vrsti": the rest of the tiles, opened in place. */
.news-map-landing-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
    padding: 0.35rem 0.1rem;
    color: var(--news-ink, #111827);
    font-size: 0.76rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.news-map-landing-more > summary::-webkit-details-marker {
    display: none;
}

.news-map-landing-more > summary i {
    color: var(--news-accent, #b42318);
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.news-map-landing-more[open] > summary i {
    transform: rotate(180deg);
}

.news-map-landing-more > summary:hover span,
.news-map-landing-more > summary:focus-visible span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.news-map-landing-more > .news-map-landing-grid {
    margin-top: 0.3rem;
}

.news-map-landings p {
    margin: 0 0 0.5rem;
    color: #667085;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.news-map-landing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.news-map-landing {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.4rem 0.5rem 0.4rem 0.4rem;
    border: 1px solid var(--news-rule, #dfe3e8);
    border-left: 3px solid var(--kind, #667085);
    background: #ffffff;
    color: var(--news-ink, #111827);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.news-map-landing:hover,
.news-map-landing:focus-visible,
.news-map-landing.is-current {
    border-color: var(--kind, #667085);
    background: #f8f9fb;
    color: var(--news-ink, #111827);
}

.news-map-landing-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--kind, #667085);
    color: #ffffff;
    font-size: 0.85rem;
}

.news-map-landing-copy {
    display: grid;
    min-width: 0;
    line-height: 1.2;
}

.news-map-landing-copy strong {
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-map-landing-copy small {
    color: #667085;
    font-size: 0.66rem;
    font-weight: 700;
}

.news-map-days a {
    color: var(--news-ink, #111827);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--news-rule-strong, #c9d0d8);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.news-map-days a:hover {
    color: var(--news-accent, #b42318);
}

.news-map-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.55rem;
    font-size: 0.82rem;
}

/* The drawer's handle: a phone's only. */
.news-map-handle {
    display: none;
}

/* ---------- The map ---------- */

.news-map-canvas {
    position: relative;
    min-width: 0;
    min-height: 0;
    background: #eef1f4;
}

.news-map-canvas .leaflet-container,
.news-map-canvas.leaflet-container {
    font: inherit;
}

.news-map-noscript {
    padding: 2rem;
    color: #475467;
}

.leaflet-control-zoom a,
.leaflet-bar a {
    border-radius: 0 !important;
    color: var(--news-ink, #111827);
    font-weight: 800;
}

.leaflet-bar {
    border: 2px solid var(--news-ink, #111827) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.leaflet-control-attribution {
    font-size: 0.66rem;
}

/* A pin: a square in the kind's colour with a white icon on a short square stem, framed white and ink so it reads
   on any map; a story of three or more portals bigger; the number of portals in a white corner; a rough place (a
   county, a country) a little faded. */
.news-pin-wrap {
    background: none;
    border: 0;
}

.news-pin {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: var(--kind, #667085);
    color: #ffffff;
    font-size: 13px;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(17, 24, 39, 0.55), 0 5px 12px rgba(16, 24, 40, 0.32);
    /* It grows from its stem's tip, so the point it marks never moves. */
    transform-origin: 50% calc(100% + 6px);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.news-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    z-index: -1;
    width: 10px;
    height: 10px;
    background: var(--kind, #667085);
    box-shadow: 2px 2px 0 0 #ffffff, 3px 3px 0 0 rgba(17, 24, 39, 0.45);
    transform: translateX(-50%) rotate(45deg);
}

.news-pin i {
    position: relative;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
}

/* Under the mouse it only grows (it never jumps off its point). */
.leaflet-marker-icon:hover .news-pin,
.leaflet-marker-icon:focus-visible .news-pin {
    transform: scale(1.15);
}

.news-pin.is-major {
    width: 34px;
    height: 34px;
    font-size: 16px;
}

.news-pin.is-rough {
    opacity: 0.86;
}

/* The open story's pin: bigger, framed in ink (on its point, like the mouse's). */
.news-pin.is-picked {
    opacity: 1;
    transform: scale(1.18);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--news-ink, #111827), 0 9px 18px rgba(16, 24, 40, 0.38);
}

.leaflet-marker-icon:hover .news-pin.is-picked {
    transform: scale(1.22);
}

.news-pin-count {
    position: absolute;
    top: -8px;
    right: -9px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border: 1.5px solid var(--news-ink, #111827);
    background: #ffffff;
    color: var(--news-ink, #111827);
    font-family: var(--news-font-head, inherit);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

/* Several pins close together: a white card with how many, under a bar of their kinds' colours (the most of each),
   with Adios's flat offset shadow. */
.news-cluster-wrap {
    background: none;
    border: 0;
}

.news-cluster {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding-top: 3px;
    border: 2px solid var(--news-ink, #111827);
    background: #ffffff;
    color: var(--news-ink, #111827);
    font-family: var(--news-font-head, inherit);
    font-size: 15px;
    font-weight: 900;
    box-shadow: 3px 3px 0 0 rgba(17, 24, 39, 0.28);
    transition: transform 0.12s ease;
}

.news-cluster::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    height: 6px;
    background: var(--bar, var(--news-accent, #b42318));
}

.leaflet-marker-icon:hover .news-cluster {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 rgba(17, 24, 39, 0.32);
}

.news-cluster.is-big {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

.news-cluster.is-huge {
    width: 52px;
    height: 52px;
    font-size: 18px;
}

/* A pin's card. It scrolls as one within the map's height (a finger over the reports moves it too: Leaflet's map takes
   every touch of its own), "Pogledaj vijest" always in sight at its foot. */
.news-map-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 0 !important;
    box-shadow: 0 6px 22px rgba(16, 24, 40, 0.25);
}

.news-map-popup .leaflet-popup-content {
    max-height: max(16rem, calc(100dvh - 17.5rem));
    margin: 0;
    min-width: 14rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    font: inherit;
}

.news-popup {
    padding: 0.7rem 0.85rem 0;
    border-top: 4px solid var(--kind, var(--news-ink, #111827));
}

.news-popup-go {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0.15rem -0.85rem 0;
    padding: 0.5rem 0.85rem 0.75rem;
    background: #ffffff;
}

.news-popup small {
    color: #667085;
    font-weight: 600;
}

.news-map-popup .leaflet-popup-tip {
    box-shadow: none;
}

.news-popup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    margin: 0 0 0.3rem;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
}

.news-popup-kind {
    color: var(--kind, #667085);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.news-popup-title {
    display: block;
    margin: 0 0 0.35rem;
    color: var(--news-ink, #111827) !important;
    font-family: var(--news-font-head, inherit);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
}

.news-popup-title:hover {
    color: var(--news-accent, #b42318) !important;
    text-decoration: underline;
}

/* The title, and beside it the story's picture where the site shows one. */
.news-popup-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    margin: 0 0 0.35rem;
}

.news-popup.has-picture .news-popup-lead {
    grid-template-columns: minmax(0, 1fr) 4.5rem;
}

.news-popup-lead .news-popup-title {
    margin: 0;
}

.news-popup-picture {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    background: #eef1f4;
}

.news-popup-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Adios's summary, three lines at most: the rest is on the article's page. */
.news-popup-summary {
    display: -webkit-box;
    margin: 0 0 0.4rem;
    overflow: hidden;
    color: #344054;
    font-size: 0.82rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.news-popup-place {
    margin: 0 0 0.5rem;
    color: #475467;
    font-size: 0.76rem;
    font-weight: 700;
}

.news-popup-place i {
    color: var(--news-accent, #b42318);
}

.news-popup-open {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    background: var(--news-accent, #b42318);
    color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.news-popup-open:hover {
    background: var(--news-ink, #111827);
}


/* A portal's logo beside its name. */
.news-map-mark {
    flex: none;
    width: 16px;
    height: 16px;
    margin-right: 0.3rem;
    object-fit: contain;
    background: #ffffff;
    vertical-align: -3px;
}

.news-popup-portal {
    display: inline-flex;
    align-items: center;
}

/* Every portal's report of the story: its logo, name and time, its own title, each a link. */
.news-popup-reports {
    margin: 0.45rem 0 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--news-rule, #dfe3e8);
}

.news-popup-reports p {
    margin: 0 0 0.3rem;
    color: #667085;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.news-popup-reports ol {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-popup-reports li {
    min-width: 0;
}

.news-popup-reports li[hidden] {
    display: none;
}

/* A folded list of the reports (a phone's card with an ad): one line that opens it. */
.news-popup-reports-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 0.1rem;
    border: 0;
    background: transparent;
    color: #475467;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.news-popup-reports-open i {
    color: var(--kind, #667085);
}

.news-popup-reports.is-folded {
    margin-bottom: 0.35rem;
    padding-top: 0.15rem;
}

.news-popup-more[hidden] {
    display: none;
}

/* "+ još 3": the rest of the reports. */
.news-popup-more {
    margin-top: 0.3rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid var(--news-rule-strong, #c9d0d8);
    background: #ffffff;
    color: var(--news-ink, #111827);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.news-popup-more:hover,
.news-popup-more:focus-visible {
    border-color: var(--news-ink, #111827);
}

.news-popup-reports a {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
    padding: 0.3rem 0.45rem;
    border-left: 3px solid var(--news-rule, #dfe3e8);
    color: inherit !important;
    text-decoration: none;
}

.news-popup-reports a:hover,
.news-popup-reports a:focus-visible {
    border-left-color: var(--kind, #667085);
    background: #f8f9fb;
}

.news-popup-report-portal {
    display: flex;
    align-items: center;
    color: #475467;
    font-size: 0.72rem;
    font-weight: 800;
}

.news-popup-report-portal time {
    margin-left: auto;
    padding-left: 0.5rem;
    color: #98a2b3;
}

/* A report's own title on one line (the whole of it on hover). */
.news-popup-report-title {
    min-width: 0;
    overflow: hidden;
    color: var(--news-ink, #111827);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Now and then an ad under the story, the card's full width, above "Pogledaj vijest". */
.news-popup-ad {
    margin: 0.65rem -0.85rem 0;
    padding: 0.35rem 0 0.5rem;
    border-top: 1px solid var(--news-rule, #dfe3e8);
    background: #f8f9fb;
    text-align: center;
}

.news-popup-ad .ad-slot {
    margin: 0 auto;
}

/* A phone's card (news-map.js): a computer shows the card over the pin instead. */
.news-map-card {
    display: none;
}

/* "Oko mene": where the reader is, a blue square framed white and ink, with a soft pulse around it. */
.news-me {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 3px solid #ffffff;
    background: #1570ef;
    box-shadow: 0 0 0 1.5px var(--news-ink, #111827), 0 3px 8px rgba(16, 24, 40, 0.35);
}

.news-me::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2px solid rgba(21, 112, 239, 0.55);
    animation: news-me-pulse 2.2s ease-out infinite;
    pointer-events: none;
}

@keyframes news-me-pulse {
    from {
        opacity: 1;
        transform: scale(0.55);
    }

    to {
        opacity: 0;
        transform: scale(1.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-me::after {
        opacity: 0.5;
        animation: none;
    }
}

/* ---------- Phones and narrow screens: the map full screen, the panel a drawer over it ---------- */

@media (max-width: 991.98px) {
    /* The screen under the header and the kinds' bar (7rem together), the drawer's bottom on the screen's. */
    .news-map {
        position: relative;
        display: block;
        height: calc(100dvh - 7rem);
        min-height: 26rem;
        overflow: hidden auto;
    }

    /* The map's own layers (its pins, zoom and credits) stay under the drawer and the card. */
    .news-map-canvas {
        position: absolute;
        inset: 0;
        isolation: isolate;
    }

    /* The drawer: a peek of its title and the search, half the map, or nearly all of it (news-map.js: data-sheet, and
       dragging by the grip, the title or, at the list's top, the list). */
    .news-map-panel {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 800;
        height: 8.5rem;
        border-top: 3px solid var(--news-ink, #111827);
        border-right: 0;
        background: #ffffff;
        box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.18);
        overflow: hidden auto;
        scrollbar-width: none;
        overscroll-behavior: contain;
        transition: height 0.22s ease;
    }

    .news-map[data-sheet="half"] .news-map-panel {
        height: 55%;
        overflow-y: auto;
    }

    .news-map[data-sheet="full"] .news-map-panel {
        height: calc(100% - 3.25rem);
        overflow-y: auto;
    }

    .news-map.is-dragging .news-map-panel {
        transition: none;
    }

    /* In the drawer the search first; the page's heading after the stories. */
    .news-map-handle {
        position: sticky;
        top: 0;
        z-index: 2;
        display: grid;
        place-items: center;
        order: 0;
        width: 100%;
        height: 1.65rem;
        flex: none;
        padding: 0;
        border: 0;
        background: #ffffff;
        cursor: grab;
        touch-action: none;
    }

    .news-map-handle span {
        display: block;
        width: 3rem;
        height: 4px;
        background: #98a2b3;
    }

    /* The drawer's title under the grip: how many stories (and "Poništi filtere"); it stays on top while the list
       scrolls and pulls the drawer like the grip. */
    .news-map-status {
        position: sticky;
        top: 1.65rem;
        z-index: 2;
        order: 0;
        padding-top: 0.2rem;
        background: #ffffff;
        color: var(--news-ink, #111827);
        cursor: grab;
        touch-action: none;
    }

    .news-map-controls {
        order: 1;
        padding-top: 0.6rem;
    }

    /* Over a drawer pulled all the way up the map is a strip: its zoom goes. */
    .news-map[data-sheet="full"] .leaflet-control-zoom {
        visibility: hidden;
    }

    .news-map-ad {
        order: 3;
    }

    .news-map-list,
    .news-map-deals,
    .news-map-ad.is-inline {
        order: 4;
    }

    .news-map-head {
        order: 5;
        padding-top: 1rem;
        border-top: 1px solid var(--news-rule, #dfe3e8);
    }

    .news-map-landings {
        order: 6;
        padding-bottom: 1.2rem;
        border-top: 1px solid var(--news-rule, #dfe3e8);
        border-bottom: 0;
    }

    .news-map-head h1 {
        font-size: 1.45rem;
    }

    /* A peek is the grip, the title and the search, with nothing under them to scroll (the drawer is one that could, so
       Google never shrinks it to an ad's height); the rest comes with the drawer, and while it is pulled. */
    .news-map[data-sheet="peek"]:not(.is-dragging) .news-map-panel > :not(.news-map-handle, .news-map-status, .news-map-controls),
    .news-map[data-sheet="peek"] .news-map-controls > :not(.news-map-search) {
        display: none;
    }

    .news-map .leaflet-top.leaflet-left {
        max-width: 60%;
    }

    /* The story's card: over the map's bottom and the drawer, the kind's colour on top; pulled down by its bar, ✕,
       Back or a tap on the map closes it. */
    .news-map-card {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 900;
        display: block;
        max-height: min(74%, 36rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-top: 4px solid var(--kind, var(--news-ink, #111827));
        background: #ffffff;
        box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.28);
        outline: 0;
        transform: translateY(calc(100% + 16px));
        visibility: hidden;
        transition: transform 0.24s ease, visibility 0s linear 0.24s;
    }

    .news-map[data-card="open"] .news-map-card {
        transform: none;
        visibility: visible;
        transition: transform 0.24s ease;
    }

    .news-map-card.is-dragging {
        transition: none;
    }

    .news-map-card-bar {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.1rem;
        background: #ffffff;
        cursor: grab;
        touch-action: none;
    }

    .news-map-card-grip {
        display: block;
        width: 2.75rem;
        height: 4px;
        background: #c9d0d8;
    }

    .news-map-card-close {
        position: absolute;
        top: 0.1rem;
        right: 0.3rem;
        display: grid;
        place-items: center;
        width: 2.6rem;
        height: 2.6rem;
        border: 0;
        background: transparent;
        color: var(--news-ink, #111827);
        font-size: 1.2rem;
    }

    .news-map-card-close:focus-visible {
        outline: 2px solid var(--news-accent, #b42318);
        outline-offset: -2px;
    }

    .news-map-card .news-popup {
        padding: 0 1rem;
        border-top: 0;
    }

    .news-map-card .news-popup-go {
        margin: 0.25rem -1rem 0;
        padding: 0.6rem 1rem 0.85rem;
        box-shadow: 0 -6px 12px -10px rgba(16, 24, 40, 0.35);
    }

    .news-map-card .news-popup-meta {
        padding-right: 2.4rem;
    }

    .news-map-card .news-popup-title {
        font-size: 1.14rem;
        line-height: 1.22;
    }

    .news-map-card .news-popup.has-picture .news-popup-lead {
        grid-template-columns: minmax(0, 1fr) 5.5rem;
    }

    .news-map-card .news-popup-picture {
        width: 5.5rem;
        height: 5.5rem;
    }

    .news-map-card .news-popup-summary {
        font-size: 0.9rem;
    }

    .news-map-card .news-popup-reports ol {
        max-height: none;
    }

    .news-map-card .news-popup-reports a {
        padding: 0.45rem 0.55rem;
    }

    .news-map-card .news-popup-open {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    .news-map-card .news-popup-ad {
        margin: 0.85rem -1rem 0;
    }
}

/* ---------- The map's kinds in the bar under the header (the site's category bar's own look) ---------- */

.app-header .map-kind-strip {
    grid-template-columns: minmax(0, 1fr);
}

.app-header .map-kind-strip .app-theme-scroll {
    grid-column: 1;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .app-header .map-kind-strip {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .app-header .map-kind-strip .app-theme-scroll {
        grid-column: 2;
    }
}

.app-header .map-kind-strip .map-kind-link {
    gap: 0.4rem;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

/* The kind's icon in its colour takes the colour square's place (the pins have the same icons). */
.app-header .map-kind-strip .map-kind-link::before {
    display: none;
}

.app-header .map-kind-strip .map-kind-link i {
    color: var(--theme-color, var(--news-ink));
    font-size: 0.9rem;
}

.app-header .map-kind-strip .map-kind-link b {
    color: #667085;
    font-family: var(--news-font-body, inherit);
    font-size: 0.72rem;
    font-weight: 800;
}

.app-header .map-kind-strip .map-kind-link[hidden] {
    display: none !important;
}

.app-header .map-kind-strip .map-kind-link.is-on,
.app-header .map-kind-strip .map-kind-link.is-all.is-active {
    border-bottom-color: var(--theme-color, var(--news-accent)) !important;
    background: #f6f7f9;
}

.app-header .map-kind-strip .map-kind-link.is-all i {
    color: var(--news-accent);
}

.app-header .map-kind-strip .map-kind-link.is-off {
    opacity: 0.5;
}

.app-header .map-kind-strip .map-kind-link.is-off:hover,
.app-header .map-kind-strip .map-kind-link.is-off:focus-visible {
    opacity: 1;
}

/* Otpad's chip: a little garbage truck in the waste colour. */
.app-header .map-kind-strip .map-kind-truck {
    flex: none;
    width: 1.35rem;
    height: 1.05rem;
    color: var(--theme-color, #6f5a1a);
}

.app-header .map-kind-strip .map-kind-link.is-waste.is-on .map-kind-truck {
    animation: map-kind-truck-drive 0.6s ease-in-out 2;
}

@keyframes map-kind-truck-drive {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-header .map-kind-strip .map-kind-link.is-waste.is-on .map-kind-truck {
        animation: none;
    }
}