html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* Traka o gresci je bila svetlozuta i na engleskom, pa je odudarala od ostatka sajta kao da
   je pukao neki drugi program. Sada je u istoj tami i zlatu kao i paneli po stranama.
   Pise se preko "body", jer i MudBlazor boji ovu traku svojom crvenom, a njegov stil se
   ucitava posle ovog. */
body #blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    padding: 12px 44px 12px 20px;
    background: #262626;
    border-top: 1px solid rgba(209, 180, 113, 0.35);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
    color: #ece4d3;
    font-size: 0.9rem;
}

body #blazor-error-ui .reload {
    margin-left: 10px;
    color: #d1b471;
    font-weight: 600;
    text-decoration: underline;
}

body #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #b8b8b8;
    font-size: 1rem;
}

body #blazor-error-ui .dismiss:hover {
    color: #ece4d3;
}

/* ---------------------------------------------------------------------------
   Strana sa greskom: pogresna adresa i greska u samoj strani.
   --------------------------------------------------------------------------- */
/* Sadrzaj strane je visok bar ceo ekran, pa se poruka centrira u njemu: bez ovoga bi stajala
   uz sam vrh, a ispod nje bi zjapila prazna strana do futera. */
.re-error-wrap.mud-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
    padding-top: 24px;
    padding-bottom: 24px;
}

.re-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    width: 100%;
    padding: 48px 32px;
    background: linear-gradient(180deg, #2b2b2b 0%, #232323 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Znak stoji u zlatnom krugu, isto kao znaci uz polja na formi za oglas. */
.re-error-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: rgba(209, 180, 113, 0.12);
    border: 1px solid rgba(209, 180, 113, 0.3);
}

.re-error-icon.mud-icon-root {
    font-size: 2.4rem !important;
    color: #d1b471;
}

.re-error-title {
    font-weight: 700;
    color: #ece4d3;
}

.re-error-text {
    max-width: 420px;
    color: #b8b8b8;
}

.re-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.mud-input-outlined:not(.mud-disabled):hover fieldset {
    border-color: #d1b471 !important;
}

.mud-input-filled::after {
    border-bottom-color: #d1b471 !important;
}

.mud-input-filled:hover::before {
    border-bottom-color: #d1b471 !important;
}

.primary-close-icon .mud-icon-button-label {
    color: #d1b471 !important;
}

/* ---------------------------------------------------------------------------
   Oznake (cipovi). Iste su na pocetnoj strani, na detaljima, na mojim oglasima
   i na formi, da cela aplikacija izgleda kao jedna celina.
   Zlatna nosi prodaju i novac, smaragdna izdavanje i potvrde. Sve ostalo je
   tamno staklo sa tankom ivicom, da boje ne otimaju paznju jedna drugoj.
   --------------------------------------------------------------------------- */
.re-tags {
    gap: 6px;
}

/* inline-flex sa istom visinom linije drzi ikonicu i tekst u istom redu.
   Ranije su se razilazili jer je ikonica imala svoju visinu linije. */
.re-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.re-tag .mud-icon-root {
    font-size: 0.9rem !important;
    line-height: 1;
    display: block;
}

.re-tag span {
    line-height: 1;
    display: block;
}

/* Oznaka namene je jedina puna, pa nema ivicu kao ostale i zbog toga je u redu oznaka bila
   niza od svojih suseda za debljinu te ivice. Prozirna ivica joj vraca istu visinu, a da se
   na njoj nista ne vidi: sada su sve oznake u redu iste visine. */
/* Senka je bila jedina razlika u odnosu na ostale oznake u redu i cinila je da oznaka namene
   izgleda krupnije od njih, iako je iste mere. Na oglasu oznake stoje na mirnoj podlozi, pa
   im senka i ne treba: razlikuje ih ispuna. Na kartici senka ostaje, jer tamo oznake stoje
   preko slike. */
.re-tag-purpose {
    color: #14140F;
    border: 1px solid transparent;
}

/* Izdavanje prati oznaku sa kartice: tamno staklo, zlatna slova i zlatna ivica. Ivica je i kod
   prodaje tu, samo providna, pa obe oznake ostaju iste visine. */
.re-tag-purpose-rent {
    color: #E2C98A;
    border-color: rgba(209, 180, 113, 0.75);
}

.re-tag-glass {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(209, 180, 113, 0.35);
    color: #d1b471;
}

.re-tag-verified {
    background: rgba(79, 174, 143, 0.14);
    border: 1px solid rgba(79, 174, 143, 0.5);
    color: #9FD8C5;
}

/* Kada podatka nema, oznaka je siva: vidi se da je podatak tu, ali ne skrece paznju.
   Narandzasta Material boja je ranije izgledala kao upozorenje, sto ovo nije. */
.re-tag-muted {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #9a9a9a;
}

/* ---------------------------------------------------------------------------
   Ko je gledao oglas: krug sa udelima i spisak sa tacnim brojevima ispod njega.
   --------------------------------------------------------------------------- */

/* Prozor ne iskace, nego se podigne i uveca do svoje velicine, a zatamnjenje iza njega
   potamni zajedno sa njim. Ulaz je duzi i mekan (krivulja koja brzo krene pa se smiri), a
   izlaz kraci i ostar: tako otvaranje deluje mirno, a zatvaranje odsecno. */
@keyframes re-dlg-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes re-dlg-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
}

@keyframes re-dlg-overlay-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Uz klasu .mud-dialog, a ne samo svoju: MudBlazor svakom prozoru vec daje svoju kratku
   animaciju otvaranja preko .mud-dialog, pa bi pravilo sa jednom klasom izgubilo od nje. */
.mud-dialog.re-dlg-anim {
    animation: re-dlg-in 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Izlazak se pali preko oznake unutar prozora, jer se sama klasa prozora posle otvaranja vise
   ne menja. Pravilo stoji ispod ulaznog i jednake je tezine, pa u izlasku nadjaca njega.
   "forwards" drzi prozor u zavrsnom stanju dok se stvarno ne zatvori: bez toga bi u poslednjem
   trenutku bljesnuo nazad u punu velicinu. */
.mud-dialog:has(.re-dlg-closing) {
    animation: re-dlg-out 0.18s ease-in forwards;
}

.re-dlg-overlay {
    animation: re-dlg-overlay-in 0.26s ease;
}

/* Zatamnjenje je u stablu izvan samog prozora, pa se do njega dolazi preko :has(): kada je
   prozor u izlasku, i ono bledi, da ne nestane naglo tek posto prozor ode. */
body:has(.re-dlg-closing) .re-dlg-overlay {
    opacity: 0;
    transition: opacity 0.18s ease;
}

/* Kome se od kretanja na ekranu vrti u glavi, prozor se samo pojavi i nestane. */
@media (prefers-reduced-motion: reduce) {
    .mud-dialog.re-dlg-anim,
    .mud-dialog:has(.re-dlg-closing),
    .re-dlg-overlay {
        animation: none;
    }

    body:has(.re-dlg-closing) .re-dlg-overlay {
        transition: none;
    }
}

/* Polje koje hvata Escape ne sme da nosi vidljivu ivicu kada dobije tastaturu: ono je samo
   omotac oko sadrzaja, a ne polje za unos. */
.re-dlg-keys:focus,
.re-dlg-keys:focus-visible {
    outline: none;
}

/* Zaglavlje: znak u zlatnom krugu, pored njega naslov i ime oglasa. Ime oglasa stoji tu, a ne
   u sadrzaju, da se odmah vidi o kom je oglasu rec i kada je otvoreno vise prozora. */
.re-dlg-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.re-dlg-head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(209, 180, 113, 0.12);
    border: 1px solid rgba(209, 180, 113, 0.35);
}

.re-dlg-head-icon .mud-icon-root {
    color: #d1b471;
    font-size: 1.4rem;
}

/* Tekst uzima svu slobodnu sirinu, da krstic ostane priljubljen uz desnu ivicu zaglavlja, a
   ne odmah do naslova. */
.re-dlg-head-text {
    flex: 1;
    min-width: 0;
}

/* Prozor uzima boju radnje koju nudi: zlatna je obicna izmena, pecena crvena brisanje i
   odbijanje, a smaragdna odobravanje. Iste su boje kao na dugmadima tih radnji. */
.re-dlg-head-icon-danger {
    background: rgba(198, 112, 95, 0.12);
    border-color: rgba(198, 112, 95, 0.45);
}

.re-dlg-head-icon-danger .mud-icon-root {
    color: #C6705F;
}

.re-dlg-head-icon-ok {
    background: rgba(79, 174, 143, 0.12);
    border-color: rgba(79, 174, 143, 0.45);
}

.re-dlg-head-icon-ok .mud-icon-root {
    color: #4FAE8F;
}

/* Istaknuta recenica o tome sta ce se dogoditi. Stoji u svom polju, kao i radnje u prozoru sa
   statusima, samo u boji radnje: tako se i pre citanja vidi o kakvoj je radnji rec. */
.re-dlg-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.re-dlg-callout .mud-icon-root {
    flex-shrink: 0;
}

.re-dlg-callout-danger {
    background: rgba(198, 112, 95, 0.10);
    border: 1px solid rgba(198, 112, 95, 0.38);
    color: #E8A392;
}

.re-dlg-callout-danger .mud-icon-root {
    color: #C6705F;
}

.re-dlg-callout-ok {
    background: rgba(79, 174, 143, 0.10);
    border: 1px solid rgba(79, 174, 143, 0.38);
    color: #9FD8C5;
}

.re-dlg-callout-ok .mud-icon-root {
    color: #4FAE8F;
}

/* Trenutno stanje oglasa, na vrhu prozora sa statusima: natpis levo, oznaka stanja odmah uz
   njega, odvojeno crtom od ponudjenih radnji. */
.re-dlg-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.re-dlg-current-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.re-dlg-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Polje sa radnjom je istog oblika kao red u statistici gledalaca: zaobljen okvir na jedva
   svetlijoj pozadini. Ovde je i dugme, pa na prelaz misem dobija zlatnu ivicu. */
.re-dlg-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    text-align: left;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.re-dlg-option:hover {
    background: rgba(209, 180, 113, 0.08);
    border-color: rgba(209, 180, 113, 0.45);
}

/* Znak radnje stoji u svom kvadratu, isti jezik kao znak u zaglavlju, samo manji. */
.re-dlg-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(209, 180, 113, 0.10);
    border: 1px solid rgba(209, 180, 113, 0.28);
    color: #d1b471;
}

.re-dlg-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.re-dlg-option-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #E2C98A;
}

.re-dlg-option-hint {
    font-size: 0.76rem;
    line-height: 1.45;
    color: #8a8a8a;
}

/* Strelica govori da polje vodi dalje. Miruje u sivom, a na prelaz misem se pomeri i pozlati. */
.re-dlg-option-arrow {
    flex-shrink: 0;
    color: #6b6b6b;
    transition: color 0.15s ease, transform 0.15s ease;
}

.re-dlg-option:hover .re-dlg-option-arrow {
    color: #d1b471;
    transform: translateX(3px);
}

/* Krstic stoji uz desnu ivicu zaglavlja, tamo gde ga je nosio i ugradjeni. */
.re-dlg-close {
    margin-left: auto;
    flex-shrink: 0;
    color: #8a8a8a;
}

.re-dlg-close:hover {
    color: #d1b471;
}

.re-dlg-head-title {
    font-weight: 700;
    line-height: 1.2;
}

/* Dug naslov oglasa se skracuje, da zaglavlje ostane u jednom redu. */
.re-dlg-head-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: #9a9a9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Krug i spisak stoje jedno pored drugog dok ima mesta, a na uskom ekranu jedno ispod drugog. */
.re-stats-body {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 8px 0 4px;
}

.re-stats-chart {
    flex-shrink: 0;
}

/* Ukupan broj stoji u sredini kruga, jer je to prvo sto vlasnik trazi. */
.re-stats-total {
    fill: #d1b471;
    font-size: 2rem;
    font-weight: 700;
}

.re-stats-total-label {
    fill: #8a8a8a;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
}

.re-stats-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Svaki red je svoje polje: gore ime sa brojem i procentom, ispod traka duzine tog procenta.
   Traka nosi boju svog dela kruga, pa se red i deo kruga citaju kao ista stvar. */
.re-stats-row {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Najbrojnija vrsta nosi zlatnu ivicu, isto kao i sve sto se u aplikaciji izdvaja. */
.re-stats-row-top {
    background: rgba(209, 180, 113, 0.08);
    border-color: rgba(209, 180, 113, 0.35);
}

.re-stats-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.re-stats-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.re-stats-label {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.re-stats-count {
    font-size: 1.05rem;
    font-weight: 700;
    color: #E2C98A;
    line-height: 1;
}

.re-stats-share {
    font-size: 0.75rem;
    color: #8a8a8a;
    min-width: 40px;
    text-align: right;
}

.re-stats-bar {
    height: 5px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.re-stats-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
}

/* Objasnjenje ispod: znak i tekst u istom redu, odvojeno crtom od same slike. */
.re-dlg-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.75rem;
    line-height: 1.55;
    color: #8a8a8a;
}

.re-dlg-note .mud-icon-root {
    flex-shrink: 0;
    margin-top: 1px;
    color: #6b6b6b;
}

.re-stats-loading {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

.re-stats-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 8px;
    color: #6b6b6b;
}

/* Na telefonu krug ide iznad spiska i sam se centrira, jer za dve kolone nema sirine. */
@media (max-width: 700px) {
    .re-stats-body {
        flex-direction: column;
        gap: 16px;
    }

    .re-stats-legend {
        width: 100%;
    }
}

/* Broj gledalaca je uzgredan podatak dok ih je malo, pa stoji tiho, isto kao i na kartici. */
.re-tag-views {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #9a9a9a;
}

/* Trazen oglas: puna zlatna, ista kao oznaka namene, jer je i to nesto sto se prvo primeti. */
.re-tag-popular {
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    border: 1px solid #E2C98A;
    color: #14140F;
    box-shadow: 0 0 12px rgba(209, 180, 113, 0.45);
}

/* "Vas oglas" je podatak o vlasnistvu, ne o nekretnini, pa je najtise od svih:
   staklo sa sampanj slovima. Ranije je bilo ljubicasto i nije islo uz temu. */
.re-tag-mine {
    background: rgba(255, 231, 168, 0.10);
    border: 1px solid rgba(255, 231, 168, 0.45);
    color: #FFE7A8;
}

/* Status oglasa u tabeli, na detaljima i u formi. Zlatna je aktivan oglas, sampanj onaj koji
   ceka pregled, siva sklonjen, a smaragdna prodat, isto kao oznake na karticama. */
.re-tag-pending {
    background: rgba(255, 231, 168, 0.10);
    border: 1px solid rgba(255, 231, 168, 0.45);
    color: #FFE7A8;
}

.re-tag-active {
    background: rgba(209, 180, 113, 0.12);
    border: 1px solid rgba(209, 180, 113, 0.5);
    color: #d1b471;
}

.re-tag-sold {
    background: rgba(79, 174, 143, 0.14);
    border: 1px solid rgba(79, 174, 143, 0.5);
    color: #9FD8C5;
}

/* ---------------------------------------------------------------------------
   Traka gore. Ista podloga kao paneli po stranama, sa tankom crtom po dnu umesto
   Material senke, pa traka izgleda kao deo iste celine, a ne kao nalepljena traka.
   Providna je i zamucena, da se vidi da sadrzaj prolazi ispod nje.
   --------------------------------------------------------------------------- */
.re-appbar.mud-appbar {
    background: rgba(38, 38, 38, 0.88) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28) !important;
}

