/* =====================================================================
   firma.css - profil firme unutar okvira portala (meni, pretraga, kategorije, podnozje su iz main.css).
   Sve je pod .pf, pa se ne sudara sa main.css. Atributi na .pf:
     data-theme="portal" | "t1" .. "t21"   tema firme (vidi firma_teme.css)
     data-entry="portal" | "direct"        kako je korisnik stigao
   Boje portala (data-portal) ostaju na <html>.
   ===================================================================== */
.pf {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ptx);
    background: var(--pbg);
    position: relative;
}

.pf[data-theme^="t"] {
    padding: 16px;
    border-radius: var(--rad);
}

.pf * {
    box-sizing: border-box;
}

.pf a {
    color: inherit;
    text-decoration: none;
}

.pf button {
    font: inherit;
    color: inherit;
}

.pf h1,
.pf h2,
.pf h3,
.pf p {
    margin: 0;
    padding: 0;
}

.pf [hidden] {
    display: none !important;
}

.pf :focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
}

/* ---------- 1. Boje portala ---------- */
.pf {
    --b-bg: #25292D;
    --b-mu: #A9ADB1;
    --b-pa: #2EE57A;
    --b-on: #14201A;
    --b-ink: #1FA85A;
    --b-soft: #E3F7EA;
    --b-ni: #E8E838;
    --hh: 56px;
    --sub: 0px;
}

html[data-portal="rs"] .pf {
    --b-bg: #1C1B1F;
    --b-mu: #A9A49A;
    --b-pa: #D93A2B;
    --b-on: #FFF1D6;
    --b-ink: #D93A2B;
    --b-soft: #FBE7E4;
    --b-ni: #E3A32B;
}

/* ---------- 2. Tema firme (podrazumevano: boje portala) ---------- */
.pf {
    --pbg: #F2F1EC;
    /* pozadina stranice */
    --pcard: #FFFFFF;
    /* kartice */
    --pline: #E2DFD6;
    /* linije i okviri */
    --ptx: #1D1D1B;
    /* tekst */
    --pmu: #66645E;
    /* sporedni tekst */
    --pa: var(--b-pa);
    /* glavna boja: dugmad, izabrano */
    --pon: var(--b-on);
    /* tekst na glavnoj boji */
    --pink: var(--b-ink);
    /* boja ikonica, cena i linkova */
    --psoft: var(--b-soft);
    /* svetla podloga ikonica i čipova */
    --cover: var(--b-bg);
    /* naslovni deo profila i zaglavlje strana usluga */
    --coveron: #FFFFFF;
    /* tekst na naslovnom delu */
    --hsh: #1D1D1B;
    /* boja naslova blokova */
    --rad: 14px;
    --radb: 12px;
    --radc: 999px;
    /* zaobljenost: kartice, dugmad, čipovi */
    --hfont: inherit;
    /* font naslova */
    --ctop: 0.5px;
    --ctc: var(--pline);
    /* gornja ivica kartice */
    --okbg: #E3F7EA;
    --oktx: #167A43;
    --nobg: #FBE7E4;
    --notx: #B3261E;
}

.pf[data-theme="ocean"] {
    --pbg: #EAF1FD;
    --pline: #CFDDF7;
    --pa: #2563EB;
    --pon: #FFFFFF;
    --pink: #1D4ED8;
    --psoft: #DCE8FD;
    --cover: #1E3A8A;
    --hsh: #1E3A8A;
    --rad: 16px;
    --radb: 12px;
}

.pf[data-theme="forest"] {
    --pbg: #E6F2EA;
    --pline: #C5DDCF;
    --pa: #1F8A5B;
    --pon: #FFFFFF;
    --pink: #14684A;
    --psoft: #D5EBDD;
    --cover: #14532D;
    --hsh: #14532D;
    --rad: 20px;
    --radb: 14px;
}

.pf[data-theme="bordo"] {
    --pbg: #F7EDEF;
    --pline: #E6CDD2;
    --pa: #8E2B3A;
    --pon: #FFFFFF;
    --pink: #8E2B3A;
    --psoft: #F1DDE1;
    --cover: #5E1624;
    --hsh: #5E1624;
    --rad: 4px;
    --radb: 4px;
    --radc: 4px;
    --hfont: Georgia, "Times New Roman", serif;
    --ctop: 3px;
    --ctc: #8E2B3A;
}

