html {
    height: 100%;
    line-height: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-display: optional;
    font-size: 14px;
    -webkit-user-drag: none;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--secondary-foreground);
    line-height: 1.5;
    min-height: auto;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px
}

*,
:after,
:before {
    box-sizing: border-box
}

.page-content,
#wrapper {
    height: auto
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    line-height: 1.1;
    text-rendering: optimizelegibility
}

h1 {
    color: var(--foreground);
    font-size: 28px;
    font-weight: 200;
    line-height: 44px
}

h2 {
    font-size: 16px;
    font-weight: 200
}

.icon {
    font-size: 20px;
    align-self: center;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr
}

.input-overlay-symbol-text_left {
    position: absolute;
    top: calc(50% + 3px);
    transform: translateY(-50%);
    left: 14px;
    color: var(--muted-foreground);
    font-size: 16px;
    line-height: 1;
    pointer-events: none
}

.input-overlay-symbol-text_right {
    position: absolute;
    top: calc(50% + 3px);
    transform: translateY(-50%);
    right: 14px;
    color: var(--muted-foreground);
    font-size: 16px;
    line-height: 1;
    pointer-events: none
}

.input-overlay-field__right {
    position: absolute;
    top: 11px;
    right: 15px;
    color: var(--muted-foreground)
}

.input-overlay-field__left {
    position: absolute;
    top: 11px;
    left: 10px;
    color: var(--muted-foreground)
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5)
}

::selection {
    background: #338fff;
    color: #fff
}

.noselect,
.custom-option-header,
.custom-option,
.post-modal-header-wrapper UL LI,
.option-q ul li,
.content-left-wrapper ul li h2,
#conversations-ul-inject li {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

h1 {
    color: var(--secondary-foreground);
    font-size: 28px;
    line-height: 48px;
    font-weight: normal;
    margin: 12px 0
}

h2 {
    line-height: 24px
}

ul {
    padding-left: 15px
}

.clearfix::before {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden
}

.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden
}

.inline {
    display: inline-block;
    vertical-align: middle
}

.full-width {
    width: 100% !important
}

input:disabled {
    background-color: #ccc
}

select:disabled {
    background-color: #ccc
}

sup.required {
    font-size: 100%;
    top: 0;
    left: 0;
    color: var(--accent-foreground)
}

.vertical-align-middle {
    vertical-align: middle
}


.mdl-spinner {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 32px
}

.center {
    margin: auto;
    width: 30%;
    padding: 10px
}

.pager-elements {
    font-size: 18px;
    word-break: break-all;
    max-width: 990px
}

.pager-elements a {
    padding: 0px 7px
}

.pager-selected {
    background: #666;
    color: #fff;
    border-radius: 5px
}

.two-columns {
    display: flex;
    flex-flow: row
}

.two-columns>div {
    width: 50%
}

.login-register-social-media,
#skip-set-password {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center
}

.login-register-social-media .form-inline-full {
    display: flex;
    flex-direction: column;
    text-align: center
}

.login-register-social-media .social-text {
    margin-bottom: 15px
}

.login-register-social-media .connect-text {
    align-self: center
}

.login-register-social-media .icon {
    font-size: 18px
}

.login-register-social-media .icon-facebook {
    color: #46619e
}

.login-register-social-media .icon-google-plus {
    color: #dd4a39
}

.clickable_link {
    cursor: pointer
}

.blue-link,
.blue-link a {
    color: var(--primary);
    outline: 0
}

.blue-link:hover,
.blue-link a:hover,
blue-link:active,
blue-link a:active {
    color: var(--primary-hover);
    outline: 0
}

.blue-link:visited,
.blue-link a:visited {
    color: #640096
}

.green_link,
.green_link a {
    color: var(--accent-foreground) !important
}

.green_link:hover,
.green_link a:hover {
    text-decoration: underline
}

.green_link:active,
.green_link a:active {
    color: var(--color-primary-dark) !important
}

#wrapper {
    position: relative;
    padding-bottom: 0px;
    height: 100%
}

.ourSquareLogo {
    position: absolute;
    font-size: 100px;
    height: 100px;
    color: var(--kaza);
    top: 0;
    z-index: 9;
    background: #fff;
    line-height: 0
}

.ourLineLogo {
    position: absolute;
    top: -18px;
    left: 16px;
    font-size: 84px;
    height: 67px;
    color: var(--kaza);
    z-index: 9;
    display: none;
    overflow: hidden;
    ine-height: 0
}

/* 2026-09-05 — logo je bio DVA glifa iz fonta ikona (data-icon="S" i ")"), pa je do
   dolaska fonta treperio kao golo slovo. Sada je inline SVG, izvučen iz istog fonta
   (fonts/kaza.svg, glifovi „logo" i „horisontal-logo") pa je oblik identičan; upoređeno
   na 90px, poklapa se.

   Mera je u `em` namerno: glif je imao horiz-adv-x 512 na units-per-em 512, dakle tačno
   1em. Tako sva postojeća pravila koja postavljaju font-size (100px za kvadratni, 84px za
   horizontalni, plus prepisi u add/messenger/static/settings/group.css) nastavljaju da
   rade nedirnuta. */
.ourSquareLogo svg,
.ourLineLogo svg {
    display: block;
    width: 1em;
    height: 1em
}

.listing-dot {
    display: inline-block;
    vertical-align: -1px;
    margin-right: 6px;
    flex-shrink: 0
}

.profile-pic {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important
}

.circle {
    border-radius: 50%
}

.badge {
    color: var(--muted-foreground);
    background-color: var(--card);
    line-height: 1em;
    max-width: 55px;
    height: auto;
    padding: 1px 5px 2px;
    top: 0;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px
}

.square-badge {
    display: inline;
    border: none;
    padding: 4px 8px;
    vertical-align: middle;
    color: #f0f0f0;
    font-weight: 600;
    font-size: 12px;
    background-color: #666;
    border-radius: 8px
}

.large-list UL {
    list-style-type: none;
    margin: 0px 15px;
    padding: 0
}

.large-list UL LI {
    margin: 25px 0
}

.large-list UL LI a {
    font-size: 18px;
    font-weight: 600 !important;
    vertical-align: middle;
    margin-right: 5px
}

.content404 {
    margin-top: 100px !important
}

.green-tag {
    background: var(--primary);
    padding: 2px 8px;
    font-size: 13px;
    color: var(--primary-foreground);
    border-radius: 3px
}

*::after,
*::before {
    box-sizing: border-box
}

.full-width {
    width: 100%
}

.full-width-minus10 {
    width: calc(100% - 10px)
}

.row-1-4 {
    width: 25%
}

.row-1-3 {
    width: 33%
}

.row-1-2 {
    width: 50%
}

.row-3-4 {
    width: 75%
}

.row-1-4,
.row-1-2,
.row-3-4,
.row-1-3 {
    padding: 0 10px
}

.top-spacer {
    padding-top: 30px
}

.no-white-space {
    margin-left: -4px
}

.no-white-space:first-child {
    margin-left: 0px
}

.no-white-space:nth-last-child(1) {
    margin-right: 0px
}

.display-none {
    display: none !important
}

.margin-top {
    margin-top: 10px !important
}

.margin-bottom {
    margin-bottom: 10px !important
}

.margin-left {
    margin-left: 10px !important
}

.bw-bckg {
    -webkit-filter: grayscale(100%) !important;
    filter: gray !important;
    transition-duration: 1s
}

.regular-page-wrapper {
    width: 100%;
    margin-top: 110px
}

.expand-post-page .page-content {
    max-width: 1248px !important
}

.expand-post-page .location-info {
    max-width: calc(1240px - 110px);
    padding: 0 55px;
    margin: 0 auto;
    line-height: 60px;
    font-weight: 600;
    font-size: 14px
}

.page-content {
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.5
}

.page-content-bottom {
    background: var(--muted);
    padding: 20px 20px 0px 20px !important
}

.page-top-nav-bar UL {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none
}

.page-top-nav-bar UL LI {
    padding: 0 10px;
    margin: 0
}


.btn-badge {
    position: absolute;
    height: 1.9rem;
    width: 1.9rem;
    line-height: 1.62rem;
    top: -6px;
    right: -12px;
    text-align: center;
    border-radius: 50%;
    color: white;
    border: 2px solid #fff;
    font-weight: 600;
    font-size: 11px;
    z-index: 100
}

.mdl-button--accent.mdl-button--accent.mdl-button--raised,
.mdl-button--accent.mdl-button--accent.mdl-button--fab {
    background-color: var(--primary);
    color: #fff
}

.mdl-checkbox__label {
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    position: relative
}

.btn--link {
    color: #2c2d30
}

.btn--link:hover {
    color: var(--primary-foreground);
    background: var(--primary-hover);
    border-radius: 3px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1)
}

.warning {
    color: var(--destructive)
}

.timeline-date {
    padding: 20px 0px
}

.mdl-checkbox {
    vertical-align: top;
    height: auto
}

.bold {
    font-weight: 700
}

.semibold {
    font-weight: 600
}

.normal {
    font-weight: 500
}

.thin {
    font-weight: 400
}

.thinest {
    font-weight: 100
}

.text_center {
    text-align: center !important
}

.text_right {
    text-align: right !important
}

.text_left {
    text-align: left !important
}

.gray-light-color {
    color: var(--muted-foreground)
}

.gray-lighter-color {
    color: var(--muted)
}

.orange-text {
    color: #EF6C00 !important
}

.light-blue-color {
    color: #1da1f2
}

.purple-color {
    color: #6a148e
}

.lime-green-color {
    color: #41C6BC
}

.baby-blue-color {
    color: #69aff4
}

.blue {
    background: var(--primary)
}

.red {
    background: #ff5a5f
}

.green {
    background: var(--primary)
}

.lowercase {
    text-transform: lowercase
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.margin_left {
    margin-left: 10px
}

.padding_right {
    padding-right: 20px
}

.nav-padding-fix {
    padding-right: 12px !important
}

.border__top {
    border-top: 1px solid var(--border)
}

.no__border {
    border: none !important
}

.item-selected {
    background-color: #e4696b;
    color: #fff
}

.overflow-visible {
    overflow: visible !important
}

.overflow-visible .open>.dropdown-menu {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400px
}

.user-current-nav {
    color: #f00
}

.btn-processing {
    color: rgba(0, 0, 0, 0.1) !important;
    background-image: url("../img/ajax-loader-btn.gif") !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px
}

.processing {
    color: rgba(0, 0, 0, 0.1) !important;
    background-image: url("../img/ajax-loader-btn.gif") !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px;
    display: inline-block
}

.inline-block {
    display: inline-block
}

.long-date {
    display: inline-block
}

.short-date {
    display: none
}

.dtp-select-year-after,
.dtp-select-year-before {
    display: none
}

.btn-sm {
    margin-left: 8px
}

.dtp-actual-year,
.dtp-close {
    display: none !important
}

.dtp-actual-day {
    font-size: 18px;
    padding: 10px
}

.dtp .p10>a {
    color: #fff
}

.icon-calendar-invitation {
    color: var(--accent-foreground)
}

#nav-notifications {
    display: none
}

#animated-example {
    display: inline-block
}

.animated {
    animation-delay: .5s;
    -webkit-animation-duration: 1s;
    animation-duration: 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-20%);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 0;
        transform: translateX(0)
    }

    50% {
        opacity: 1;
        transform: translateX(40px) scale3d(.8, .8, .8) rotate(45deg)
    }

    100% {
        opacity: 0;
        transform: translateX(40px) scale3d(.8, .8, .8) rotate(45deg)
    }
}

.fadeOutRight {
    animation-name: fadeOutRight
}

/* 2026-09-06 — kalkulator kredita na strani oglasa je bio VIDLJIV, pa je na 1,5s skakao
   na translateY(-20%) i opacity 0 i tek onda ulazio: animacija nema fill-mode, pa pre svog
   kašnjenja element stoji u svom normalnom stanju. Korisnik je do tada već čitao ratu.
   Animacija je uklonjena; overflow ostaje, on drži izgled bloka. */
.slideInFromTop {
    overflow: hidden
}

.intl-tel-input.iti-container {
    z-index: 100000 !important
}

.btn {
    margin-bottom: 0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

#nav-messages .nav-badge {
    background-color: #ccc;
    min-height: 22px;
    min-width: 18px
}

#nav-messages .nav-badge.red {
    background: #ff5a5f !important
}

.nav-badge {
    display: inline-block;
    line-height: initial;
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 4px
}

.image-view-buttons .btn-normal {
    padding: 8px 24px !important
}

.hp_action_btn {
    -webkit-font-smoothing: antialiased;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0px;
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    padding: 12px 28px;
    cursor: pointer;
    height: auto;
    line-height: 22px;
    color: var(--primary-foreground);
    background-color: var(--primary);
    margin: 24px 0px 16px;
    border: none;
    border-radius: 8px;
    transition: all .2s ease 0s
}

.hp_action_btn:hover {
    background-color: var(--primary-hover)
}

.btn-small {
    padding: 6px 12px
}

.btn-standard {
    padding: 14px 24px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0
}

.action-btn {
    background-color: var(--muted);
    display: inline-block;
    border: solid 1px var(--border);
    padding: 6px 10px;
    outline: 0;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    line-height: normal;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    color: var(--foreground)
}

