/*
 * Digital Petrinja – MV UI 1.0.1
 * Vizualni sloj za postojeći shortcode [digital_jls_karta].
 * Ne mijenja Leaflet, filtre, pretragu ni podatke lokacija.
 */

.djls-shell.dp-mv-ui {
    --dp-mv-grey: #ebebeb;
    --dp-mv-row: #f5f4f3;
    --dp-mv-line: #c3c1c1;
    --dp-mv-active: #ffc456;
    --dp-mv-text: #111111;
    font-family: Helvetica, Arial, sans-serif !important;
}

/* =========================================================
 * NASLOV + TRAŽILO
 * ========================================================= */
.djls-shell.dp-mv-ui .djls-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.djls-shell.dp-mv-ui .djls-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 30px 34px 26px !important;
    background: var(--dp-mv-grey) !important;
}

.djls-shell.dp-mv-ui .djls-brand-copy {
    order: 1 !important;
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.djls-shell.dp-mv-ui .djls-brand-title,
.djls-shell.dp-mv-ui .djls-brand-subtitle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--dp-mv-text) !important;
    overflow-wrap: normal !important;
}

.djls-shell.dp-mv-ui .djls-brand-title {
    margin: 0 !important;
    font-size: 38px !important;
    line-height: 1.08 !important;
}

.djls-shell.dp-mv-ui .djls-brand-subtitle {
    margin: 12px 0 0 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
}

.djls-shell.dp-mv-ui .djls-crest {
    order: 2 !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 88px !important;
    height: 104px !important;
    max-width: 20vw !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    background: transparent !important;
}

/* Tražilo kao zaseban 47 px red ispod 4. reda kategorija i neposredno iznad karte. */
.djls-shell.dp-mv-ui .djls-search-wrap {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    align-content: stretch !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 47px !important;
    min-height: 47px !important;
    max-height: 47px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--dp-mv-row) !important;
    flex: none !important;
}

.djls-shell.dp-mv-ui .djls-search-wrap::before {
    content: 'Tražilo:';
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    height: 47px !important;
    min-height: 47px !important;
    margin: 0 !important;
    padding: 0 0 0 20px !important;
    color: var(--dp-mv-text) !important;
    background: var(--dp-mv-row) !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 47px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.djls-shell.dp-mv-ui .djls-search {
    display: block !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 47px !important;
    min-height: 47px !important;
    max-height: 47px !important;
    margin: 0 !important;
    padding: 0 48px 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: #ffffff !important;
    color: var(--dp-mv-text) !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 47px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.djls-shell.dp-mv-ui .djls-search::placeholder {
    color: #777777 !important;
    opacity: 1 !important;
}

.djls-shell.dp-mv-ui .djls-search:focus {
    outline: 1px solid #9b9999 !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
}

.djls-shell.dp-mv-ui .djls-search-clear {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 47px !important;
    height: 47px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--dp-mv-text) !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 25px !important;
    line-height: 47px !important;
    font-weight: 400 !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* =========================================================
 * KATEGORIJE – isti princip kao Digital MV
 * ========================================================= */
.djls-shell.dp-mv-ui .djls-categories {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--dp-mv-row) !important;
    font-family: Helvetica, Arial, sans-serif !important;
}

.djls-shell.dp-mv-ui .djls-category-row {
    display: grid;
    grid-template-columns: repeat(var(--djls-row-count), minmax(0, 1fr));
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 47px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--dp-mv-row) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dp-mv-line) !important;
}

.djls-shell.dp-mv-ui .djls-category-row:last-child {
    border-bottom: 0 !important;
}

.djls-shell.dp-mv-ui .djls-category {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 47px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--dp-mv-text) !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease !important;
}

.djls-shell.dp-mv-ui .djls-category.is-active {
    background: var(--dp-mv-active) !important;
    color: var(--dp-mv-text) !important;
    font-weight: 400 !important;
}

@media (min-width: 781px) and (hover: hover) and (pointer: fine) {
    .djls-shell.dp-mv-ui .djls-category:not(.is-active):hover {
        background: #ffffff !important;
        color: var(--dp-mv-text) !important;
    }

    .djls-shell.dp-mv-ui .djls-category.is-active:hover {
        background: var(--dp-mv-active) !important;
        color: var(--dp-mv-text) !important;
    }
}

/* Karta ide odmah nakon Tražila, bez stare praznine. */
.djls-shell.dp-mv-ui .djls-map-stage {
    margin-top: 0 !important;
}

/* =========================================================
 * MOBITEL / TABLET
 * ========================================================= */
@media (max-width: 780px) {
    .djls-shell.dp-mv-ui .djls-brand {
        align-items: center !important;
        gap: 14px !important;
        padding: 22px 18px 18px !important;
    }

    .djls-shell.dp-mv-ui .djls-brand-title {
        font-size: 28px !important;
        line-height: 1.12 !important;
    }

    .djls-shell.dp-mv-ui .djls-brand-subtitle {
        margin-top: 8px !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    .djls-shell.dp-mv-ui .djls-crest {
        width: 60px !important;
        height: 72px !important;
        max-width: 24vw !important;
    }

    .djls-shell.dp-mv-ui .djls-search-wrap {
        gap: 8px !important;
    }

    .djls-shell.dp-mv-ui .djls-search-wrap::before {
        padding-left: 12px !important;
        font-size: 13px !important;
    }

    .djls-shell.dp-mv-ui .djls-search {
        padding-left: 12px !important;
        padding-right: 45px !important;
        font-size: 16px !important;
    }

    /* Zadržavamo postojeću Petrinja logiku dvaju stupaca, samo bez radijusa. */
    .djls-shell.dp-mv-ui .djls-categories {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 1px !important;
        background: #ecf0fa !important;
    }

    .djls-shell.dp-mv-ui .djls-category-row,
    .djls-shell.dp-mv-ui .djls-category-row:last-child {
        display: contents !important;
    }

    .djls-shell.dp-mv-ui .djls-category {
        justify-content: flex-start !important;
        min-height: 47px !important;
        padding: 9px 10px !important;
        border-radius: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #ecf0fa !important;
        background: var(--dp-mv-row) !important;
        text-align: left !important;
        line-height: 1.25 !important;
    }

    .djls-shell.dp-mv-ui .djls-category.is-active {
        background: var(--dp-mv-active) !important;
    }
}

@media (max-width: 430px) {
    .djls-shell.dp-mv-ui .djls-brand {
        padding-right: 14px !important;
    }

    .djls-shell.dp-mv-ui .djls-brand-title {
        font-size: 25px !important;
    }

    .djls-shell.dp-mv-ui .djls-brand-subtitle {
        font-size: 16px !important;
    }

    .djls-shell.dp-mv-ui .djls-crest {
        width: 54px !important;
        height: 66px !important;
    }
}