.re-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.re-brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #d1b471;
    transition: color .15s ease;
}

.re-brand:hover .re-brand-name {
    color: #FFE7A8;
}

/* Razmak sa desne strane odvaja poslednju stavku ("O nama") od slike korisnika: bez njega
   su se dodirivale, pa je izgledalo kao da je slika deo menija. */
.re-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 16px;
}

/* Stavka menija je zaobljeno polje, isto kao izbor u filteru i na formi: na prelaz misem
   se tiho oboji, a tekuca strana stoji na zlatnoj podlozi. Ranije je to bila crta ispod
   naziva, koja se na tamnoj traci jedva videla. */
.re-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    color: #b8b8b8;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}

.re-nav-item .mud-typography {
    font-size: 0.88rem;
    font-weight: 500;
}

.re-nav-item .mud-icon-root {
    font-size: 1.15rem !important;
    color: inherit;
}

.re-nav-item:hover {
    color: #ece4d3;
    background: rgba(255, 255, 255, 0.05);
}

.re-nav-item-active,
.re-nav-item-active:hover {
    background: rgba(209, 180, 113, 0.14);
    color: #FFE7A8;
}

.re-nav-item-active .mud-typography {
    font-weight: 600;
}

.re-nav-item .mud-typography,
.re-nav-item-active .mud-typography,
.re-nav-item .mud-icon-root,
.re-nav-item-active .mud-icon-root {
    color: inherit;
}

