/*
 * Sav CSS plugina je u sloju "oglasnik" i svaka deklaracija je !important.
 * Uslojeni !important pobedjuje SVE neuslojene stilove teme (i njihove
 * !important), bez obzira na specificnost selektora - zato tema ne moze da
 * menja izgled plugina. Novi stilovi u ovom fajlu MORAJU imati !important
 * (osim animacija u @keyframes i --promenljivih), inace ih tema pregazi.
 */
@layer oglasnik {

/*
 * Mnoge teme prikazuju sopstveni bocni sidebar na obicnim WP stranicama -
 * nasa oglasnik-no-sidebar body klasa (vidi
 * Oglasnik_Shortcodes::add_no_sidebar_body_class()) se dodaje na SVAKOJ
 * stranici gde se plugin pojavljuje (forma, profil, pretraga...), pa ovde
 * sidebar sakrivamo i sirimo glavnu kolonu na puni prostor.
 *
 * Selektori ispod NAMERNO nisu vezani ni za jednu konkretnu temu - to su
 * najcesce koriscene klase/ID-jevi kroz veliki broj WP tema (ukljucujuci
 * WP-ove sopstvene difoltne teme). Ako konkretna tema koristi drugaciji
 * naziv, admin moze da unese tacan CSS selektor u Podesavanja -> Opste ->
 * "Izgled stranica" - vidi Oglasnik_Shortcodes::output_custom_layout_css(),
 * to se dodaje OVIM pravilima, ne zamenjuje ih.
 */
body.oglasnik-no-sidebar #sidebar,
body.oglasnik-no-sidebar #secondary,
body.oglasnik-no-sidebar .sidebar,
body.oglasnik-no-sidebar .widget-area {
	display: none !important;
}

body.oglasnik-no-sidebar #primary,
body.oglasnik-no-sidebar #main,
body.oglasnik-no-sidebar .site-main,
body.oglasnik-no-sidebar .content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Font i boju korena postavlja oglasnik-base.css (isto za svaku temu) - ovde
   ne sme "inherit", to bi ih ponovo preuzelo od teme. */
.oglasnik-form-wrap {
	max-width: 720px !important;
	margin: 0 auto !important;
}

/* Traka napretka iznad koraka ("Korak 3 od 9 - Osnovni podaci"), pravi je oglasnik-form.js. */
.oglasnik-steps-progress {
	margin-bottom: 12px !important;
}

.oglasnik-steps-progress-text {
	font-size: 0.85em !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
}

.oglasnik-steps-progress-track {
	height: 6px !important;
	border-radius: 999px !important;
	background: rgba(127, 127, 127, 0.18) !important;
	overflow: hidden !important;
}

.oglasnik-steps-progress-fill {
	display: block !important;
	height: 100% !important;
	width: var(--oglasnik-progress, 0%) !important;
	border-radius: 999px !important;
	background: var(--oglasnik-accent, #2563eb) !important;
	transition: width 0.25s ease !important;
}

/* Koraci: na sirem ekranu se prelamaju u vise redova; na telefonu su u
   jednom redu koji se skroluje prstom (JS drzi aktivni korak vidljivim). */
.oglasnik-steps-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-bottom: 18px !important;
}

@media (max-width: 600px) {
	.oglasnik-steps-nav {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scrollbar-width: none !important;
	}

	.oglasnik-steps-nav::-webkit-scrollbar {
		display: none !important;
	}
}

/*
 * Ovo JESTE <button> element (kreira ga oglasnik-form.js) - mnoge teme
 * nameću sopstveni izgled svim <button>-ima (veliko slovo,
 * podebljano, uglasto, jaka pozadinska boja), obicno preko selektora vece
 * specificnosti ili sa !important. Bez iste odbrane koju vec koristi
 * .oglasnik-richtext-btn nesto nize u ovom fajlu, tema pobedi i "pilule"
 * koraka se pretvore u velika uglasta dugmad teme (vidi AUDIT.md,
 * sekcija 4 - izolacija od teme).
 */
.oglasnik-step-nav-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	white-space: nowrap !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	font: inherit !important;
	font-size: 0.8em !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-align: center !important;
	text-decoration: none !important;
	padding: 4px 10px 4px 4px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: rgba(127, 127, 127, 0.12) !important;
	color: inherit !important;
	opacity: 0.65 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease !important;
}

.oglasnik-step-nav-item:hover {
	opacity: 0.85 !important;
}

