/* Cenovnik (/cenovnik/) - stilovi samo za ovu stranicu */

/* ---------- sekcija: svetlosiva pozadina preko pune sirine, razmak od banera i footera ---------- */
.cen-section {
    background-color: #f4f5f7;
    padding: 60px 0 80px;
}
.cen-section:after {
    content: "";
    display: table;
    clear: both;
}
.cen-intro {
    padding: 0 15px 20px;
}
.cen-intro h2 {
    margin: 0 0 6px;
    color: #3e4c66;
}
.cen-intro p {
    margin: 0;
    color: #777;
}
/* bez donjih margina na poslednjim elementima, da razmak do footera bude tacno padding sekcije */
.cen-list-col > .panel-group:last-child,
.cenovnik-form #result {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .cen-section {
        padding: 35px 0 50px;
    }
}

/* ---------- pretraga analiza ---------- */
.cen-search {
    margin-bottom: 15px;
}
/* izgled polja je u zajednickom /style/search.css (klase ml-search, ml-search-input, ml-search-icon) */
.cenovnik-form .cen-search .ml-search-input {
    padding-right: 46px; /* mesto za dugme za brisanje */
}
.cen-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #777;
    font-size: 22px;
    line-height: 32px;
}
.cen-search-clear:hover,
.cen-search-clear:focus {
    background: #f4f5f7;
    color: #df0024;
    outline: 0;
}
.cen-search-clear[hidden] {
    display: none;
}

/* dok je pretraga aktivna harmonika je skrivena (stanje otvorenih kategorija se cuva) */
.cen-list-col.is-searching > .panel-group {
    display: none;
}
.cen-search-results[hidden] {
    display: none;
}
.cen-search-results {
    padding: 8px 15px 10px;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.cen-search-count {
    margin: 4px 2px 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #999;
}
.cen-search-more,
.cen-search-empty {
    margin: 10px 2px 4px;
    color: #777;
}
.cen-search-empty a {
    color: #df0024;
    font-weight: 700;
    white-space: nowrap;
}
.cenovnik-form .cen-hit .cen-hit-name {
    display: block;
}
.cenovnik-form .cen-hit .cen-hit-path {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #999;
}
.cenovnik-form .cen-hit mark {
    padding: 0;
    background-color: rgba(223, 0, 36, .12);
    color: inherit;
    font-weight: 700;
}

/* broj analiza u zaglavlju kategorije, desno pre strelice */
.cen-list-col > .panel-group > .panel > .panel-heading .panel-title > a {
    display: flex;
    align-items: center;
}
.cen-cat-name {
    flex: 1 1 auto;
    min-width: 0;
}
.cen-count {
    flex: 0 0 auto;
    margin-left: 12px;
    font-size: 13px;
    font-weight: 400;
    color: #777;
}
.cen-list-col > .panel-group > .panel > .panel-heading.is-open .cen-count {
    color: rgba(255, 255, 255, .7);
}

/* ---------- harmonika: nivo 1 (kategorija) i nivo 2 (podkategorija) ---------- */
.cenovnik-form .panel-group {
    margin-bottom: 10px;
}
.cenovnik-form .panel-heading {
    padding: 0;
}
.cenovnik-form .panel-title > a {
    display: block;
    position: relative;
    padding: 10px 40px 10px 15px;
    text-decoration: none;
}
.cenovnik-form .panel-title > a:after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -7px;
    line-height: 14px;
    transition: transform .2s;
}
.cenovnik-form .panel-title > a[aria-expanded="true"]:after {
    transform: rotate(180deg);
}

/* nivo 1: bela kartica sa crvenom linijom levo, tamnoplavo zaglavlje kad je otvorena */
.cen-list-col > .panel-group > .panel {
    border-color: #e3e3e3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.cen-list-col > .panel-group > .panel > .panel-heading {
    background-color: #fff;
    border-left: 4px solid #df0024;
    transition: background-color .2s;
}
.cen-list-col > .panel-group > .panel > .panel-heading .panel-title > a {
    color: #3e4c66;
    font-weight: 700;
}
.cen-list-col > .panel-group > .panel > .panel-heading .panel-title > a:after {
    color: #df0024;
}
.cen-list-col > .panel-group > .panel > .panel-heading.is-open {
    background-color: #3e4c66;
}
.cen-list-col > .panel-group > .panel > .panel-heading.is-open .panel-title > a,
.cen-list-col > .panel-group > .panel > .panel-heading.is-open .panel-title > a:after {
    color: #fff;
}

/* nivo 2 */
.cen-list-col .panel-collapse .panel-group {
    margin-bottom: 6px;
}
.cen-list-col .panel-collapse .panel-heading {
    background-color: #f5f5f5;
    border-left: 3px solid #e3e3e3;
}
.cen-list-col .panel-collapse .panel-title > a {
    color: #3e4c66;
    font-size: 15px;
}
.cen-list-col .panel-collapse .panel-title > a:after {
    color: #3e4c66;
}
.cen-list-col .panel-collapse .panel-title > a[aria-expanded="true"] {
    color: #df0024;
}
.cen-list-col .panel-collapse .panel-heading.is-open {
    border-left-color: #df0024;
}
.cen-list-col .panel-collapse .panel-collapse > .panel-body {
    padding: 5px 10px 10px 18px;
}

