/*
Theme Name: Divi Child
Theme URI:  https://www.wpserveur.net
Author:     SmartHerz
Author URI: https://www.wpserveur.net
Template:   Divi
Version:    1.3.5
License:    GNU General Public License v2 or later
*/

/* ============================================
   SMART HERZ — Self-hosted Fonts
   ============================================ */

/* Playfair Display */
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/playfair-display/playfair-display-v40-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/playfair-display/playfair-display-v40-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/playfair-display/playfair-display-v40-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 - Regular (latin) */
@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans-3/source-sans-3-v19-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 - Regular (latin-ext) */
@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans-3/source-sans-3-v19-latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 - 600 (latin) */
@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans-3/source-sans-3-v19-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 - 600 (latin-ext) */
@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans-3/source-sans-3-v19-latin-ext-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Merriweather - Regular (latin) */
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather/merriweather-v33-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Merriweather - Regular (latin-ext) */
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather/merriweather-v33-latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Merriweather - 600 (latin) */
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather/merriweather-v33-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Merriweather - 600 (latin-ext) */
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather/merriweather-v33-latin-ext-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Merriweather - 700 (latin) */
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather/merriweather-v33-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Merriweather - 700 (latin-ext) */
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather/merriweather-v33-latin-ext-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Merriweather - 900 (latin) */
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather/merriweather-v33-latin-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Merriweather - 900 (latin-ext) */
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather/merriweather-v33-latin-ext-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

h1, h2, h3, h5, h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_text h5, .et_pb_text h6 {
    font-family: 'Merriweather', serif !important;
}

h4,
.et_pb_text h4 {
    font-family: 'Merriweather', serif !important;
}

.sh-info-text h4 {
    font-family: 'Source Sans 3', sans-serif !important;
}

/* ============================================================
   SMART HERZ — Tematske rute | CSS
   ============================================================ */

.smh-ruta-panel {
    font-family: 'Source Sans 3', sans-serif;
    color: #1a1a1a;
}