/* Slika korisnika nosi tanak zlatan prsten, da se vidi da je i ona dugme. */
.re-avatar.mud-avatar {
    border: 1px solid rgba(209, 180, 113, 0.45);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.re-avatar.mud-avatar:hover {
    border-color: #d1b471;
    box-shadow: 0 0 0 4px rgba(209, 180, 113, 0.12);
}

/* Padajuci meniji (nalog, admin, meni na telefonu) izgledaju kao i paneli po stranama.
   Podrazumevani Material meni je bio svetliji od strane i odudarao je od teme. */
.mud-popover .mud-list {
    background: #262626;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    padding: 6px;
}

/* Stavke menija se u MudBlazor-u ne zovu svuda isto: meni naloga ih pravi kao mud-list-item,
   a meni sa dugmeta (deljenje oglasa) kao mud-menu-item. Dok je ovde stajao samo prvi naziv,
   meni za deljenje je jedini u aplikaciji izgledao kao podrazumevani Material meni. */
.mud-popover .mud-list-item,
.mud-popover .mud-menu-item {
    border-radius: 8px;
    font-size: 0.85rem;
}

.mud-popover .mud-list-item:hover,
.mud-popover .mud-menu-item:hover {
    background: rgba(209, 180, 113, 0.10);
}

/* Znak uz stavku nosi boju njenog teksta. MudBlazor mu daje skoro crnu boju, koja se na
   tamnoj podlozi menija nije ni videla. */
.mud-popover .mud-list-item .mud-icon-root,
.mud-popover .mud-menu-item .mud-icon-root {
    color: inherit;
}

/* Dugme menija na telefonu ima svoju ivicu, da se vidi da je dugme. Boja se pise preko
   "body .mud-appbar", jer MudBlazor svom dugmetu daje skoro crnu boju, a njegov stil se
   ucitava posle ovog: tri crte su se na tamnoj traci jedva nazirale. */
body .mud-appbar .re-burger.mud-icon-button,
body .mud-appbar .re-burger .mud-icon-root {
    color: #d1b471;
}

.re-burger.mud-icon-button {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

.re-burger.mud-icon-button:hover {
    border-color: rgba(209, 180, 113, 0.5);
    background: rgba(209, 180, 113, 0.10);
}

/* Stavke menija na telefonu su iste "pilule" kao u traci na racunaru, pa sama stavka spiska
   ostaje prazna: oblik, boju i oznaku tekuce strane nosi .re-nav-item unutar nje. */
.re-mobile-menu.mud-list {
    min-width: 240px;
}

.re-mobile-menu .mud-list-item,
.re-mobile-menu .mud-list-item:hover {
    padding: 2px 6px;
    background: transparent;
}

.re-mobile-menu .re-nav-item {
    width: 100%;
    padding: 9px 12px;
}

/* Znaci u meniju su zlatni, kao i pre preuredjenja: na uspravnom spisku oni vode oko, dok
   ih na traci gore drzi zajedno sam red. Na izabranoj stavci boju daje sama pilula. */
.re-mobile-menu .re-nav-item .mud-icon-root {
    color: #d1b471;
}

.re-mobile-menu .re-nav-item-active .mud-icon-root {
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Meni ispod slike korisnika. Ranije su tu bile dve gole stavke, pa se nije videlo ni ko
   je prijavljen. Sada na vrhu stoji ko je prijavljen, a odjava je odvojena crtom.
   --------------------------------------------------------------------------- */
.re-user-menu.mud-list {
    min-width: 250px;
}

.re-user-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.re-user-head-avatar.mud-avatar {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(209, 180, 113, 0.4);
}

.re-user-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.re-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ece4d3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.re-user-mail {
    font-size: 0.72rem;
    color: #8f8f8f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.re-user-divider {
    height: 1px;
    margin: 5px 6px;
    background: rgba(255, 255, 255, 0.07);
}

/* Odjava se razlikuje od ostalih stavki, jer je jedina koja te izbacuje sa strane. */
.re-user-logout.mud-list-item {
    color: #E09A8C;
}

.re-user-logout.mud-list-item .mud-icon-root {
    color: #E09A8C;
}

.re-user-logout.mud-list-item:hover {
    background: rgba(198, 112, 95, 0.12);
}

/* ---------------------------------------------------------------------------
   Radnje nad oglasom (promena statusa, izmena, brisanje).
   Ranije su bile u Material bojama: siva i jarko crvena, sto je odudaralo od
   zlatne teme i izgledalo kao da je dugme za brisanje upozorenje o gresci.
   Sada su sve tri u istom, tihom zlatnom okviru, a brisanje se izdvaja tek
   prigusenom pecenom crvenom, i to samo kada je dozvoljeno.
   --------------------------------------------------------------------------- */
.re-icon-action.mud-icon-button {
    color: rgba(209, 180, 113, 0.8);
    border: 1px solid rgba(209, 180, 113, 0.2);
    border-radius: 9px;
    padding: 5px;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.re-icon-action.mud-icon-button:hover {
    color: #FFE7A8;
    border-color: rgba(209, 180, 113, 0.55);
    background-color: rgba(209, 180, 113, 0.1);
}

.re-icon-action.mud-icon-button:disabled {
    color: #4d4d4d !important;
    border-color: rgba(255, 255, 255, 0.06);
    background-color: transparent;
}

.re-icon-action-danger.mud-icon-button {
    color: rgba(198, 112, 95, 0.9);
    border-color: rgba(198, 112, 95, 0.28);
}

.re-icon-action-danger.mud-icon-button:hover {
    color: #E09A8C;
    border-color: rgba(198, 112, 95, 0.6);
    background-color: rgba(198, 112, 95, 0.12);
}

/* ---------------------------------------------------------------------------
   Prozori (promena statusa, brisanje). Podrazumevani Material prozor je ravan i
   svetliji od strane iza njega, pa je izgledao kao da je iz druge aplikacije.
   Ovde je ista tamna podloga kao u zaglavlju, sa zlatnom ivicom i mekom senkom.
   --------------------------------------------------------------------------- */
.re-dialog.mud-paper {
    background-color: #262626;
    border: 1px solid rgba(209, 180, 113, 0.35);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.re-dialog .mud-dialog-title {
    border-bottom: 1px solid rgba(209, 180, 113, 0.18);
    padding-bottom: 12px;
}

.re-dialog .mud-dialog-actions {
    border-top: 1px solid rgba(209, 180, 113, 0.18);
    padding-top: 12px;
}

/* Ponudjeni statusi stoje kao siroka dugmad jedno ispod drugog, sa ikonicom levo, da se u
   jednom pogledu vidi sta se sve moze uraditi sa oglasom. */
.re-status-option.mud-button-root {
    justify-content: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(209, 180, 113, 0.28);
    border-radius: 10px;
    color: #d1b471;
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
    padding: 10px 14px;
}

.re-status-option.mud-button-root:hover {
    background: rgba(209, 180, 113, 0.12);
    border-color: rgba(209, 180, 113, 0.6);
    color: #FFE7A8;
}

/* Brisanje je jedina radnja koja se ne moze vratiti, pa je dugme puno, ali u pecenoj
   crvenoj, a ne u Material crvenoj. */
.re-btn-danger.mud-button-root {
    background: linear-gradient(135deg, #C6705F 0%, #A85748 100%);
    color: #14140F;
    font-weight: 700;
    border-radius: 999px;
    text-transform: none;
    padding: 6px 20px;
}

.re-btn-danger.mud-button-root:hover {
    background: linear-gradient(135deg, #D4816F 0%, #B96354 100%);
}

/* Odobravanje oglasa je jedina potvrdna radnja u aplikaciji, pa nosi smaragdnu, istu boju
   kojom se svuda oznacava potvrda ("Uknjizeno", "Prodato"). */
.re-btn-approve.mud-button-root {
    background: linear-gradient(135deg, #6FC5A6 0%, #4FAE8F 100%);
    color: #14140F;
    font-weight: 700;
    border-radius: 999px;
    text-transform: none;
    padding: 4px 14px;
}

.re-btn-approve.mud-button-root:hover {
    background: linear-gradient(135deg, #82D2B5 0%, #5EBC9C 100%);
}

.re-btn-quiet.mud-button-root {
    color: #9a9a9a;
    text-transform: none;
}

.re-btn-quiet.mud-button-root:hover {
    color: #d1b471;
    background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Sitni naslov iznad grupe polja i uz podatak u prozoru za promenu statusa.
   --------------------------------------------------------------------------- */
.re-status-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9a9a9a;
    margin-right: 2px;
}


.re-details-photo-count {
    position: absolute;
    bottom: 16px;
    right: 16px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    z-index: 2;
}

/* Cena po kvadratu i poredjenje sa prosekom. */
.re-ppm {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Na telefonu poredjenje stoji iznad opisa, u svom okviru sa naslovom, da se ne meša sa
   naslovom oglasa i cenom na vrhu strane. */
.re-mobile-ppm-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #262626;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}

.re-mobile-ppm-title {
    color: #ece4d3;
    font-size: 0.95rem;
    font-weight: 600;
}

.re-ppm-value {
    color: #FFE7A8;
    font-size: 0.95rem;
    font-weight: 600;
}

.re-ppm-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    line-height: 1.3;
}

.re-ppm-row .mud-icon-root {
    flex-shrink: 0;
}

/* Jeftinije od proseka je dobra vest za kupca, pa je smaragdno. Skuplje je zlatno,
   jer to nije greska nego samo podatak. */
.re-ppm-cheaper, .re-ppm-cheaper .mud-icon-root {
    color: #9FD8C5;
}

.re-ppm-pricier, .re-ppm-pricier .mud-icon-root {
    color: #d1b471;
}

.re-ppm-same, .re-ppm-same .mud-icon-root,
.re-ppm-none, .re-ppm-none .mud-icon-root {
    color: #9a9a9a;
}


/* Istorija cene uz cenu oglasa. Stoji u svom okviru, jer to nisu podaci o trazenoj ceni nego
   o tome sta je sa cenom bilo ranije: bez okvira su se stare cene citale kao da su i one deo
   ponude. Oglas kome cena nije menjana ovaj okvir uopste i nema. */
.re-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.re-history-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ece4d3;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Broj promena stoji uz naslov, poravnat udesno: kupac iz njega odmah vidi da li je cena
   dirana jednom ili je oglas vec mesecima u spustanju. */
.re-history-count {
    margin-left: auto;
    color: #9a9a9a;
    font-size: 0.75rem;
    font-weight: 500;
}

.re-history-total {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    line-height: 1.3;
}

.re-history-total .mud-icon-root {
    flex-shrink: 0;
}

/* Spisak nosi sve promene cene. Kod skoro svih oglasa ih je nekoliko i spisak stoji ceo, ali
   oglas kome je cena menjana dvadeset puta ne sme da razvuce kutiju uz cenu preko cele strane,
   pa se posle otprilike sest redova spisak prevrce u samom okviru. Traka se vidi tek kada ima
   sta da se prevrce, pa je i sama znak da promena ima jos. */
.re-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 132px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(209, 180, 113, 0.35) transparent;
}

/* Traka stoji uz same brojeve, pa je tanka i u boji ostatka strane, da spisak ne izgleda kao
   posebno polje unutar kutije. */
.re-history-list::-webkit-scrollbar {
    width: 4px;
}

.re-history-list::-webkit-scrollbar-thumb {
    background: rgba(209, 180, 113, 0.35);
    border-radius: 999px;
}

.re-history-list::-webkit-scrollbar-track {
    background: transparent;
}

/* Svaka promena je jedan red: datum, stara i nova cena, pa procenat sa strane. Datum i
   procenat imaju svoju sirinu, da se kod vise promena procenti poklope jedan ispod drugog. */
.re-history-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    line-height: 1.3;
}

.re-history-date {
    flex-shrink: 0;
    color: #9a9a9a;
}

.re-history-prices {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
}

/* Stara cena je precrtana, pa se i bez citanja vidi koja od dve vise ne vazi. */
.re-history-old {
    color: #9a9a9a;
    text-decoration: line-through;
}

.re-history-new {
    color: #ece4d3;
    font-weight: 600;
}

/* Snizenje je dobra vest za kupca, pa je smaragdno, isto kao i cena ispod proseka.
   Poskupljenje je zlatno: nije greska, nego samo podatak. */
.re-history-down, .re-history-down .mud-icon-root {
    color: #9FD8C5;
}

.re-history-up, .re-history-up .mud-icon-root {
    color: #d1b471;
}

.re-history-same, .re-history-same .mud-icon-root {
    color: #9a9a9a;
}

/* Provizija agencije uz cenu. Stoji u svom okviru, jer nije deo trazene cene nego dodatni
   trosak, pa ne sme da se procita kao da je cena veca nego sto pise. */
.re-fee {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255, 231, 168, 0.06);
    border: 1px solid rgba(255, 231, 168, 0.18);
    border-radius: 10px;
}

.re-fee-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.3;
    color: #9a9a9a;
}

.re-fee-row .mud-icon-root {
    flex-shrink: 0;
    color: #d1b471;
}

/* Sam iznos provizije se gura desno, da stoji u istoj koloni sa ukupnom cenom ispod. */
.re-fee-amount {
    margin-left: auto;
    color: #ece4d3;
    font-weight: 600;
    white-space: nowrap;
}

.re-fee-total {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.78rem;
    color: #9a9a9a;
}

.re-fee-total-amount {
    margin-left: auto;
    color: #FFE7A8;
    font-weight: 700;
    white-space: nowrap;
}

/* Unutar okvira za proviziju na formi iznos ide bez svog okvira, da kutija ne stoji u kutiji.
   Od onoga sto ga menja odvaja ga samo crta. */
.re-fee-flat {
    margin-top: 14px;
    padding: 12px 0 0;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
}

/* Naslov oglasa vodi na detalje, pa se ponasa kao veza. */
.re-title-link {
    cursor: pointer;
    transition: color 0.15s ease;
}

.re-title-link:hover {
    color: #FFE7A8 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Strelice se ne vide ni na svetlim ni na tamnim fotografijama, pa su bele na tamnom krugu.
   MudBlazor nema klasu za strelice, ali su to jedina dugmad u galeriji koja nisu tackice
   (tackice nose klasu re-bullet), pa se biraju preko :not(.re-bullet). */
.re-details-carousel button:not(.re-bullet),
.image-viewer-carousel button:not(.re-bullet),
.re-card-carousel button:not(.re-bullet) {
    background-color: rgba(0, 0, 0, 0.55) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.re-details-carousel button:not(.re-bullet),
.re-details-carousel button:not(.re-bullet) .mud-icon-root,
.re-details-carousel button:not(.re-bullet) svg,
.image-viewer-carousel button:not(.re-bullet),
.image-viewer-carousel button:not(.re-bullet) .mud-icon-root,
.image-viewer-carousel button:not(.re-bullet) svg,
.re-card-carousel button:not(.re-bullet),
.re-card-carousel button:not(.re-bullet) .mud-icon-root,
.re-card-carousel button:not(.re-bullet) svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.re-details-carousel button:not(.re-bullet):hover,
.image-viewer-carousel button:not(.re-bullet):hover,
.re-card-carousel button:not(.re-bullet):hover {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* MudBlazor stavlja strelice i traku sa tackicama u isti flex red. Svaka tackica je
   dugme od 48px, pa kod oglasa sa puno slika traka bude siroka nekoliko hiljada piksela,
   razvuce taj red i izgura desnu strelicu van slike. Zato se traka vadi iz reda
   (position: absolute) i lepi na dno slike, a strelice ostaju na ivicama.
   MudBlazor nema klase za taj red ni za traku, pa se biraju preko :has(). */
.re-details-carousel > div:has(> button),
.image-viewer-carousel > div:has(> button),
.re-card-carousel > div:has(> button) {
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
}

.re-details-carousel div:has(> div > button.re-bullet),
.image-viewer-carousel div:has(> div > button.re-bullet),
.re-card-carousel div:has(> div > button.re-bullet) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
}

/* Razmak sa strana je da se tackice ne podvuku ispod strelica. Prelamaju se u vise
   redova samo ako ni najmanja velicina nije dovoljna da stanu u jedan. */
.re-details-carousel div:has(> button.re-bullet),
.image-viewer-carousel div:has(> button.re-bullet),
.re-card-carousel div:has(> button.re-bullet) {
    flex-wrap: wrap;
    padding: 0 52px;
}

/* Velicina tackice zavisi od broja slika. Komponenta zadaje --re-bullet-size,
   a ovde su podrazumevane vrednosti koje MudBlazor inace koristi. */
.re-bullet {
    padding: calc(var(--re-bullet-size, 24px) / 2) !important;
}

.re-bullet .mud-icon-root {
    font-size: var(--re-bullet-size, 24px) !important;
    width: var(--re-bullet-size, 24px) !important;
    height: var(--re-bullet-size, 24px) !important;
}

/* Strelica na kartici u spisku je manja nego u galeriji na strani oglasa. Stil je isti (beo
   znak na tamnom krugu), menja se samo velicina: kartica u mrezi je uza od velike slike, pa
   strelica iste velicine prekriva dobar deo onoga zbog cega se slika i gleda.
   Na telefonu se ne smanjuje: tamo je kartica preko cele sirine, a prst trazi vece dugme, pa
   za uzak ekran ostaje mera zadata nize u @media bloku. */
.re-card-carousel button:not(.re-bullet) {
    padding: 7px !important;
}

.re-card-carousel button:not(.re-bullet) .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

/* Strelice su uze, pa se i razmak koji im tackice ostavljaju sa strana smanjuje za toliko. */
.re-card-carousel div:has(> button.re-bullet) {
    padding: 0 40px;
}

/* Na telefonu je slika niza. !important je potreban jer je visina zadata
   direktno na komponenti, a to CSS ne moze da promeni bez njega. */
@media (max-width: 599px) {
    .re-details-carousel,
    .re-details-image {
        height: 260px !important;
    }

    /* Strelice i tackice izgledaju isto kao na kompjuteru, samo su manje da bi
       stale u usku sliku. */
    .re-details-carousel button:not(.re-bullet),
    .image-viewer-carousel button:not(.re-bullet),
    .re-card-carousel button:not(.re-bullet) {
        padding: 8px !important;
    }

    .re-details-carousel button:not(.re-bullet) .mud-icon-root,
    .image-viewer-carousel button:not(.re-bullet) .mud-icon-root,
    .re-card-carousel button:not(.re-bullet) .mud-icon-root {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }

    .re-details-carousel div:has(> button.re-bullet),
    .image-viewer-carousel div:has(> button.re-bullet),
    .re-card-carousel div:has(> button.re-bullet) {
        padding: 0 40px;
    }

    .re-bullet {
        padding: calc(var(--re-bullet-size-mobile, 16px) / 2) !important;
    }

    .re-bullet .mud-icon-root {
        font-size: var(--re-bullet-size-mobile, 16px) !important;
        width: var(--re-bullet-size-mobile, 16px) !important;
        height: var(--re-bullet-size-mobile, 16px) !important;
    }
}

/* ---------------------------------------------------------------------------
   Kartica oglasa.
   Ova pravila su namerno ovde, a ne u RealEstateCard.razor.css. Izdvojeni stil
   (CSS isolation) dodaje svoju oznaku samo na obicne HTML elemente iz markupa, a
   ne i na koreni element ugradjene komponente. Klase .re-card, .re-card-content,
   .re-card-title i .re-card-price stoje na MudCard, MudCardContent i MudText, pa
   se ta pravila nikada nisu ni primenila: kartice su bile razlicite sirine, a
   naslov u jednom redu je dizao cenu vise nego kod naslova u dva reda.
   --------------------------------------------------------------------------- */

/* Kartica popunjava celo polje u mrezi, i po sirini i po visini. Roditelj (MudItem) je
   d-flex, pa se sve kartice u redu rastegnu na visinu najvise. */
.re-card {
    height: 100%;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* Zlatna ivica se pojavljuje tek na prelaz misem, da mreza kartica ostane mirna. */
.re-card {
    border: 1px solid rgba(209, 180, 113, 0.10);
}

.re-card:hover {
    transform: translateY(-5px);
    border-color: rgba(209, 180, 113, 0.45);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
}

/* Izdvojen oglas se poznaje po zlatnoj ivici cele kartice, a ne po oznaci preko slike. Oznaka
   je stajala u gornjem levom uglu, odmah ispod namene, pa su dva zlatna polja jedno na drugom
   trosila deo slike i takmicila se medjusobno. Ivica isto to kaze, a sliku ostavlja celu.
   Meki zlatni sjaj uz ivicu radi ono sto je puna oznaka radila ranije: izdvaja karticu u mrezi
   jos pre nego sto se procita ijedan podatak sa nje. */
.re-card-featured {
    border-color: rgba(209, 180, 113, 0.65);
    box-shadow: 0 0 0 1px rgba(209, 180, 113, 0.20), 0 10px 34px rgba(0, 0, 0, 0.5) !important;
}

.re-card-featured:hover {
    border-color: rgba(255, 231, 168, 0.9);
    box-shadow: 0 0 0 1px rgba(209, 180, 113, 0.35), 0 18px 50px rgba(0, 0, 0, 0.55) !important;
}

.re-card-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

/* Broj gledalaca i broj slika dele donji desni ugao slike. Dok je broj slika stajao sam,
   bio je prikovan za ugao; sada ih drzi zajednicki red, da se ne bi preklopili. */
.re-card-meta {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.re-card-views,
.re-card-image-count {
    background: rgba(0, 0, 0, 0.62);
    color: #d1b471;
    border: 1px solid rgba(209, 180, 113, 0.35);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
}

/* Obican broj gledalaca stoji tiho, u sivom: to je uzgredan podatak i ne sme da se takmici
   sa cenom i namenom. Boju dobija tek kada oglas postane trazen. */
.re-card-views {
    color: #9a9a9a;
    border-color: rgba(255, 255, 255, 0.18);
}

.re-card-views .mud-icon-root {
    color: inherit;
}

/* Trazen oglas: zlatno oko sa punom ivicom i blagim sjajem. Isti zlatni jezik kao i ostale
   oznake u aplikaciji, pa se odmah cita kao "ovo je nesto", a ne kao nova vrsta oznake. */
.re-card-views-popular {
    color: #14140F;
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    border-color: #E2C98A;
    box-shadow: 0 0 12px rgba(209, 180, 113, 0.45);
}

.re-card-placeholder {
    height: 220px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Red preko vrha slike: namena (i status ispod nje) levo, medalja izdvojenog oglasa desno.
   Oba kraja stoje u istom redu, pa im se gornje ivice poklapaju same od sebe, bez racunanja
   razmaka po visini: kada bi svaka oznaka bila zasebno prikovana za svoj ugao, razlika u
   visini izmedju pilule i kruzica bi ih razmakla.
   Prazan prostor izmedju dva kraja reda ne hvata pokazivac, da klik na sliku tu i dalje
   otvara galeriju: sam red se prostire preko cele sirine, pa bi inace pojeo ceo gornji rub
   slike. Same oznake ga hvataju, jer medalja ima opis koji se cita na prelaz misem. */
.re-card-badge-row {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
}

.re-card-badge-row > * {
    pointer-events: auto;
}

/* Namena i status stoje jedno ispod drugog, u levom kraju tog reda. */
.re-card-badge-purpose-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.re-card-badge-purpose {
    color: #14140F;
    /* Ista mera, tezina i razmak slova kao oznaka statusa ispod nje: bila je veca za pola
       stepena i deblja, pa je u koloni oznaka ispadala iz reda. Razlikuje je puna zlatna
       ispuna, a ne velicina. Ispuna je bez znaka, pa joj gornja i donja ispuna nadoknadjuju
       visinu koju kod ostalih daje znak. */
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6.5px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Obe namene su zlatne, a razlikuju se popunjenoscu: prodaja je puna, izdavanje je tamno
   staklo sa zlatnom ivicom. Izdavanje je ranije bilo smaragdno, a smaragdna se u aplikaciji
   koristi za "prodato" i "uknjizeno", pa je oznaka namene ispadala iz zlatnog sklopa ostatka
   strane i vukla pogled na sebe vise nego sam oglas.
   Blagi preliv daje punoj oznaci malo dubine, da ne izgleda kao ravno obojeno polje. */
.re-badge-sale {
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
}

/* Medalja izdvojenog oglasa. Isto tamno staklo i zlatna ivica kao kod izdavanja, samo bez
   teksta, pa je kruzic: u desnom uglu nema mesta za jos jednu pilulu sa slovima, a i sve sto
   je trebalo reci vec kaze zlatna ivica cele kartice.
   Meki zlatni sjaj je isti kao oko ivice kartice, da se dve stvari citaju kao jedna. */
.re-card-badge-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 15, 0.82);
    color: #FFE7A8;
    border: 1px solid rgba(209, 180, 113, 0.75);
    border-radius: 999px;
    padding: 2.5px;
    line-height: 1;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 3px rgba(209, 180, 113, 0.12), 0 2px 10px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.re-card-badge-premium .mud-icon-root {
    font-size: 0.8rem;
    width: 0.8rem;
    height: 0.8rem;
    display: block;
}

/* Ivica uzima 1px sa svake strane, pa je unutrasnji razmak za toliko manji: bez toga bi
   izdavanje stajalo 2px vise od prodaje, a dve oznake se u mrezi vide jedna pored druge. */
.re-badge-rent {
    background: rgba(20, 20, 15, 0.82);
    color: #E2C98A;
    border: 1px solid rgba(209, 180, 113, 0.75);
    padding: 4.5px 11px;
    backdrop-filter: blur(4px);
}

/* Status je stanje oglasa, a ne njegova osobina, pa stoji tise od namene: tamno staklo sa
   obojenim slovima i ivicom. Sampanj znaci "ceka pregled", zlatna "aktivan", siva
   "sklonjeno", smaragdna "prodato". Ikonica i tekst stoje u istom redu. */
.re-card-badge-status {
    background: rgba(0, 0, 0, 0.62);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.re-card-badge-status .mud-icon-root {
    line-height: 1;
    display: block;
}

.re-card-badge-status span {
    line-height: 1;
    display: block;
}

.re-badge-pending {
    color: #FFE7A8;
    border: 1px solid rgba(255, 231, 168, 0.55);
}

.re-badge-active {
    color: #d1b471;
    border: 1px solid rgba(209, 180, 113, 0.55);
}

.re-badge-inactive {
    color: #9a9a9a;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.re-badge-sold {
    color: #9FD8C5;
    border: 1px solid rgba(79, 174, 143, 0.6);
}

/* Srce stoji u donjem levom uglu slike: gornji levi je vec zauzet namenom, a donji desni
   brojem slika. Isto je tamno staklo kao i te oznake, da se sve preko slike cita na isti
   nacin. */
/* Strana bez ijednog oglasa. Pocetna strana je prvo sto posetilac vidi na novom sajtu, pa tu
   ne sme da stoji samo jedna recenica na praznom ekranu: umesto oglasa stoji sta sajt radi i
   sta se ovde ocekuje. Bez ovoga je pored prazne mreze stajao i filter po kome nema sta da se
   trazi. */
.re-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 16px 72px;
}

/* Znak u zlatnom krugu, isti jezik kao oznake po aplikaciji. */
.re-empty-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: rgba(209, 180, 113, 0.12);
    border: 1px solid rgba(209, 180, 113, 0.35);
}

.re-empty-badge .mud-icon-root {
    font-size: 2.1rem;
    color: #d1b471;
}

.re-empty-text {
    max-width: 620px;
    line-height: 1.6;
}

/* Prazna pocetna strana zauzima ceo ekran, da ispod nje ne ostane pola prazne strane. Oduzima
   se traka gore i mesto za podnozje. */
.re-empty-full {
    min-height: calc(100vh - 220px);
    justify-content: center;
}

/* Da oglasa jos nema pise tiho, kao najava, a ne kao naslov strane. */
.re-empty-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(209, 180, 113, 0.10);
    border: 1px solid rgba(209, 180, 113, 0.28);
    color: #d1b471;
    font-size: 0.8rem;
    font-weight: 500;
}

.re-empty-note .mud-icon-root {
    font-size: 1rem;
}

/* Ko stoji iza sajta: posetilac koji prvi put dodje proverava kome ostavlja oglas i telefon. */
.re-empty-about {
    width: 100%;
    margin-top: 36px;
    padding: 22px 24px;
    background: #262626;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    text-align: left;
}

.re-empty-about-title {
    display: block;
    color: #ece4d3;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.re-empty-about p {
    margin: 0 0 10px;
    color: #9a9a9a;
    font-size: 0.88rem;
    line-height: 1.65;
}

/* Tri koraka stoje u redu na racunaru, jedan ispod drugog na telefonu. Isti tamniji panel kao
   filter i paneli na formi, da prazna strana ostane u istom stilu kao i puna. */
.re-empty-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-top: 32px;
    text-align: left;
}

/* Celine na praznoj strani ("Za koga je Relhom", "Šta ćete moći ovde") idu preko cele sirine
   strane, jer na praznoj strani nema oglasa koji bi je popunili. */
.re-empty-section {
    width: 100%;
    margin-top: 36px;
    text-align: left;
}

.re-empty-section-title {
    display: block;
    color: #ece4d3;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.re-empty-section .re-empty-steps {
    margin-top: 0;
}

/* Cetiri polja u redu, jer su kraca od onih u celini iznad. */
.re-empty-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    text-align: left;
}

.re-empty-feature {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    background: #262626;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}

.re-empty-feature .mud-icon-root {
    color: #d1b471;
    font-size: 1.4rem;
}

@media (max-width: 1100px) {
    .re-empty-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .re-empty-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .re-empty-steps {
        grid-template-columns: 1fr;
    }
}

.re-empty-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    background: #262626;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}

.re-empty-step .mud-icon-root {
    color: #d1b471;
    font-size: 1.4rem;
}

.re-empty-step-title {
    color: #ece4d3;
    font-size: 0.95rem;
    font-weight: 600;
}

.re-empty-step-text {
    color: #9a9a9a;
    font-size: 0.82rem;
    line-height: 1.5;
}

.re-card-favorite-wrap {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
}

.re-card-favorite {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(209, 180, 113, 0.35);
    color: #d1b471;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.re-card-favorite .mud-icon-root {
    font-size: 1.15rem;
}

.re-card-favorite:hover {
    border-color: #d1b471;
    transform: scale(1.08);
}

/* Sacuvan oglas nosi punu zvezdicu u svetlijem zlatu, na zlatnoj podlozi: prazna zvezdica je
   tiha, a puna svetli, pa se na spisku odmah vidi sta je sacuvano. */
.re-card-favorite-on,
.re-card-favorite-on:hover {
    color: #FFE7A8;
    background: rgba(209, 180, 113, 0.30);
    border-color: rgba(255, 231, 168, 0.75);
}

.re-card-favorite:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---------------------------------------------------------------------------
   Poravnanje svih oznaka na kartici oglasa (namena, status, uknjizeno, broj
   gledalaca, broj slika, podaci o nekretnini) i oznaka na strani oglasa.

   Tri stvari su ih ranije pomerale sa sredine:
   1. znak (MudIcon crta <svg>) je nosio visinu reda svog fonta i stajao je na
      osnovnoj liniji teksta, pa je "plutao" iznad njega;
   2. sam <svg> je po pravilu poravnat po osnovnoj liniji, a ne po sredini;
   3. razmak izmedju slova (letter-spacing) dodaje prazninu i iza poslednjeg
      slova, pa je tekst u oznaci stajao malo levo od sredine.
   Zato se svuda postavlja isto: polje je inline-flex sa sredinom u oba pravca,
   znak i tekst su blokovi visine svog reda, a praznina na kraju se ponistava.
   --------------------------------------------------------------------------- */
.re-card-badge-purpose,
.re-card-badge-status,
.re-card-badge-registered,
.re-card-badge-featured,
.re-card-views,
.re-card-image-count,
.re-card-stat,
.re-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.re-card-badge-purpose .mud-icon-root,
.re-card-badge-status .mud-icon-root,
.re-card-badge-registered .mud-icon-root,
.re-card-badge-featured .mud-icon-root,
.re-card-views .mud-icon-root,
.re-card-image-count .mud-icon-root,
.re-card-stat .mud-icon-root,
.re-tag .mud-icon-root {
    display: block;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}

.re-card-badge-purpose span,
.re-card-badge-status span,
.re-card-badge-registered span,
.re-card-badge-featured span,
.re-card-views span,
.re-card-image-count span,
.re-card-stat span,
.re-tag span {
    display: block;
    line-height: 1;
}

/* Cetvrti razlog, koji je ostajao i posle svega gore: line-height: 1 centrira polje slova, a ne
   sama slova. U tom polju iznad velikih slova stoji malo praznine, a ispod osnovne linije cela
   praznina za repove slova (p, j, g), kojih u oznakama pisanim velikim slovima nema. Zato je
   ispod slova uvek ostajalo vise mesta nego iznad i tekst je stajao previse visoko: pola pixela
   na svim oznakama, a puna dva na "Uknjizeno", jer kvacica na Z jos podigne slova.
   text-box sece polje na tacnu visinu velikog slova (od vrha velikog slova do osnovne linije),
   pa align-items: center od tog trenutka centrira slova koja se vide, a ne prazninu oko njih.
   Kvacica na Z sme da prelazi preko te ivice: "Uknjizeno" tako stoji na istoj visini kao
   "Prodaja", umesto da ga kvacica gurne nadole.
   Vazi samo za oznake pisane velikim slovima i za one u kojima stoji samo broj. Podaci o
   nekretnini ("2 sobe", "2. sprat") pisu se malim slovima i imaju repove, a rep ide ispod
   osnovne linije, dakle van ovako sasecenog polja: tamo bi ga polje sa sakrivenim viskom
   odseklo. Zato .re-card-stat span ovde namerno ne stoji. */
.re-card-badge-purpose span,
.re-card-badge-status span,
.re-card-badge-registered span,
.re-card-badge-featured span,
.re-card-views span,
.re-card-image-count span,
.re-tag span {
    text-box: cap alphabetic;
}

/* Firefox jos ne zna za text-box, pa tamo slova ostaju na starom mestu. Pomeraj je uvek isti
   deo visine slova, pa se nadoknadjuje u em, da vazi na svakoj velicini oznake. Pomera se
   crtanje, a ne prelom, pa se u samom rasporedu nista ne menja. */
@supports not (text-box: cap alphabetic) {
    .re-card-badge-purpose span,
    .re-card-badge-status span,
    .re-card-badge-registered span,
    .re-card-badge-featured span,
    .re-card-views span,
    .re-card-image-count span,
    .re-tag span {
        transform: translateY(0.05em);
    }
}

/* Praznina iza poslednjeg slova postoji samo tamo gde je slovima dat razmak, i ponistava se na
   samom tekstu, a ne na polju: kada bi stajala na polju, pomerila bi celu oznaku ulevo umesto
   sto centrira tekst u njoj. */
.re-card-badge-purpose span,
.re-card-badge-status span,
.re-card-badge-registered span,
.re-tag span {
    margin-right: -0.08em;
}

.re-card-content {
    flex: 1;
    padding: 14px 16px 8px !important;
}

/* Vrsta nekretnine stoji levo, a koliko dugo oglas stoji desno, na istom redu. Poravnati su po
   osnovnoj liniji, a ne po sredini, jer su razlicite velicine: po sredini bi manji tekst
   "plutao" u odnosu na veci. */
.re-card-type-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.re-card-type-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Koliko dugo oglas stoji je uzgredan podatak, pa je sivo: vrsta nekretnine ostaje ono sto se
   na tom redu prvo procita. Mera je ista kao kod vrste, jer su u istom redu, a razlicite mere
   u jednom redu su se videle kao greska. Ne prelama se u dva reda, jer bi tada pomerila naslov
   ispod sebe samo na nekim karticama. */
.re-card-posted {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #9a9a9a;
    white-space: nowrap;
}

/* Naslov je uvek tacno dva reda, i kada je kratak i kada je dug. To je jedino mesto zbog
   koga su kartice bile razlicite visine: kratak naslov je zauzimao jedan red, dug dva.
   Pravila idu preko MudBlazor stila (!important), jer MudText postavlja svoj display i
   visinu linije, pa se bez toga skracivanje na dva reda uopste ne primenjuje. */
.re-card .re-card-title {
    font-weight: 700;
    line-height: 1.3 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    height: 2.6em;
}

.re-card-location-row {
    overflow: hidden;
}

.re-card-location-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Podaci o nekretnini stoje kao male oznake na tamnoj podlozi, da se citaju u jednom
   pogledu i da svaka kartica izgleda isto bez obzira koliko podataka ima. */
/* Plac ima jednu oznaku, stan ih ima pet pa se prelamaju u dva reda. Najmanja visina je
   zato visina dva reda: tako je i kartica placa iste visine kao kartica stana, pa su sve
   kartice na strani jednake, a ne samo one u istom redu. */
.re-card-stats {
    gap: 6px;
    min-height: 66px;
    align-content: flex-start;
}

/* Ikonica i tekst se poravnavaju po sredini, sa istom visinom linije, da stoje
   tacno u istom redu. Bez toga ikonica "pluta" malo iznad teksta. */
.re-card-stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(209, 180, 113, 0.18);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #d1b471;
    line-height: 1;
    white-space: nowrap;
}

.re-card-stat .mud-icon-root {
    color: #d1b471;
    line-height: 1;
    display: block;
}

.re-card-stat span {
    line-height: 1;
    display: block;
}

/* Lift koji postoji je prednost, pa je smaragdan. Kada ga nema, oznaka je siva da
   se vidi da je podatak tu, ali da ne skrece paznju. */
.re-card-stat-yes {
    background: rgba(79, 174, 143, 0.12);
    border-color: rgba(79, 174, 143, 0.45);
    color: #9FD8C5;
}

.re-card-stat-yes .mud-icon-root {
    color: #9FD8C5;
}

.re-card-stat-no {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.10);
    color: #9a9a9a;
}

.re-card-stat-no .mud-icon-root {
    color: #9a9a9a;
}

/* Podnozje kartice: vlasnik oglasa levo, cena desno. Ranije je izmedju njih stajalo dugme
   "Detalji", ali naslov kartice vec vodi na isto mesto, pa je dugme sklonjeno i podnozje
   ostalo mirnije. */
/* Podnozje ima dva reda: gornji je vlasnik sa cenom, donji je provizija. Razmak i poravnanje
   stoje na gornjem redu, koji je ostao onakav kakav je i bio, da se dodavanjem provizije u
   njemu nista ne pomeri. */
.re-card-footer {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
}

/* Red se prelama kada u njega ne stane sve: cena tada pada u svoj red, uz desnu ivicu, umesto
   da stisne dugmad pored sebe. Na karticama bez radnji nema sta ni da se prelomi, pa im je
   podnozje ostalo isto. */
.re-card-footer-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 8px;
}

/* MudTooltip oko vlasnika pravi svoj omotac, i on je stvarna stavka ovog reda. Bez ovoga se
   omotac ne skuplja ispod sirine imena, pa je na uskoj kartici sa dugim imenom vlasnika cena
   izlazila izvan ivice, a strana dobijala vodoravni klizac. */
.re-card-footer-main > * {
    min-width: 0;
}

/* Cena se odvaja na desnu stranu i tu ostaje bez obzira da li levo stoji vlasnik ili radnje
   nad oglasom. Cena i cena po kvadratu stoje u istom redu, poravnate po osnovnoj liniji, da
   podnozje kartice bude jedan red. Na uskom ekranu se cena po kvadratu prelama ispod. */
.re-card-price-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.re-card-price {
    font-weight: 700;
    line-height: 1.2;
}

/* -----------------------------------------------------------------------------
   Polja na formi za oglas. Podrazumevana MudBlazor polja su providna, sa tankom
   sivom ivicom i uglovima skoro bez zaobljenja, pa su na tamnoj podlozi izgledala
   kao gole crte, a ne kao polja u koja se kuca. Sada imaju svoju ispunu, jasnu
   ivicu i zlatnu ivicu dok se u njima kuca, isto kao paneli i dugmad po aplikaciji.
   ----------------------------------------------------------------------------- */
.re-panel-body .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    transition: border-color .15s ease;
}

.re-panel-body .mud-input.mud-input-outlined {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 10px;
}

.re-panel-body .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(209, 180, 113, 0.35);
}

/* Polje u kome se trenutno kuca nosi zlatnu ivicu, da se odmah vidi gde je kursor. */
.re-panel-body .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #d1b471 !important;
    border-width: 1px;
}

.re-panel-body .mud-input-control input,
.re-panel-body .mud-input-control textarea {
    color: #ece4d3;
}

/* Naziv polja je tiši od unetog teksta, a zlatan dok se u polju kuca. */
.re-panel-body .mud-input-label {
    color: #9a9a9a;
}

.re-panel-body .mud-input-control .mud-input-label-inputcontrol.mud-focused,
.re-panel-body label.mud-input-label.mud-focused {
    color: #d1b471;
}

/* Objašnjenje ispod polja i brojač znakova stoje tiho, da ne odvlače pažnju sa samog polja. */
.re-panel-body .mud-input-helper-text {
    color: #8a8a8a;
}

/* Znak u polju (evro, procenat, telefon) nosi zlatnu boju, kao i ostali znaci u aplikaciji. */
.re-panel-body .mud-input-adornment .mud-icon-root {
    color: #d1b471;
}

/* Kod izdavanja uz cenu stoji "/mesec". Pise tise i sitnije od same cene, jer je to mera, a
   ne jos jedan iznos. Bez toga se kirija od 520 € cita kao cena nekretnine. */
.re-price-period {
    color: #9a9a9a;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 2px;
}

/* Cena po kvadratu stoji odmah ispod cene, tise od nje, kao dopuna a ne kao druga cena. */
.re-card-price-ppm {
    color: #9a9a9a;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* Provizija na formi je svoja celina: naslov, objasnjenje, procenat, nacin placanja i
   izracunat iznos stoje u jednom okviru. Ranije su ta tri dela stajala razbacano po panelu sa
   cenom, svaki na svojoj visini, pa se nije videlo da pripadaju istoj stvari. */
.re-fee-panel {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(255, 231, 168, 0.04);
    border: 1px solid rgba(255, 231, 168, 0.16);
    border-radius: 12px;
}

.re-fee-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ece4d3;
    font-size: 0.95rem;
    font-weight: 600;
}

.re-fee-panel-head .mud-icon-root {
    color: #d1b471;
    font-size: 1.1rem;
}

/* Objasnjenje je uvuceno pod naslov, u sirini znaka ispred njega. */
.re-fee-panel-hint {
    margin: 5px 0 0 27px;
    color: #9a9a9a;
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Procenat i nacin placanja stoje jedno pored drugog, jer se i biraju zajedno. Na uskom
   ekranu nacin placanja prelazi u sledeci red i tamo zauzima celu sirinu. */
.re-fee-panel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

/* U polje ide broj od dve cifre, pa je uze od ostalih polja na formi. U sirini cele kolone,
   kao cena i povrsina, izgledalo je kao da se i tu ocekuje iznos u evrima.
   Uz naziv polja stoji i klasa samog MudBlazor polja, jer njegov stil stize posle ovog i sa
   istom tezinom, pa bi inace on odneo prevagu i polje bi ostalo siroko. */
.re-fee-percent-field.mud-input-control {
    width: 150px;
    flex: 0 0 150px;
}

.re-fee-panel-segment {
    flex: 1 1 260px;
}

/* Provizija stoji u svom redu odmah ispod cene, poravnata sa njom po desnoj ivici. Zauzima
   celu sirinu podnozja, pa se ne otima o mesto sa vlasnikom i cenom. Red se crta i kada
   provizije nema, prazan, pa sve kartice u redu imaju podnozje iste visine i cene ostaju u
   istoj liniji. Zato ima zadatu visinu, a ne visinu svog teksta.
   Kada se provizija placa na cenu, nosi zlatnu boju kao i cena, jer je i to novac koji kupac
   daje. Kada je uracunata, tiha je kao cena po kvadratu, jer se iznos ne menja. */
.re-card-price-fee {
    height: 15px;
    margin-top: 2px;
    text-align: right;
    color: #d1b471;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.re-card-price-fee-included {
    color: #9a9a9a;
    font-weight: 500;
}

/* Dugmad ostaju svoje mere i kada u red ne staje sve. Na strani sa svim oglasima uz njih
   stoji i vlasnik oglasa, pa su se cetiri dugmeta stezala jedno preko drugog i preko cene:
   izgledalo je kao da olovka stoji preko iznosa. */
.re-card-actions {
    gap: 4px;
    flex: none;
}

/* Uz sliku vlasnika stoji i njegovo ime, jer se po imenu oglas i pamti. Ceo blok vodi na
   profil, pa i ime menja boju na prelaz misem, da se vidi da je i ono deo dugmeta. */
.re-card-owner {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: 0;
}

.re-card-owner-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #d1b471;
    max-width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .15s ease;
}

.re-card-owner:hover .re-card-owner-name {
    color: #FFE7A8;
}

/* Red ispod cene na strani "Oglasi na cekanju": levo status, desno dugme za odobravanje. */
.re-card-approve {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px 14px;
    border-top: 1px solid rgba(209, 180, 113, 0.12);
    padding-top: 12px;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Zaglavlje pocetne strane. Ranije su tu stajala tri reda teksta iste velicine, jedan
   ispod drugog, pa se nije videlo sta je naslov. Sada naslov nosi stranu, kraj naslova je
   zlatan, a ispod stoji jedna recenica i brojevi iz same ponude.
   --------------------------------------------------------------------------- */
.re-hero {
    position: relative;
    text-align: center;
    padding: 8px 16px 30px;
}

/* Tiho zlatno svetlo iza naslova, da vrh strane ne bude ravna crna povrsina. */
.re-hero::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: min(820px, 92%);
    height: 240px;
    background: radial-gradient(ellipse at center, rgba(209, 180, 113, 0.11), rgba(209, 180, 113, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.re-hero > * {
    position: relative;
    z-index: 1;
}

.re-hero-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8f8f8f;
}

.re-hero-title {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -1px;
    color: #ece4d3;
}

.re-hero-title span {
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.re-hero-text {
    max-width: 640px;
    margin: 14px auto 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #9a9a9a;
}

.re-hero-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}

.re-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: #8f8f8f;
}

.re-hero-stat .mud-icon-root {
    font-size: 1rem !important;
    color: rgba(209, 180, 113, 0.7);
}

.re-hero-stat b {
    color: #d1b471;
    font-weight: 700;
    font-size: 0.95rem;
}

.re-hero-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(209, 180, 113, 0.45);
}

/* Na telefonu tri broja sa dve tackice izmedju njih ne staju u jedan red, pa se red lomio
   tako da tackica ostane na kraju: "11 oglasa • 4 grada •", a "3 oglasivaca" u novom redu.
   Bez tackica sva tri broja staju u red, a znak ispred svakog i dalje govori gde jedan
   prestaje a drugi pocinje. */
@media (max-width: 599px) {
    .re-hero-dot {
        display: none;
    }

    .re-hero-stats {
        gap: 14px;
    }
}

/* ---------------------------------------------------------------------------
   Panel. Ista podloga kao filter i brojaci: tamnija od strane, sa tankom ivicom, svetlom
   crtom po vrhu i senkom ispod. Koristi se na formi za unos oglasa, gde je svaka celina
   (osnovno, lokacija, cena, detalji, opis) svoj panel sa zaglavljem.
   --------------------------------------------------------------------------- */
.re-panel {
    background: #262626;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    margin-bottom: 16px;
}

.re-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px 16px 0 0;
}