.pf[data-theme="gold"] {
    --pbg: #FBF5E6;
    --pline: #EBDDB8;
    --pa: #C9962B;
    --pon: #1D1D1B;
    --pink: #8A6208;
    --psoft: #F6EAC8;
    --cover: #1D1D1B;
    --coveron: #F3D58A;
    --hsh: #1D1D1B;
    --rad: 10px;
    --radb: 10px;
    --radc: 10px;
    --hfont: Georgia, "Times New Roman", serif;
    --ctop: 3px;
    --ctc: #C9962B;
}

.pf[data-theme="night"] {
    --pbg: #131518;
    --pcard: #1E2126;
    --pline: #2E3238;
    --ptx: #F1F1EE;
    --pmu: #A4A6AB;
    --pa: var(--b-pa);
    --pon: var(--b-on);
    --pink: var(--b-ni);
    --psoft: #2A2E35;
    --cover: #0B0C0E;
    --hsh: #F1F1EE;
    --okbg: #1E3A2B;
    --oktx: #6FE0A0;
    --nobg: #3A2020;
    --notx: #FF9C94;
}

/* zaglavlje sa dve trake (direktan ulaz) je više */
.pf[data-entry="direct"]:not([data-hide-portal="true"]) {
    --sub: 56px;
}

/* ---------- 3. Osnova ---------- */
.pf *,
.pf *::before,
.pf *::after {
    box-sizing: border-box;
}

.pf {
    margin: 0;
    background: var(--pbg);
    color: var(--ptx);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

.pf a {
    color: inherit;
    text-decoration: none;
}

.pf button {
    font: inherit;
    color: inherit;
}

.pf h1,
.pf h2,
.pf h3,
.pf p {
    margin: 0;
}

.pf [hidden] {
    display: none !important;
}





/* ---------- 4. Oznake portala ---------- */






/* ---------- 5. Zaglavlja ---------- */
.pf .top {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--hh);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 12px;
    background: var(--cover);
    color: var(--coveron);
}

.pf .top--brand {
    background: var(--b-bg);
    color: #fff;
}

.pf .top--brand .mk {
    width: 34px;
}