.smh-loading { color: #888; font-size: 15px; padding: 24px 0; }

/* === HEADER === */
.smh-ruta-header { margin-bottom: 28px; }

.smh-ruta-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.smh-badge-gastro    { background: #fdf1ec; color: #b85c38; }
.smh-badge-kulturna  { background: #f3eafd; color: #9F5FE9; }
.smh-badge-planinska { background: #eaf3ed; color: #3d6b4a; }
.smh-badge-porodicna { background: #faf4e6; color: #9a7b3a; }
.smh-badge-priroda   { background: #e8f4fb; color: #1a6ea8; }

.smh-ruta-naziv {
    font-family: 'Merriweather', serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #1a1a1a !important;
    margin: 0 0 12px !important;
}
.smh-ruta-opis { font-size: 15px; line-height: 1.7; color: #555; margin: 0 0 16px; }
.smh-ruta-meta { display: flex; gap: 16px; font-size: 13px; color: #888; }
.smh-ruta-meta span::before { content: '— '; color: #9F5FE9; font-weight: 700; }

/* === FILTER BAR === */
.smh-filter-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

.smh-filter-opstine-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.smh-filter-info-label {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
}

.smh-opstina-tag {
    font-size: 16px;
    font-weight: 600;
    color: #9F5FE9;
    background: #f3eafd;
    border: 1px solid rgba(159, 95, 233, 0.2);
    border-radius: 20px;
    padding: 5px 14px;
}

/* Select dropdown */
.smh-filter-select-wrap {
    position: relative;
    flex-shrink: 0;
}

.smh-filter-select {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    padding: 10px 44px 10px 18px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.2s ease;
    min-width: 200px;
}
.smh-filter-select:hover,
.smh-filter-select:focus { border-color: #9F5FE9; }

.smh-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #9F5FE9;
    pointer-events: none;
    line-height: 1;
}

@media (max-width: 600px) {
    .smh-filter-bar { flex-direction: column; align-items: flex-start; }
    .smh-filter-select { min-width: 100%; }
    .smh-filter-select-wrap { width: 100%; }
}

/* === POI LISTA === */
.smh-poi-lista { display: flex; flex-direction: column; gap: 12px; }

/* === POI KARTICA — osnova === */
.smh-poi-kartica {
    display: flex;
    align-items: stretch;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.smh-poi-kartica:hover {
    border-color: #9F5FE9;
    box-shadow: 0 4px 16px rgba(159, 95, 233, 0.1);
}
.smh-poi-kartica.smh-hidden,
.smh-ruta-panel .smh-poi-kartica.smh-hidden       { display: none !important; }
.smh-poi-kartica.smh-paged-hidden,
.smh-ruta-panel .smh-poi-kartica.smh-paged-hidden { display: none !important; }

/* Kartica BEZ slike — stari layout s paddingom i brojem */
.smh-poi-kartica.no-thumb {
    align-items: flex-start;
    padding: 16px;
    gap: 14px;
}

/* === "VIDI NA MAPI" DUGME === */
.smh-vidi-na-mapi {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #9F5FE9;
    background: #f3eafd;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    align-self: flex-start;
    flex-shrink: 0;
}
.smh-vidi-na-mapi:hover { background: #e8d8fb; }

/* === PAGINACIJA === */
.smh-paginacija {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #ebebeb;
}
.smh-paginacija.smh-hidden { display: none; }
.smh-poi-lista { scroll-margin-top: 110px; }

.smh-page-info {
    text-align: center;
    font-size: 14px;
    color: #7a7284;
}

.smh-page-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.smh-page-brojevi {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.smh-page-btn {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    font-weight: 600;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1.5px solid #ddd;
    background: #fff;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.smh-page-btn:hover:not(:disabled) { border-color: #9F5FE9; color: #9F5FE9; }
.smh-page-btn.active   { background: #9F5FE9; border-color: #9F5FE9; color: #fff; cursor: default; }
.smh-page-btn:disabled { opacity: 0.35; cursor: default; }

.smh-page-prev,
.smh-page-next {
    padding: 0 14px;
    color: #7c52c8;
    border-color: #d9c2f2;
    background: #f8f5ff;
    flex-shrink: 0;
}

.smh-page-gap {
    min-width: 20px;
    text-align: center;
    color: #999;
    letter-spacing: 1px;
}

.smh-page-mobilno {
    display: none;
    font-size: 15px;
    font-weight: 600;
    color: #555;
}

.smh-page-arrow {
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 600px) {
    .smh-page-brojevi,
    .smh-page-txt { display: none; }
    .smh-page-mobilno { display: block; }
    .smh-page-nav { justify-content: space-between; }
    .smh-page-prev,
    .smh-page-next { min-width: 48px; }
}

/* === MODAL "VIDI NA MAPI" === */
.smh-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.smh-modal-overlay.active { opacity: 1; pointer-events: all; }

.smh-modal {
    background: #fff;
    border-radius: 14px;
    width: 90%;
    max-width: 960px;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.25s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.smh-modal-overlay.active .smh-modal { transform: translateY(0); }

.smh-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #ebebeb;
}
.smh-modal-naziv { font-family: 'Merriweather', serif; font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.smh-modal-meta  { font-size: 13px; color: #888; }
.smh-modal-close { background: none; border: none; cursor: pointer; color: #888; padding: 4px; line-height: 1; }
.smh-modal-close:hover { color: #1a1a1a; }
.smh-modal-map   { height: 460px; max-height: 55vh; background: #f0ede8; }


/* === TIP KARTICE — pozadina po tipu === */
.smh-poi-kartica.smh-tip-atrakcija {
    background: #f8f5ff;
    border-color: #e2d8fb;
}

.smh-poi-kartica.smh-tip-biznis {
    background: #fdf6ee;
    border-color: #f2dfc0;
}

/* === TIP-META RED (badge + meta na istom redu) === */
.smh-poi-tip-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0 8px;
    flex-wrap: wrap;
}

/* === TIP BADGE === */
.smh-poi-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 3px 9px 3px 7px;
    border-radius: 6px;
    flex-shrink: 0;
}
.smh-poi-badge svg { flex-shrink: 0; }

.smh-badge-tip-atrakcija {
    background: #ede8fb;
    color: #7c52c8;
}
.smh-badge-tip-atrakcija svg { stroke: #7c52c8; }

.smh-badge-tip-biznis {
    background: #fde8cc;
    color: #b86b1a;
}
.smh-badge-tip-biznis svg { stroke: #b86b1a; }

/* === MOBILNO === */
@media (max-width: 768px) {
    .smh-ruta-naziv { font-size: 22px !important; }

    /* Dugme puna širina na dnu (kartice bez slike) */
    .smh-vidi-na-mapi {
        display: flex;
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
        padding: 12px 16px;
        font-size: 15px;
        align-self: stretch;
        border-radius: 8px;
    }

    /* Kartica BEZ slike — ostaje stari block layout */
    .smh-poi-kartica.no-thumb .smh-poi-sadrzaj {
        display: block;
    }
    .smh-poi-kartica.no-thumb .smh-poi-info {
        display: block;
        width: 100%;
        margin-bottom: 12px;
    }
    .smh-poi-kartica.no-thumb .smh-vidi-na-mapi {
        clear: both;
    }

    .smh-modal { width: 95%; }
    .smh-modal-map { height: 260px; }
}


/* ============================================================
   SMART HERZ — Route filter i integrisane fotografije
   ============================================================ */

/* FILTER */

.smh-ruta-panel .smh-filter-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

.smh-ruta-panel .smh-filter-opstine-info {
    display: none;
}

.smh-ruta-panel .smh-filter-select-wrap {
    position: relative;
    width: 230px;
    max-width: 100%;
}

.smh-ruta-panel .smh-filter-select {
    display: block;
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 44px 0 16px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 46px;
    color: #2d2535;
    background: #ffffff;
    border: 1px solid #ded7e7;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.smh-ruta-panel .smh-filter-select:hover {
    border-color: #b88ae9;
}

.smh-ruta-panel .smh-filter-select:focus {
    border-color: #9f5fe9;
    box-shadow: 0 0 0 3px rgba(159, 95, 233, 0.12);
}

.smh-ruta-panel .smh-select-arrow {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #9f5fe9;
    border-bottom: 2px solid #9f5fe9;
    font-size: 0;
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
}


/* ============================================================
   RESPONSIVE KARTICE SA FOTOGRAFIJOM
   ============================================================ */

/*
 * Breakpointi se računaju prema širini desnog panela,
 * a ne prema širini cijelog ekrana.
 */
.smh-ruta-panel {
    container-type: inline-size;
    container-name: smh-ruta;
}


/* KARTICA SA FOTOGRAFIJOM — slika preko cijele širine na vrhu,
   sadržaj ispod. Isti izgled na svim širinama desne kolone. */

.smh-ruta-panel .smh-poi-kartica.has-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
}

.smh-ruta-panel
.smh-poi-kartica.has-thumb
.smh-poi-slika-wrap {
    position: relative;
    width: 100%;
    height: 210px;
    overflow: hidden;
}

.smh-ruta-panel
.smh-poi-kartica.has-thumb
.smh-poi-thumb {
    position: absolute;
    inset: 0;

    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center;
}


.smh-ruta-panel
.smh-poi-kartica.has-thumb
.smh-poi-slika-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    height: 36px;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 100%
    );
}

.smh-ruta-panel
.smh-poi-kartica.has-thumb.smh-tip-atrakcija
.smh-poi-slika-wrap::after {
    background: linear-gradient(
        180deg,
        rgba(248, 245, 255, 0) 0%,
        #f8f5ff 100%
    );
}

.smh-ruta-panel
.smh-poi-kartica.has-thumb.smh-tip-biznis
.smh-poi-slika-wrap::after {
    background: linear-gradient(
        180deg,
        rgba(253, 246, 238, 0) 0%,
        #fdf6ee 100%
    );
}


.smh-ruta-panel
.smh-poi-kartica.has-thumb
.smh-poi-sadrzaj {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    padding: 16px 20px 20px;
    box-sizing: border-box;
}

.smh-ruta-panel .smh-poi-info {
    width: 100%;
    min-width: 0;
}

.smh-ruta-panel .smh-poi-naziv {
    display: block;
    font-size: 18px;
    line-height: 1.35;
}

.smh-ruta-panel .smh-poi-tip-meta {
    margin: 7px 0 0;
}

.smh-ruta-panel .smh-poi-opis {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #56505c;
}

.smh-ruta-panel .smh-poi-opis .smh-poi-opis-vise {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
    color: #9f5fe9;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.smh-ruta-panel .smh-poi-opis .smh-poi-opis-vise:hover,
.smh-ruta-panel .smh-poi-opis .smh-poi-opis-vise:focus {
    color: #9f5fe9;
    text-decoration: underline;
}

.smh-ruta-panel
.smh-poi-kartica.has-thumb
.smh-vidi-na-mapi {
    position: relative;
    z-index: 3;

    width: 100%;
    margin: 0;
    align-self: stretch;
    justify-content: center;
}


/* KARTICA BEZ FOTOGRAFIJE */

.smh-ruta-panel
.smh-poi-kartica.no-thumb
.smh-poi-sadrzaj {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/* ============================================================
   POI KARTICE v2 — desktop (min-width: 981px)
   Bez expand/collapse: slika uvijek u punoj visini (210px),
   "Vidi na mapi" (lijevo) i "Učitaj više" (desno) na slici.
   Mobilni prikaz ostaje nepromijenjen.
   ============================================================ */

.smh-ruta-panel .smh-poi-kartica.has-thumb .smh-mapa-slika,
.smh-ruta-panel .smh-poi-kartica.has-thumb .smh-ucitaj-vise {
    display: none;
}

@media (min-width: 981px) {

    /* donje dugme "Vidi na mapi" zamijenjeno dugmetom na slici */
    .smh-ruta-panel .smh-poi-kartica.has-thumb .smh-poi-sadrzaj > .smh-vidi-na-mapi {
        display: none;
    }

    .smh-ruta-panel .smh-poi-kartica.has-thumb .smh-mapa-slika,
    .smh-ruta-panel .smh-poi-kartica.has-thumb .smh-ucitaj-vise {
        position: absolute;
        top: 14px;
        z-index: 3;

        display: inline-flex;
        align-items: center;
        gap: 7px;

        margin: 0;
        padding: 8px 14px;

        border: 1px solid rgba(255, 255, 255, 0.75);
        border-radius: 999px;

        font-family: 'Source Sans 3', sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        color: #7c52c8;
        background: rgba(255, 255, 255, 0.94);

        box-shadow: 0 3px 12px rgba(30, 20, 40, 0.16);
        backdrop-filter: blur(5px);
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .smh-ruta-panel .smh-poi-kartica.has-thumb .smh-mapa-slika  { left: 14px; }
    .smh-ruta-panel .smh-poi-kartica.has-thumb .smh-ucitaj-vise { right: 14px; }

    .smh-ruta-panel .smh-poi-kartica.has-thumb .smh-mapa-slika:hover,
    .smh-ruta-panel .smh-poi-kartica.has-thumb .smh-ucitaj-vise:hover {
        background: #9f5fe9;
        color: #ffffff;
    }

    /* "Vidi više..." u tekstu se zamjenjuje dugmetom "Učitaj više" */
    .smh-ruta-panel .smh-poi-opis .smh-poi-opis-vise {
        display: none !important;
    }
}

/* ============================================================
   POPUP "UČITAJ VIŠE"
   ============================================================ */

.smh-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998; /* ispod map modala (99999) */

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px;

    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.smh-popup-overlay.active { opacity: 1; pointer-events: all; }

.smh-popup {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;

    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform 0.25s ease;
}
.smh-popup-overlay.active .smh-popup { transform: translateY(0); }

.smh-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    color: #555;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 3px 12px rgba(30, 20, 40, 0.16);
    cursor: pointer;
}
.smh-popup-close:hover { color: #1a1a1a; }

.smh-popup-slika {
    width: 100%;
    height: 340px;
    overflow: hidden;
    background: #f0ede8;
}
.smh-popup-slika img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.smh-popup-telo { padding: 22px 26px 26px; }

.smh-popup-naziv {
    margin: 0 0 6px;
    font-family: 'Merriweather', serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}
.smh-popup-meta {
    display: block;
    margin-bottom: 14px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    color: #888;
}
.smh-popup-opis {
    margin: 0 0 20px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #56505c;
    white-space: pre-line;
}

.smh-popup-mapa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;

    border: none;
    border-radius: 8px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #9F5FE9;
    background: #f3eafd;
    cursor: pointer;
    transition: background 0.2s ease;
}
.smh-popup-mapa:hover { background: #e8d8fb; }

@media (max-width: 768px) {
    .smh-popup-slika { height: 220px; }
    .smh-popup-telo  { padding: 18px 18px 22px; }
}


/* ============================================================
   MAPA MODAL — opis, koordinate, kopiranje
   ============================================================ */

.smh-modal-header > div:first-child { flex: 1; min-width: 0; padding-right: 12px; }

.smh-modal-opis {
    margin: 10px 0 0;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #56505c;
}

.smh-modal-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid #ebebeb;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
}

.smh-modal-vodi { font-weight: 600; color: #1a1a1a; }

.smh-modal-koord {
    font-weight: 600;
    color: #9F5FE9;
    text-decoration: none;
    word-break: break-all;
}
.smh-modal-koord:hover { text-decoration: underline; }

.smh-modal-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    color: #9F5FE9;
    background: #f3eafd;
    cursor: pointer;
    transition: background 0.2s ease;
}
.smh-modal-copy:hover { background: #e8d8fb; }
.smh-modal-copy.copied { color: #3d6b4a; background: #eaf3ed; }

.smh-modal-copy-msg { font-size: 13px; color: #3d6b4a; }

@media (max-width: 768px) {
    .smh-modal-footer { padding: 12px 18px; }
}


/* ============================================================
   POPUP NA PINU — naziv + klikabilne koordinate
   ============================================================ */

.smh-pin-popup {
    font-family: 'Source Sans 3', sans-serif;
    line-height: 1.35;
    white-space: nowrap;
}

.smh-pin-popup .smh-pin-naziv {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.leaflet-container .smh-pin-popup a.smh-pin-koord {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #9F5FE9;
    text-decoration: none;
}
.leaflet-container .smh-pin-popup a.smh-pin-koord:hover { text-decoration: underline; }


/* "Vidi više..." (mobilni) — veća površina dodira bez promjene rasporeda teksta */
.smh-ruta-panel .smh-poi-opis .smh-poi-opis-vise {
    padding: 10px 6px;
    margin: 0 -6px;
}