.re-panel-head .mud-icon-root {
    color: #d1b471;
    font-size: 1.15rem !important;
}

.re-panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ece4d3;
}

/* Broj uz naslov panela (koliko je slika dodato). */
.re-panel-count {
    margin-left: auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(209, 180, 113, 0.14);
    border: 1px solid rgba(209, 180, 113, 0.3);
    color: #d1b471;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.re-panel-body {
    padding: 18px;
}

.re-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Mera uz polje kada se ne bira (kvadrat kod svega osim placa). */
.re-field-suffix {
    flex: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8f8f8f;
}

/* Prekidac na formi ide preko cele sirine, jer tamo ima mesta i lakse se pogadja. */
.re-segment-wide .re-segment-item {
    padding: 9px 4px;
    font-size: 0.82rem;
}

/* Izbor tipa nekretnine: znak i naziv u malom polju, sest polja u tri kolone. Ranije je to
   bio red radio dugmadi koji se na uskom ekranu prelamao u nepregledan stub. */
.re-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

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

.re-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: #b8b8b8;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.re-picker-item .mud-icon-root {
    font-size: 1.35rem !important;
}

.re-picker-item:hover {
    color: #ece4d3;
    border-color: rgba(209, 180, 113, 0.4);
    background: rgba(209, 180, 113, 0.06);
}