.action-btn:hover {
    background-color: var(--muted)
}

.action-btn:active {
    background-color: #e9e9e9
}

.btn-normal,
.link-btn {
    padding: 12px 24px;
    font-size: 15px
}

.btn_green_b {
    border: 2px solid var(--primary) !important
}

.btn_green_b:hover,
.btn_green_b:active {
    border-color: var(--primary-hover) !important
}

.auth-btn {
    width: 265px;
    font-size: 15px;
    height: 40px;
    padding: 9px 16px;
    font-weight: 600
}

.btn-facebook {
    color: #fff;
    background-color: #4a6bb2;
    border-color: #4a6bb2
}

.btn-facebook .auth-btn__icon-container {
    border-right: 1px solid #3c5793
}

.btn-facebook:hover {
    background-color: #214796;
    border-color: #214796
}

.btn-google {
    background-color: var(--card);
    border: 1px solid var(--border);
    margin-bottom: 15px
}

.btn-google .auth-btn__icon-container {
    border-right: 1px solid var(--border);
    margin-left: -25px
}

.btn-google:hover {
    border-color: var(--border)
}

.auth-btn__icon--google {
    background: url(../img/google-sign-in.png);
    display: inline-block;
    zoom: 1;
    width: 18px;
    height: 18px
}

.auth-btn__icon-text-container {
    text-align: center;
    display: inline-flex
}

.auth-btn__icon-container {
    border-right: 1px solid #3c5793;
    margin-right: 13px;
    height: 20px;
    margin-left: -13px;
    width: 36px
}

.auth-btn__icon-container .icon {
    top: 1px !important;
    margin: 0 !important;
    width: 40px
}

.link-btn {
    color: var(--kaza);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700
}

.link-btn-blue {
    color: var(--accent-foreground);
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    text-transform: capitalize;
    text-decoration: underline;
    padding: 0
}

.btn-light-blue {
    background-color: #00b9ff
}

.btn-green {
    background-color: var(--primary)
}

.btn-sign-in:active {
    background: #000 !important
}

.btn-sign-in:hover {
    background-color: var(--secondary-foreground) !important
}

.btn-green:hover {
    background: var(--primary-hover) !important
}

/* Phase 10c (2026-05-19): "Postavi oglas" header CTA — dialed back
   to Zillow-style restraint. Same compact size as other nav items
   (btn-small), brand green for recognizability, "+" icon for
   affordance. No bold, no shadow, no letterspacing — those made
   the button feel chunky and out-of-place next to the lean nav. */
.btn-post-listing .btn-post-icon {
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    line-height: 1;
}

/* Phase 10d (2026-05-19) + Phase 11.1 (2026-05-19): on phone widths
   (≤480px), drop the text label and show just the "+" icon — but
   ONLY for logged-out users, who still have globe + login + hamburger
   crowding the bar. Logged-in users (Phase 11) collapsed everything
   into the drawer so the pill has room to show its full label
   ("Oglasi nekretninu" / "List your property" / "Подать объявление").
   aria-label on the parent <a> keeps screen-reader accessibility
   intact either way. */
@media (max-width: 480px) {
    body:not(.logged-in) .btn-post-listing .btn-post-text {
        display: none;
    }
    body:not(.logged-in) .btn-post-listing .btn-post-icon {
        margin-right: 0;
        font-size: 16px;
        font-weight: 600;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Phase 11 (2026-05-19): mobile hamburger + slide-in drawer.

   Industry-standard right-side drawer. Active <=600px. Solves the
   globe-icon-wraps-under-logo bug on iPhone-width viewports for
   logged-in users with crowded nav-rightGroup items.
   Logged-out users keep the language switcher in the main bar
   (their bar has fewer items, so no wrapping). The hamburger always
   shows; the drawer is the universal shelter for browse/account links.
   ─────────────────────────────────────────────────────────────────── */
.nav-hamburger {
    display: none;
    background: transparent;
    border: 0;
    padding: 0 12px;
    height: 49px;
    cursor: pointer;
    color: var(--foreground);
    align-items: center;
}
.nav-hamburger:hover { color: #ff5a5f; }

/* 2026-05-19 Phase 11.4: graceful nav degradation across widths.
   Above 1200: full nav (Kupi/Iznajmi/Pronađi agenciju/Analiza tržišta + full right group).
   1051-1200: drop "Analiza tržišta" first (longest left-nav item) to recover space.
   ≤1050: hamburger takes over; all secondary right-side items collapse into drawer.
   Russian labels in the right group (Сообщения, Мой аккаунт, Уведомления) overflow
   sooner than Serbian/English, so these thresholds give some headroom for the
   widest copy. */
@media (max-width: 1200px) {
    #nav-trziste { display: none !important; }
}
@media (max-width: 1050px) {
    .nav-hamburger { display: inline-flex; }
    /* Logged-in: collapse all secondary nav items into the drawer */
    body.logged-in #nav-lang,
    body.logged-in #nav-my-properties,
    body.logged-in #nav-notifications,
    body.logged-in #nav-my-account,
    body.logged-in #nav-messages,
    body.logged-in #register,
    body.logged-in #login { display: none !important; }
    /* Logged-out: hide only logged-in-specific items;
       keep lang + login visible because the bar has room. */
    body:not(.logged-in) #nav-my-properties,
    body:not(.logged-in) #nav-notifications,
    body:not(.logged-in) #nav-my-account,
    body:not(.logged-in) #nav-messages,
    body:not(.logged-in) #register { display: none !important; }
}

.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 110;
    opacity: 0;
    transition: opacity .2s ease-out;
    pointer-events: none;
}
.mobile-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    max-width: 320px;
    /* 100vh is wrong on iOS Safari — it counts the URL bar height,
       so the bottom items fall under the visible viewport and the
       user can't reach them. Use 100dvh (dynamic viewport) where
       supported, fall back to 100vh for older browsers. */
    height: 100vh;
    height: 100dvh;
    background: var(--card);
    z-index: 120;
    transform: translateX(100%);
    transition: transform .25s ease-out;
    overflow-y: auto;
    box-shadow: -2px 0 12px rgba(0,0,0,.15);
    -webkit-overflow-scrolling: touch;
    /* Prevent scroll chaining: when the drawer scroll hits its top
       or bottom, do NOT bubble the scroll to the body underneath. */
    overscroll-behavior: contain;
    /* Make the drawer a flex column so the inner <nav> can shrink
       to fill remaining height and own its own scroll context. */
    display: flex;
    flex-direction: column;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer-nav {
    flex: 1 1 auto;
    min-height: 0;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    min-height: 64px;
}
.mobile-drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.mobile-drawer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 20px;
    flex-shrink: 0;
}
.mobile-drawer-userinfo {
    min-width: 0;
    overflow: hidden;
}
.mobile-drawer-username {
    font-weight: 600;
    color: var(--foreground);
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-drawer-useremail {
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Mobile drawer renders BOTH auth states; body.logged-in (toggled by loggedInCleanup/
   loggedOutCleanup on AJAX login/logout) reveals the right one so it updates without a refresh. */
body:not(.logged-in) .drawer-when-logged { display: none !important; }
body.logged-in .drawer-when-guest { display: none !important; }
.mobile-drawer-close {
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--muted-foreground);
    cursor: pointer;
    padding: 0 8px;
    margin-left: 8px;
    flex-shrink: 0;
    /* 2026-09-05 — dodirna meta: bilo 32x28 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
.mobile-drawer-close:hover { color: var(--foreground); }

.mobile-drawer-nav {
    padding: 8px 0;
}
.mobile-drawer-nav a,
.mobile-drawer-nav button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    color: var(--foreground);
    font-size: 15px;
    text-decoration: none;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
}
.mobile-drawer-nav a:hover,
.mobile-drawer-nav button:hover {
    background: var(--muted);
    color: var(--foreground);
    text-decoration: none;
}
.mobile-drawer-nav .drawer-row-wrap {
    width: 100%;
}
.mobile-drawer-nav .drawer-row-wrap a {
    padding: 14px 18px;
}
.mobile-drawer-nav .drawer-separator {
    border-top: 1px solid var(--border);
    margin: 6px 0;
}
.mobile-drawer-nav .drawer-section-label {
    padding: 10px 18px 4px;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted-foreground);
    letter-spacing: .03em;
    font-weight: 600;
}
.mobile-drawer-nav .drawer-badge {
    display: inline-block;
    min-width: 22px;
    padding: 2px 8px;
    background: #ff5a5f;
    color: #fff;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}
.mobile-drawer-nav .drawer-lang-row {
    display: flex;
    gap: 8px;
    padding: 8px 18px 14px;
}
.mobile-drawer-nav .drawer-lang-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2026-09-05 — dodirna meta: bilo ~46x31 */
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--muted-foreground);
    text-decoration: none;
    font-weight: 500;
    width: auto;
}
.mobile-drawer-nav .drawer-lang-chip:hover {
    background: var(--muted);
    color: var(--foreground);
    border-color: var(--border);
}
.mobile-drawer-nav .drawer-lang-chip.is-active {
    border-color: var(--foreground);
    color: var(--foreground);
    font-weight: 600;
    background: var(--card);
}

/* Phase 11.1: primary CTA inside the drawer (green pill, same brand
   green as the header bar CTA). Justify-content:flex-start so the
   "+ Oglasi nekretninu" text reads naturally instead of stretching. */
.mobile-drawer-nav a.drawer-primary-cta {
    margin: 10px 18px 6px;
    padding: 12px 16px;
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: 8px;
    font-weight: 600;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
}
.mobile-drawer-nav a.drawer-primary-cta:hover {
    background: var(--primary-hover);
    color: var(--primary-foreground);
}
.mobile-drawer-nav a.drawer-primary-cta .btn-post-icon {
    font-size: 18px;
    line-height: 1;
    margin-right: 0;
}

body.drawer-open { overflow: hidden; }

.btn-light-blue:active {
    background: #00a7e6 !important
}

.btn-light-blue:hover {
    background: #00b2f5 !important
}

.btn-red {
    background-color: var(--primary)
}

.btn-red,
.btn-green,
.btn-light-blue,
.btn-transparent {
    font-weight: 600;
    position: relative;
    color: white;
    transition: all 0.2s ease;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.btn-red,
.btn-green {
    color: #fff
}

.btn-red:hover,
.btn-green:hover {
    background: var(--primary-hover) !important;
    color: #fff
}

.btn-red:active,
.btn-green:active {
    background: var(--color-primary-dark) !important;
    color: var(--primary-foreground);
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
    transition: none
}

.btn-dark {
    font-weight: 600;
    color: #fff;
    background: var(--foreground) !important;
    transition: all 0.2s ease;
    text-rendering: optimizeLegibility
}

.btn-dark:hover {
    background: var(--secondary-foreground) !important
}

.btn-dark:active {
    background: #000 !important
}

.btn-sign-in {
    font-weight: 600;
    color: #fff;
    background: var(--foreground) !important;
    transition: all .1s ease-out 0s;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.btn-standard {
    font-weight: 600;
    color: var(--primary-foreground);
    background: #777
}

.btn-standard:hover {
    background: #6a6a6a
}

.btn-standard:active {
    background: #515151
}

.btn-add-a-post {
    background-color: var(--card);
    border: 1px solid var(--input);
    position: relative;
    color: var(--secondary-foreground);
    align-self: center;
    font-weight: 600;
    transition: all 0.2s ease
}

.btn-add-a-post:hover {
    background-color: var(--muted);
    border-color: var(--secondary-foreground)
}

.btn-add-a-post:active {
    background-color: var(--secondary);
    border-color: var(--secondary-foreground)
}

.btn-add-a-post a {
    font-weight: 700
}

.btn-divider-left {
    border-left: 1px solid var(--border)
}

.btn-divider-right {
    border-right: 1px solid var(--border)
}

.btn-header,
.btn-header-items,
.btn-header-save {
    cursor: pointer;
    line-height: 49px;
    font-weight: 600;
    position: relative
}

.btn-header-items,
.btn-header-save {
    width: auto
}

.btn-header-items {
    border: 1px solid var(--border);
    border-radius: 3px;
    line-height: 36px;
    margin: 0 4px;
    background: var(--card);
    font-size: 14px;
    transition: border-color .15s, background-color .15s
}

.file-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 0 !important;
    cursor: pointer
}

::-webkit-file-upload-button {
    cursor: pointer
}

input[type=file] {
    cursor: pointer
}

#logged-section {
    display: flex;
    cursor: pointer;
    line-height: 49px;
    font-size: 13px;
    position: relative;
    font-weight: 700;
    width: auto;
    align-items: center
}

#logged-section a:hover {
    color: var(--secondary-foreground)
}

#logged-section:hover {
    background-color: var(--card)
}

.btn-header {
    display: flex;
    outline: 0;
    padding: 0 14px
}

.btn-header:hover {
    background-color: var(--muted)
}

.btn-header:active {
    background-color: var(--secondary)
}

/* Language switcher */
.lang-switcher {
    position: relative;
    padding: 0 10px;
    overflow: visible
}

.lang-switcher:hover {
    background-color: transparent
}

.lang-switcher-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 49px;
    cursor: pointer
}

.lang-globe-icon {
    width: 20px;
    height: 20px;
    color: var(--foreground);
    transition: opacity .15s ease
}