.oglasnik-step-nav-item.is-active {
	opacity: 1 !important;
	background: rgba(37, 99, 235, 0.15) !important;
	color: var(--oglasnik-accent, #2563eb) !important;
	font-weight: 600 !important;
}

.oglasnik-step-nav-item.is-done {
	opacity: 0.9 !important;
}

/* Broj koraka u kruzicu; zavrsen korak = zelena kvacica. */
.oglasnik-step-nav-num {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: rgba(127, 127, 127, 0.25) !important;
	font-size: 0.85em !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

.oglasnik-step-nav-item.is-active .oglasnik-step-nav-num {
	background: var(--oglasnik-accent, #2563eb) !important;
	color: #fff !important;
}

.oglasnik-step-nav-item.is-done .oglasnik-step-nav-num {
	background: var(--oglasnik-success, #16a34a) !important;
	color: #fff !important;
}

/* Svaki korak je kartica. */
.oglasnik-step {
	background: #fff !important;
	border: 1px solid rgba(127, 127, 127, 0.2) !important;
	border-radius: 14px !important;
	padding: 24px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

.oglasnik-step h2 {
	margin: 0 0 4px !important;
	font-size: 1.35em !important;
}

/* Kratak uvod ispod naslova koraka (form-listing.php, $oglasnik_intro). */
.oglasnik-step-intro {
	margin: 0 0 20px !important;
	font-size: 0.92em !important;
	opacity: 0.7 !important;
}

/* Obavestenje (vazna napomena u koraku): plava kutija sa "i" ikonicom. */
.oglasnik-notice {
	display: flex !important;
	gap: 10px !important;
	align-items: flex-start !important;
	margin: 0 0 16px !important;
	padding: 12px 14px !important;
	border: 1px solid rgba(37, 99, 235, 0.2) !important;
	border-radius: 10px !important;
	background: rgba(37, 99, 235, 0.06) !important;
	font-size: 0.88em !important;
	line-height: 1.5 !important;
}

.oglasnik-notice::before {
	content: "i" !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: var(--oglasnik-accent, #2563eb) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 0.85em !important;
	font-style: normal !important;
}

/* Lokacija: ulica i postanski broj u istom redu. */
.oglasnik-adresa-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 0 14px !important;
}

.oglasnik-adresa-row .oglasnik-adresa-field-wrap {
	flex: 1 1 260px !important;
	min-width: 0 !important;
}

.oglasnik-adresa-row .oglasnik-postanski-broj-field {
	flex: 0 0 150px !important;
}

@media (max-width: 480px) {
	.oglasnik-adresa-row .oglasnik-postanski-broj-field {
		flex: 1 1 100% !important;
	}

	.oglasnik-review-list {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}

	.oglasnik-review-list dd {
		margin-bottom: 8px !important;
	}
}

/* Upozorenje (npr. nepopunjena obavezna polja u pregledu) - narandzasto. */
.oglasnik-notice-warning {
	align-items: center !important;
	border-color: rgba(217, 119, 6, 0.35) !important;
	background: rgba(217, 119, 6, 0.08) !important;
}

.oglasnik-notice-warning::before {
	content: "!" !important;
	background: var(--oglasnik-warning, #d97706) !important;
}

.oglasnik-notice-warning > div {
	flex: 1 1 auto !important;
}

/* "Pregled i slanje" - uneti podaci po koracima (oglasnik-form.js, renderReview()). */
.oglasnik-review {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	margin-bottom: 16px !important;
}

.oglasnik-review-section {
	border: 1px solid rgba(127, 127, 127, 0.2) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	background: rgba(127, 127, 127, 0.03) !important;
}

.oglasnik-review-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin-bottom: 8px !important;
}

.oglasnik-review-head h3 {
	margin: 0 !important;
	font-size: 0.95em !important;
	font-weight: 700 !important;
}

button.oglasnik-review-edit {
	padding: 4px 10px !important;
	margin: 0 !important;
	border: 1px solid rgba(37, 99, 235, 0.35) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--oglasnik-accent, #2563eb) !important;
	font: inherit !important;
	font-size: 0.8em !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

button.oglasnik-review-edit:hover {
	background: rgba(37, 99, 235, 0.08) !important;
}

.oglasnik-review-list {
	display: grid !important;
	grid-template-columns: minmax( 120px, 34% ) 1fr !important;
	gap: 6px 14px !important;
	margin: 0 !important;
	font-size: 0.9em !important;
}

.oglasnik-review-list dt {
	margin: 0 !important;
	opacity: 0.65 !important;
}

.oglasnik-review-list dd {
	margin: 0 !important;
	font-weight: 600 !important;
	overflow-wrap: anywhere !important;
}

@media (max-width: 600px) {
	/* Neke teme sadrzaju stranice na telefonu ne daju bocni razmak - forma
	   bi isla do ivica ekrana. */
	.oglasnik-form-wrap {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.oglasnik-step {
		padding: 16px !important;
		border-radius: 12px !important;
	}
}

.oglasnik-field {
	margin-bottom: 14px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.oglasnik-field label {
	font-weight: 600 !important;
	font-size: 0.85em !important;
}

.oglasnik-field input[type="text"],
.oglasnik-field input[type="number"],
.oglasnik-field input[type="email"],
.oglasnik-field input[type="tel"],
.oglasnik-field input[type="url"],
.oglasnik-field input[type="date"],
.oglasnik-field input[type="password"],
.oglasnik-field select,
.oglasnik-field textarea {
	padding: 8px 10px !important;
	border: 1px solid rgba(127, 127, 127, 0.4) !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: inherit !important;
	font: inherit !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/*
 * Ova polja nemaju "oglasnik-" klasu na sebi (samo ID), pa ih globalno
 * [class^="oglasnik-"]:focus-visible pravilo iz oglasnik-listing.css ne
 * pogadja - bez ovoga ostaje samo podrazumevani (nekonzistentan izmedju
 * browsera) obris fokusa.
 */
.oglasnik-field input[type="text"]:focus,
.oglasnik-field input[type="number"]:focus,
.oglasnik-field input[type="email"]:focus,
.oglasnik-field input[type="tel"]:focus,
.oglasnik-field input[type="url"]:focus,
.oglasnik-field input[type="date"]:focus,
.oglasnik-field input[type="password"]:focus,
.oglasnik-field select:focus,
.oglasnik-field textarea:focus {
	outline: none !important;
	border-color: var(--oglasnik-accent, #2563eb) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Native radio/checkbox u brend boji umesto podrazumevane (obicno sivo/plave) boje browsera/OS-a. */
.oglasnik-field input[type="radio"],
.oglasnik-field input[type="checkbox"],
.oglasnik-step input[type="radio"],
.oglasnik-step input[type="checkbox"],
.oglasnik-radio-option input[type="radio"] {
	accent-color: var(--oglasnik-accent, #2563eb) !important;
}

/*
 * Native "Izbor datoteka" dugme sledi OS/browser izgled (npr. sivi
 * pravougaonik) koji odudara od zaobljenih "pilula" korišćenih svuda drugde
 * u ovoj formi (koraci, tagovi) - ::file-selector-button (i stariji WebKit
 * ekvivalent) menja SAMO dugme, input ostaje potpuno funkcionalan nativni
 * element (drag&drop, tastatura, screen reader).
 */
#oglasnik-file-input {
	color: inherit !important;
	font: inherit !important;
}

#oglasnik-file-input::file-selector-button,
#oglasnik-file-input::-webkit-file-upload-button {
	margin-right: 10px !important;
	padding: 8px 16px !important;
	border: none !important;
	border-radius: 999px !important;
	background: rgba(127, 127, 127, 0.15) !important;
	color: inherit !important;
	font: inherit !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease !important;
}

#oglasnik-file-input::file-selector-button:hover,
#oglasnik-file-input::-webkit-file-upload-button:hover {
	background: rgba(127, 127, 127, 0.28) !important;
}

/* ---------- Osnovni rich-text "opis" (smestaj/adresar) ----------
 * Toolbar + editor su vizuelno jedno polje (zajednicka ivica, toolbar
 * ima suptilnu pozadinu kao "header traka" editora - slicno izgledu
 * pravih WYSIWYG alatki), umesto dva odvojena uokvirena bloka.
 */

.oglasnik-richtext {
	border: 1px solid rgba(127, 127, 127, 0.4) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: transparent !important;
}

.oglasnik-richtext:focus-within {
	border-color: rgba(37, 99, 235, 0.6) !important;
}

.oglasnik-richtext-toolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px !important;
	background: rgba(127, 127, 127, 0.07) !important;
	border-bottom: 1px solid rgba(127, 127, 127, 0.25) !important;
}

.oglasnik-richtext-group {
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	padding-right: 6px !important;
	border-right: 1px solid rgba(127, 127, 127, 0.25) !important;
}

.oglasnik-richtext-group-end {
	padding-right: 0 !important;
	border-right: 0 !important;
	margin-left: auto !important;
}

/* Sva dugmad su iste velicine (32x32) sa ikonicom 18px u sredini. */
.oglasnik-richtext-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	min-width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: rgba(17, 17, 17, 0.75) !important;
	transition: background-color 0.12s ease, color 0.12s ease !important;
	font: inherit !important;
	font-size: 0.8em !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.oglasnik-richtext-btn:hover {
	background: rgba(127, 127, 127, 0.15) !important;
	color: #111 !important;
}

.oglasnik-richtext-btn:focus-visible {
	outline: 2px solid var(--oglasnik-accent, #2563eb) !important;
	outline-offset: 1px !important;
}

.oglasnik-richtext-btn.is-active {
	background: rgba(37, 99, 235, 0.15) !important;
	border-color: rgba(37, 99, 235, 0.4) !important;
	color: var(--oglasnik-accent, #2563eb) !important;
}

.oglasnik-richtext-icon {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
}

/* Telefon: manja dugmad da cela traka stane u jedan red. */
@media (max-width: 420px) {
	.oglasnik-richtext-toolbar {
		gap: 4px !important;
		padding: 4px !important;
	}

	.oglasnik-richtext-group {
		gap: 0 !important;
		padding-right: 4px !important;
	}

	.oglasnik-richtext-btn {
		width: 28px !important;
		min-width: 28px !important;
		height: 28px !important;
	}

	.oglasnik-richtext-icon {
		width: 16px !important;
		height: 16px !important;
	}
}

.oglasnik-richtext-editor {
	min-height: 140px !important;
	padding: 10px 12px !important;
	background: transparent !important;
	color: inherit !important;
	font: inherit !important;
	white-space: pre-wrap !important;
}

.oglasnik-richtext-editor:focus {
	outline: none !important;
}

.oglasnik-richtext-editor:empty::before {
	content: attr( data-placeholder ) !important;
	opacity: 0.5 !important;
}

.oglasnik-richtext-editor ul,
.oglasnik-richtext-editor ol {
	margin: 0 0 0 1.2em !important;
	padding: 0 !important;
}

.oglasnik-richtext-editor blockquote {
	margin: 8px 0 !important;
	padding-left: 12px !important;
	border-left: 3px solid rgba(127, 127, 127, 0.4) !important;
	opacity: 0.85 !important;
}

.oglasnik-field-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) ) !important;
	gap: 12px !important;
	margin-bottom: 14px !important;
}

/* ---------- Kaskadni izbor lokacije ---------- */

.oglasnik-lokacija-levels {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

.oglasnik-lokacija-level {
	padding: 8px 10px !important;
	border: 1px solid rgba(127, 127, 127, 0.4) !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: inherit !important;
	font: inherit !important;
	min-width: 140px !important;
}

/* ---------- Mapa (biranje lokacije / prikaz pina) ---------- */

.oglasnik-map-geocode-btn {
	margin-bottom: 8px !important;
}

.oglasnik-map {
	width: 100% !important;
	height: 300px !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	margin-top: 8px !important;
}

/* ---------- Radno vreme po danima (adresar) ---------- */

.oglasnik-hours-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.oglasnik-hours-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.oglasnik-hours-day {
	width: 100px !important;
	flex-shrink: 0 !important;
	font-weight: 600 !important;
	font-size: 0.9em !important;
}

.oglasnik-hours-row input[type="time"] {
	width: 110px !important;
}

.oglasnik-hours-sep {
	opacity: 0.6 !important;
}

.oglasnik-hours-closed-label {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	font-size: 0.85em !important;
}

/* "Radi 0-24h" i "Neradan dan" zajedno, desno u redu dana. */
.oglasnik-hours-flags {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-left: auto !important;
}

/* isolation: Leaflet interno koristi z-index 400-1000 - bez ovoga bi mapa
   prekrila lepljivi okvir "Podaci o prodavcu" kad prolazi ispod njega. */
.oglasnik-map-box {
	margin-top: 16px !important;
	border: 1px solid rgba(127, 127, 127, 0.25) !important;
	border-radius: 10px !important;
	padding: 18px !important;
	isolation: isolate !important;
}

.oglasnik-map-box h3 {
	margin-top: 0 !important;
}

.oglasnik-map-box .oglasnik-map {
	height: 220px !important;
	margin-top: 10px !important;
}

.oglasnik-map-footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin-top: 10px !important;
	font-size: 0.85em !important;
}

.oglasnik-map-footer .oglasnik-icon {
	opacity: 0.6 !important;
}

.oglasnik-map-footer a {
	color: var(--oglasnik-accent, #2563eb) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}

.oglasnik-map-footer a:hover {
	text-decoration: underline !important;
}

.oglasnik-field-grid .oglasnik-field {
	margin-bottom: 0 !important;
}

.oglasnik-checkbox-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) ) !important;
	gap: 6px 12px !important;
}

.oglasnik-checkbox-option {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-weight: normal !important;
}

/*
 * Korak "Dodatna polja" (Oglasnik_Fields_Renderer::render_fields()):
 * kratka polja u dve kolone, kvacice i "vise izbora" u uokvirenim blokovima.
 */
.oglasnik-dyn-hint {
	margin: 0 0 14px !important;
}

.oglasnik-dyn-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) ) !important;
	gap: 0 16px !important;
	margin-bottom: 6px !important;
}

.oglasnik-dyn-grid .oglasnik-field {
	min-width: 0 !important;
}

.oglasnik-dyn-box {
	border: 1px solid rgba(127, 127, 127, 0.25) !important;
	border-radius: 10px !important;
	background: rgba(127, 127, 127, 0.04) !important;
	padding: 14px 16px !important;
	margin-bottom: 16px !important;
}

.oglasnik-dyn-box-title,
.oglasnik-dyn-box > .oglasnik-field > label {
	display: block !important;
	font-weight: 600 !important;
	font-size: 0.85em !important;
	margin: 0 0 10px !important;
}

.oglasnik-dyn-box .oglasnik-field {
	margin-bottom: 0 !important;
}

.oglasnik-dyn-box .oglasnik-checkbox-option {
	font-size: 0.92em !important;
	cursor: pointer !important;
}

.oglasnik-dostupno-cele-godine-toggle {
	margin: 8px 0 !important;
}

.oglasnik-bez-radnog-vremena-toggle {
	margin: 8px 0 14px !important;
}

/* <p> - manje izlozeno teminim resetima nego dugmad, ali neke teme forsiraju
   bazni font-size na SVIM paragrafima (!important, radi citljivosti) - bez
   odbrane ovde bi sitan tekst ispao iste velicine kao obican tekst. */
.oglasnik-hint {
	opacity: 0.7 !important;
	font-size: 0.85em !important;
}

.oglasnik-profile-section-title {
	margin: 24px 0 4px !important;
	padding-top: 20px !important;
	border-top: 1px solid rgba(127, 127, 127, 0.12) !important;
}

.oglasnik-step-controls {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 24px !important;
	padding-top: 16px !important;
	border-top: 1px solid rgba(127, 127, 127, 0.15) !important;
}

/* Prvi korak nema "Nazad" - "Dalje" ostaje desno. */
.oglasnik-step-controls > :only-child {
	margin-left: auto !important;
}

/*
 * Boja/pozadina dugmadi ide sa !important - teme cesto imaju sopstvena
 * pravila za <a> linkove sa vecom specificnoscu (npr. ".content a") koja bi
 * inace pregazila nasu klasu i ostavila nevidljiv tekst iste boje kao pozadina.
 */
/*
 * Teme cesto namecu sopstveni izgled SVIM <button>-ima
 * (veliko slovo, podebljano, senka, puna sirina u flex/grid roditelju) -
 * bez !important na SVAKOM vizuelno bitnom svojstvu ovde (ne samo boji),
 * dugme moze da zadrzi temin izgled uprkos nasoj klasi (vidi isti problem
 * i popravku kod .oglasnik-step-nav-item iznad).
 */
a.oglasnik-btn,
button.oglasnik-btn,
.oglasnik-btn {
	display: inline-block !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 10px 18px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 6px !important;
	background: var(--oglasnik-accent, #2563eb) !important;
	color: #fff !important;
	cursor: pointer !important;
	font: inherit !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
}

a.oglasnik-btn:hover,
button.oglasnik-btn:hover,
.oglasnik-btn:hover {
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
	transform: translateY( -1px ) !important;
}

a.oglasnik-btn:active,
button.oglasnik-btn:active,
.oglasnik-btn:active {
	transform: translateY( 0 ) !important;
	box-shadow: none !important;
}

a.oglasnik-btn:disabled,
button.oglasnik-btn:disabled,
.oglasnik-btn:disabled {
	cursor: default !important;
	opacity: 0.6 !important;
	box-shadow: none !important;
	transform: none !important;
}

a.oglasnik-btn-secondary,
button.oglasnik-btn-secondary,
.oglasnik-btn-secondary {
	background: rgba(127, 127, 127, 0.25) !important;
	color: inherit !important;
}

a.oglasnik-btn-secondary:hover,
button.oglasnik-btn-secondary:hover,
.oglasnik-btn-secondary:hover {
	background: rgba(127, 127, 127, 0.4) !important;
	box-shadow: none !important;
}

/*
 * Selektor mora biti bar isto "jak" (element + klasa) kao a/button.oglasnik-btn
 * iznad - obican ".oglasnik-submit" gubi od njih po CSS specificnosti (isti
 * broj klasa, ali .oglasnik-btn ima i element deo selektora), pa se dugme
 * za slanje inace uvek prikazivalo plavo (boja za "Dalje") umesto zeleno
 * (boja za zavrsnu/pozitivnu akciju) - bez obzira na redosled u fajlu.
 */
a.oglasnik-submit,
button.oglasnik-submit,
.oglasnik-submit {
	background: var(--oglasnik-success, #16a34a) !important;
}

a.oglasnik-submit:hover,
button.oglasnik-submit:hover,
.oglasnik-submit:hover {
	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35) !important;
}

.oglasnik-success {
	color: var(--oglasnik-success, #16a34a) !important;
	font-weight: 600 !important;
}

.oglasnik-error {
	color: var(--oglasnik-danger, #dc2626) !important;
	font-weight: 600 !important;
}

#oglasnik-gallery {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-bottom: 12px !important;
	min-height: 90px !important;
}

.oglasnik-gallery-item {
	position: relative !important;
	width: 90px !important;
	height: 90px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	border: 1px solid rgba(127, 127, 127, 0.4) !important;
	cursor: grab !important;
}

.oglasnik-gallery-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/*
 * Pending kartica se prikazuje ODMAH cim je fajl izabran (pre nego sto
 * upload uopste pocne) - lokalni preview slike (blob: URL) je vec vidljiv
 * ispod tamnog overlay-a sa spinnerom/trakom napretka, umesto praznog
 * mesta koje ostavlja korisnika u neizvesnosti da li se nesto uopste desava.
 */
.oglasnik-gallery-item-pending {
	cursor: default !important;
}

.oglasnik-gallery-item:not(.oglasnik-gallery-item-pending) {
	animation: oglasnik-gallery-item-in 0.25s ease !important;
}

@keyframes oglasnik-gallery-item-in {
	from { opacity: 0; transform: scale( 0.92 ); }
	to { opacity: 1; transform: scale( 1 ); }
}

/*
 * Beo tekst preko tamnog overlay-a - ako tema forsira svoju boju teksta
 * (!important, npr. globalni "dark mode"/typography reset), bela boja bi
 * izgubila i tekst bi postao necitljiv na tamnoj pozadini. Bezbednosno
 * bitnije od obicnog "izgleda drugacije" - zato je zasticeno.
 */
.oglasnik-gallery-progress-overlay {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff !important;
	padding: 8px !important;
	text-align: center !important;
}

.oglasnik-gallery-spinner {
	width: 18px !important;
	height: 18px !important;
	border: 2px solid rgba(255, 255, 255, 0.35) !important;
	border-top-color: #fff !important;
	border-radius: 50% !important;
	animation: oglasnik-gallery-spin 0.7s linear infinite !important;
}

@keyframes oglasnik-gallery-spin {
	to { transform: rotate( 360deg ); }
}

.oglasnik-gallery-progress-track {
	width: 70% !important;
	height: 4px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.25) !important;
	overflow: hidden !important;
}

.oglasnik-gallery-progress-fill {
	height: 100% !important;
	width: 0%;
	background: #fff !important;
	border-radius: 999px !important;
	transition: width 0.15s ease !important;
}

.oglasnik-gallery-progress-text {
	font-size: 0.7em !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}

.oglasnik-gallery-item-error {
	cursor: pointer !important;
	border-color: var(--oglasnik-danger, #dc2626) !important;
}

.oglasnik-gallery-item-error .oglasnik-gallery-progress-overlay {
	background: rgba(220, 38, 38, 0.75) !important;
}

.oglasnik-gallery-error-text {
	font-size: 0.72em !important;
	line-height: 1.3 !important;
}

.oglasnik-gallery-remove,
.oglasnik-gallery-star {
	position: absolute !important;
	top: 2px !important;
	border: none !important;
	border-radius: 3px !important;
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	cursor: pointer !important;
	line-height: 1 !important;
	padding: 2px 5px !important;
	font-size: 12px !important;
}

.oglasnik-gallery-remove {
	right: 2px !important;
}

.oglasnik-gallery-star {
	left: 2px !important;
}

.oglasnik-gallery-star.is-featured {
	background: var(--oglasnik-warning, #f59e0b) !important;
	color: #000 !important;
}

.oglasnik-login-notice {
	text-align: center !important;
	padding: 30px 16px !important;
}

.oglasnik-login-notice .oglasnik-btn {
	margin: 0 6px !important;
}

.oglasnik-auth-wrap {
	max-width: 420px !important;
	margin: 0 auto !important;
	padding: 20px 0 !important;
}

.oglasnik-auth-tabs {
	display: flex !important;
	gap: 8px !important;
	margin-bottom: 18px !important;
}

.oglasnik-auth-tabs .oglasnik-tab {
	flex: 1 !important;
	text-align: center !important;
	margin: 0 !important;
}

.oglasnik-auth-lost-password {
	text-align: center !important;
	font-size: 0.88em !important;
	margin-top: 10px !important;
}

.oglasnik-auth-resend {
	margin: 10px 0 16px !important;
}

.oglasnik-type-chooser {
	max-width: 780px !important;
	margin: 40px auto !important;
	text-align: center !important;
	padding: 0 16px !important;
}

.oglasnik-type-chooser h2 {
	font-size: 1.5em !important;
	margin-bottom: 24px !important;
}

.oglasnik-type-chooser-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ) !important;
	gap: 20px !important;
}

.oglasnik-type-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 10px !important;
	padding: 32px 20px !important;
	border-radius: 14px !important;
	background: rgba(127, 127, 127, 0.06) !important;
	border: 1px solid rgba(127, 127, 127, 0.25) !important;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.oglasnik-type-card:hover,
.oglasnik-type-card:focus-visible {
	border-color: var(--oglasnik-accent, #2563eb) !important;
	background: rgba(37, 99, 235, 0.08) !important;
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
}

.oglasnik-type-card-icon {
	font-size: 2.5em !important;
	line-height: 1 !important;
}

.oglasnik-type-card-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.oglasnik-type-card-title {
	font-size: 1.15em !important;
	font-weight: 700 !important;
}

.oglasnik-type-card-desc {
	font-size: 0.85em !important;
	opacity: 0.75 !important;
	line-height: 1.4 !important;
}

@media (max-width: 480px) {
	.oglasnik-type-chooser-grid {
		grid-template-columns: 1fr !important;
	}

	.oglasnik-type-card {
		flex-direction: row !important;
		text-align: left !important;
		align-items: center !important;
		padding: 16px !important;
	}

	.oglasnik-type-card-icon {
		font-size: 2em !important;
	}
}

.oglasnik-change-type {
	margin-bottom: 12px !important;
}

.oglasnik-change-type a {
	font-size: 0.85em !important;
	text-decoration: none !important;
	opacity: 0.8 !important;
}

/* ---------- Profil ---------- */

.oglasnik-profile-avatar {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 20px !important;
}

.oglasnik-profile-avatar img {
	width: 90px !important;
	height: 90px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

.oglasnik-logo-upload {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
}

.oglasnik-logo-preview {
	width: 72px !important;
	height: 72px !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: rgba(127, 127, 127, 0.08) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.oglasnik-logo-preview img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.oglasnik-logo-placeholder {
	font-size: 1.6em !important;
	opacity: 0.35 !important;
}

.oglasnik-logo-actions {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

.oglasnik-logo-remove {
	background: none !important;
	border: none !important;
	color: var(--oglasnik-danger, #dc2626) !important;
	cursor: pointer !important;
	font: inherit !important;
	font-size: 0.85em !important;
	text-decoration: underline !important;
	padding: 0 !important;
}

/* ---------- Dashboard (profil / moji oglasi / favoriti) ---------- */

.oglasnik-dashboard {
	display: grid !important;
	grid-template-columns: 250px 1fr !important;
	gap: 24px !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
	align-items: start !important;
}

.oglasnik-dashboard-sidebar {
	background: rgba(127, 127, 127, 0.04) !important;
	border: 1px solid rgba(127, 127, 127, 0.15) !important;
	border-radius: 12px !important;
	padding: 20px !important;
	/* Namerno nije lepljiv. Da postane: position: sticky !important; top: var(--oglasnik-sticky-top, 20px) !important; */
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.oglasnik-dashboard-user {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.oglasnik-dashboard-avatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
}

.oglasnik-public-profile-location {
	margin: -8px 0 0 !important;
	font-size: 0.88em !important;
	opacity: 0.75 !important;
}

.oglasnik-public-profile-bio {
	margin: 0 !important;
	font-size: 0.9em !important;
	line-height: 1.5 !important;
	white-space: pre-line !important;
}

.oglasnik-dashboard-user > div {
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

.oglasnik-dashboard-user-info {
	list-style: none !important;
	margin: -12px 0 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	font-size: 0.85em !important;
	opacity: 0.75 !important;
}

.oglasnik-dashboard-user-info li {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.oglasnik-dashboard-nav {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

/*
 * Ovo je <a> (glavna navigacija u sidebaru - Kontrolna tabla/Moji oglasi/...)
 * - ista teina odbrana kao kod .oglasnik-tab, nista ovde ranije nije imalo
 * !important pa bi tema mogla da nametne svoju boju/podvlacenje linka.
 */
.oglasnik-dashboard-nav-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	margin: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	text-decoration: none !important;
	text-transform: none !important;
	color: inherit !important;
	font-weight: 500 !important;
	font-size: 0.92em !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.oglasnik-dashboard-nav-item:hover {
	background: rgba(127, 127, 127, 0.08) !important;
}

.oglasnik-dashboard-nav-item.is-active {
	background: rgba(37, 99, 235, 0.12) !important;
	color: var(--oglasnik-accent, #2563eb) !important;
}

.oglasnik-dashboard-nav-icon {
	width: 20px !important;
	text-align: center !important;
	font-size: 18px !important;
	line-height: 1 !important;
}

.oglasnik-dashboard-nav-count {
	margin-left: auto !important;
	background: rgba(127, 127, 127, 0.15) !important;
	border-radius: 999px !important;
	padding: 1px 8px !important;
	font-size: 0.78em !important;
	font-weight: 400 !important;
	color: inherit !important;
}

.oglasnik-dashboard-nav-item.is-active .oglasnik-dashboard-nav-count {
	background: rgba(37, 99, 235, 0.2) !important;
}

.oglasnik-dashboard-cta {
	text-align: center !important;
}

/*
 * Deljeni "outline" izgled dugmadi - beleg-bela pozadina, tanka siva
 * ivica, zaobljeno - koriste ga "Uredi profil" u sidebaru i "Izmeni" u
 * redu unosa, da izgledaju kao jedan dosledan dizajn jezik.
 */
.oglasnik-dashboard-edit-profile,
.oglasnik-listing-edit-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	margin: 0 !important;
	background: none !important;
	border: 1px solid rgba(127, 127, 127, 0.3) !important;
	border-radius: 8px !important;
	padding: 7px 14px !important;
	color: inherit !important;
	font-weight: 600 !important;
	font-size: 0.85em !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.oglasnik-dashboard-edit-profile {
	width: 100% !important;
	margin-top: -12px !important;
}

.oglasnik-dashboard-edit-profile:hover,
.oglasnik-listing-edit-link:hover {
	background: rgba(127, 127, 127, 0.06) !important;
}

.oglasnik-dashboard-logout {
	margin-top: 10px !important;
}

.oglasnik-dashboard-main {
	min-width: 0 !important;
}

.oglasnik-dashboard-panel {
	background: rgba(127, 127, 127, 0.02) !important;
	border: 1px solid rgba(127, 127, 127, 0.15) !important;
	border-radius: 12px !important;
	padding: 24px !important;
}

.oglasnik-dashboard-panel-title {
	margin-top: 0 !important;
}

.oglasnik-dashboard-toolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 18px !important;
}

.oglasnik-listing-toolbar-right {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
}

.oglasnik-listing-search {
	padding: 8px 12px !important;
	border: 1px solid rgba(127, 127, 127, 0.3) !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: inherit !important;
	font: inherit !important;
	min-width: 200px !important;
}

.oglasnik-listing-sort-select {
	padding: 8px 12px !important;
	border: 1px solid rgba(127, 127, 127, 0.3) !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: inherit !important;
	font: inherit !important;
}

/* ---------- Sazetak (kartice iznad liste) ---------- */

.oglasnik-dashboard-stats-group {
	margin-bottom: 24px !important;
}

.oglasnik-dashboard-stats-group h3 {
	margin-bottom: 10px !important;
	font-size: 1em !important;
}

.oglasnik-dashboard-stats-group:last-child {
	margin-bottom: 0 !important;
}

.oglasnik-dashboard-stats {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) ) !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.oglasnik-stat-tile {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	border: 1px solid rgba(127, 127, 127, 0.15) !important;
	border-radius: 10px !important;
	padding: 14px 16px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.oglasnik-stat-tile .oglasnik-icon {
	font-size: 1.6em !important;
	color: var(--oglasnik-accent, #2563eb) !important;
	opacity: 0.85 !important;
}

.oglasnik-stat-tile strong {
	display: block !important;
	font-size: 1.3em !important;
	line-height: 1.2 !important;
}

.oglasnik-stat-tile span {
	font-size: 0.8em !important;
	opacity: 0.65 !important;
}

@media (max-width: 820px) {
	.oglasnik-dashboard {
		grid-template-columns: 1fr !important;
	}

	.oglasnik-dashboard-sidebar {
		position: static !important;
	}
}

/* Tabovi (gornji nav u sidebaru + status pod-tabovi) */

.oglasnik-tabs {
	margin-bottom: 20px !important;
}

/* Ista odbrana od teminih globalnih stilova za linkove kao kod dugmadi iznad. */
.oglasnik-tab {
	display: inline-block !important;
	padding: 8px 14px !important;
	margin: 0 6px 6px 0 !important;
	border-radius: 999px !important;
	background: rgba(127, 127, 127, 0.12) !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: inherit !important;
	font-weight: 400 !important;
	font-size: 0.9em !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.oglasnik-tab.is-active {
	background: var(--oglasnik-accent, #2563eb) !important;
	color: #fff !important;
	font-weight: 600 !important;
}

.oglasnik-status-tabs {
	display: flex !important;
	flex-wrap: wrap !important;
}

.oglasnik-tab-small {
	padding: 5px 12px !important;
	font-size: 0.8em !important;
}

/* Listing redovi (jedan div po unosu, ne <table>) */

.oglasnik-listing-rows {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

/*
 * Ovo je <div> (ne button/a) - teme retko globalno namecu stil na neoznacene
 * div-ove, ali dodajemo istu !important odbranu kao kod dugmadi iznad zarad
 * doslednosti, plus tranziciju koja je ovde nedostajala (hover je bio
 * trenutan skok umesto glatke promene, za razliku od .oglasnik-card:hover).
 */
/*
 * flex-wrap + minimalna sirina naslova (ispod): prelom zavisi od STVARNO
 * raspolozivog prostora, ne od sirine ekrana - panel "Moji oglasi" je uzak
 * i na sirokom ekranu (bocni meni zauzima 250px), pa su se na ~820-1000px
 * dugmad i naslov gnjecili (naslov jedna rec po liniji).
 */
.oglasnik-listing-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 14px !important;
	border: 1px solid rgba(127, 127, 127, 0.15) !important;
	border-radius: 12px !important;
	background: transparent !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.oglasnik-listing-row:hover {
	background: rgba(127, 127, 127, 0.03) !important;
	border-color: rgba(127, 127, 127, 0.25) !important;
}

.oglasnik-listing-thumb {
	position: relative !important;
	width: 100px !important;
	height: 100px !important;
	flex-shrink: 0 !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: rgba(127, 127, 127, 0.1) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.oglasnik-listing-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.oglasnik-listing-info {
	flex: 1 1 180px !important;
	min-width: 0 !important;
}

.oglasnik-listing-info h3 {
	margin: 0 !important;
	font-size: 1.1em !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

.oglasnik-listing-info h3 a {
	color: inherit !important;
	text-decoration: none !important;
}

.oglasnik-listing-price-line {
	font-size: 0.95em !important;
	font-weight: 700 !important;
	color: var(--oglasnik-accent, #2563eb) !important;
	margin-top: 4px !important;
}

.oglasnik-listing-location {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: 0.85em !important;
	opacity: 0.7 !important;
	margin-top: 4px !important;
}

.oglasnik-listing-stats {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px 10px !important;
	font-size: 0.82em !important;
	opacity: 0.65 !important;
	margin-top: 6px !important;
	letter-spacing: 0.02em !important;
}

/*
 * <span>, ne button/a - manje izlozeno teminim globalnim stilovima nego
 * dugmad, ali neke teme ipak namecu font-weight/text-transform preko
 * agresivnih "typography reset" pravila (npr. .entry-content * { ... }) -
 * ista !important odbrana radi doslednosti i ovde.
 */
.oglasnik-status-pill {
	display: inline-block !important;
	padding: 3px 10px !important;
	margin: 0 !important;
	border-radius: 999px !important;
	font-size: 0.78em !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: nowrap !important;
}

/* Boja pozadine i dalje dolazi od .oglasnik-status-pill-{status} pravila
   ispod (deklarisana posle ove, pa u kaskadi pobedjuju) - ovde se samo
   pozicionira preko sirokijeg thumbnail-a. */
.oglasnik-status-pill-overlay {
	position: absolute !important;
	bottom: 5px !important;
	left: 5px !important;
	padding: 2px 8px !important;
	font-size: 0.65em !important;
	text-transform: uppercase !important;
	color: #fff !important;
}

/* Providne (tint) boje iz .oglasnik-status-pill-{status} pravila su citljive
   na obicnoj pozadini, ali ne i preko fotografije - overlay varijanta zato
   dobija pune, kontrastne boje umesto tinta. */
.oglasnik-status-pill-overlay.oglasnik-status-pill-active {
	background: var(--oglasnik-success, #16a34a) !important;
	color: #fff !important;
}

.oglasnik-status-pill-overlay.oglasnik-status-pill-pending {
	background: #d97706 !important;
	color: #fff !important;
}

.oglasnik-status-pill-overlay.oglasnik-status-pill-rejected {
	background: var(--oglasnik-danger, #dc2626) !important;
	color: #fff !important;
}

.oglasnik-status-pill-overlay.oglasnik-status-pill-expired,
.oglasnik-status-pill-overlay.oglasnik-status-pill-archived,
.oglasnik-status-pill-overlay.oglasnik-status-pill-draft {
	background: #6b7280 !important;
	color: #fff !important;
}

.oglasnik-status-pill-overlay.oglasnik-status-pill-sold,
.oglasnik-status-pill-overlay.oglasnik-status-pill-rented,
.oglasnik-status-pill-overlay.oglasnik-status-pill-reserved {
	background: #7c3aed !important;
	color: #fff !important;
}

.oglasnik-status-pill-active {
	background: rgba(22, 163, 74, 0.15) !important;
	color: var(--oglasnik-success, #16a34a) !important;
}

.oglasnik-status-pill-pending {
	background: rgba(245, 158, 11, 0.18) !important;
	color: #b45309 !important;
}

.oglasnik-status-pill-rejected {
	background: rgba(220, 38, 38, 0.15) !important;
	color: var(--oglasnik-danger, #dc2626) !important;
}

.oglasnik-status-pill-expired,
.oglasnik-status-pill-archived,
.oglasnik-status-pill-draft {
	background: rgba(127, 127, 127, 0.2) !important;
	color: inherit !important;
}

.oglasnik-status-pill-sold,
.oglasnik-status-pill-rented,
.oglasnik-status-pill-reserved {
	background: rgba(124, 58, 237, 0.15) !important;
	color: #7c3aed !important;
}

.oglasnik-listing-cell-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	white-space: nowrap !important;
	margin-left: auto !important;
}

.oglasnik-listing-promote-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: var(--oglasnik-accent, #2563eb) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 7px 16px !important;
	margin: 0 !important;
	font-size: 0.85em !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
}

.oglasnik-listing-promote-link:hover {
	background: var(--oglasnik-accent-dark, #1d4ed8) !important;
}

.oglasnik-listing-more {
	position: relative !important;
}

/*
 * Neke teme imaju sopstveni globalni stil za <button> koji, kod selektora
 * sa vecom specificnoscu, pobedjuje nase neoznacene deklaracije -
 * .oglasnik-listing-edit-link je vec bio zasticen !important-om pa je
 * ispravno izgledao, ali ova dva dugmeta nisu bila - zato je "..." dugme
 * ostajalo plavo/popunjeno umesto da izgleda kao Izmeni.
 */
.oglasnik-listing-more-toggle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: none !important;
	border: 1px solid rgba(127, 127, 127, 0.3) !important;
	border-radius: 8px !important;
	width: 32px !important;
	height: 32px !important;
	cursor: pointer !important;
	font-size: 1.1em !important;
	line-height: 1 !important;
	color: inherit !important;
}

.oglasnik-listing-more-toggle:hover {
	background: rgba(127, 127, 127, 0.06) !important;
}

.oglasnik-listing-more-menu {
	display: none !important;
	position: absolute !important;
	right: 0 !important;
	top: calc(100% + 4px) !important;
	background: #fff !important;
	background: Canvas !important;
	border: 1px solid rgba(127, 127, 127, 0.25) !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
	min-width: 180px !important;
	z-index: 20 !important;
	overflow: hidden !important;
}

.oglasnik-listing-more.is-open .oglasnik-listing-more-menu {
	display: block !important;
}

.oglasnik-listing-more-menu button,
.oglasnik-listing-more-menu a {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	width: 100% !important;
	margin: 0 !important;
	text-align: left !important;
	padding: 9px 14px !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	font: inherit !important;
	font-size: 0.88em !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.oglasnik-listing-more-menu button:hover,
.oglasnik-listing-more-menu a:hover {
	background: rgba(127, 127, 127, 0.08) !important;
}

.oglasnik-listing-more-menu .oglasnik-danger-item {
	color: var(--oglasnik-danger, #dc2626) !important;
}

@media (max-width: 640px) {
	.oglasnik-listing-row {
		flex-wrap: wrap !important;
	}

	.oglasnik-listing-cell-actions {
		width: 100% !important;
		justify-content: flex-start !important;
		margin-top: 8px !important;
		flex-wrap: wrap !important;
	}
}

/* Na vrlo uskim ekranima red pretvaramo u pravu vertikalnu karticu -
   sitna slika pored teksta bi bila stisnuta i tesko citljiva. */
@media (max-width: 480px) {
	.oglasnik-listing-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.oglasnik-listing-thumb {
		width: 100% !important;
		height: 140px !important;
	}

	.oglasnik-dashboard-stats {
		grid-template-columns: repeat( 2, 1fr ) !important;
	}

	.oglasnik-dashboard-toolbar {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.oglasnik-listing-toolbar-right {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.oglasnik-listing-search,
	.oglasnik-listing-sort-select {
		width: 100% !important;
		min-width: 0 !important;
	}
}

/* ---------- Istakni oglas (modal) ---------- */

.oglasnik-radio-option {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 0 !important;
	font-weight: normal !important;
	border-bottom: 1px solid rgba(127, 127, 127, 0.15) !important;
}

.oglasnik-radio-option:last-child {
	border-bottom: none !important;
}

.oglasnik-payment-instructions {
	margin: 14px 0 !important;
	padding: 12px !important;
	border-radius: 8px !important;
	background: rgba(127, 127, 127, 0.08) !important;
	font-size: 0.9em !important;
}

.oglasnik-payment-instructions p {
	margin: 4px 0 !important;
}


} /* @layer oglasnik */