.re-picker-item-active,
.re-picker-item-active:hover {
    color: #FFE7A8;
    border-color: #d1b471;
    background: rgba(209, 180, 113, 0.14);
}

/* Kada se "ima ili nema" bira u redu, a ne u stubu (lift, uknjizeno). Navode se obe klase,
   jer .re-choices stoji nize u fajlu pa bi inace pregazilo pravac reda. */
.re-choices.re-choices-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------------------------------------------------------------------------
   Strana "O nama": kartice sa objasnjenjem i numerisani koraci uputstva.
   --------------------------------------------------------------------------- */
.re-about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .re-about-grid {
        grid-template-columns: 1fr;
    }
}

.re-about-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
}

.re-about-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ece4d3;
}

.re-about-text {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #8f8f8f;
}

/* Koraci uputstva. Broj stoji u zlatnom krugu levo, da se red citanja vidi na prvi pogled. */
.re-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.re-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.re-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(209, 180, 113, 0.14);
    border: 1px solid rgba(209, 180, 113, 0.4);
    color: #d1b471;
    font-size: 0.8rem;
    font-weight: 700;
}

.re-step-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.re-step-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ece4d3;
}

.re-step-hint {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #8f8f8f;
}

.re-about-statuses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 700px) {
    .re-about-statuses {
        grid-template-columns: 1fr;
    }
}

.re-about-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
}

.re-about-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.re-about-link.mud-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(209, 180, 113, 0.3);
    border-radius: 10px;
    background: rgba(209, 180, 113, 0.06);
    font-size: 0.85rem;
    font-weight: 600;
    color: #d1b471;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.re-about-link.mud-link:hover {
    color: #FFE7A8;
    border-color: #d1b471;
    background: rgba(209, 180, 113, 0.12);
}

/* Opis korisnika na njegovom profilu. Stoji u svom polju sa zlatnom crtom sa strane, da se
   vidi da su to reci samog korisnika, a ne podatak sa oglasa. */
.re-profile-about {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-left: 2px solid rgba(209, 180, 113, 0.5);
    border-radius: 0 10px 10px 0;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.85rem;
    line-height: 1.65;
    color: #b8b8b8;
    white-space: pre-line;
}

/* Kontakt na nalogu: svaki podatak u svom polju, sa znakom i objasnjenjem. */
.re-contact-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.re-contact-field {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
}

.re-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(209, 180, 113, 0.12);
    border: 1px solid rgba(209, 180, 113, 0.3);
    color: #d1b471;
}

.re-contact-icon .mud-icon-root {
    font-size: 1.1rem !important;
    color: inherit;
}

.re-contact-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.re-contact-hint {
    font-size: 0.72rem;
    line-height: 1.5;
    color: #7d7d7d;
}

/* Dugme koje vodi na profil onakav kakvim ga vide ostali: zlatna ivica, bez ispune. */
.re-btn-ghost.mud-button-root {
    border: 1px solid rgba(209, 180, 113, 0.45);
    border-radius: 10px;
    padding: 10px 16px;
    color: #d1b471;
    font-weight: 600;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.re-btn-ghost.mud-button-root:hover {
    color: #FFE7A8;
    border-color: #d1b471;
    background: rgba(209, 180, 113, 0.10);
}

/* Tiha veza ispod polja (uklanjanje slike). */
.re-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin-top: 2px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.75rem;
    color: #8f8f8f;
    cursor: pointer;
    transition: color .15s ease;
}

.re-btn-link:hover {
    color: #E09A8C;
}

.re-btn-link .mud-icon-root {
    font-size: 0.9rem !important;
}

/* Uz ime vlasnika na kartici stoji i da li je agencija ili privatno lice. */
.re-card-owner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.re-card-owner-kind {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7d7d7d;
}

/* Zaglavlje naloga: slika, ime i email prijavljenog korisnika. */
.re-account-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.re-account-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.re-account-name {
    font-size: 1rem;
    font-weight: 600;
    color: #ece4d3;
}

.re-account-mail {
    font-size: 0.8rem;
    color: #8f8f8f;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Objasnjenje ispod naslova panela. */
.re-panel-hint {
    margin: 0 0 14px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #8f8f8f;
}

/* ---------------------------------------------------------------------------
   Prekidac "ima ili nema" (lift, uknjizeno). Ranije je to bio sitan kvadratic uz naziv,
   na kom se nije videlo ni sta znaci ni da li je ukljucen. Sada je celo polje dugme:
   znak levo, naziv i objasnjenje u sredini, a stanje (Da/Ne) desno.
   --------------------------------------------------------------------------- */
.re-toggles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .re-toggles {
        grid-template-columns: 1fr;
    }
}

.re-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.re-toggle:hover {
    border-color: rgba(209, 180, 113, 0.4);
    background: rgba(209, 180, 113, 0.06);
}

.re-toggle-on {
    border-color: rgba(209, 180, 113, 0.55);
    background: rgba(209, 180, 113, 0.10);
}

.re-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8f8f8f;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.re-toggle-icon .mud-icon-root {
    font-size: 1.15rem !important;
    color: inherit;
}

.re-toggle-on .re-toggle-icon {
    background: rgba(209, 180, 113, 0.16);
    border-color: rgba(209, 180, 113, 0.4);
    color: #d1b471;
}

.re-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.re-toggle-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #b8b8b8;
}

.re-toggle-on .re-toggle-title {
    color: #ece4d3;
}

.re-toggle-hint {
    font-size: 0.7rem;
    color: #7d7d7d;
}

/* Stanje stoji desno i uvek je ispisano recima, da se ne mora pogadjati po boji. */
.re-toggle-state {
    margin-left: auto;
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8f8f8f;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.re-toggle-on .re-toggle-state {
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    border-color: transparent;
    color: #14140F;
}

.re-choices-row .re-choice {
    width: auto;
    margin-left: 0;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(0, 0, 0, 0.18);
}

.re-choices-row .re-choice-on {
    border-color: rgba(209, 180, 113, 0.45);
    background: rgba(209, 180, 113, 0.10);
}

/* Dodavanje slika. Ranije je to bilo malo dugme, pa se nije videlo da je slike moguce i
   prevuci na tu povrsinu. */
.re-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 16px;
    border: 1px dashed rgba(209, 180, 113, 0.35);
    border-radius: 12px;
    background: rgba(209, 180, 113, 0.04);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.re-upload:hover {
    border-color: #d1b471;
    background: rgba(209, 180, 113, 0.09);
}

/* Dok slike putuju na server, povrsina nije dugme nego prikaz stanja. */
.re-upload-busy,
.re-upload-busy:hover {
    border-style: solid;
    border-color: rgba(209, 180, 113, 0.5);
    background: rgba(209, 180, 113, 0.07);
    cursor: default;
}

.re-upload .mud-icon-root {
    color: #d1b471;
    font-size: 1.6rem !important;
}

.re-upload-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ece4d3;
}