.lang-switcher-toggle:hover .lang-globe-icon {
    opacity: .6
}

.lang-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 9999;
    min-width: 160px;
    background-color: var(--popover);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    overflow: hidden;
    height: auto !important;
    margin-top: 2px;
    line-height: normal;
    padding: 4px 0
}

.lang-switcher.open .lang-dropdown {
    display: block
}

a.lang-option,
.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background .15s ease;
    text-decoration: none;
    line-height: 1.4;
    background-color: var(--card)
}

a.lang-option:hover,
.lang-option:hover {
    background: var(--muted);
    color: var(--muted-foreground);
    text-decoration: none
}

.lang-active {
    font-weight: 600;
    color: var(--foreground)
}

.lang-code {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-foreground);
    width: 20px
}

.lang-active .lang-code {
    color: var(--foreground)
}

.lang-check {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--foreground)
}

.no-hover:hover {
    background-color: var(--card)
}

.btn-header-items:hover {
    background-color: var(--muted);
    border-color: var(--border);
    color: var(--foreground)
}

.btn-header-items:active {
    background-color: var(--secondary);
    border-color: var(--border);
    color: var(--foreground)
}

/* Sticky submit bar (shared: add + edit pages) */
.sticky-submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 200;
    display: none;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08)
}

/* 2026-07-26 — the ownership attestation, mirrored into the sticky bar. It is
   required to publish but lives further up the page, and this bar only appears
   once that section has scrolled away — so pressing Objavi here used to fail on
   an off-screen checkbox. Kept deliberately compact: one line above the buttons. */
.sticky-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--secondary-foreground);
    margin-bottom: 8px;
    cursor: pointer
}
/* Selector is deliberately over-specific. pages/add.css (loaded AFTER style.css,
   and applying to BOTH /add and /edit — each calls formPageStylesByPlatform("add-page"))
   sets on `.add-page #page-3 input`:
       height: auto      → rendered the box 18x13 instead of square
       margin-top: 5px   → pushed it out of line with the first row of text
   That selector is (0,1,1,1). A plain `.sticky-terms input` is (0,0,1,1) and lost;
   `#sticky-submit-bar .sticky-terms input` merely TIES and still loses on source
   order. The [type] attribute takes this to (0,1,2,1), which wins outright. */
#sticky-submit-bar .sticky-terms input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer
}

/* 2026-08-31 — the attestation is the block most publishers actually meet, and the
   error used to land on the copy up top while the box in front of them stayed grey
   (see page-add.js checkPageValidity3). Mark the mirrored one so the blocker is
   red where the button is. Same #e04848 as .field-invalid. */
.sticky-terms.sticky-terms-invalid {
    color: var(--destructive)
}
#sticky-submit-bar .sticky-terms.sticky-terms-invalid input[type="checkbox"] {
    accent-color: var(--destructive);
    outline: 2px solid var(--destructive);
    outline-offset: 1px
}
/* 2026-09-19 — kopija kvacice uz dugme gosta (#guest-terms), isti izgled kao lepljiva;
   selektor (0,1,1,1)+[type] da pobedi .add-page #page-3 input iz pages/add.css */
/* li je inline-block na racunaru (pages/add.css:860); kvacica mora u svoj red, preko cele sirine */
.add-page #add-continue-container .guest-terms-li { display: block; width: 100%; margin-right: 0; }
#guest-terms { margin: 0 0 10px; font-size: 13px; text-align: left; }
#page-3 #guest-terms input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); cursor: pointer }
#page-3 #guest-terms.sticky-terms-invalid input[type="checkbox"] { accent-color: var(--destructive); outline: 2px solid var(--destructive); outline-offset: 1px }

/* 2026-08-31 — the address requirement, stated above the fields. Same family as
   .option-desc but darker and set off, because it is a rule the visitor needs
   BEFORE typing, not a footnote after the button. */
.addr-required-note.addr-required-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--accent);
    border-left: 3px solid var(--primary);
    border-radius: 0 6px 6px 0;
    color: var(--secondary-foreground);
    font-size: 13px;
    line-height: 1.45
}

/* "Zgrada nema broj (bb)" — the escape hatch from the most common step-1 block. */
.no-street-no-wrap {
    margin: 6px 0 0
}
.no-street-no-link {
    display: inline-block;
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 2px
}
.no-street-no-link:hover,
.no-street-no-link:focus {
    color: var(--accent-foreground)
}

/* 2026-09-05 — dodirna meta. Sama veza je visoka 28px (13px slog + 2x4 razmaka),
   a to je prekidač „nema broja" na koraku gde su ulica i broj obavezni. Umesto da
   joj dižem visinu i pomerim obrazac, dodajem nevidljivu zonu od 44px centriranu
   na tekst. Izmereno na 390: bilo 135x28. */
.no-street-no-link {
    position: relative
}

.no-street-no-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%)
}

@media (max-width: 480px) {
    .sticky-submit-bar {
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px))
    }
}
.sticky-submit-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center
}
.sticky-submit-inner .btn-publish,
.sticky-submit-inner .btn-save-draft {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0
}

.btn-header-save {
    background-color: var(--kaza);
    color: #fff
}

.btn-header-save:hover {
    box-shadow: inset 3px 3px 37px -9px rgba(0, 0, 0, 0.75)
}

.btn-header-save:active {
    background-color: var(--kaza)
}

input,
select,
textarea {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--input);
    font-size: 16px;
    max-width: 100%;
    box-sizing: border-box
}

input[type="text"]:disabled {
    background: var(--muted)
}

input[type="textarea"]:disabled {
    background: var(--muted)
}

input[disabled]:hover {
    border: 1px solid var(--border) !important
}

.pac-container {
    margin-left: -16px;
    margin-top: 1px;
    border: 1px solid var(--border);
    border-top: none;
    box-shadow: 0 1px 3px 0 #eee
}

.pac-item {
    line-height: 44px;
    font-size: 14px;
    padding-left: 15px;
    border: none;
    cursor: pointer
}

.pac-item-query {
    font-size: 14px
}

.pac-icon-marker {
    display: none
}

.pac-item-query {
    color: var(--secondary-foreground);
    font-weight: 700
}

.pac-item:hover .pac-item-query {
    background-color: var(--muted);
    color: var(--foreground)
}

.pac-item:hover {
    background-color: var(--muted);
    color: var(--foreground)
}

.pac-item-selected .pac-item-query,
.pac-item-selected {
    background-color: var(--muted);
    color: var(--foreground)
}

input:focus {
    outline: none
}

input:hover:not(.field-invalid),
textarea:hover:not(.field-invalid),
select:hover:not(.field-invalid) {
    border-color: var(--ring)
}

input:focus:not(.field-invalid),
textarea:focus:not(.field-invalid),
select:focus:not(.field-invalid) {
    border-color: var(--ring);
    outline: none;
    box-shadow: 0 0 0 1px var(--ring)
}

input:focus,
select:focus,
textarea:focus {
    outline: 0
}

.mdl-radio__button {
    padding: 0 !important
}

.custom-option-header {
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    background-color: var(--popover);
    border: 1px solid var(--input);
    border-radius: 8px
}

.custom-option-header-value {
    padding: 12px 14px
}

.custom-option-header:hover {
    border-color: var(--ring)
}

.custom-option-header:hover .icon-menu-arrow-down {
    color: var(--foreground)
}

.custom-option-header div,
.custom-option-header i {
    display: inline-block
}

.icon-menu-arrow-down,
.icon-menu-arrow-up {
    font-size: 10px;
    line-height: 1
}

.custom-option-header .icon-menu-arrow-down,
.custom-option-header .icon-menu-arrow-up {
    position: relative;
    top: -1px;
    right: 2px
}

.custom-option-header-value {
    min-width: 43px
}

.custom-option {
    background-color: var(--popover);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
    color: var(--secondary-foreground);
    display: none;
    font-weight: 400;
    left: 0;
    position: absolute;
    text-transform: none;
    width: auto;
    z-index: 5;
    overflow: visible;
    min-width: 100px
}

.custom-option li,
.custom-option ol,
.custom-option ul {
    list-style: none
}

ol.custom-option,
ul.custom-option {
    padding-left: 0;
    list-style-type: none;
    margin: 0
}

.custom-option li {
    line-height: 27px;
    padding: 5px 12px;
    cursor: pointer
}

.custom-option li:hover {
    background: #fc384a none repeat scroll 0 0;
    color: #fff !important
}

.custom-option-show {
    display: block
}

.disabled,
.disabled:hover,
.disabled:focus {
    color: #f2f2f2 !important;
    background-color: #ccc !important;
    cursor: default !important;
    opacity: .6;
    pointer-events: none
}

.secondary,
.secondary:focus {
    color: var(--secondary-foreground) !important;
    background: var(--card) !important;
    border: 1px solid var(--input) !important
}

.secondary:hover {
    background: var(--muted) !important;
    border-color: var(--border) !important
}

.secondary:active {
    background: var(--secondary) !important;
    border-color: var(--secondary-foreground) !important
}

.custom-dropdown-container {
    display: inline-block;
    max-width: 320px;
    position: relative;
    white-space: nowrap;
    width: auto
}

input::-webkit-input-placeholder {
    color: var(--muted-foreground) !important
}

input:-moz-placeholder {
    color: var(--muted-foreground) !important
}

input::-moz-placeholder {
    color: var(--muted-foreground) !important
}

.checkbox-disabled * {
    color: #ccc;
    cursor: default !important
}

.checkbox-disabled .mdl-checkbox__box-outline {
    border: 1px solid var(--border) !important;
    background-color: var(--muted) !important
}


.dropdown {
    position: relative;
    display: inline-block
}

.dropdown a:hover {
    color: var(--secondary-foreground)
}

.dropdown-content {
    position: absolute;
    z-index: 200;
    top: 48px;
    height: auto !important;
    left: auto;
    right: 8px;
    display: none;
    min-width: 256px;
    max-width: 460px;
    line-height: normal;
    border-radius: 0 0 2px 2px;
    border: 1px solid var(--border);
    cursor: default
}

.dropdown-content p {
    padding: 15px;
    text-align: left;
    font-size: 14px;
    margin: 0
}

.nav-leftGroup .dropdown-content {
    top: 40px
}

.header-statid-dropdown {
    height: 40px
}

.header-statid-dropdown a {
    padding: 20px 8px !important
}

.hover-item::before {
    border-color: var(--border);
    border-top: 1px solid var(--border);
    content: "";
    height: 1px;
    left: 20px;
    position: absolute;
    right: 20px;
    top: -1px
}

.hover-item {
    margin: 0;
    padding: 20px;
    display: block;
    position: relative
}

.hover-item__content {
    position: relative;
    left: 0;
    transition: left .15s ease-out 0s;
    margin: 0;
    font-weight: 600
}

.hover-item:hover .hover-item__content {
    left: 6px
}

.tooltip-top-right:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -8px;
    right: 31px;
    bottom: auto;
    border: 7px solid transparent;
    border-top: 0;
    border-bottom-color: rgba(0, 0, 0, 0.1)
}

.tooltip-top-right:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: -6px;
    right: 32px;
    bottom: auto;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: #fff
}

.panel {
    background-color: var(--card);
    border-radius: 0
}

.dropdown:hover .dropdown-content {
    display: block
}

.logged-group-name {
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis
}

#info-inplace {
    position: absolute;
    padding: 10px 20px;
    background: var(--muted);
    z-index: 9999;
    border: 1px solid var(--border);
    box-shadow: -3px 9px 18px -6px rgba(0, 0, 0, 0.75);
    border-radius: 3px;
    color: var(--foreground)
}

#info-inplace:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -8px;
    left: 10px;
    bottom: auto;
    border: 7px solid transparent;
    border-top: 0;
    border-bottom-color: var(--border)
}

#info-inplace:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: -6px;
    left: 11px;
    bottom: auto;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: var(--muted)
}

.notice-icon {
    margin-right: 8px;
    display: inline-table;
    vertical-align: top
}

#info-inplace-content {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 300px;
    margin-top: 4px
}

.field-invalid,
input.field-invalid,
textarea.field-invalid,
select.field-invalid,
input.field-invalid:focus,
textarea.field-invalid:focus,
input.field-invalid:hover,
textarea.field-invalid:hover,
select.field-invalid:focus,
select.field-invalid:hover {
    border-color: var(--destructive) !important;
    box-shadow: 0 0 0 1px var(--destructive) !important;
    outline: none !important
}

.custom-dropdown-container.field-invalid .custom-option-header {
    border: 1px solid var(--destructive) !important;
    box-shadow: 0 0 0 1px var(--destructive) !important;
    border-radius: 8px
}

.field-warning-inline {
    position: relative;
    margin-top: 4px;
    margin-bottom: 8px;
    padding: 0;
    background: transparent;
    z-index: 10;
    border: none;
    box-shadow: none;
    color: var(--destructive);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    clear: both
}

.field-warning-inline:before,
.field-warning-inline:after {
    display: none
}

.field-warning-inline-content {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 300px;
    margin-top: 0;
    color: var(--destructive);
    font-size: 13px
}

/* ── Add listing: Publish action group (Airbnb polish) ── */

.publish-action-group {
    margin-top: 40px;
    padding: 32px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06)
}