/* ---------- stavke: naziv levo, cena desno ---------- */
.cenovnik-form .calculator {
    display: flex;
    align-items: baseline;
    padding: 7px 2px;
    border-bottom: 1px solid #f0f0f0;
}
.cenovnik-form .calculator:last-child {
    border-bottom: 0;
}
.cenovnik-form .calculator p {
    display: none;
}
.cenovnik-form .calculator input {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
    position: relative;
    top: 2px;
}
.cenovnik-form .calculator .calc-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.cenovnik-form .calculator .calc-price {
    flex: 0 0 auto;
    margin-left: 12px;
    white-space: nowrap;
    text-align: right;
}
.cenovnik-form .calculator.calc-na .calc-price {
    font-weight: 400;
    font-style: italic;
}
/* ceo red je klikabilan (osim "Cena na upit") */
.cenovnik-form .calculator:not(.calc-na) {
    cursor: pointer;
}
.cenovnik-form .calculator:not(.calc-na):hover {
    background-color: #f5f5f5;
}
.cenovnik-form .calculator.calc-na {
    cursor: default;
}

/* ---------- kartica "Vas izbor" ---------- */
.cenovnik-form #result {
    margin-left: 0;
    padding: 0;
    border-color: #e3e3e3;
    border-left: 4px solid #df0024;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.cenovnik-form #result > .panel-heading {
    padding: 12px 20px;
    background-color: #3e4c66;
    border-color: #3e4c66;
}
.cenovnik-form #result > .panel-heading .panel-title {
    color: #fff;
    font-weight: 700;
}
.cenovnik-form #element {
    padding: 10px 15px 6px;
}
.cenovnik-form #result .calc-empty {
    margin: 2px 5px 6px;
    line-height: 22px;
}
/* red "Ukupno": iznos poravnat sa kolonom cena
   (desno = padding #element 15 + kolona x 40 + padding celije 6 + eventualni scrollbar) */
.cenovnik-form #total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: 14px calc(61px + var(--cen-sb, 0px)) 14px 21px;
    border-top: 2px solid #d5d9e0;
    background-color: #f4f5f7;
    color: #3e4c66;
}
.cen-total-label {
    font-size: 15px;
    font-weight: 400;
    color: #555;
}
.cen-total-amount {
    /* u uskoj kartici prelazi u novi red, i dalje desno poravnat */
    margin-left: auto;
    padding-left: 12px;
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}
.cenovnik-form #total:empty {
    display: none;
}

/* veliki logo fiksiran u pozadini se na cenovniku ne prikazuje */
body.corporate {
    background-image: none;
}

@media (min-width: 768px) {
    .cenovnik-form {
        display: flex;
        align-items: flex-start;
    }
    .cenovnik-form .cen-summary-col {
        position: -webkit-sticky;
        position: sticky;
        top: 115px;
    }
    .cenovnik-form #result {
        margin-top: 0;
    }
    .cenovnik-form #element {
        max-height: calc(100vh - 260px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* ---------- mobilna traka sa zbirom ---------- */
.cen-bar {
    display: none;
}

@media (max-width: 767px) {
    body.cen-has-items .cen-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: #3e4c66;
        color: #fff;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .25);
    }
    body.cen-has-items.cen-bar-off .cen-bar {
        display: none;
    }
    /* prostor ispod poslednjih stavki da ih traka ne prekrije */
    body.cen-has-items .cen-list-col {
        padding-bottom: 70px;
    }

    .cen-bar-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 54px;
        padding: 8px 16px;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 16px;
        text-align: left;
    }
    .cen-bar-count {
        flex: 1 1 auto;
    }
    .cen-bar-total {
        flex: 0 0 auto;
        font-weight: 700;
        margin-right: 12px;
        white-space: nowrap;
    }
    .cen-bar-icon {
        transition: transform .2s;
    }
    .cen-bar.open .cen-bar-icon {
        transform: rotate(180deg);
    }

    .cen-bar-list {
        display: none;
        max-height: 50vh;
        overflow-y: auto;
        background: #fff;
        color: #333;
        border-top: 3px solid #df0024;
    }
    .cen-bar.open .cen-bar-list {
        display: block;
    }
    .cen-bar-list .cen-sel-table {
        margin: 4px 0;
    }
    .cen-bar-list .cen-sel-table th:first-child,
    .cen-bar-list .cen-sel-table td:first-child {
        padding-left: 16px;
    }
    .cen-bar-list .cen-sel-table th:last-child,
    .cen-bar-list .cen-sel-table td:last-child {
        padding-right: 12px;
    }
}