.re-upload-hint {
    font-size: 0.72rem;
    color: #8f8f8f;
    text-align: center;
}

/* Napomena na formi. MudAlert je bio svetao pravougaonik koji je odudarao od teme. */
.re-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 231, 168, 0.3);
    border-radius: 10px;
    background: rgba(255, 231, 168, 0.07);
    font-size: 0.78rem;
    color: #FFE7A8;
}

.re-note .mud-icon-root {
    flex: none;
    font-size: 1rem !important;
}

/* Dugme za cuvanje prati stranu, jer je forma duga i do dna se dugo skroluje. */
.re-save {
    position: sticky;
    top: 88px;
}

.re-btn-primary.mud-button-root {
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    color: #14140F;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 16px;
}

.re-btn-primary.mud-button-root:hover {
    background: linear-gradient(135deg, #EBD59B 0%, #DCC182 100%);
}

.re-btn-primary.mud-button-root:disabled {
    background: rgba(255, 255, 255, 0.06);
    color: #7d7d7d;
}

/* Dugme za izmenu oglasa stoji uz "Nazad", iznad naslova, i manje je od dugmadi kojima se
   nesto cuva ili objavljuje: to je usputna radnja, a ne glavna radnja te strane. Menja se samo
   velicina — ispuna, ivica i debljina slova ostaju kao na svakom drugom zlatnom dugmetu u
   aplikaciji, da dugme ne ispadne iz stila.
   Na telefonu je jos manje i na njemu pise samo "Izmeni": pun naziv je uz "Nazad" zauzimao
   skoro pola reda, a znak olovke i onako govori o cemu je rec. */
.re-btn-edit.mud-button-root {
    padding: 7px 14px;
    font-size: 0.8rem;
}

.re-btn-edit.mud-button-root .mud-icon-root {
    font-size: 1.05rem;
}

.re-btn-edit-short {
    display: none;
}

/* Deljenje je usputna radnja kao i izmena, pa je i dugme iste velicine, samo bez ispune, da se
   zlatnom bojom istice samo jedno dugme u redu. */
.re-btn-share.mud-button-root {
    padding: 7px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid rgba(209, 180, 113, 0.35);
    background: transparent;
    color: #d1b471;
}

.re-btn-share.mud-button-root:hover {
    background: rgba(209, 180, 113, 0.12);
}

.re-btn-share.mud-button-root .mud-icon-root {
    font-size: 1.05rem;
}

/* Sacuvan oglas nosi punu zvezdicu u svetlijem zlatu, isto kao i na kartici. */
.re-btn-favorite-on.mud-button-root {
    border-color: rgba(255, 231, 168, 0.75);
    background: rgba(209, 180, 113, 0.18);
    color: #FFE7A8;
}

.re-btn-favorite-on.mud-button-root:hover {
    background: rgba(209, 180, 113, 0.28);
}

@media (max-width: 600px) {
    .re-btn-share.mud-button-root {
        padding: 6px 12px;
        font-size: 0.78rem;
    }
}

@media (max-width: 600px) {
    .re-btn-edit-full {
        display: none;
    }

    .re-btn-edit-short {
        display: inline;
    }

    .re-btn-edit.mud-button-root {
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    .re-btn-edit.mud-button-root .mud-icon-root {
        font-size: 1rem;
    }

    .re-btn-edit.mud-button-root .mud-button-icon-start {
        margin-right: 4px;
    }
}

/* Odustani je ravnopravna radnja, ne sitan tekst: ima svoju ivicu i istu visinu kao
   glavno dugme, samo bez ispune, da se ne meri sa "Objavi oglas". */
.re-btn-outline.mud-button-root {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 10px 16px;
    color: #b8b8b8;
    font-weight: 600;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.re-btn-outline.mud-button-root:hover {
    color: #E09A8C;
    border-color: rgba(198, 112, 95, 0.5);
    background: rgba(198, 112, 95, 0.10);
}

/* ---------------------------------------------------------------------------
   Brojaci u zaglavlju "Mojih nekretnina". Ranije su bili cetiri ravna MudPaper-a u boji
   strane, sa golim brojem i sitnim naslovom ispod, pa se nije videlo ni da su kartice.
   Sada su isti panel kao i filter sa strane, sa znakom u boji uz broj.
   --------------------------------------------------------------------------- */
/* Cetiri, pa dva, pa jedan u redu. Sa "auto-fit" je na srednjem ekranu ispadalo tri u
   prvom redu i cetvrti sam u drugom, sto je izgledalo kao da je nesto ostalo visiti. */
.re-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .re-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .re-stats {
        grid-template-columns: 1fr;
    }
}

.re-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #262626;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    min-width: 0;
    transition: border-color .15s ease, transform .15s ease;
}

.re-stat:hover {
    border-color: rgba(209, 180, 113, 0.28);
    transform: translateY(-2px);
}

/* Znak stoji na svojoj prigusenoj podlozi, da se vidi kao oznaka a ne kao ukras. */
.re-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.re-stat-icon .mud-icon-root {
    font-size: 1.25rem !important;
}

.re-stat-icon-gold {
    background: rgba(209, 180, 113, 0.12);
    border: 1px solid rgba(209, 180, 113, 0.3);
    color: #d1b471;
}

.re-stat-icon-emerald {
    background: rgba(79, 174, 143, 0.12);
    border: 1px solid rgba(79, 174, 143, 0.35);
    color: #4FAE8F;
}

.re-stat-icon-champagne {
    background: rgba(255, 231, 168, 0.10);
    border: 1px solid rgba(255, 231, 168, 0.35);
    color: #FFE7A8;
}

.re-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #d1b471;
    white-space: nowrap;
}

.re-stat-value-emerald {
    color: #4FAE8F;
}

.re-stat-value-champagne {
    color: #FFE7A8;
}

/* Mera je tisa od broja, da se prvo vidi koliko, pa tek onda cega. */
.re-stat-unit {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.7;
}

.re-stat-label {
    margin-top: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8f8f8f;
}

/* ---------------------------------------------------------------------------
   Filter u koloni sa strane. Podloga strane i MudPaper su iste boje (#303030), pa je
   filter na njoj izgledao kao da lebdi bez ivica. Zato je ovde tamniji od strane, sa
   tankom ivicom, svetlom crtom po vrhu i senkom ispod: tako se vidi da je panel iznad
   strane, a ne deo nje.
   --------------------------------------------------------------------------- */
.re-filter {
    background: #262626;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    overflow: hidden;
    display: block;
}

/* Filter ostaje na ekranu dok se spisak oglasa pomera. Kada je duzi od ekrana, pomera se
   sam u sebi: klizac ide na sadrzaj, a ne na panel, da zaglavlje sa strelicom uvek ostane
   na svom mestu. Bez ovoga se dnu filtera (povrsini) nije moglo doci, jer ga je panel
   ogranicen visinom ekrana odsecao. */
@media (min-width: 960px) {
    .re-filter {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 108px);
        display: flex;
        flex-direction: column;
    }

    .re-filter-collapse {
        min-height: 0;
    }

    .re-filter-clip {
        overflow-y: auto;
    }
}

.re-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.re-filter-head-side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.re-filter-head-icon {
    color: #d1b471;
}

.re-filter-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ece4d3;
}

.re-filter-result {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #8f8f8f;
    white-space: nowrap;
}

.re-filter-result b {
    color: #d1b471;
    font-weight: 700;
}

.re-filter-caret {
    color: #8f8f8f !important;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.re-filter-open .re-filter-caret {
    transform: rotate(180deg);
}

/* Na uskom ekranu filter se sklapa. Visina reda u mrezi ide iz 0fr u 1fr, pa se prelaz
   racuna sam iz visine sadrzaja i nigde ne mora da se zada najveca visina. Dete mora
   imati min-height: 0, inace mreza ne pusta red ispod visine sadrzaja. */
.re-filter-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
}

.re-filter-open .re-filter-collapse {
    grid-template-rows: 1fr;
}

.re-filter-clip {
    min-height: 0;
    overflow: hidden;
}

.re-filter-body {
    padding: 4px 16px 16px;
    opacity: 0;
    transition: opacity .2s ease;
}

.re-filter-open .re-filter-body {
    opacity: 1;
    transition: opacity .3s ease .12s;
}

/* Svaka grupa je odvojena tankom crtom, pa se filter cita kao spisak celina, a ne kao
   jedna gomila polja. Mera je stegnuta koliko se moze, da ceo filter stane na ekran i
   da mu ne treba jos jedan klizac u sebi. */
.re-filter-section {
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.re-filter-section:first-child {
    border-top: none;
    padding-top: 10px;
}

.re-filter-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8f8f8f;
}

.re-filter .mud-input-outlined-border {
    border-radius: 10px;
    border-color: rgba(255, 255, 255, 0.10);
}

/* Kolona je uska, pa se predug tekst u polju (naziv grada, tražena reč) skraćuje sa tri
   tackice umesto da izlazi izvan okvira. */
.re-filter .mud-input-slot,
.re-filter input.mud-input-root {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Namena: jedan izbor od tri. Ranije su to bila tri odvojena dugmeta i sva tri su
   bila zlatna, pa se nije videlo koje je izabrano dok se ne procita. Sada je to
   jedno polje sa tri dela i jednom oznakom, kao prekidac.
   --------------------------------------------------------------------------- */
/* Izbor izmedju ponude i prodatog na profilu. Isti jezik kao segmenti u filteru, samo veci,
   jer ovo nije sporedni izbor nego odlucuje sta se na strani uopste vidi. */
.re-profile-tabs {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.re-profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #9a9a9a;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.re-profile-tab:hover {
    color: #ece4d3;
    background: rgba(255, 255, 255, 0.04);
}

/* Izabrana grupa nosi zlatnu, isto kao i sve sto je u aplikaciji trenutno izabrano. */
.re-profile-tab-active,
.re-profile-tab-active:hover {
    background: rgba(209, 180, 113, 0.14);
    color: #E2C98A;
}

/* Broj uz naziv: koliko oglasa stoji iza tog izbora, da se i pre klika vidi ima li tamo icega. */
.re-profile-tab-count {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
}

.re-profile-tab-active .re-profile-tab-count {
    background: rgba(209, 180, 113, 0.25);
    color: #FFE7A8;
}

.re-segment {
    display: flex;
    padding: 3px;
    gap: 2px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.re-segment-item {
    flex: 1 1 0;
    padding: 7px 4px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9a9a9a;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.re-segment-item:hover {
    color: #ece4d3;
    background: rgba(255, 255, 255, 0.04);
}

.re-segment-item-active,
.re-segment-item-active:hover {
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    color: #14140F;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------------
   Tip i status: spisak sa oznakom ispred. U uskoj koloni se tako vide sve
   mogucnosti odjednom, a zlatna ostaje samo na onome sto je izabrano.
   Kvadratna oznaka znaci da se bira vise njih, okrugla da se bira jedna.
   --------------------------------------------------------------------------- */
.re-choices {
    display: flex;
    flex-direction: column;
}

/* justify-content se navodi izricito, jer MudBlazor svakom dugmetu centrira sadrzaj,
   pa je spisak stajao po sredini kolone umesto uz levu ivicu. */
.re-choice {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 5px 8px;
    margin-left: -8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    color: #b8b8b8;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.re-choice:hover {
    color: #ece4d3;
    background: rgba(255, 255, 255, 0.035);
}

.re-choice-on {
    color: #ece4d3;
}

.re-choice-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.25);
    transition: background-color .15s ease, border-color .15s ease;
}

.re-choice-mark-single {
    border-radius: 50%;
}

.re-choice:hover .re-choice-mark {
    border-color: rgba(209, 180, 113, 0.55);
}

.re-choice-on .re-choice-mark {
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    border-color: transparent;
}

/* Kvacica se ne skida iz stabla nego samo nestane, da oznaka ne poskoci kada se ukljuci. */
.re-choice-mark .mud-icon-root {
    font-size: 0.85rem !important;
    color: #14140F;
    opacity: 0;
    transition: opacity .15s ease;
}

.re-choice-on .re-choice-mark .mud-icon-root {
    opacity: 1;
}

/* Tacka u sredini okrugle oznake, za izbor jedne vrednosti. */
.re-choice-on .re-choice-mark-single::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #14140F;
}

/* ---------------------------------------------------------------------------
   Dugme koje skida sve filtere. Tiho je dok se ne dodirne, jer se koristi retko.
   --------------------------------------------------------------------------- */
.re-filter-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 14px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: #9a9a9a;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.re-filter-clear:hover {
    color: #E09A8C;
    border-color: rgba(198, 112, 95, 0.45);
    background: rgba(198, 112, 95, 0.10);
}

.re-filter-clear .mud-icon-root {
    font-size: 0.95rem !important;
}

/* ---------------------------------------------------------------------------
   Redosled spiska. Stoji iznad oglasa i izgleda isto kao izbor namene i oglasivaca u
   filteru, jer radi istu stvar: bira se jedna od ponudjenih mogucnosti. Padajuce polje
   je ranije stajalo dvostruko vise od svega u filteru i vuklo pogled na sebe vise nego
   sami oglasi.
   --------------------------------------------------------------------------- */
.re-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.re-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    color: #8f8f8f;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.re-sort-icon.mud-icon-root {
    color: #8f8f8f;
    font-size: 1rem !important;
}

/* Traka se siri do kraja reda, a svaka mogucnost uzima onoliko koliko joj treba: kod sest
   mogucnosti razlicite duzine je jednaka podela "Najnovije" ostavljala prazno, a "Najniza
   cena po m2" lomila u dva reda. */