.pf .top .grow {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf .ib {
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 19px;
    cursor: pointer;
}

.pf .pm {
    width: 46px;
    height: 46px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf .tt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pf .tt small {
    font-size: 11px;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf .tt span {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf .subb {
    position: sticky;
    top: var(--hh);
    z-index: 29;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: var(--cover);
    color: var(--coveron);
}

/* ulaz sa portala: jedna traka (zaglavlje firme + mala oznaka portala);
   direktan ulaz: logo portala gore + traka firme ispod */
.pf .hd-de {
    display: none;
}

.pf[data-entry="direct"]:not([data-hide-portal="true"]) .hd-pe {
    display: none;
}

.pf[data-entry="direct"]:not([data-hide-portal="true"]) .hd-de.top,
.pf[data-entry="direct"]:not([data-hide-portal="true"]) .hd-de.subb {
    display: flex;
}

/* ---------- 6. Kartice i naslovi ---------- */
.pf .sc {
    background: var(--pcard);
    border: 0.5px solid var(--pline);
    border-top: var(--ctop) solid var(--ctc);
    border-radius: var(--rad);
    margin: 12px 12px 0;
    padding: 14px;
}

.pf .sc.up {
    margin-top: -36px;
    position: relative;
}

.pf .h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hsh);
    font-family: var(--hfont);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pf .note {
    margin: 12px 14px 0;
    font-size: 12px;
    color: var(--pmu);
    text-align: center;
}

.pf .bn {
    margin: 12px 12px 0;
    height: 92px;
    border-radius: var(--rad);
    overflow: hidden;
    background: var(--pline);
    color: var(--pmu);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.pf .bn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 7. Profil ---------- */
.pf .band {
    background: var(--cover);
    color: var(--coveron);
    padding: 18px 14px 56px;
}

.pf .hero {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.pf .plogo {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: var(--rad);
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 500;
    color: #777;
}

.pf .plogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#sadrzaj .pf .nm {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    font-family: var(--hfont);
}

.pf .pct {
    font-size: 12px;
    opacity: .8;
    margin-top: 4px;
}

.pf .adr {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    font-size: 13px;
}

.pf .adr i {
    font-size: 18px;
    flex: none;
}

.pf .stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: var(--radc);
    font-size: 12px;
}

.pf .stat.ok {
    background: var(--okbg);
    color: var(--oktx);
}

.pf .stat.no {
    background: var(--nobg);
    color: var(--notx);
}

.pf .cta {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: var(--radb);
    background: var(--pa);
    color: var(--pon);
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.pf .cta.alt {
    background: var(--psoft);
    color: var(--pink);
    margin-top: 8px;
}

.pf .cta i {
    font-size: 20px;
}

.pf .mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.pf .mini a,
.pf .mini button {
    height: 40px;
    border: 0;
    border-radius: var(--radb);
    background: var(--psoft);
    color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}

.pf .mini i {
    font-size: 17px;
}

.pf .ci {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--psoft);
    color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.pf .svc {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    margin-bottom: 8px;
    border: 0.5px solid var(--pline);
    border-radius: var(--radb);
    background: var(--pbg);
    text-align: left;
    cursor: pointer;
}

.pf .svc:last-child {
    margin-bottom: 0;
}

.pf .svc .pt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pf .svc .pt b {
    font-size: 14px;
    font-weight: 500;
}

.pf .svc .pt span {
    font-size: 12px;
    color: var(--pmu);
}

.pf .svc .go {
    color: var(--pmu);
    font-size: 16px;
}

.pf .crow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 0.5px solid var(--pline);
}

.pf .crow:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.pf .crow .pt {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pf .crow .l {
    font-size: 12px;
    color: var(--pmu);
}

.pf .crow .v {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf .crow .go {
    margin-left: auto;
    color: var(--pmu);
    font-size: 16px;
}

.pf .psoc {
    display: flex;
    gap: 10px;
}

.pf .psoc a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--psoft);
    color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.pf .hr {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
}

.pf .hr.today {
    background: var(--psoft);
    font-weight: 500;
}

.pf .hours:not(.is-open) .hr:not(.today) {
    display: none;
}

.pf .tlink {
    border: 0;
    background: none;
    padding: 0;
    color: var(--pink);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pf .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf .tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: var(--radc);
    background: var(--psoft);
    font-size: 12px;
}

.pf .tag i {
    color: var(--pink);
    font-size: 16px;
}

.pf .ab {
    font-size: 14px;
    line-height: 1.55;
}

.pf .ab.cl {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf .map {
    position: relative;
    height: 150px;
    border-radius: var(--radb);
    background: var(--psoft);
    overflow: hidden;
    border: 0.5px solid var(--pline);
}

.pf .map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.pf .map .rd {
    position: absolute;
    background: var(--pline);
}

.pf .map .pin {
    position: absolute;
    transform: translate(-50%, -100%);
    color: var(--pink);
    font-size: 28px;
}

.pf .loc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 0.5px solid var(--pline);
}

.pf .loc .pt {
    flex: 1;
    min-width: 0;
}

.pf .loc .n {
    font-size: 14px;
    font-weight: 500;
}

.pf .loc .a {
    font-size: 12px;
    color: var(--pmu);
}

.pf .loc .ic {
    display: flex;
    gap: 6px;
}

.pf .loc .ic a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--psoft);
    color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.pf .kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}

.pf .kv span:first-child {
    color: var(--pmu);
    flex: none;
}

.pf .kv span:last-child {
    text-align: right;
}

.pf .gal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.pf .gal a {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: calc(var(--radb) / 1.5);
    overflow: hidden;
    background: var(--pline);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--pmu);
}

.pf .gal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf .gal .more::after {
    content: attr(data-more);
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
}













/* ---------- 8. Koraci (zakazivanje, rezervacija) ---------- */
.pf .pr {
    display: flex;
    gap: 4px;
    padding: 12px 14px 4px;
}

.pf .pr i {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--pline);
}

.pf .pr i.on {
    background: var(--pa);
}

.pf .sl {
    padding: 2px 14px 0;
    font-size: 12px;
    color: var(--pmu);
}

.pf .sv {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 0;
    cursor: pointer;
    border: 0;
    border-top: 0.5px solid var(--pline);
    background: none;
    text-align: left;
}