.publish-trust-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary-foreground);
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 4px;
    padding: 12px 16px;
    background: var(--accent);
    border-radius: 8px
}

.publish-trust-copy svg {
    flex-shrink: 0
}

.publish-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px
}

.btn-publish {
    display: inline-block;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-sizing: border-box
}

.btn-publish:hover {
    background: var(--primary-hover)
}

.btn-publish:active {
    background: var(--color-primary-dark);
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
    transition: none
}

.btn-save-draft {
    display: inline-block;
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    background: var(--card);
    color: var(--secondary-foreground);
    border: 1px solid var(--input);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-sizing: border-box
}

.btn-save-draft:hover {
    background: var(--muted);
    border-color: var(--secondary-foreground)
}

.btn-save-draft:active {
    background: var(--secondary);
    border-color: var(--secondary-foreground)
}

.btn-cancel-text {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--muted-foreground);
    font-size: 14px;
    margin-top: 4px;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
    text-align: left
}

.btn-cancel-text:hover {
    color: var(--secondary-foreground)
}

.btn-publish.disabled,
.btn-save-draft.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed
}

.btn-cancel-text.disabled {
    opacity: 0.4;
    pointer-events: none
}

.badge-free {
    display: inline-block;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.3px
}

.photo-callout {
    background: var(--accent);
    border-left: 3px solid var(--primary);
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--secondary-foreground);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04)
}

.photo-callout svg {
    flex-shrink: 0
}

.photo-callout strong {
    color: var(--primary)
}

.contact-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    margin-bottom: 8px
}

.contact-summary-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.contact-summary-info {
    flex: 1;
    min-width: 0
}

.contact-summary-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--foreground);
    margin-bottom: 2px
}

.contact-summary-details {
    font-size: 13px;
    color: var(--muted-foreground);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px
}

.contact-summary-details .contact-summary-dot {
    color: var(--muted-foreground)
}

.contact-summary-check {
    flex-shrink: 0;
    margin-left: auto
}

/* ── Mobile responsive for add listing polish ── */@media (max-width: 600px) {
    .publish-action-group {
            margin-top: 24px;
            padding: 20px 16px;
            border-radius: 10px
        }


    /* Contact section: readonly inputs look like plain text */


    /* Step progress indicator — modern pill style */
    .step-progress {
        padding: 32px 20px 24px;
        max-width: 640px;
        margin: 0 auto;
        box-sizing: border-box
    }
    .step-progress__track {
        display: flex;
        align-items: center;
        justify-content: center
    }
    .step-progress__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        cursor: default
    }
    .step-progress__circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 600;
        border: 2px solid var(--border);
        background: var(--card);
        color: var(--muted-foreground);
        transition: all 0.3s ease
    }
    .step-progress__label {
        margin-top: 8px;
        font-size: 13px;
        color: var(--muted-foreground);
        white-space: nowrap;
        transition: color 0.3s ease
    }
    .step-progress__line {
        flex: 1;
        height: 2px;
        background: var(--border);
        margin: 0 12px;
        margin-bottom: 28px;
        min-width: 40px;
        transition: background 0.3s ease
    }

    /* Active step */
    .step-progress__item--active .step-progress__circle {
        border-color: var(--primary);
        background: var(--primary);
        color: #fff
    }
    .step-progress__item--active .step-progress__label {
        color: var(--primary);
        font-weight: 600
    }

    /* Completed step */
    .step-progress__item--completed .step-progress__circle {
        border-color: var(--primary);
        background: var(--primary);
        color: #fff
    }
    .step-progress__item--completed .step-progress__label {
        color: var(--secondary-foreground)
    }
    .step-progress__line--completed {
        background: var(--primary)
    }

    /* Clickable completed steps */
    .step-progress__item--completed {
        cursor: pointer
    }
    .step-progress__item--completed:hover .step-progress__circle {
        transform: scale(1.1);
        box-shadow: var(--ring-shadow)
    }


    /* Mobile: smaller circles, hide labels */

@media (max-width: 480px) {
    .step-progress { padding: 20px 16px 16px }
    .step-progress__circle { width: 30px; height: 30px; font-size: 13px }
    .step-progress__label { font-size: 11px }
    .step-progress__line { min-width: 24px; margin: 0 8px; margin-bottom: 24px }
}


    /* Step back link — top-left arrow link (Airbnb style) */
    .step-back-link,
    .step-back-link:visited {
        display: inline-block;
        margin-bottom: 16px;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text);
        text-decoration: none;
        cursor: pointer
    }
    .step-back-link:hover {
        text-decoration: underline
    }


    /* Input with suffix/prefix (m², €, calendar icon) */
    .input-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: 480px
    }
    .input-wrap input {
        flex: 1;
        min-width: 0
    }
    .input-wrap .input-suffix,
    .input-wrap .input-prefix {
        color: var(--muted-foreground);
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 36px
    }
    .input-wrap .input-suffix.select-date {
        cursor: pointer
    }


}

/* Photo upload zone */
.photo-upload-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    cursor: default;
    transition: all 0.2s ease;
    background: var(--muted)
}
.photo-upload-zone:hover {
    border-color: var(--color-primary);
    background: var(--accent)
}
.photo-upload-zone__empty {
    display: flex;
    flex-direction: column;
    align-items: center
}
@media (max-width:750px) {
    .photo-upload-zone {
        cursor: pointer
    }
}


    /* Modal buttons: always pointer cursor */
    .window-content .btn,
    .window-content [id$="-yes"],
    .window-content [id$="-no"] {
        cursor: pointer !important
    }


    /* Contact section: display values as plain text */
    .contact-value {
        font-weight: 600;
        font-size: 16px;
        color: var(--foreground);
        padding: 8px 0;
        line-height: 1.4
    }
@media (max-width: 480px) {
    .publish-trust-copy {
            font-size: 13px;
            padding: 10px 12px
        }
    .publish-actions {
            flex-direction: column
        }
    .publish-actions .btn-publish {
            display: block;
            width: 100%;
            padding: 14px 24px;
            font-size: 16px
        }
    .publish-actions .btn-save-draft {
            display: block;
            width: 100%;
            padding: 12px 24px;
            font-size: 15px
        }
    .sticky-submit-inner .btn-publish,
    .sticky-submit-inner .btn-save-draft {
            padding: 12px 8px;
            font-size: 14px
        }
    .btn-cancel-text {
            text-align: center
        }
    .contact-summary {
            padding: 12px 14px;
            gap: 10px;
            border-radius: 10px
        }
    .contact-summary-avatar {
            width: 36px;
            height: 36px;
            min-width: 36px
        }
    .contact-summary-name {
            font-size: 14px
        }
    .contact-summary-details {
            font-size: 12px
        }
    .photo-callout {
            padding: 10px 12px;
            font-size: 13px
        }
}


@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.places-page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px 60px
}

.places-subtitle {
    font-size: 16px;
    color: var(--muted-foreground);
    margin: 0;
    font-weight: 400
}

.places-featured {
    grid-template-columns: repeat(3, 1fr)
}

.place-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    transition: box-shadow .2s ease, transform .15s ease;
    overflow: hidden
}

.place-card:hover {
    text-decoration: none;
    color: inherit
}

.place-card-featured {
    background: var(--card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border)
}

.place-card-featured:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px)
}

.place-card-img {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #e8e8e8
}

.place-card-img-fallback {
    background: linear-gradient(135deg, var(--muted) 0%, #e0e0e0 100%)
}

.place-card-body {
    padding: 16px 18px 18px
}

.place-card-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 6px;
    letter-spacing: -0.3px
}

.place-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px
}

.place-card-count {
    font-size: 13px;
    color: var(--foreground);
    font-weight: 600
}

.place-card-total {
    font-size: 13px;
    color: var(--muted-foreground);
    font-weight: 400
}

.place-card-cad {
    font-size: 12px;
    color: var(--muted-foreground);
    font-weight: 500;
    margin: -6px 0 10px;
    letter-spacing: -.1px
}

.place-card-cta {
    font-size: 14px;
    color: var(--foreground);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.place-card-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: background .15s ease, box-shadow .15s ease
}

.place-card-compact:hover {
    background: var(--muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)
}

.place-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground)
}

.place-card-badge {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    background: var(--accent);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap
}@media (max-width:900px) {
    .places-featured {
            grid-template-columns: repeat(2, 1fr)
        }


}@media (max-width:600px) {
    .places-featured {
            grid-template-columns: 1fr
        }
    .place-card-img {
            height: 140px
        }
    .places-page-wrapper {
            padding: 12px 16px 40px
        }


}

.hp-cities-wrapper {
    background: var(--muted);
    padding: 48px 0 56px
}

.hp-cities-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px
}

.hp-cities-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
    text-decoration: none
}

.hp-cities-viewall:hover {
    text-decoration: underline
}@media (max-width:600px) {
    .hp-cities-wrapper {
            padding: 36px 0 40px
        }
    .hp-cities-content {
            padding: 0 16px
        }


}

.rb-dropdown {
    padding: 14px 16px
}

.rb-section {
    margin-bottom: 16px
}

.rb-section:last-of-type {
    margin-bottom: 0
}

.rb-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--secondary-foreground);
    margin-bottom: 4px;
    line-height: normal
}

.rb-btn-group {
    display: flex;
    gap: 0
}

.rb-btn {
    flex: 1;
    padding: 10px 0;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--secondary-foreground);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    margin-left: -1px;
    line-height: 1
}

.rb-btn:first-child {
    border-radius: 8px 0 0 8px;
    margin-left: 0
}

.rb-btn:last-child {
    border-radius: 0 8px 8px 0
}

.rb-btn:hover {
    background: var(--muted)
}

.rb-btn-active {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
    position: relative;
    z-index: 1
}

.rb-btn-active:hover {
    background: var(--primary-hover)
}

.rb-apply {
    padding: 8px 0 0;
    line-height: normal
}

.rb-apply .btn {
    width: 100%;
    text-align: center;
    padding: 10px 24px !important;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 4px
}

.container-left,
.container-right {
    width: 50%;
    display: flex;
    margin-bottom: 10px;
    flex-direction: column
}

#share-post {
    display: none !important
}

.image-sort-placeholder {
    display: inline-block;
    width: 115px;
    height: 115px;
    border: 2px dashed var(--primary);
    border-radius: 4px;
    margin: 8px 0px 8px 8px;
    background: var(--accent)
}

.draft-listing {
    border-left: 3px solid #E8890C
}

/* 2026-05-18 — draft rows share the active-listing 4-column layout
   (thumb | content | stats | actions) for visual parity. Drafts have
   no view/save stats, so the stats column is just the orange
   "Nedovršen" pill — center it so it doesn't hug the left edge. */
.draft-listing .ad-stats-container {
    justify-content: center;
    text-align: center;
}
.draft-listing .ad-stats-container .my-ads-status {
    width: 100%;
}

.draft-thumb {
    background-color: var(--muted);
    background-size: cover;
    background-position: center
}

.draft-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%
}

.login-register-block {
    max-width: 480px
}

.login-register-block .block-content {
    padding: 20px;
    white-space: normal
}

.login-register-block .form-field {
    margin-bottom: 15px;
    position: relative
}

.login-register-block .form-full-line {
    width: 100%;
    box-sizing: border-box
}

.login-register-block input {
    height: 38px !important;
    max-width: 100% !important;
    padding: 0 5px 0 37px
}

#header-bar {
    width: 100%;
    position: relative
}

.header-bar-wrapper.header-bar-full {
    height: 100px;
    border-bottom: 1px solid var(--border)
}

.nav-bar {
    flex: 1 1 100%;
    height: 49px;
    position: relative;
    z-index: 8;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.header-bar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: table;
    background-color: var(--card);
    z-index: 100;
    height: 49px;
    line-height: 15px; /* pin: this table-layout bar (cells vertical-align:top) relied on the old
                          body line-height:15px to vertically center the logo. The global body
                          line-height:1.5 fix inflated it to 21px and shifted the logo. Restore it. */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important
}

/* 2026-09-05 — zaglavlje je na telefonu bilo šire od ekrana, pa je dugme menija
   bilo odsečeno 5px na 375. Uzrok NIJE dugme: .header-bar-wrapper je `display: table`,
   dakle skuplja se oko sadržaja, a unutar njega je bočna fioka široka 300px koja
   počinje na 93,5. Zbir je 393,5, tačno koliko je omotač i bio, i meni je zalepljen
   za njegovu desnu ivicu.

   `width: 100%` (red iznad) NE pomaže: tabela se svejedno raširi oko fioke.
   Izmereno na 375: zatečeno 394, sa `width:100%` i dalje 394, sa `100vw` → 375.

   `100vw` je ograđen na telefon namerno: na računaru bi uključio i traku za
   skrolovanje i napravio novo prelivanje. Provereno na 1280: omotač 1280, ne viri. */
@media (max-width: 750px) {
    .header-bar-wrapper {
        width: 100vw
    }
}

.header-bar-wrapper .table-cell {
    display: table-cell;
    vertical-align: top
}

.header-bar-wrapper .btn-header svg {
    margin-left: 3px;
    margin-top: -3px
}

.header-bar-simple {
    padding: 0 calc((100% - 1240px)/ 2)
}

.header-bar-simple .nav-bar {
    box-shadow: none;
    border-bottom: none
}