/* ---------- tabela izabranih analiza ("Vas izbor" i mobilna traka) ---------- */
.cen-sel-table {
    width: 100%;
    border-collapse: collapse;
    color: #333;
}
.cen-sel-table th,
.cen-sel-table td {
    padding: 8px 6px;
    vertical-align: middle;
    border-bottom: 1px solid #ececec;
}
.cen-sel-table th {
    padding-top: 2px;
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #999;
}
.cen-sel-table tbody tr:last-child td {
    border-bottom: 0;
}
.cen-sel-table tbody tr:hover td {
    background-color: #f7f8fa;
}
.cen-sel-table .cen-sel-name {
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.cen-sel-table td.cen-sel-name {
    color: #333;
    line-height: 1.35;
}
.cen-sel-table .cen-sel-price {
    text-align: right;
    white-space: nowrap;
}
.cen-sel-table td.cen-sel-price {
    font-weight: 700;
    color: #333;
}
.cen-sel-table .cen-sel-x {
    width: 40px;
    min-width: 40px;
    padding-left: 4px;
    padding-right: 0;
    text-align: right;
}
.cen-sel-remove {
    display: inline-block;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #df0024;
    border-radius: 3px;
    background: #fff;
    color: #df0024;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}
.cen-sel-remove:hover,
.cen-sel-remove:focus {
    background: #df0024;
    color: #fff;
}

/* ---------- mobilni (ispod 768px): redovi analiza koriste skoro punu sirinu ekrana ---------- */
@media (max-width: 767px) {
    /* spoljni razmak 8px sa svake strane */
    .cen-section > .container {
        padding-left: 8px;
        padding-right: 8px;
    }
    .cenovnik-form .cen-list-col,
    .cenovnik-form .cen-summary-col {
        padding-left: 0;
        padding-right: 0;
    }
    .cen-intro {
        padding-left: 2px;
        padding-right: 2px;
    }

    /* telo kartice kategorije bez bocnog paddinga */
    .cen-list-col > .panel-group > .panel > .panel-collapse > .panel-body {
        padding: 0;
    }

    /* podkategorije pune sirine; hijerarhija samo bojom i crvenom linijom levo */
    .cen-list-col .panel-collapse .panel-group {
        margin: 0;
    }
    .cen-list-col .panel-collapse .panel-group > .panel {
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .cen-list-col .panel-collapse .panel-heading {
        border-radius: 0;
        border-top: 1px solid #e9eaee;
    }
    .cen-list-col .panel-collapse .panel-collapse > .panel-body {
        padding: 0;
    }

    /* red analize: 10px bocno, min. 44px visine, checkbox 8px od naziva */
    .cenovnik-form .calculator {
        align-items: center;
        min-height: 44px;
        padding: 6px 10px;
    }
    .cenovnik-form .calculator input {
        width: 20px;
        height: 20px;
        margin: 0 8px 0 0;
        top: 0;
    }
    .cenovnik-form .calculator .calc-name {
        font-size: 14px;
        line-height: 1.35;
    }
    .cenovnik-form .calculator .calc-price {
        margin-left: 8px;
        font-size: 14px;
    }

    /* veci redovi harmonike za prst (ceo red je link, klikabilan po celoj sirini i visini) */
    .cen-list-col > .panel-group {
        margin-bottom: 10px;
    }
    .cen-list-col > .panel-group > .panel > .panel-heading .panel-title > a {
        min-height: 56px;
        padding: 8px 50px 8px 15px;
        font-size: 18px;
        line-height: 1.25;
    }
    .cen-list-col .panel-collapse .panel-title > a {
        display: flex;
        align-items: center;
        min-height: 50px;
        padding: 8px 50px 8px 15px;
        font-size: 16px;
        line-height: 1.3;
    }
    .cen-list-col .panel-collapse .panel-heading {
        border-top-color: #dcdfe5;
    }
    .cenovnik-form .panel-title > a:after {
        right: 16px;
        margin-top: -9px;
        font-size: 18px;
        line-height: 18px;
    }

    /* redovi analiza: min. 46px, checkbox 22px */
    .cenovnik-form .calculator {
        min-height: 46px;
    }
    .cenovnik-form .calculator input {
        width: 22px;
        height: 22px;
    }

    /* rezultati pretrage: isti redovi od ivice do ivice kartice */
    .cen-search-results {
        padding: 4px 0;
    }
    .cen-search-count,
    .cen-search-more,
    .cen-search-empty {
        margin-left: 10px;
        margin-right: 10px;
    }
}

/* analiza dodata preko /cenovnik/?dodaj=ID: kratko istaknut red */
@keyframes cen-highlight {
    0%, 60% { background-color: #fdeaee; }
    100% { background-color: transparent; }
}
.cenovnik-form .calculator.cen-highlight {
    animation: cen-highlight 2.5s ease-out;
}