.pf .sv:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.pf .sv .pt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pf .sv .pt b {
    font-size: 14px;
    font-weight: 500;
}

.pf .sv .pt span {
    font-size: 12px;
    color: var(--pmu);
}

.pf .sv .pz {
    font-size: 14px;
    font-weight: 500;
    color: var(--pink);
}

.pf .cb {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: calc(var(--radb) / 2);
    border: 1.5px solid var(--pmu);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.pf .cb i {
    display: none;
}

.pf .sv.on .cb {
    background: var(--pa);
    border-color: var(--pa);
    color: var(--pon);
}

.pf .sv.on .cb i {
    display: block;
}

.pf .cps {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pf .cps::-webkit-scrollbar {
    display: none;
}

.pf .cp {
    flex: none;
    padding: 8px 14px;
    border-radius: var(--radc);
    border: 0.5px solid var(--pline);
    background: var(--pcard);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.pf .cp.on {
    background: var(--pa);
    color: var(--pon);
    border-color: var(--pa);
    font-weight: 500;
}

.pf .mo {
    font-size: 12px;
    color: var(--pmu);
    margin-bottom: 8px;
}

.pf .ds {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pf .ds::-webkit-scrollbar {
    display: none;
}

.pf .dd {
    flex: none;
    width: 52px;
    padding: 8px 0;
    border-radius: var(--radb);
    border: 0.5px solid var(--pline);
    background: var(--pcard);
    text-align: center;
    cursor: pointer;
}

.pf .dd small {
    display: block;
    font-size: 11px;
    color: var(--pmu);
}

.pf .dd b {
    font-size: 16px;
    font-weight: 500;
}

.pf .dd.on {
    background: var(--pa);
    border-color: var(--pa);
    color: var(--pon);
}

.pf .dd.on small {
    color: var(--pon);
}

.pf .sg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.pf .sl2 {
    padding: 10px 0;
    border-radius: var(--radb);
    border: 0.5px solid var(--pline);
    background: var(--pcard);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}

.pf .sl2.on {
    background: var(--pa);
    color: var(--pon);
    border-color: var(--pa);
    font-weight: 500;
}

.pf .sl2:disabled {
    opacity: .4;
    text-decoration: line-through;
    cursor: not-allowed;
}

.pf .fl {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.pf .fl:last-child {
    margin-bottom: 0;
}

.pf .fl label {
    font-size: 12px;
    color: var(--pmu);
}

.pf .in {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: var(--radb);
    border: 0.5px solid var(--pline);
    background: var(--pbg);
    color: var(--ptx);
    font: inherit;
    font-size: 14px;
}

.pf textarea.in {
    height: 72px;
    padding: 10px 12px;
    resize: none;
}

.pf .gs {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pf .gs button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--pa);
    color: var(--pon);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.pf .gs b {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    font-family: var(--hfont);
}

.pf .gs small {
    display: block;
    font-size: 12px;
    color: var(--pmu);
    font-weight: 400;
}

.pf .ok {
    text-align: center;
    padding: 28px 20px 4px;
}

.pf .okc {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--pa);
    color: var(--pon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.pf .ok h2 {
    margin-bottom: 6px;
    font-size: 21px;
    font-weight: 500;
    color: var(--hsh);
    font-family: var(--hfont);
}

.pf .ok p {
    font-size: 13px;
    color: var(--pmu);
    line-height: 1.5;
}

/* traka pri dnu (sažetak + glavno dugme) */
.pf .sb {
    position: sticky;
    bottom: 0;
    z-index: 25;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--pcard);
    border-top: 2px solid var(--pa);
}

.pf .sb .sm {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--pmu);
}

.pf .sb .sm b {
    display: block;
    font-size: 14px;
    color: var(--ptx);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf .bp {
    height: 46px;
    padding: 0 20px;
    flex: none;
    border: 0;
    border-radius: var(--radb);
    background: var(--pa);
    color: var(--pon);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.pf .bp:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.pf .bp.grow {
    flex: 1;
}

.pf .bs {
    width: 46px;
    height: 46px;
    flex: none;
    border: 0;
    border-radius: var(--radb);
    background: var(--psoft);
    color: var(--pink);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

/* ---------- 9. Digitalni meni ---------- */
.pf .mt {
    position: sticky;
    top: calc(var(--hh) + var(--sub));
    z-index: 20;
    background: var(--pbg);
    padding: 10px 12px;
    border-bottom: 0.5px solid var(--pline);
}

.pf .mh {
    margin: 16px 14px 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--hsh);
    font-family: var(--hfont);
    scroll-margin-top: calc(var(--hh) + var(--sub) + 62px);
}

.pf .mi {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-top: 0.5px solid var(--pline);
}

.pf .mi:first-child {
    border-top: 0;
}

.pf .mi .tx {
    flex: 1;
    min-width: 0;
}

.pf .mn {
    font-size: 15px;
    font-weight: 500;
}

.pf .md {
    font-size: 12px;
    color: var(--pmu);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf .mp {
    font-size: 14px;
    font-weight: 500;
    color: var(--pink);
    margin-top: 6px;
}

.pf .mimg {
    width: 76px;
    height: 76px;
    flex: none;
    border-radius: var(--radb);
    background: var(--pline);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--pmu);
}

.pf .mimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf .tgm {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 4px 4px 0 0;
    padding: 2px 7px;
    border-radius: var(--radc);
    background: var(--psoft);
    color: var(--pink);
    font-size: 11px;
}

/* ---------- 10. Oglasi (vozila) ---------- */
.pf .cc {
    display: block;
    margin: 12px 12px 0;
    background: var(--pcard);
    border: 0.5px solid var(--pline);
    border-radius: var(--rad);
    overflow: hidden;
}

.pf .cim {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--pline);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pmu);
    font-size: 12px;
}

.pf .cim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf .bd {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 9px;
    border-radius: var(--radc);
    background: var(--pa);
    color: var(--pon);
    font-size: 11px;
    font-weight: 500;
}

.pf .hv {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1D1D1B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.pf .cb2 {
    padding: 12px;
}

.pf .ctt {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.pf .ctt b {
    font-size: 15px;
    font-weight: 500;
    font-family: var(--hfont);
}

.pf .pr2 {
    font-size: 16px;
    font-weight: 500;
    color: var(--pink);
    white-space: nowrap;
}

.pf .spc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--pmu);
}

.pf .spc span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pf .kg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pf .kg div {
    background: var(--psoft);
    border-radius: var(--radb);
    padding: 10px 12px;
}

.pf .kg small {
    display: block;
    font-size: 11px;
    color: var(--pmu);
}

.pf .kg b {
    font-size: 14px;
    font-weight: 500;
}

.pf .gtop {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--pline);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pmu);
    font-size: 13px;
    overflow: hidden;
}

.pf .gtop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf .gnav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #1D1D1B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

.pf .gct {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 11px;
}

.pf .price-big {
    font-size: 22px;
    font-weight: 500;
    color: var(--pink);
    margin-top: 6px;
}

/* ---------- 11. Donji paneli i oznaka portala ---------- */
.pf .ov {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
}

.pf .ov.open {
    display: flex;
}

.pf .panel {
    width: 100%;
    max-width: 560px;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--pcard);
    border-radius: 20px 20px 0 0;
    text-align: center;
}

.pf .panel h2 {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--hfont);
}