.header-bar-simple .nav-sections {
    list-style-type: none;
    padding-left: 100px;
    line-height: 20px;
    white-space: nowrap
}

.header-bar-page #header-bar {
    max-width: 1240px;
    margin: 0 auto
}

.header-bar-page .nav-bar {
    box-shadow: none;
    border-bottom: none
}

.header-bar-page .nav-sections {
    list-style-type: none;
    padding-left: 100px;
    line-height: 20px;
    white-space: nowrap
}

.header-bar-full .nav-sections {
    list-style-type: none;
    padding-left: 100px;
    line-height: 20px;
    white-space: nowrap
}

.nav-items-padding {
    padding: 0 8px 0 14px
}

.nav-sections li {
    display: inline
}

.nav-sections li:first-child {
    margin-left: 20px
}

.nav-sections li a {
    margin: 0 5px;
    padding: 8px;
    font-size: 15px
}

.nav-sections li a:hover {
    color: #ff5a5f
}

.nav-leftGroup {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex: 50%
}

.nav-rightGroup {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex: 50%;
    font-size: 13px
}

.nav-rightGroup .icon-nav-margin {
    margin-left: 5px
}

.nav-rightGroup .icon {
    margin-bottom: 1px;
    vertical-align: middle;
    align-self: center
}

.nav-rightGroup .icon-message {
    display: none
}

.nav-rightGroup>div>div {
    height: 100%
}

/* 2026-05-19: Russian "Мой аккаунт" (two words) was breaking onto
   two lines because nothing prevented wrap at the space. Same risk
   for any future 2-word right-group label. */
.nav-rightGroup .btn-header,
.nav-rightGroup .header-cell-item,
.nav-rightGroup .mobile-nav {
    white-space: nowrap;
}

.subNav-rightGroup {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex: 1 0 0
}

#nav-save-search,
#nav-saved-homes {
    font-weight: 700
}

#nav-saved-homes {
    transition: box-shadow 1s
}

.navglow {
    box-shadow: inset 0 0 45px #fff
}

.subNav-leftGroup {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex: 2 0 0
}

#nav-my-account,
#nav-messages,
#nav-help,
#nav-notifications {
    align-items: center;
    height: 48px
}

#icon-profile-image {
    width: 20px;
    height: 20px;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    border-radius: 0px;
    background-size: contain
}

#nav-messages a {
    color: var(--secondary-foreground);
    font-weight: 600;
    outline: 0 !important;
    border: 0 !important
}

#nav-my-properties {
    margin-right: 5px
}

.header-bar-full .search-bar {
    flex-direction: row;
    display: flex;
    z-index: 100;
    white-space: nowrap
}

.header-bar-full .btn-header {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 48px
}

.searchbox-container {
    height: 50px;
    padding-left: 100px;
    display: flex;
    align-items: center
}

.searchbox-container input:focus,
#signup-login-modal input:focus,
.searchbox-container select:focus,
#signup-login-modal select:focus {
    outline: 0;
    border-color: var(--ring);
    box-shadow: 0 0 0 1px var(--ring)
}

.searchbox-container input,
#signup-login-modal input,
.searchbox-container select,
#signup-login-modal select,
.searchbox-container textarea,
#signup-login-modal textarea {
    border: 1px solid var(--input);
    background-color: var(--card)
}

.searchbox-content-container {
    position: absolute;
    bottom: 12px;
    left: 320px;
    background: var(--card)
}

.searchbox-content-container button {
    background: transparent;
    outline: 0
}

.magnify-icon {
    height: 24px;
    padding: 0
}

.searchbox {
    border: 1px solid var(--border);
    min-width: 332px;
    height: 34px;
    font-size: 13px;
    margin-left: 10px;
    padding: 0px 0px 0px 6px
}

.searchbox input {
    height: 34px;
    white-space: nowrap
}

.searchbox-container .listing-type-sale-results,
.searchbox-container .listing-type-rent-results {
    font-size: 12px
}

.searchbox-container .listing-type-text {
    font-weight: 600
}

.searchbox-container ol,
.searchbox-container ul {
    padding-left: 0;
    list-style-type: none;
    margin: 0
}

.searchbox-container li {
    line-height: 27px;
    font-size: 15px !important;
    white-space: nowrap
}

.searchbox-container .mdl-checkbox {
    height: 27px !important
}

.searchbox-container .mdl-checkbox__label {
    font-size: 14px !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.header-cell-item {
    display: inline-flex
}

.footer-cell-item {
    display: flex;
    flex-direction: column;
    align-items: center
}

.footer-cell-item .icon {
    color: var(--kaza);
    font-size: 62px;
    padding-right: 20px;
    margin-bottom: 5px;
    padding-left: 20px
}

.margin-right-headerfooter {
    margin-right: -4px
}

.margin-right-headerfooter:nth-last-child(1) {
    margin-right: 0px
}

.margin-left-headerfooter {
    margin-left: -4px
}

.margin-left-headerfooter:nth-last-child(1) {
    margin-right: 0px
}

.header-footer-cell-item-no-margin {
    margin: 0;
    display: inline-block
}

#footer-wrapper {
    position: relative;
    margin-bottom: 0px;
    margin-top: 20px;
    display: block;
    left: auto;
    bottom: auto;
    border-top: 1px solid var(--border)
}

#footer-wrapper .table-cell {
    display: table-cell;
    vertical-align: middle
}

#footer-wrapper .footer-container {
    display: block
}

#footer-wrapper .footer-logo {
    align-self: center;
    font-weight: bold
}

#footer-wrapper .footer-social {
    display: flex;
    flex-direction: row;
    justify-content: center
}

#footer-wrapper .footer-social .icon {
    font-size: 24px;
    color: var(--foreground);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px
}

#footer-wrapper .footer-top-section {
    display: table;
    margin: 20px auto;
    max-width: 990px;
    padding-top: 20px;
    width: auto
}

#footer-wrapper .footer-bottom-section {
    display: table;
    margin: 15px auto;
    max-width: 990px;
    width: 100%
}

#footer-wrapper .footer-bottom-section .footer-lower-items {
    padding: 12px;
    vertical-align: top
}

#footer-wrapper .footer-bottom-section .footer-lower-items UL {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left !important
}

#footer-wrapper .footer-bottom-section .footer-lower-items a {
    color: var(--muted-foreground);
    cursor: pointer
}

#footer-wrapper .footer-bottom-section .footer-lower-items a:hover {
    color: var(--muted-foreground)
}

.noscroll {
    overflow: hidden
}


.modal-wrapper h1,
.modal-wrapper h2 {
    margin: 0;
    padding: 0;
    line-height: inherit;
    letter-spacing: -1px
}

.modal-wrapper .window-header {
    padding: 20px;
    padding-right: 45px
}

.modal-wrapper .window-content {
    padding: 20px;
    white-space: normal
}

.modal-wrapper .close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    padding: 6px
}

.modal-wrapper .close-modal:hover,
.modal-wrapper .post-modal-header-wrapper UL LI:hover {
    color: var(--kaza)
}

.modal-wrapper .close-modal:active {
    color: var(--kaza)
}

.modal-wrapper .form-inline-half {
    width: 49%;
    display: inline-block;
    box-sizing: border-box;
    text-align: center
}

.modal-wrapper .form-inline-onethird {
    width: 33%;
    display: inline-block;
    padding-right: 1.7%
}

.modal-wrapper .form-full-line {
    width: 100%;
    box-sizing: border-box
}

.modal-wrapper .form-field {
    margin-bottom: 15px;
    position: relative
}

.modal-wrapper .form-field input {
    font-weight: 400;
    font-size: 15px
}

.modal-wrapper .form-full-line-dummy-break-evenodd {
    width: 0%;
    margin-bottom: 0
}

.modal-wrapper .vertical-spacer-small {
    margin-bottom: 5px !important
}

.modal-wrapper .window-footer {
    padding: 0px 20px 20px;
    text-align: right
}

.modal-wrapper .validation {
    margin: 6px 0 0 0;
    line-height: 18px;
    display: flex;
    background: var(--card);
    border: 1px solid var(--destructive);
    color: var(--destructive);
    padding: 10px;
    border-radius: 5px
}

.modal-wrapper .validation .icon {
    margin-right: 8px
}

.modal-wrapper .form-shorter {
    width: 40%
}

.modal-wrapper .form-block {
    display: block
}

.modal-wrapper input,
.modal-wrapper select {
    box-sizing: border-box;
    width: 100%
}

.modal-wrapper .mdl-checkbox__label {
    cursor: pointer;
    font-size: 14px;
    line-height: 22px
}

.choose-separator {
    overflow: hidden !important;
    text-align: center !important
}

.line-break {
    padding-bottom: var(--spacing-rule-text-vertical, 16px) !important;
    padding-top: var(--spacing-rule-text-vertical, 16px) !important;
    padding-left: var(--spacing-rule-text-horizontal, 16px) !important;
    padding-right: var(--spacing-rule-text-horizontal, 16px) !important;
    position: relative !important
}

.line-break:before {
    content: '' !important;
    position: absolute !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--border) !important;
    top: 50% !important;
    right: 100% !important;
    width: 5000px !important
}

.line-break:after {
    content: '' !important;
    position: absolute !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--border) !important;
    top: 50% !important;
    left: 100% !important;
    width: 5000px !important
}

.choose-text {
    margin: 0px !important;
    word-wrap: break-word !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.28571429em !important;
    color: var(--muted-foreground) !important
}


.mask-property-view,
.mask-post-view {
    background-color: #fff;
    opcaity: .9;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 900;
    display: none;
    cursor: default;
    overflow-y: scroll;
    transform: translateZ(0);
    will-change: transform, opacity
}


/* Cancel listing modal — minimal overrides, inherits global input/dropdown styles */
#cancel-listing-modal {
    max-width: 95%;
    width: 500px;
    border-radius: 12px
}

#cancel-listing-modal ul {
    list-style-type: none;
    padding: 0
}

#cancel-listing-modal li {
    margin-bottom: 20px
}

#cancel-listing-modal p {
    margin-top: 20px
}

#cancel-listing-modal #modal-add-cancel-address {
    text-transform: uppercase;
    font-size: 16px;
    color: var(--primary);
    font-weight: 700
}

/* Full-width inputs and wrappers */
#cancel-listing-modal input,
#cancel-listing-modal .set-price,
#cancel-listing-modal .set-field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

#cancel-listing-modal .custom-dropdown-container {
    display: block;
    width: 100%;
    max-width: 100%
}

#cancel-listing-modal .set-price,
#cancel-listing-modal .set-field {
    position: relative
}

/* € and calendar icons centered in modal (no margin-top offset) */
#cancel-listing-modal .input-overlay-symbol-text_left,
#cancel-listing-modal .input-overlay-symbol-text_right {
    top: 50% !important;
    transform: translateY(-50%) !important
}

/* Price input — left padding for € overlay */
#cancel-listing-modal #sold-price {
    padding-left: 32px !important;
    text-align: left !important
}

/* Date input — right padding for calendar icon, white bg */
#cancel-listing-modal #sold-date {
    padding-right: 40px;
    cursor: pointer;
    background-color: var(--card)
}

/* Calendar icon clickable */
#cancel-listing-modal .set-field .input-overlay-symbol-text_right {
    cursor: pointer;
    pointer-events: auto;
    color: var(--foreground)
}

/* Dropdown arrow centered */
#cancel-listing-modal .custom-option-header .icon-menu-arrow-down,
#cancel-listing-modal .custom-option-header .icon-menu-arrow-up {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    right: 14px !important
}

#cancel-listing-modal .custom-option-header-value {
    min-width: auto
}

/* Dropdown options */
#cancel-listing-modal #cancel-option>li {
    margin-bottom: 0;
    cursor: pointer
}

#cancel-listing-modal #cancel-option>li:active,
#cancel-listing-modal .item-selected {
    font-weight: 600
}

#edit-operations-main-container textarea {
    width: 100%
}


.disabled-calendar {
    background-color: rgba(0, 0, 0, 0);
    z-index: 2;
    position: relative
}

.ui-autocomplete {
    max-width: 320px;
    background-color: var(--popover);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px 0 #eee;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    margin-bottom: 1px;
    z-index: 1000
}

.ui-autocomplete li {
    list-style: none;
    padding: 5px;
    color: var(--secondary-foreground);
    font-weight: 700
}

.ui-autocomplete li:hover,
.ui-state-focus {
    background-color: var(--muted);
    cursor: pointer;
    color: var(--primary)
}

.ui-helper-hidden-accessible {
    display: none
}