.re-sort-segment {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.re-sort-segment::-webkit-scrollbar {
    display: none;
}

.re-sort-item {
    flex: 0 1 auto;
    padding: 7px 12px;
    white-space: nowrap;
}

/* Na "Mojim nekretninama" u istom redu stoje redosled i izbor izmedju kartica i tabele.
   Red se prelama kada za oboje nema mesta, a traka sa redosledom sme da se skupi, da ne bi
   gurala dugmad van ekrana i time razvukla celu stranu u stranu. */
.re-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.re-list-toolbar .re-sort {
    flex: 1 1 260px;
    min-width: 0;
    margin-bottom: 0;
}

.re-list-toolbar-views {
    display: flex;
    flex: none;
    margin-left: auto;
}

/* Na telefonu je red preuzak za sest naziva, pa se traka pomera prstom, a natpis "Sortiraj"
   ide iznad nje: uz traku je uzimao trecinu sirine. */
@media (max-width: 700px) {
    .re-sort {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .re-sort-segment {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Spisak oglasa dok se ceka odgovor sa servera. Klik na filter menja spisak tek kada
   novi oglasi stignu, pa je do tada izgledalo kao da se nista nije desilo. Sada se
   stari spisak pritamni i preko njega stoji vrteska.
   --------------------------------------------------------------------------- */
.re-results {
    position: relative;
}

/* Pritamnjuje se sam spisak, a ne ceo blok: dete ne moze biti neprozirnije od roditelja,
   pa bi vrteska unutar pritamnjenog bloka bila jednako bleda kao i oglasi ispod nje. */
.re-results-dim {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* Vrteska stoji pri vrhu spiska, a ne po njegovoj sredini: dugacak spisak bi je odveo
   izvan ekrana, pa se ne bi ni videla. */
.re-results-spinner {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

/* ---------------------------------------------------------------------------
   Klizac sa dve drske (cena, povrsina). Dva <input type="range"> stoje jedan preko
   drugog i oba su providna: pruga i popunjeni deo se crtaju ispod njih. Polja ne
   primaju pokazivac, samo drske, pa se svaka hvata zasebno iako se preklapaju.
   --------------------------------------------------------------------------- */
.re-range-values {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.re-range-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.re-range-label-row .re-filter-label {
    margin-bottom: 0;
}

/* Mera povrsine. Plac se unosi u arima ili hektarima, a stan u kvadratima, pa se i ovde
   bira mera. Sitna je i stoji uz naslov, da ne uzima svoj red u uskoj koloni. */
.re-unit-switch {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.re-unit {
    padding: 3px 7px;
    border: none;
    border-radius: 5px;
    background: transparent;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #8f8f8f;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.re-unit:hover {
    color: #ece4d3;
    background: rgba(255, 255, 255, 0.05);
}

.re-unit-active,
.re-unit-active:hover {
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    color: #14140F;
}

/* Granice stoje u poljima, kao "od" i "do" koje se na filteru i ocekuju. Mogu se i povuci
   drskom i ukucati, jer se tacan broj brze otkuca nego sto se pogodi drskom. */
.re-range-box {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ece4d3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .15s ease, background-color .15s ease;
}

.re-range-box:hover {
    border-color: rgba(209, 180, 113, 0.35);
}

.re-range-box:focus {
    outline: none;
    border-color: #d1b471;
    background: rgba(0, 0, 0, 0.35);
}

.re-range-dash {
    flex: none;
    color: #6f6f6f;
}

.re-range-track {
    position: relative;
    height: 22px;
}

.re-range-rail,
.re-range-fill {
    position: absolute;
    top: 50%;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 999px;
}

/* Pruga je uvucena za pola drske sa svake strane, jer se i srediste drske krece po toj
   skracenoj duzini. Bez toga bi popunjeni deo na krajevima izmicao ispod drske. */
.re-range-rail {
    left: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.38);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.re-range-fill {
    background: linear-gradient(90deg, #d1b471 0%, #E2C98A 100%);
}

.re-range-input {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 16px;
    margin: -8px 0 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.re-range-upper {
    z-index: 4;
}

.re-range-input:focus {
    outline: none;
}

.re-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #F5E9CC;
    border: 3px solid #262626;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: box-shadow .15s ease;
}

.re-range-input::-webkit-slider-thumb:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(209, 180, 113, 0.16);
}

.re-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #F5E9CC;
    border: 3px solid #262626;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.re-range-input::-moz-range-track {
    background: transparent;
    border: none;
}

/* Podaci o nekretnini stoje u jednom redu. Ranije se poslednja oznaka ("Bez lifta")
   prelamala u drugi red, pa je kartica izgledala neuredno i bila visa od ostalih.
   Oznake se sada malo stisnu i, ako baš nema mesta, tekst se skrati sa tri tackice.
   Mera je stegnuta jos malo otkad filter stoji sa strane: kartica je tada uza za
   tridesetak tacaka i sve cetiri oznake su se skracivale na svakoj kartici. */
.re-card-stats {
    flex-wrap: nowrap !important;
    min-height: 34px !important;
    overflow: hidden;
    gap: 4px;
}

.re-card-stat {
    min-width: 0;
    padding: 4px 6px;
    font-size: 0.7rem;
}

.re-card-stat .mud-icon-root {
    font-size: 0.85rem !important;
}

.re-card-stat span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Email u kontaktu na detaljima oglasa. Adresa tipa OTKUPNEKRETNINAMLADENOVCA@GMAIL.COM je
   jedna rec od 35 znakova i izlazila je 19 tacaka izvan kartice. Sada se prelama u novi red. */
.re-contact-email {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Premium program. Oglasavanje ostaje besplatno, pa premium nigde ne sme da
   izgleda kao zid ispred obicnog korisnika: zato su paketi obicne kartice, iste
   kao i na strani "O nama", a ne tabela sa cenama i precrtanim brojevima.
   Zlatna se koristi umereno, samo na izabranom paketu i na broju oglasa: kada bi
   sve bilo zlatno, oko ne bi imalo za sta da se uhvati.
   --------------------------------------------------------------------------- */
.re-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.re-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 18px 18px;
    background: #262626;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* Srednji paket je onaj koji se najcesce i uzima, pa je istaknut: bez toga bi korisnik pred tri
   iste kartice morao sam da racuna koja mu je mera. */
.re-plan-featured {
    border-color: rgba(209, 180, 113, 0.5);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(209, 180, 113, 0.15);
}

.re-plan-ribbon {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    color: #14140F;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.re-plan-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8f8f8f;
    text-align: center;
}

/* Cena stoji izmedju naziva paketa i broja oglasa, tamo gde je korisnik i trazi. Zelena je, a
   ne zlatna, da se ne stopi sa velikim zlatnim brojem ispod nje: to su dva razlicita podatka i
   svaki treba da se procita zasebno. */
.re-plan-price {
    align-self: center;
    margin-top: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(79, 174, 143, 0.14);
    border: 1px solid rgba(79, 174, 143, 0.4);
    color: #9FD8C5;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Broj izdvojenih oglasa je jedino po cemu se paketi razlikuju, pa je i jedini veliki broj na
   kartici. */
.re-plan-slots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 14px 0 16px;
}

.re-plan-slots-number {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: #d1b471;
}

.re-plan-slots-label {
    font-size: 0.78rem;
    color: #9a9a9a;
    text-align: center;
}

.re-plan-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Kvacica se crta iz CSS-a, a ne kao znak u spisku: tako se u razmak izmedju redova ne mesa
   visina samog znaka. */
.re-plan-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.84rem;
    color: #b8b8b8;
    line-height: 1.35;
}

.re-plan-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.42em;
    width: 8px;
    height: 4px;
    border-left: 2px solid #4FAE8F;
    border-bottom: 2px solid #4FAE8F;
    transform: rotate(-45deg);
}

/* Stanje premiuma na vrhu strane. Smaragdna ivica znaci da je sve u redu, isto kao i kod
   potvrdjenih oznaka na kartici. */
.re-premium-active {
    border-color: rgba(79, 174, 143, 0.4);
}

.re-premium-status {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.re-premium-status-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.re-premium-status-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8f8f8f;
}

.re-premium-status-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ece4d3;
}

.re-premium-status-note {
    font-size: 0.78rem;
    color: #9a9a9a;
}

/* Naslov odeljka na strani sa paketima. Ista mera kao i naslovi na ostalim stranama. */
.re-section-title {
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #ece4d3;
}

/* Stavka "Moj premium program" u meniju ispod slike. Kada premium traje, ispod imena stavke
   stoji i do kada: taj podatak se najcesce i trazi. */
.re-user-premium {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.re-user-premium-until {
    font-size: 0.7rem;
    color: #d1b471;
}

/* Poruka uz zahtev u admin panelu staje u jedan red, a cela se vidi u opisu: bez ovoga bi red
   sa dugackom porukom razvukao celu tabelu. */
.re-request-message {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dugme za izdvajanje oglasa nosi zlatnu, jer je i sama oznaka zlatna: tako se na spisku svojih
   oglasa vidi koja radnja vodi do one oznake na kartici. */
.re-icon-action-featured.mud-icon-button {
    color: #d1b471;
}

@media (max-width: 900px) {
    .re-plans {
        grid-template-columns: 1fr;
    }

    .re-premium-status {
        grid-template-columns: 1fr;
    }
}

/* Oznaka premium oglasivaca uz njegovo ime na kartici. Namerno je sitna i zlatna, bez podloge:
   glavna oznaka na kartici je i dalje namena (prodaja/izdavanje), pa premium ne sme da je
   nadjaca. Znak stoji uz samo ime, a rec "Premium" u redu ispod, uz vrstu oglasivaca, jer je i
   to podatak o tome ko oglas postavlja. */
.re-owner-premium.mud-icon-root {
    color: #d1b471;
    vertical-align: middle;
    margin-left: 3px;
}

.re-owner-premium-label {
    color: #d1b471;
    font-weight: 600;
}

/* Oznaka premium oglasivaca na njegovom profilu. Zlatna kao i sve sto se tice premiuma, ali u
   istom obliku kao i ostale oznake u tom redu (vrsta naloga), da red ostane jedna celina. */
.re-tag-premium {
    background: rgba(209, 180, 113, 0.14);
    border: 1px solid rgba(209, 180, 113, 0.6);
    color: #E2C98A;
}

.re-tag-premium .mud-icon-root {
    color: #FFE7A8;
}

/* ---------------------------------------------------------------------------
   Prihvatanje uslova koriscenja na formi za novi oglas i sama strana sa
   uslovima.
   --------------------------------------------------------------------------- */

/* Kvacica stoji u svom polju sa zlatnom ivicom, a ne kao gola linija teksta iznad dugmeta:
   to je poslednja stvar koja se potvrdjuje pre objave, pa mora da se vidi da nesto trazi
   potvrdu, a ne da je jos jedna napomena. */
.re-terms {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(209, 180, 113, 0.28);
    border-radius: 12px;
    background: rgba(209, 180, 113, 0.05);
    transition: border-color .15s ease, background-color .15s ease;
}

/* Kada je prihvaceno, polje se stisa: posao je zavrsen, pa vise nema sta da trazi paznju. */
.re-terms-on {
    border-color: rgba(209, 180, 113, 0.45);
    background: rgba(209, 180, 113, 0.09);
}

/* Kvacica i tekst su jedno dugme, da se uslovi prihvate klikom bilo gde po recenici, a ne
   samo po kvadraticu od 17 tacaka. Veza ka uslovima zato stoji ispod, izvan dugmeta: veza
   unutar dugmeta se ne moze otvoriti a da se kvacica pri tom ne ukljuci. */
.re-terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* Kvadratic je isti kao u filteru, pa se i ukljucuje istim pravilima: ona gadjaju .re-choice-on
   u pretku, a ovde tu ulogu ima .re-terms-on. */
.re-terms .re-choice-mark {
    margin-top: 1px;
}

.re-terms-check:hover .re-choice-mark {
    border-color: rgba(209, 180, 113, 0.55);
}

.re-terms-on .re-choice-mark {
    background: linear-gradient(135deg, #E2C98A 0%, #d1b471 100%);
    border-color: transparent;
}

.re-terms-on .re-choice-mark .mud-icon-root {
    opacity: 1;
}

.re-terms-text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #b8b8b8;
    transition: color .15s ease;
}

.re-terms-check:hover .re-terms-text,
.re-terms-on .re-terms-text {
    color: #ece4d3;
}

/* Veza stoji uvucena tacno ispod teksta, a ne uz levu ivicu polja: tako se cita kao nastavak
   recenice iznad, a ne kao zasebna stavka.
   Veza je sitnija od same recenice, jer je uzgredna: recenica je ono sto se potvrdjuje, a ovo
   je samo put do celog teksta.
   Ime klase se navodi uz pretka, da pravilo bude tezih od MudBlazor-ovog mud-typography-body1:
   sa samom klasom je MudBlazor pobedjivao i veza je stajala na 16px, dakle krupnije od
   recenice iznad nje. */
.re-terms .re-terms-link {
    align-self: flex-start;
    margin-left: 27px;
    font-size: 0.74rem;
    line-height: 1.4;
}

/* Strana sa uslovima. Odeljci koriste isti panel kao i ostatak aplikacije, pa je ovde samo
   ono sto sam pravni tekst trazi: numerisane stavke i napomene. */
.re-terms-meta {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #8f8f8f;
}

/* Brojevi se crtaju sami, jer podrazumevani marker stoji izvan teksta i na uskom ekranu
   izlazi iz panela. Ovako broj stoji u svojoj koloni, a tekst se prelama pod tekstom. */
.re-terms-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: re-terms;
}

.re-terms-list > li {
    position: relative;
    counter-increment: re-terms;
    padding-left: 34px;
    margin-bottom: 12px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: #b8b8b8;
}

.re-terms-list > li:last-child {
    margin-bottom: 0;
}

.re-terms-list > li::before {
    content: counter(re-terms) ".";
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    color: #d1b471;
}

.re-terms-list > li b {
    color: #ece4d3;
    font-weight: 600;
}

.re-terms-note {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: #b8b8b8;
}

/* Odeljak koji nosi sustinu odgovornosti stoji u svom polju: kada je bio obican pasus, gubio
   se medju ostalim tekstom, a bas njega korisnik mora da procita. */
.re-terms-note-strong {
    padding: 12px 14px;
    border-left: 2px solid rgba(209, 180, 113, 0.55);
    border-radius: 0 8px 8px 0;
    background: rgba(209, 180, 113, 0.06);
    color: #ece4d3;
}

.re-terms-list + .re-terms-note {
    margin-top: 12px;
}

.re-terms-note-strong + .re-terms-list {
    margin-top: 12px;
}

/* ---------------------------------------------------------------------------
   Traka koja kaze da je premium za sada besplatan. Stoji u zaglavlju strane sa
   paketima.
   --------------------------------------------------------------------------- */

/* Zelena je, a ne zlatna: zlatnog je na toj strani vec previse (naslov, paketi, dugmad), pa bi
   se traka u zlatnom stopila sa ostatkom i procitala kao jos jedan ukras. Zelena se u
   aplikaciji vec koristi za dobru vest, pa se i ovde cita tako. */
.re-free-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 640px;
    margin: 20px auto 0;
    padding: 14px 18px;
    text-align: left;
    border: 1px solid rgba(79, 174, 143, 0.4);
    border-radius: 12px;
    background: rgba(79, 174, 143, 0.09);
}

.re-free-banner .mud-icon-root {
    flex: none;
    margin-top: 1px;
    font-size: 1.25rem;
    color: #9FD8C5;
}

.re-free-banner-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.re-free-banner-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #9FD8C5;
}

.re-free-banner-hint {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #b8b8b8;
}

@media (max-width: 599px) {
    .re-free-banner {
        padding: 12px 14px;
    }

    .re-free-banner-hint {
        font-size: 0.78rem;
    }
}

/* ---------------------------------------------------------------------------
   Vodoravno pomeranje strane na telefonu.

   Na uskom ekranu se pocetna strana mogla vuci levo-desno, iako po sirini nista
   nije trebalo da izlazi. Dva razloga, oba mala:

   1. MudGrid svoj razmak pravi negativnom marginom (Spacing="6" daje -24px), a
      kontejner oko njega ima 16px razmaka sa strane. Razlika od 8px izlazila je
      izvan ekrana. Na telefonu se zato razmak mreze svodi na 8px, pa ga razmak
      kontejnera potpuno pokrije. Sistem ostaje isti, samo je mera manja — na
      uskom ekranu su stavke ionako jedna ispod druge, pa se razmak i ne vidi.

   2. Mail adresa u podnozju je jedna duga rec bez razmaka, a stoji u koloni
      siroko pola ekrana: nije imala gde da se prelomi, pa je gurala stranu u
      stranu. Prelama se bilo gde, jer je bolje prelomljena adresa nego strana
      koja se vuce.
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
    .mud-grid.mud-grid-spacing-xs-6 {
        width: calc(100% + 16px);
        margin: -8px;
    }

    .mud-grid.mud-grid-spacing-xs-6 > .mud-grid-item {
        padding: 8px;
    }
}

/* Vazi i sire od telefona: duga adresa nema gde da se prelomi ni na tablicama. */
.re-footer a,
.re-footer .mud-link {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Poslednja brana: ako se ikada pojavi jos nesto sto viri, strana se svejedno nece vuci
   u stranu. Namerno "clip", a ne "hidden": hidden na <body> ume da pokvari lepljive
   elemente (traka gore), dok clip samo odsece ono sto izlazi. */
html {
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Pomeranje strane prstom preko slike na oglasu.

   Galerija na kartici hvata dodir da bi prepoznala prevlacenje levo-desno. Dok je
   hvatala svaki dodir, prst spusten na sliku nije mogao da pomeri stranu gore-dole:
   posetilac bi dodirnuo sliku, povukao na dole i nista se ne bi desilo.

   touch-action: pan-y vraca uspravno pomeranje pretrazivacu, a galerija zadrzava
   vodoravno prevlacenje. Pretrazivac tako sam odlucuje po pravcu prvog pokreta:
   gore-dole pomera stranu, levo-desno menja sliku.
   --------------------------------------------------------------------------- */
/* Sve pocinje i zavrsava se na .mud-swipearea: MudBlazor mu svojim stilom postavlja
   touch-action: none, sto pretrazivacu znaci "ne hvataj nijedan pokret prstom" — pa ni
   pomeranje strane. To polje se iscrtava i kada je prevlacenje ugaseno, pa ni gasenje
   prevlacenja samo po sebi nije pomoglo.
   Zato se bas njemu vraca pan-y. !important je ovde neophodan: MudBlazor-ov stil se ucitava
   posle ovog fajla, pa bi bez njega ostalo "none". */
.re-card-carousel .mud-swipearea,
.re-details-carousel .mud-swipearea,
.mud-swipearea.mud-carousel-swipe {
    touch-action: pan-y !important;
}

.re-card-image-wrapper,
.re-card-carousel,
.re-card-carousel .mud-carousel-item,
.re-details-carousel,
.re-details-carousel .mud-carousel-item {
    touch-action: pan-y;
}

/* Slika unutar galerije ne sme da hvata ni prevlacenje ni dugi pritisak koji otvara
   meni za cuvanje slike, jer oba prekidaju pomeranje strane. */
.re-card-carousel img,
.re-details-carousel img {
    touch-action: pan-y;
    -webkit-user-drag: none;
    user-select: none;
}

/* ---------------------------------------------------------------------------
   Kratko zaglavlje pocetne strane. Veliki naslov je sklonjen, pa ostaje jedan red
   teksta i dva broja: koliko oglasa i koliko gradova. Cilj je da se prvi oglasi vide
   bez pomeranja strane.
   --------------------------------------------------------------------------- */
.re-hero-compact {
    padding: 4px 16px 18px;
}

/* Zlatni odsjaj iza naslova je bio odmeren za veliki naslov; uz jedan red teksta je
   izgledao kao mrlja iznad prazne strane, pa je nizi i tisi. */
.re-hero-compact::before {
    top: -30px;
    opacity: 0.5;
}

.re-hero-line {
    margin: 0;
    color: #9a9a9a;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Brojevi su sada glavni sadrzaj zaglavlja, pa stoje odmah ispod reda teksta. */
.re-hero-compact .re-hero-stats {
    margin-top: 10px;
}

@media (max-width: 599px) {
    .re-hero-compact {
        padding: 4px 12px 14px;
    }

    .re-hero-line {
        font-size: 0.88rem;
    }
}

/* ---------------------------------------------------------------------------
   Zaglavlje unutrasnje strane i dugme "Nazad" — jedan oblik za celu aplikaciju.

   Do sada je svaka strana imala svoj: naslovi su pisani preko MudText-a sa stilom
   upisanim u sam element, pa su se razlikovali po tezini i razmaku slova, a "Nazad"
   je na oglasu bio obican tekst a na profilu dugme sa ivicom. Sada su oba na jednom
   mestu, pa se menjaju jednom.
   --------------------------------------------------------------------------- */
.re-page-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
}

.re-page-head-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.re-page-head-icon.mud-icon-root {
    font-size: 1.9rem;
    color: #d1b471;
    flex: none;
}

/* Ista mera i isti razmak slova kao naslov na strani "O nama" i u uslovima, da naslov strane
   svuda izgleda kao ista stvar. */
.re-page-head-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: #ece4d3;
}

.re-page-head-text {
    margin: 0;
    color: #9a9a9a;
    font-size: 0.88rem;
    line-height: 1.55;
}

@media (max-width: 599px) {
    .re-page-head-title {
        font-size: 1.4rem;
    }

    .re-page-head-icon.mud-icon-root {
        font-size: 1.5rem;
    }

    .re-page-head-text {
        font-size: 0.82rem;
    }
}

/* "Nazad" je uzgredna radnja, pa je tiho dugme bez ivice: naglaseno dugme bi se takmicilo sa
   onim zbog cega je korisnik i dosao na stranu. */
.re-btn-back.mud-button-root {
    align-self: flex-start;
    min-width: 0;
    padding: 4px 10px 4px 6px;
    margin-bottom: 10px;
    color: #9a9a9a;
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 8px;
}

.re-btn-back.mud-button-root:hover {
    color: #ece4d3;
    background: rgba(255, 255, 255, 0.05);
}

.re-btn-back .mud-icon-root {
    font-size: 1.05rem !important;
}

/* ---------------------------------------------------------------------------
   Dugme "Prijavi se" u traci gore.

   Bilo je iste mere kao "Objavi oglas" na formi, a tamo je to glavno dugme cele strane.
   U uskoj traci na telefonu je zauzimalo dobar deo sirine i guralo znak sa nazivom.
   Ovde je nizе i uze: prijava jeste jedina radnja neprijavljenog, ali nije razlog zbog
   koga je posetilac dosao — oglasi jesu.
   --------------------------------------------------------------------------- */
.re-btn-primary.mud-button-root {
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 899px) {
    /* Na telefonu ostaje samo znak: rec "Prijavi se" je uz znak i naziv sajta uzimala vise
       mesta nego sto joj u traci pripada, a znak naloga se svuda cita kao prijava. */
    .re-btn-login.mud-button-root {
        min-width: 0;
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    .re-btn-login .mud-icon-root {
        margin-right: 0 !important;
    }

    .re-btn-login .re-btn-login-text {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Oglas na telefonu: zaglavlje i oznake.

   Cena stoji desno, u istom redu sa naslovom, isto kao i na racunaru. Naslovu
   zato ostaje dve trecine reda, pa je na telefonu manji nego na racunaru: tako
   se u ta dva reda smesti i duzi naziv.

   Oznake su racunate za sirok ekran — razmak medju slovima i sirok korak — pa je
   red od cetiri oznake na telefonu prelazio u dva i uzimao dobar deo vrha strane.
   Uze su za oko petinu, a i dalje se citaju.
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
    .re-mobile-header .mud-typography-h5 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    /* Cena je najkraci deo reda, pa se ne skuplja: naslov se lomi, cena ostaje cela. */
    .re-mobile-price {
        font-size: 1rem;
        padding: 5px 10px;
        flex: none;
    }

    .re-tag {
        font-size: 0.68rem;
        letter-spacing: 0.03em;
        padding: 4px 9px;
        gap: 4px;
    }

    .re-tag .mud-icon-root {
        font-size: 0.8rem !important;
    }
}

/* Zaglavlje mape: naslov i "Otvori vecu mapu" stoje jedno pored drugog. Na telefonu im red
   nije dovoljan, pa se oba lome u po dva reda i naslov se sudara sa dugmetom. Tamo dugme
   silazi ispod naslova. */
@media (max-width: 599px) {
    .re-map-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ---------------------------------------------------------------------------
   Red sa radnjama na oglasu: "Nazad" levo, deljenje, statistika i izmena desno.

   "Nazad" drugde stoji samo u svom redu i nosi razmak ispod sebe; ovde bi taj
   razmak podigao ceo red navise, pa se sklanja.

   Na telefonu na deljenju i statistici ostaje samo znak. Sa punim nazivima
   ("Podeli", "Statistika") red nije stajao u sirinu ekrana nego se lomio, pa je
   "Nazad" zavrsavao sam u svom redu.
   --------------------------------------------------------------------------- */
.re-details-actions .re-btn-back.mud-button-root {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .re-btn-share-full {
        display: none;
    }

    /* Bez naziva uz znak ostaje prazan razmak s desne strane, pa dugme ispadne krivo. */
    .re-btn-share.mud-button-root {
        min-width: 0;
    }

    .re-btn-share.mud-button-root .mud-button-icon-start {
        margin-right: 0;
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------------
   Zaglavlje strane sa radnjom uz naslov ("Moje nekretnine" i "Dodaj nekretninu").

   Naslov i dugme stoje u istom redu na svakoj sirini. Dok su bile dve kolone mreze,
   dugme je na telefonu padalo u svoj red ispod naslova i stajalo samo uz desnu ivicu,
   odvojeno od onoga na sta se odnosi.
   --------------------------------------------------------------------------- */
.re-head-with-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Dugme se ne skuplja: naslov ima gde da se prelomi, dugme nema. */
.re-head-with-action .re-btn-add.mud-button-root {
    flex: none;
    margin-top: 2px;
}

.re-btn-add-short {
    display: none;
}

/* Na telefonu na dugmetu pise samo "Dodaj": pun naziv je uz naslov strane uzimao vise od
   pola reda, a znak plus i onako govori o cemu je rec. */
@media (max-width: 599px) {
    .re-btn-add-full {
        display: none;
    }

    .re-btn-add-short {
        display: inline;
    }
}

/* ---------------------------------------------------------------------------
   Zbijen spisak oglasa na telefonu ("Moje nekretnine", prikaz spiskom).

   MudTable na uskom ekranu svaki red pretvara u osam parova "naziv: vrednost", pa
   jedan oglas uzme ceo ekran. Spisak se bira bas da bi se videlo vise oglasa
   odjednom, pa je tamo bio gori od kartica. Ovde po oglasu idu dva reda: naslov sa
   cenom, pa tip, grad, povrsina i stanje sa radnjama.
   --------------------------------------------------------------------------- */
.re-mlist {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    overflow: hidden;
    background: #262626;
}

.re-mlist-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}

.re-mlist-row + .re-mlist-row {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.re-mlist-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

/* Naslov se skracuje, cena ne: cena je kratka i po njoj se spisak i preleti. */
.re-mlist-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.92rem;
    font-weight: 600;
    color: #ece4d3;
}

.re-mlist-price {
    flex: none;
    font-size: 0.92rem;
    font-weight: 700;
    color: #d1b471;
}

.re-mlist-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Red sa podacima je obican tekst, a ne niz polja: tako se, kada ne stane, zavrsava sa "..."
   umesto da se preseca u sred vrednosti ("50,00 r"). */
.re-mlist-meta {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.72rem;
    color: #9a9a9a;
}

.re-mlist-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

/* Dugmad su u spisku manja nego na kartici: red je nizi, a i ima ih troje uz oznaku stanja. */
.re-mlist-actions .mud-icon-button {
    padding: 5px;
}

/* ---------------------------------------------------------------------------
   Poruke u uglu ekrana (snackbar).

   MudBlazor ih boji svojom jarkom zelenom i crvenom, a one nemaju veze sa
   ostatkom sajta: preko tamne, zlatne strane iskacu kao tudji element. Ovde
   nose istu podlogu kao prozori i kartice, a boja stoji samo u ivici, znaku i
   slovima — smaragdna za uspeh i pecena crvena za gresku, iste one koje se
   koriste za "uknjizeno" i za brisanje.
   --------------------------------------------------------------------------- */
.mud-snackbar {
    background: #262626 !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color: #ece4d3 !important;
    font-size: 0.85rem;
}

.mud-snackbar .mud-snackbar-content-message {
    color: #ece4d3;
}

.mud-snackbar .mud-icon-root {
    color: #d1b471;
}

.mud-snackbar.mud-alert-filled-success {
    border-color: rgba(79, 174, 143, 0.5);
}

.mud-snackbar.mud-alert-filled-success .mud-icon-root {
    color: #9FD8C5;
}

.mud-snackbar.mud-alert-filled-error {
    border-color: rgba(198, 112, 95, 0.5);
}

.mud-snackbar.mud-alert-filled-error .mud-icon-root {
    color: #E8A392;
}

.mud-snackbar.mud-alert-filled-warning {
    border-color: rgba(255, 231, 168, 0.45);
}

.mud-snackbar.mud-alert-filled-warning .mud-icon-root {
    color: #FFE7A8;
}

/* ---------------------------------------------------------------------------
   Boja greske na formi.

   Sama boja greske stoji u temi (MainLayout), jer MudBlazor svoju jarku crvenu
   upisuje u stil koji se ucitava posle ovog fajla, pa se odavde ne moze nadjacati.
   Ovde ostaje samo ton za sitan tekst: ivica polja sme da bude prigusena, ali
   naziv polja i poruka ispod njega moraju da se citaju na tamnoj podlozi.
   --------------------------------------------------------------------------- */
.mud-input-helper-text.mud-input-error,
.mud-input-label.mud-input-error {
    color: #E8A392 !important;
}