.pf .panel p {
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--pmu);
}

.pf .shr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pf .shr a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: var(--radb);
    background: var(--psoft);
    font-size: 12px;
}

.pf .shr a i {
    font-size: 24px;
    color: var(--pink);
}

.pf .bl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 16px 14px 0;
    font-size: 11px;
    color: var(--pmu);
}

.pf .bl .mk {
    width: 16px;
}

.pf .pc {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pf .pc .x {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
}

.pf .pc .mk {
    width: 36px;
}

.pf .pc .bp {
    height: 38px;
    padding: 0 14px;
}

.pf .qrbox {
    display: inline-block;
    padding: 6px;
    background: #fff;
    border: 0.5px solid var(--pline);
    border-radius: 8px;
}

.pf .qrbox svg,
.pf .qrbox img {
    display: block;
    width: 168px;
    height: 168px;
}

html[data-portal="rs"] .pf .t-sab,
html:not([data-portal="rs"]) .pf .t-rs {
    display: none;
}

/* ---------- 12. Raspored ----------
   Na telefonu su omotaci prozirni (display: contents), pa je redosled isti kao u HTML-u.
   Od 900 px: naslovni deo preko cele sirine sadrzaja, ispod dve kolone (glavni deo + bocna kolona). */
.pf .pwrap,
.pf .pcols,
.pf .col-side,
.pf .col-main {
    display: contents;
}

.pf>.bn,
.pf .col-main>.bn,
.pf .sc {
    margin-left: 0;
    margin-right: 0;
}

.pf .band {
    margin: 0;
}

.pf .col-main>.bn {
    height: 300px;
}

@media (min-width: 900px) {
    .pf>.bn {
        height: 160px;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .pf .band {
        margin: 0;
        padding: 24px;
        border-radius: var(--rad);
    }

    .pf .hero {
        gap: 20px;
        align-items: center;
    }

    .pf .plogo {
        width: 96px;
        height: 96px;
        font-size: 38px;
    }

    #sadrzaj .pf .nm {
        font-size: 30px;
    }

    .pf .pct {
        font-size: 14px;
    }

    .pf .adr {
        font-size: 14px;
    }

    .pf .pwrap {
        display: block;
    }

    .pf .pcols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 0 16px;
        align-items: start;
    }

    .pf .col-main {
        display: block;
        grid-column: 1;
        grid-row: 1;
    }

    .pf .col-side {
        display: block;
        grid-column: 2;
        grid-row: 1;
    }

    .pf .sc {
        margin-left: 0;
        margin-right: 0;
    }

    .pf .col-side>.sc.up {
        margin-top: 12px;
    }

    .pf .col-main>.bn {
        height: 400px;
    }

    .pf .gal {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pf .map {
        height: 260px;
    }

    .pf .ab.cl {
        -webkit-line-clamp: 8;
    }

    .pf .panel {
        border-radius: 20px;
        margin-bottom: 40px;
    }

    .pf .ov {
        align-items: center;
    }
}

/* ---------- 13. Prikazivac slika galerije ---------- */
.pf .lb {
    background: rgba(0, 0, 0, .92);
    align-items: center;
}

.pf .lb img {
    max-width: 100vw;
    max-height: 86vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.pf .lbx,
.pf .lbn {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.pf .lbx {
    top: 12px;
    right: 12px;
}

.pf .lbn {
    top: 50%;
    transform: translateY(-50%);
}

.pf .lbp {
    left: 10px;
}

.pf .lbs {
    right: 10px;
}

.pf .lbc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    text-align: center;
    color: #fff;
    font-size: 12px;
}

@media (min-width: 900px) {
    .pf .lb img {
        max-height: 90vh;
    }

    .pf .lbn {
        width: 52px;
        height: 52px;
    }

    .pf .lbp {
        left: 24px;
    }

    .pf .lbs {
        right: 24px;
    }
}

/* ---------- 14. Telefon: baneri preko cele širine strane, bez zaobljenih uglova ---------- */
@media (max-width: 899px) {
    .pf[data-theme^="t"] {
        margin: 0 -14px;
        padding: 12px 14px;
        border-radius: 0;
    }

    /* tema ide od ivice do ivice */
    .pf>.bn,
    .pf .col-main>.bn {
        margin: 0 -14px 12px;
        border-radius: 0;
    }
}

/* ---------- 15. Traka radnji pri dnu ekrana (samo telefon) ---------- */
.pf .pf-traka {
    display: none;
}

@media (max-width: 899px) {
    .pf .pf-traka {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        gap: 8px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--pcard);
        border-top: 1px solid var(--pline);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
    }

    .pf .pf-traka a,
    .pf .pf-traka button {
        height: 46px;
        border: 0;
        border-radius: var(--radb);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
    }

    .pf .pf-traka i {
        font-size: 20px;
    }

    .pf .pt-poziv {
        flex: 1.3;
        background: var(--pa);
        color: var(--pon);
    }

    .pf .pt-nav {
        flex: 1;
        background: var(--psoft);
        color: var(--pink);
    }

    .pf .pt-deli {
        width: 46px;
        flex: none;
        background: var(--psoft);
        color: var(--pink);
        padding: 0;
    }

    .pf:has(.pf-traka) {
        padding-bottom: 72px;
    }

    /* da traka ne zaklanja kraj strane */
    .pf[data-theme^="t"]:has(.pf-traka) {
        padding-bottom: 84px;
    }
}