.homepage_SubTitle,
.homepage_ActionButton {
    display: none
}@media (max-width:1600px) {
    #list-container {
            width: 50% !important
        }
    #map-container {
            width: 50% !important
        }
    .long-date {
            display: inline-block
        }
    .short-date {
            display: none
        }


}@media (max-width:1346px) {
    #nav-save-search {
            display: none
        }


}@media (max-width:1270px) {
    #nav-prop-type {
            display: none
        }
    .photo-cards-list>li {
            width: 100% !important;
            margin: 0 0 .5% 0 !important
        }
    .photo-cards-list {
            padding: 0 !important
        }
    #list-container {
            width: 35% !important
        }
    #map-container {
            width: 65% !important
        }
    #property-sort-control li {
            font-size: 17px !important
        }
    #property-sort-control>li:first-child {
            padding: 0 !important
        }
    .homepage_MainTitle h1 {
            font-size: calc(2.4vw + 9px) !important;
            line-height: calc(3vw + 7px) !important
        }
    .ad-stats-container {
            flex-direction: column !important
        }
    .my-ads-stats,
        .my-ads-status {
            border-right: 0 !important
        }
    .my-ads-stats {
            border-bottom: 1px solid var(--border)
        }


}@media (max-width:1150px) {
    #nav-save-search {
            display: none
        }
    .searchbox {
            min-width: 205px
        }
    .searchbox-content-container {
            left: 288px
        }
    #property-sort-control>li:nth-child(2) {
            display: none
        }
    .dropdown-onclick-div {
            right: 0;
            left: auto !important
        }
    #page-2,
        #page-3 {
            padding: 15px !important
        }
    .home-facts .hf-left,
        .home-facts .hf-right {
            display: flex !important;
            margin: 0 !important;
            width: 100% !important
        }
    .additional-info .hf-left,
        .additional-info .hf-right {
            display: flex !important;
            margin: 0 !important;
            width: 100% !important
        }


}@media (max-width:1014px) {
    #view-image-title {
            font-size: 16px
        }
    .subNav-rightGroup,
        #nav-services,
        #nav-advices {
            display: none !important
        }
    .nav-leftGroup {
            flex: 42%
        }
    .nav-rightGroup {
            flex: 58%
        }
    #view-image-save-home,
        #view-image-contact {
            display: none !important
        }
    .image-view-title {
            width: 70% !important
        }
    .image-view-buttons {
            width: 30% !important
        }
    .page-content-top {
            flex-direction: column !important
        }
    .content-right-wrapper {
            height: auto !important;
            margin-left: 0 !important;
            padding: 30px 0;
            margin-top: 50px;
            margin-bottom: 30px
        }
    .report-listing {
            text-align: left !important
        }
    .content-left-wrapper {
            padding-right: 0 !important
        }
    .expand-post-page .footer-logo {
            display: none
        }
    .expand-post-page .ourSquareLogo {
            display: none
        }
    .expand-post-page .ourLineLogo {
            display: block
        }
    .location-window-content .content-left-wrapper {
            flex: 1;
            width: 100%
        }
    .location-window-content .content-right-wrapper {
            width: 100% !important
        }


}@media (max-width:1050px) {
    .nav-leftGroup {
            display: none
        }
    .nav-rightGroup {
            flex: 100%
        }
}@media (max-width:920px) {
    #open-modal-post-full,
        #share-modal-post-full {
            display: none !important
        }
    .homepage_MainTitle h1 {
            line-height: 30px
        }
    #social-login-inline {
            margin: 0 !important;
            padding: 0 !important;
            border-left: 0 !important;
            width: 100%
        }
    .add-pg-one {
            flex-direction: column !important
        }
    .add-pg-right {
            width: 100% !important
        }
    .add-pg-left {
            width: 100% !important;
            margin: 0 !important
        }


}@media (max-width:750px) {
    .hompage-content {
            width: 90vw !important;
            padding: 20px !important;
            border-radius: 12px !important
        }
    .homepage_SubTitle,
        .homepage_ActionButton {
            display: block !important
        }
    .hompage-wrapper {
            min-height: 50vh !important
        }
    .homepage_MainTitle {
            display: none
        }
    .homepage_MainTitle h1 {
            color: var(--foreground) !important
        }
    .homepage_MainTitle h1 span {
            text-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
            background-color: var(--card) !important
        }
    .mobile-nav {
            display: none
        }
    .icon-message {
            display: inline-block !important
        }
    .icon-nav-margin {
            margin-left: 0px !important
        }
    #register {
            display: none
        }
    .tooltip-top-right:before {
            right: 3px
        }
    .tooltip-top-right:after {
            right: 4px
        }
    #nav-listing-type,
        #nav-room-no {
            display: none
        }
    #nav-price-range {
            border: 0
        }
    .searchbox-container {
            padding-left: 0;
            justify-content: space-between
        }
    .searchbox-content-container {
            left: 188px
        }
    .homepage_MainTitle h1 {
            font-size: 22px !important
        }
    #footer-wrapper {
            height: 75px !important;
            border-top: 0 !important
        }
    #footer-wrapper .footer-bottom-section {
            padding: 0 !important
        }
    .regular-page-wrapper {
            margin-top: 12px !important
        }
    .location-info {
            display: none
        }
    #add-address {
            width: 242px !important;
            margin-bottom: 0
        }
    .dropdown-content {
            min-width: 210px
        }
    #social-login-inline,
        #login-data-section {
            border: 0 !important;
            width: 100% !important
        }
    #login-data-section {
            min-width: 100% !important
        }
    .footer-logo {
            display: none
        }
    .ourSquareLogo {
            display: none
        }
    .ourLineLogo {
            display: block
        }
    .settings-page-wrapper {
            margin-top: 60px !important
        }
    .nearby-properties ul li {
            width: 49% !important
        }
    .location-window-content .content-left-wrapper {
            padding-left: 10px !important;
            padding-right: 10px !important
        }
    .location-window-content .content-right-wrapper {
            display: none !important
        }
    .settings .data-box-right {
            display: none !important
        }
    .two-columns {
            flex-flow: column !important
        }
    .two-columns>div {
            width: 100%
        }
    .two-columns>div ul>h3 {
            margin-top: 20px !important
        }
    .settings-content-wrapper {
            flex-direction: column;
            padding: 15px 8px !important
        }
    .ad-info-container {
            position: absolute;
            top: 10px;
            left: 256px;
            font-size: 16px
        }
    .ad-stats-container {
            width: 100% !important;
            flex-direction: row !important;
            padding: 10px 0;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            margin: 10px 0
        }
    .my-ads-content,
        .my-ads-stats,
        .my-ads-status,
        .settings-content-button {
            width: 100% !important;
            border: 0 !important
        }
    .my-ads-actions .settings-content-button {
            text-align: left !important;
            margin-right: 15px !important;
            width: auto !important
        }
    .my-ads-actions {
            align-self: left !important;
            display: flex;
            width: 100% !important
        }
    .my-ads-thumbnail {
            margin-bottom: 8px
        }
    .stat-value-not-active {
            font-size: 18px
        }
    .my-ads-actions .btn-add-a-post {
            padding: 6px 12px;
            font-size: 15px
        }
    .modal-property-list-line {
            font-size: 15px !important
        }
    .autocomplete-response {
            max-height: calc(50vh - 95px) !important
        }


}@media (max-width:600px) {
    #map-container {
            width: 100% !important
        }
    .mdl-button {
            margin-bottom: 5px
        }
    .long-date {
            display: none
        }
    .short-date {
            display: inline-block
        }
    #property-sort-control {
            display: none !important
        }
    #share-post,
        .loan-calc-container,
        .settings-menu {
            display: none !important
        }
    .essentials-container {
            flex-direction: column !important
        }
    .essentials-clmn-left,
        .essentials-clmn-right {
            padding: 0px 10px !important;
            width: 100%;
            flex: none !important
        }
    .image-view-buttons {
            width: 100% !important
        }
    .image-view-title {
            display: none
        }
    .image-view-title {
            order: 2
        }
    .image-view-buttons {
            order: 1
        }
    .photo-card-content p {
            line-height: 18px
        }
    .photo-card-content .photo-card-price {
            font-size: 28px;
            letter-spacing: 0
        }
    .nav-rightGroup {
            justify-content: flex-end !important;
            padding-right: 14px
        }
    .essentials-clmn-left,
        .essentials-clmn-right {
            padding: 0 !important
        }
    .quick-facts-container UL,
        .facts-container UL,
        .features-container UL {
            width: 48% !important
        }
    .drive-info {
            display: none !important
        }
    .nearby-name,
        .table-name-title {
            flex: 0 0 360px !important;
            font-size: 15px !important
        }
    .price-per-clmn {
            width: 27% !important
        }
    .date-clmn {
            width: 26% !important
        }
    .event-clmn {
            width: 47% !important
        }
    .price-per-area-clmn {
            display: none
        }
    .contact-form-wrapper input,
        .contact-form-wrapper select,
        .contact-form-wrapper textarea {
            padding: 4px 8px 4px !important
        }
    .contact-form-wrapper input,
        .contact-form-wrapper select {
            height: 40px !important
        }
    .contact-form-wrapper .contact-form input {
            font-size: 15px
        }
    .contact-form-wrapper .contact-form .icon {
            margin-top: 12px
        }
    .contact-form-wrapper textarea {
            height: 100px;
            font-size: 15px
        }
    .add-clmns {
            display: block !important
        }
    .additional-info UL {
            margin-left: 0px !important;
            width: 100% !important
        }
    .user-personal-details .clmn-halfs {
            padding-top: 15px
        }
    .progress-indicator .progress-indicator__list {
            display: none !important
        }
    .progress-indicator .progress-indicator--mobile {
            display: block !important
        }
    .ad-info-container {
            font-size: 15px
        }
    .history-content-wrapper {
            padding: 18px 0 !important
        }
    .data-box-left,
        .data-box-right {
            width: 100% !important
        }


}@media (max-width:500px) {
    .ad-info-container {
            left: 185px
        }
    .nearby-name,
        .table-name-title {
            flex: 0 0 320px !important;
            font-size: 15px !important
        }
    #list-container {
            display: none !important
        }
    .row-1-4,
        .row-1-2,
        .row-3-4,
        .row-1-3 {
            width: 100% !important;
            margin-bottom: 5px
        }
    .nearby-properties ul li {
            width: 99% !important
        }


}@media (max-width:440px) {
    .buy-rent-resp {
            text-transform: uppercase
        }
    .buy-rent-resp .listing-type-text {
            font-size: 20px
        }
    .buy-rent-resp .mdl-radio__label {
            display: inline-flex;
            align-items: center;
            gap: 4px
        }
    .searchbox-container .mdl-checkbox {
            height: 36px !important
        }
    #listing-type-sale-results,
        #listing-type-rent-results {
            display: none !important
        }
    .more-options .more-block-line {
            margin: 0px !important
        }
    .searchbox-container {
            width: 100%
        }
    #nav-help {
            display: none
        }
    #nav-more {
            display: flex;
            width: 25%;
            flex-direction: row-reverse;
            font-size: 15px
        }
    .nav-items-padding {
            padding: 0 4px 0 10px !important
        }
    .searchbox {
            padding-right: 0px !important;
            margin-left: 5px;
            min-width: 100px;
            width: 220px
        }
    input:not([type=checkbox]):not([type=radio]) {
            border-radius: 0 !important;
            -webkit-appearance: none !important
        }
    .searchbox-content-container {
            position: absolute;
            bottom: 11px;
            left: 12px;
            background: var(--card)
        }
    .page-content-top {
            padding: 0 8px !important;
            width: 100%
        }
    .history-line UL {
            padding-left: 0px !important
        }
    .window-map-footer {
            text-align: center !important;
            margin-left: 0 !important
        }
    .bookmarked,
        .bookmark-and-follow {
            display: none
        }
    .nav-bar {
            border-bottom: none !important;
            box-shadow: 0 !important
        }
    .btn-header {
            padding: 0 10px
        }
    h1 {
            font-size: 5.4vw
        }
    .image-view-buttons .btn-normal {
            padding: 8px 22px !important
        }
    .history-content-wrapper {
            border-bottom: 1px solid var(--border)
        }
    .history-content {
            line-height: 18px
        }
    .prop-status {
            font-size: 13px
        }
    .nearby-name,
        .table-name-title {
            flex: 0 0 235px !important;
            font-size: 15px !important
        }
    .nav-horisontal-btns LI {
            margin-right: 6px !important
        }
    .ad-info-container {
            left: 154px
        }
    .ad-edit-info {
            display: none
        }
    .fav-star {
            display: none
        }


}@media (max-width:370px) {
    .searchtxt {
            display: none
        }
    .icon-spyglass {
            margin: 0 !important
        }
    .ourLineLogo {
            left: 8px
        }
    .btn-header {
            padding: 0 7px !important
        }


}

.photo-carousel-wrapper {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden
}

.photo-carousel-wrapper .main-image {
    width: 420px;
    height: 420px;
    background: transparent;
    display: inline-block;
    background-size: cover;
    cursor: pointer;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-right: 2px solid #fff;
    cursor: pointer;
    position: relative
}

/* 2026-05-22 — gallery photos rendered as real <img> (Google Images + LCP).
   object-fit:cover replicates the previous background-size:cover behaviour and
   fills whatever box the container/JS gives each slide (desktop hero 420px,
   desktop thumbs fixed 280x210, mobile slides JS-sized). Grayscale for inactive
   listings is inherited from the ancestor .bw-bckg filter, so no extra rule.
   The carusel selector is specific enough (3 classes) to beat the existing
   `.carusel-image-container li img { max-width:100% }` rule. */
#main-image .main-image-photo,
.photo-carousel-wrapper .carusel-image-container li img.main-image-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.photo-carousel-wrapper .preview-images-container {
    display: inline-block;
    position: relative;
    left: 0
}

.photo-carousel-wrapper .carusel-image-container {
    display: inline-block;
    height: 420px;
    margin: 0 0 0 -4px;
    padding: 0;
    vertical-align: top;
    width: 900px;
    -moz-column-fill: auto;
    column-fill: auto;
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
    -webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px
}

.photo-carousel-wrapper #mobile-image-counter {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 1px 12px;
    font-size: 12px
}

.photo-carousel-wrapper .carusel-image-container li {
    width: 280px;
    height: 210px;
    list-style: none;
    background-size: cover;
    background-position: 50% 50%;
    cursor: pointer
}

.photo-carousel-wrapper .carusel-image-container li:nth-child(even) {
    border-right: 2px solid #fff
}

.photo-carousel-wrapper .carusel-image-container li:nth-child(odd) {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff
}

.photo-carousel-wrapper .carusel-image-container-mobile li {
    border-right: 4px solid #fff !important
}

.photo-carousel-wrapper .carusel-image-container li img {
    max-width: 100%
}

.photo-carousel-wrapper .carousel-ad-box {
    width: 550px;
    height: 100%;
    margin: 0px;
    padding: 0;
    display: block
}

.mobile-scroller {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden
}

/* 2026-09-05 — mobilna galerija je do sada dobijala visinu tek iz js/image-slides.js:838
   (`winW * 0.66666`, gde je winW = $(window).width() - 30, red 816). Do tada je CSS davao
   skroleru height:100% a slajdu 210px, pa je ceo sadržaj ispod galerije skakao 180px naniže.
   Izmereno na živom oglasu (21 slajd, 390px): sadržaj je bez JS-a počinjao na y=546, sa JS-om
   na y=366. Ovde se ista formula rezerviše unapred, pa skoka nema.
   Poklapanje provereno na 370 (226,66), 390 (240) i 440 (273,33) — do 0,01px.
   Klasa .mobile-scroller dolazi sa servera samo kad uređaj nije računar
   (view_post_functions.php 37-40), pa medijski upit nije potreban i desktop se ne dira. */
.photo-carousel-wrapper.mobile-scroller,
.photo-carousel-wrapper.mobile-scroller .carusel-image-container li {
    height: calc((100vw - 30px) * 0.66666)
}

.photo-carousel-wrapper.mobile-scroller .carusel-image-container li {
    width: calc(100vw - 24px)
}

.mobile-scroller .main-image {
    width: auto;
    height: auto;
    max-width: auto;
    background: transparent;
    display: inline-block;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-right: 2px solid #fff;
    cursor: pointer;
    position: relative;
    image-rendering: crisp-edges
}

.mobile-scroller .preview-images-container {
    display: inline-block;
    position: relative;
    left: 0
}

.mobile-scroller .carusel-image-container {
    display: inline-block;
    height: auto;
    width: auto;
    margin: 0 0 0 -4px;
    padding: 0;
    vertical-align: top;
    -moz-column-fill: auto;
    column-fill: auto;
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
    -webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px
}

.mobile-scroller .carusel-image-container li {
    display: inline-block;
    width: auto;
    height: auto;
    list-style: none;
    background-size: cover;
    background-position: 50% 50%;
    cursor: pointer;
    overflow: hidden
}

.mobile-scroller .carusel-image-container li:nth-child(even) {
    border-right: 2px solid #fff
}

.mobile-scroller .carusel-image-container li:nth-child(odd) {
    border-right: 2px solid #fff;
    border-bottom: none
}

.mobile-scroller .carusel-image-container li img {
    max-width: 100%
}

.mobile-scroller .carousel-ad-box {
    width: auto;
    background-color: rgba(0, 0, 0, 0.1);
    height: 100%;
    display: block;
    vertical-align: top
}


.photo-images-scroller {
    min-width: 60px;
    height: 100%;
    z-index: 1;
    position: absolute;
    cursor: pointer
}

.btn-move-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0px 11px;
    width: 38px;
    padding: 2px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    background-color: #333;
    border: 1px solid #fff;
    transition: .1s;
    opacity: .5
}

.view-image-lower-area:hover .btn-move-img {
    background-color: #333;
    color: #ff5a5f;
    opacity: 1
}

.view-image-lower-area:hover .btn-move-img svg {
    fill: #ff5a5f !important
}

.photo-images-scroller:hover .btn-move-img {
    background-color: #333;
    color: #ff5a5f;
    opacity: 1
}

.photo-images-scroller:hover .btn-move-img svg {
    fill: #ff5a5f !important
}

#photo-images-scroll-back {
    left: 0;
    border-left: none
}

#photo-images-scroll-forward {
    right: 0;
    border-right: none
}

#photo-images-scroll-ffback {
    right: 0;
    border-right: none
}

#view-image-previous,
#view-image-next {
    cursor: pointer;
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

#view-image-next {
    right: 10px
}

.interpunct {
    font-weight: 700
}

#view-image-title,
#view-image-title-map {
    letter-spacing: 0px;
    font-weight: 600
}

.window-map-footer {
    text-align: left;
    color: #fff;
    margin-left: 12%;
    margin-top: 10px;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 16px
}

.plans * {
    box-sizing: border-box;
    margin: 0;
    outline: 0
}

.plans body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding: 14px
}

.plans article {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    height: 500px;
    position: relative
}

.plans ul {
    display: flex;
    top: 0px;
    z-index: 10;
    padding-bottom: 14px
}

.plans li {
    list-style: none;
    flex: 1
}

.plans li:last-child {
    border-right: 1px solid var(--border)
}

.plans button {
    width: 100%;
    border: 1px solid var(--border);
    border-right: 0;
    border-top: 0;
    padding: 10px;
    background: var(--card);
    font-size: 14px;
    font-weight: bold;
    height: 60px;
    color: var(--muted-foreground)
}

.plans li.active button {
    background: var(--muted);
    color: var(--foreground)
}

.plans table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%
}

.plans th {
    background: var(--muted);
    display: none
}

.plans td,
.plans th {
    height: 53px;
    border: 1px solid var(--border);
    padding: 10px;
    empty-cells: show;
    text-align: left
}

.plans td+td,
.plans th+th {
    text-align: center;
    display: none
}

.plans td.default {
    display: table-cell
}

.plans .bg-purple {
    border-top: 3px solid #A32362
}

.plans .bg-blue {
    border-top: 3px solid #0097CF
}

.plans .sep {
    background: var(--muted);
    font-weight: bold
}

.plans .txt-l {
    font-size: 28px;
    font-weight: bold
}

.plans .txt-top {
    position: relative;
    top: -9px;
    left: -2px
}

.plans .tick {
    font-size: 18px;
    color: #2CA01C
}

.plans .hide {
    border: 0;
    background: none
}@media (min-width:640px) {
    .plans ul {
            display: none
        }
    .plans td,
        .plans th {
            display: table-cell !important
        }
    .plans td,
        .plans th {
            width: 330px
        }
    .plans td+td,
        .plans th+th {
            width: auto
        }


}

.group-view {
    max-width: 1240px;
    margin: 0 auto
}

.group-view input {
    width: 200px;
    padding-right: 24px;
    height: 30px
}

.group-view .group-name a {
    font-weight: 700;
    white-space: normal
}

.group-view .group-nav-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px !important
}

.g-contact-image {
    overflow: hidden;
    height: 100px;
    width: 100px;
    min-width: 100px;
    min-height: 100px;
    position: relative;
    margin-right: 15px
}

.g-contact-image img {
    max-width: 100%
}

.g-contact-image-blank {
    width: 200px;
    height: 200px;
    max-width: 100%;
    max-height: 100%;
    background-color: #e91d72;
    display: flex;
    align-items: center;
    text-align: center
}

.g-contact-image-blank span {
    text-align: center;
    width: 100%
}

.big-letter {
    font-size: 36px;
    color: #fff
}

.reviews-info,
.footer-layout {
    font-size: 14px !important
}

.footer-layout {
    margin: 20px
}

.group-filter UL,
.group-list UL {
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.group-list p {
    margin-bottom: 0
}

.group-filter UL LI {
    float: left;
    word-spacing: normal;
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
    position: relative
}

.group-list UL LI {
    text-rendering: optimizespeed;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    margin-left: 0;
    margin-right: 0;
    border-color: var(--border);
    border-style: solid;
    border-width: 0 0 1px;
    margin-bottom: 10px;
    padding: 20px 0
}

.group-filter {
    height: 50px;
    background-color: var(--muted);
    position: relative;
    margin-bottom: 30px;
    display: none
}

.form-input-field {
    display: flex;
    align-items: center;
    margin: 0;
    margin-left: 0px;
    line-height: 50px;
    height: 50px
}

.col-a,
.col-b,
.col-c {
    width: 31%;
    display: flex;
    flex-direction: row
}

.filter-label {
    position: absolute;
    top: -25px;
    left: 0;
    line-height: 25px;
    margin-left: 10px;
    font-weight: 700;
    text-transform: uppercase
}


.dtp {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.dtp>.dtp-content {
    background: var(--popover);
    max-width: 400px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    max-height: 520px;
    position: relative;
    left: 50%
}

.dtp>.dtp-content>.dtp-date-view>header.dtp-header {
    background: var(--primary-hover);
    color: var(--primary-foreground);
    text-align: center;
    padding: .3em
}

.dtp div.dtp-date,
.dtp div.dtp-time {
    background: var(--primary);
    text-align: center;
    color: var(--primary-foreground);
    padding: 10px
}

.dtp div.dtp-date>div {
    padding: 0;
    margin: 0
}

.dtp div.dtp-actual-month {
    font-size: 1.5em
}

.dtp div.dtp-actual-num {
    font-size: 3em;
    line-height: .9
}

.dtp div.dtp-actual-maxtime {
    font-size: 3em;
    line-height: .9
}

.dtp div.dtp-actual-year {
    font-size: 1.5em;
    color: var(--accent-border)
}

.dtp div.dtp-picker {
    padding: 1em;
    text-align: center
}

.dtp div.dtp-picker-month,
.dtp div.dtp-actual-time {
    font-weight: 500;
    text-align: center
}

.dtp div.dtp-picker-month {
    padding-bottom: 20px !important;
    text-transform: uppercase !important
}

.dtp .dtp-close {
    position: absolute;
    top: .5em;
    right: 1em
}

.dtp .dtp-close>a {
    color: #fff
}

.dtp .dtp-close>a>i {
    font-size: 1em
}

.dtp table.dtp-picker-days {
    margin: 0;
    min-height: 251px;
    width: 100%
}

.dtp table.dtp-picker-days,
.dtp table.dtp-picker-days tr,
.dtp table.dtp-picker-days tr>td {
    border: none
}

.dtp table.dtp-picker-days tr>td {
    font-weight: 700;
    font-size: 1.23em;
    text-align: center;
    padding: .5em .3em
}

.dtp table.dtp-picker-days tr>td>span.dtp-select-day {
    color: #BDBDBD !important
}

.dtp table.dtp-picker-days tr>td>a,
.dtp .dtp-picker-time>a {
    color: var(--foreground);
    text-decoration: none;
    padding: .4em .5em .5em .6em;
    border-radius: 50% !important
}

.dtp table.dtp-picker-days tr>td>a.selected {
    background: var(--primary);
    color: #fff
}

.dtp table.dtp-picker-days tr>th {
    color: var(--muted-foreground);
    text-align: center;
    font-weight: 700;
    padding: .4em .3em
}

.dtp-picker {
    min-height: 330px
}

.dtp .p10>a {
    color: var(--accent-foreground);
    text-decoration: none
}

.dtp .p10 {
    width: 10%;
    display: inline-block
}

.dtp .p20 {
    width: 20%;
    display: inline-block
}

.dtp .p60 {
    width: 60%;
    display: inline-block
}

.dtp .p80 {
    width: 80%;
    display: inline-block
}

.dtp a.dtp-meridien-am,
.dtp a.dtp-meridien-pm {
    position: relative;
    top: 10px;
    color: var(--foreground);
    font-weight: 500;
    padding: .7em .5em;
    border-radius: 50% !important;
    text-decoration: none;
    background: var(--muted);
    font-size: 1em
}

.dtp .dtp-actual-meridien a.selected {
    background: var(--primary-hover);
    color: #fff
}

.dtp .dtp-picker-time>.dtp-select-hour {
    cursor: pointer
}

.dtp .dtp-picker-time>.dtp-select-minute {
    cursor: pointer
}

.dtp .dtp-buttons {
    padding: 0 1em 1em 1em;
    text-align: right
}

.dtp.hidden,
.dtp .hidden {
    display: none
}

.dtp .invisible {
    visibility: hidden
}

.dtp .left {
    float: left
}

.dtp .right {
    float: right
}

.dtp .clearfix {
    clear: both
}

.dtp .center {
    text-align: center;
    padding: 0 !important
}

span.hide-native-select {
    position: relative
}

span.hide-native-select select {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px -1px -1px -3px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    left: 50%;
    top: 30px
}

.multiselect-container {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0
}

.multiselect-container .input-group {
    margin: 5px
}

.multiselect-container>li {
    padding: 0
}

.multiselect-container>li>a.multiselect-all label {
    font-weight: 700
}

.multiselect-container>li.multiselect-group label {
    margin: 0;
    padding: 3px 0px 3px 20px;
    height: 100%;
    font-weight: 700
}

.multiselect-container>li.multiselect-group-clickable label {
    cursor: pointer
}

.multiselect-container>li>a {
    padding: 0
}

.multiselect-container>li>a>label {
    margin: 0;
    height: 100%;
    cursor: pointer;
    font-weight: 400;
    padding: 5px 20px 5px 32px
}

.multiselect-container>li>a>label.radio,
.multiselect-container>li>a>label.checkbox {
    margin: 0
}

.multiselect-container>li>a>label>input[type=checkbox] {
    margin-bottom: 5px
}

.btn-group>.btn-group:nth-child(2)>.multiselect.btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.form-inline .multiselect-container label.checkbox,
.form-inline .multiselect-container label.radio {
    padding: 3px 20px 3px 40px
}

.form-inline .multiselect-container li a label.checkbox input[type=checkbox],
.form-inline .multiselect-container li a label.radio input[type=radio] {
    margin-left: -20px;
    margin-right: 0
}

.btn-facebook {
    margin-bottom: 15px
}

.btn-divider-left {
    border-left: 1px solid var(--border)
}

.btn-divider-right {
    border-right: 1px solid var(--border)
}

.btn-header-items:hover {
    color: var(--kaza)
}

.btn-header-items:active {
    color: var(--kaza)
}

input::-webkit-input-placeholder {
    color: var(--muted-foreground) !important
}

input:-moz-placeholder {
    color: var(--muted-foreground) !important
}

input::-moz-placeholder {
    color: var(--muted-foreground) !important
}

#post-flip-bookmarked {
    padding: 0 15px
}

.searchbox-container .dropdown-onclick-div .icon-rent,
.searchbox-container .dropdown-onclick-div .icon-buy,
.header-cell-item {
    display: inline-flex
}


.places-all {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.places-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted-foreground);
    font-size: 16px
}

.city-hero-map {
    opacity: .12
}

.city-pill {
    transition: all .15s ease
}

.city-pill-active:hover {
    background: var(--primary-hover)
}

.city-card {
    transition: box-shadow .2s ease, transform .15s ease
}

.city-card-status {
    letter-spacing: .3px
}

.city-card-inactive .city-card-img {
    opacity: .65
}

.city-card-inactive:hover .city-card-img {
    opacity: .8
}

.city-loadmore {
    transition: all .15s ease
}


.modal-wrapper .input-overlay-symbol-text_left~input,
#agency-search-input{
    padding-left: 42px !important
}


.content-right-wrapper .contact-form-wrapper {
    display: none !important
}

.content-right-container {
    top: 74px !important
}

.sidebar-contact-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 12px
}

#sidebar-contact-btn {
    background-color: var(--foreground);
    color: #fff;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0;
    transition: all 0.2s ease
}

#sidebar-contact-btn:hover {
    background-color: var(--secondary-foreground)
}

#sidebar-contact-btn:active {
    background-color: #000
}

@media (max-width:750px) {
    .header-flex-left ul {
            display: flex !important;
            flex-wrap: nowrap;
            justify-content: flex-end
        }
    .header-flex-left ul #contact-post {
            order: 10
        }
    #contact-post {
            background-color: var(--kaza);
            color: #fff
        }
    .bookmarked,
        .bookmark-and-follow {
            display: inline !important
        }
    html {
            overflow-x: hidden !important;
            width: 100% !important
        }
}

@media (max-width:900px) {
    .places-all {
            grid-template-columns: repeat(2, 1fr)
        }


}@media (max-width:600px) {
    .places-all {
            grid-template-columns: repeat(2, 1fr)
        }


}@media (max-width:400px) {
    .places-all {
            grid-template-columns: 1fr
        }


}@media (max-width:768px) {

}@media (max-width:1014px) {
    .contact-form-wrapper {
            display: none !important
        }


}

.contact-form input:disabled {
    background-color: var(--muted) !important;
    color: var(--muted-foreground) !important;
    cursor: default;
    border-color: var(--border) !important
}

.contact-form input:disabled:hover {
    border-color: var(--border) !important
}

.rb-btn-gar {
    flex: none !important;
    padding: 10px 14px !important;
}

.rb-exact-match-row {
    padding: 10px 0 2px;
}

.rb-exact-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--secondary-foreground);
    user-select: none;
    -webkit-user-select: none;
}

.rb-exact-checkbox-label input[type="checkbox"] {
    display: none;
}

.rb-exact-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
}

.rb-exact-checkbox-label input[type="checkbox"]:checked+.rb-exact-checkbox-custom {
    background: var(--primary);
    border-color: var(--primary);
}

.rb-exact-checkbox-custom::after {
    content: "";
    display: none;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -1px;
}

.rb-exact-checkbox-label input[type="checkbox"]:checked+.rb-exact-checkbox-custom::after {
    display: block;
}

/* Blue price chart & slider — override red */
.price-histogram-bar {
    background-color: rgba(0, 106, 255, .25) !important;
}

.price-histogram-bar.in-range {
    background-color: var(--primary) !important;
}

.price-slider-container .noUi-connect {
    background: var(--primary) !important;
}

.price-slider-container .noUi-handle {
    background: transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212.5%22%20r%3D%2210%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.056%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.084%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2211.5%22%20r%3D%228.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.105%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%226.5%22%20fill%3D%22%23006aff%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") no-repeat center center !important;
    background-size: 35px 35px !important;
}

.price-slider-container .noUi-handle:hover {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212.5%22%20r%3D%2210%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.056%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.084%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2211.5%22%20r%3D%228.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.105%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%226.5%22%20fill%3D%22%230055cc%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") !important;
}

.rb-btn {
    font-weight: 700 !important;
}

.rb-btn-active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

.rb-btn-active:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.more-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 5px;
}

.reset-filters-link {
    color: #b0000a;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    display: flex;
    align-items: center;
}

.reset-filters-link:hover {
    color: #8a0008;
    text-decoration: underline;
}

#info-inplace {
    position: fixed !important;
    z-index: 100001 !important;
    max-width: 300px !important;
}

.login-register-social-media .form-inline-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
}

.btn-facebook-new {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--secondary-foreground);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 0;
    padding: 0 12px;
    height: 40px;
    width: 300px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Google Sans', arial, sans-serif;
    cursor: pointer;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    box-sizing: border-box;
    letter-spacing: .25px;
    line-height: 40px;
    -webkit-font-smoothing: antialiased;
}

.btn-facebook-new:hover {
    background-color: var(--muted);
    border-color: var(--border);
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
}

.btn-fb-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    line-height: 0;
}

.btn-fb-text {
    text-align: center;
    width: 100%;
    padding-left: 18px;
    box-sizing: border-box;
}

#googleSignInButton,
#googleSignInButton1 {
    display: flex;
    justify-content: center;
}

#forgot-password-button {
    margin-top: 15px;
}

.new-post-page .header-flex-left {
    flex: auto !important;
}

.new-post-page .header-flex-right {
    display: flex;
    justify-content: flex-end;
    flex: auto;
}

.new-post-page .header-flex-right ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
}

.new-post-page .header-flex-right ul li {
    white-space: nowrap;
}

/* =============================================
   Google sign-in prominence (2026-05-18)
   ---------------------------------------------
   Wraps the OAuth buttons with a "Najbrži način — bez kucanja"
   label so logged-out users immediately see they don't have to
   type an email/password. Applied in both:
   - inline contact section in /add step 3 (#social-login-inline)
   - the popup auth modal (#signup-login-modal) used app-wide
   Lives in style.css because the modal renders on every page. */
.social-primary-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}
.social-primary-cta__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--accent);
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-foreground);
    line-height: 1;
    white-space: nowrap;
}
/* Facebook as secondary action — same shape as Google's filled_blue
   button but shorter + lighter visual weight so it reads as the
   secondary option, not a competing primary. Used while we still
   render Google's official button widget. Kept for any legacy
   .btn-facebook-new + .btn-social-secondary combos in the DOM. */
.btn-social-secondary {
    height: 36px !important;
    font-size: 13px !important;
    opacity: 0.85;
}
.btn-social-secondary:hover {
    opacity: 1;
}

/* 2026-05-18 — Custom Airbnb-style OAuth buttons. Replace Google's
   iframe widget (capped at 400px / 40px, can't be restyled) so we
   can match the modal's visual language: 48px tall, brand-consistent
   font, multicolor G logo on white. Click handlers in modal-signup-
   login.js trigger google.accounts.id.prompt() / fb_login(). */
.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    min-height: 48px;
    padding: 0 16px;
    margin: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--secondary-foreground);
    font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .25px;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-oauth:hover {
    box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px rgba(60,64,67,.15);
    background-color: var(--muted);
}
.btn-oauth:active {
    background-color: var(--muted);
}
.btn-oauth-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.btn-oauth-text {
    line-height: 1;
}
/* Google: white background, multicolor G logo — Airbnb pattern */
.btn-oauth-google {
    /* inherits .btn-oauth defaults */
}
/* Facebook: same shell, secondary visual weight via subtle tinting */
.btn-oauth-facebook {
    color: #1c1e21;
}
.btn-oauth-facebook:hover {
    background-color: var(--muted);
}
/* Muted separator — "ili upiši ručno" reads as a fallback rather
   than an equal alternative to the OAuth buttons above it. */
.choose-separator--muted .choose-text {
    font-weight: 400 !important;
    font-size: 12.5px !important;
    color: var(--muted-foreground) !important;
    text-transform: lowercase;
}
.choose-separator--muted .line-break {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Modal headline (2026-05-18) — replaces the Login/Sign-up tab
   switcher with a single clear title + subtitle. Airbnb-style:
   one path forward, no fake choice. */
.modal-headline {
    padding: 8px 24px 16px;
    text-align: center;
}
.modal-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--foreground);
}
.modal-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.35;
}
/* Permanent TOS footer — visible from every step of the modal,
   replaces the old buried-in-signup-tab TOS line. */
.modal-tos-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted-foreground);
    text-align: center;
}
.modal-tos-footer a {
    color: var(--muted-foreground);
    text-decoration: underline;
}
.modal-tos-footer a:hover {
    color: var(--secondary-foreground);
}

/* =============================================
   Microsite (agency subdomain) styles
   Added 2026-03 for agencija.kaza.rs feature
   ============================================= */

/* =============================================
   Embed Map Widget — agency profile page styles
   ============================================= */

.gp-embed-section {
    margin-top: 24px;
    padding: 20px;
    background: var(--muted);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.gp-embed-desc {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 4px 0 16px;
}

.gp-embed-code-container {
    position: relative;
}

.gp-embed-code {
    width: 100%;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--foreground);
    resize: none;
    box-sizing: border-box;
}

.gp-embed-copy-btn {
    margin-top: 8px;
    padding: 8px 20px;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.gp-embed-copy-btn:hover {
    background: var(--primary-hover);
}

.gp-embed-preview {
    margin-top: 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}


/* ── KZModal — reusable centered modal dialog (factored out 2026-06-15) ───────────────
   Site-wide standard dialog: this CSS is global (style.css) + the JS is in common.js
   (KZModal.open). Used by the map "Sačuvaj pretragu" name dialog; reuse it for any
   titled dialog with an optional single input. The input matches the login modal exactly
   (1px #b0b0b0 / radius 8px / 12px 14px 12px 42px / 16px) and reuses the global
   .input-overlay-symbol-text_left icon slot. The modal is portaled to <body> by the JS so
   a transformed ancestor (e.g. #page-content) can't trap the fixed overlay. */
.kzm-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.kzm-overlay[hidden]{display:none}
.kzm-box{background:var(--card);border-radius:14px;max-width:440px;width:100%;padding:24px 22px;box-shadow:0 10px 40px rgba(0,0,0,.28);box-sizing:border-box;position:relative}
.kzm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kzm-title{font-size:20px;font-weight:800;color:var(--foreground);margin:0;line-height:1.25}
.kzm-sub{font-size:13px;color:var(--muted-foreground);margin:4px 0 0}
.kzm-x{background:none;border:none;font-size:26px;line-height:1;color:var(--muted-foreground);cursor:pointer;padding:0 2px;margin:-2px -4px 0 0}
.kzm-x:hover{color:var(--foreground)}
.kzm-lab{display:block;font-size:13px;font-weight:600;color:var(--secondary-foreground);margin:18px 0 7px}
.kzm-field{position:relative}
.kzm-input{width:100%;box-sizing:border-box;border:1px solid var(--input);border-radius:8px;padding:12px 14px 12px 42px !important;font-size:16px;font-weight:400;color:var(--foreground);background:var(--card);outline:none}
.kzm-input:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(0,106,255,.15)}
.kzm-err{color:var(--destructive);font-size:13px;font-weight:600;margin-top:10px}
.kzm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.kzm-btn{border-radius:8px;padding:11px 22px;font-size:15px;font-weight:700;cursor:pointer;border:none;font-family:inherit;line-height:1.2}
.kzm-btn-primary{background:var(--primary);color:#fff}
.kzm-btn-primary:hover{background:var(--primary-hover)}
.kzm-btn-primary[disabled]{opacity:.7;cursor:default}
.kzm-btn-secondary{background:var(--card);color:var(--secondary-foreground);border:1px solid var(--input)}
.kzm-btn-secondary:hover{background:var(--muted)}
@media(max-width:480px){.kzm-box{padding:20px 16px}.kzm-actions{gap:8px}.kzm-actions .kzm-btn{flex:1}}