/*
 * Dokumenti — sredisnja pretraga. Mjere i boje iz
 * `handoff/dokumenti-pretraga/README.md`.
 *
 * Bez `!important` i bez zaobljenja: kvadratni kutovi su pravilo projekta.
 */

.cdoc { --cdoc-tamna: #1f2c33; --cdoc-plava: #0f6c99; --cdoc-rub: #e6ecef; }

/* ---------- hero ---------- */

/* Hero se prosire preko Elementorova stupca do pune sirine ekrana; sadrzaj
   ostaje na 1360 px, kao i ostatak stranice. */
.cdoc__hero { background: var(--cdoc-tamna); }

/* Zaglavlje stoji u vlastitom kontejneru pune sirine; unutarnji sadrzaj ostaje
   poravnat s ostatkom stranice. */
.cdoc__hero-inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 60px 40px 56px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cdoc__nad {
	font: 700 12px/1 Montserrat, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #80d8ff;
}

.cdoc__naslov {
	margin: 0;
	font: 800 clamp(38px, 4vw, 58px)/1.05 Montserrat, sans-serif;
	color: #fff;
}

.cdoc__uvod {
	max-width: 620px;
	margin: 0;
	font: 400 17px/1.6 Barlow, sans-serif;
	color: #c6d4db;
}

.cdoc__search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	max-width: 900px;
	height: 64px;
	background: #fff;
	border: 1px solid #fff;
}

.cdoc__search-ikona {
	flex: 0 0 auto;
	display: inline-flex;
	padding-left: 18px;
	color: #586f7c;
}

.cdoc__polje {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: none;
	padding: 0 12px;
	font: 400 18px Barlow, sans-serif;
	color: var(--cdoc-tamna);
}

.cdoc__polje::placeholder { color: #8ba0ab; }
.cdoc__polje::-webkit-search-cancel-button { display: none; }

.cdoc__ocisti {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	cursor: pointer;
	color: #586f7c;
}

.cdoc__ocisti:hover { color: var(--cdoc-tamna); }

.cdoc__search-btn {
	flex: 0 0 auto;
	height: 50px;
	margin-right: 6px;
	padding: 0 24px;
	border: 0;
	cursor: pointer;
	background: var(--cdoc-tamna);
	color: #fff;
	font: 700 12px Montserrat, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cdoc__search-btn:hover { background: var(--cdoc-plava); color: #fff; }

.cdoc__cesto {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.cdoc__cesto-n {
	margin-right: 6px;
	font: 700 11px Montserrat, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9fb1ba;
}

.cdoc__chip {
	height: 34px;
	padding: 0 14px;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .28);
	background: none;
	color: #c6d4db;
	font: 400 15px Barlow, sans-serif;
}

.cdoc__chip:hover { border-color: #80d8ff; background: none; color: #fff; }

/* ---------- odjeljci ---------- */

.cdoc__odjeljak { margin-top: 44px; }
.cdoc__pregled > .cdoc__odjeljak:first-child { margin-top: 40px; }

.cdoc__glava {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.cdoc__h2 {
	margin: 0;
	font: 800 27px/1.2 Montserrat, sans-serif;
	color: var(--cdoc-tamna);
	text-transform: none;
}

.cdoc__ukupno { font: 400 14px Barlow, sans-serif; color: #586f7c; }

/* ---------- kategorije ---------- */

.cdoc__top {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.cdoc__top a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--cdoc-rub);
	color: #37474f;
	text-decoration: none;
}

.cdoc__top a:hover { border-color: var(--cdoc-plava); }
.cdoc__top .count { font: 800 32px/1 Montserrat, sans-serif; color: var(--cdoc-plava); margin-bottom: 6px; }
.cdoc__top .name  { font: 700 17.5px/1.3 Montserrat, sans-serif; color: var(--cdoc-tamna); }
.cdoc__top .desc  { font: 400 15px/1.55 Barlow, sans-serif; color: #586f7c; }

.cdoc__rest {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 28px;
	background: #f4f9fc;
	border: 1px solid var(--cdoc-rub);
}

.cdoc__rest-n {
	font: 700 11px Montserrat, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #586f7c;
}

.cdoc__rest-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 32px;
}

.cdoc__rest-grid a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 0;
	color: #37474f;
	border-bottom: 1px solid #dfe7eb;
	font: 400 16.5px Barlow, sans-serif;
	text-decoration: none;
}

.cdoc__rest-grid a:hover { color: var(--cdoc-plava); }
.cdoc__rest-broj { font: 700 14.5px Barlow, sans-serif; color: #586f7c; }

/* ---------- vanjski servisi ---------- */

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

.cdoc__servis {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 24px;
	background: #f4f9fc;
	border: 1px solid var(--cdoc-rub);
	color: #37474f;
	text-decoration: none;
}

.cdoc__servis:hover { border-color: var(--cdoc-plava); }

.cdoc__servis-n {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font: 700 17px/1.3 Montserrat, sans-serif;
	color: var(--cdoc-tamna);
}

.cdoc__servis-o { font: 400 15px/1.55 Barlow, sans-serif; color: #586f7c; }
.cdoc__servis-h { font: 400 14px Barlow, sans-serif; color: var(--cdoc-plava); }
/* Tri uska stupca na 1025–1199: adresa i naziv se lome umjesto da izlaze. */
.cdoc__servis-h, .cdoc__servis-n { overflow-wrap: anywhere; }
@media (min-width: 1025px) and (max-width: 1199px) { .cdoc__servis { padding: 20px 16px; } }

.cdoc__napomena {
	margin: 34px 0 0;
	padding: 16px 20px;
	background: #f4f9fc;
	border-left: 3px solid var(--cdoc-plava);
	font: 400 15.5px/1.6 Barlow, sans-serif;
	color: #37474f;
}

/* ---------- rezultati ---------- */

.cdoc__rezultati { margin-top: 36px; }

.cdoc__filters {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	padding-bottom: 22px;
}

.cdoc__filter { display: flex; flex-direction: column; gap: 6px; }

.cdoc__filter > span {
	font: 700 11px Montserrat, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #586f7c;
}

.cdoc__filters select {
	height: 46px;
	padding: 0 12px;
	width: 100%;
	border: 1px solid #cfdae0;
	border-radius: 0;
	background: #fff;
	color: var(--cdoc-tamna);
	font: 400 16px Barlow, sans-serif;
}

.cdoc__result-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 18px;
}

.cdoc__count { font: 700 19px/1.3 Montserrat, sans-serif; color: var(--cdoc-tamna); }

.cdoc__reset {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font: 400 15px Barlow, sans-serif;
	color: var(--cdoc-plava);
	text-decoration: underline;
}

.cdoc__col-head,
.cdoc__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 170px 300px;
	gap: 24px;
	align-items: center;
}

.cdoc__col-head {
	padding-bottom: 14px;
	border-bottom: 1px solid #dfe7eb;
	font: 700 11.5px Montserrat, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #37474f;
}

.cdoc__row { padding: 18px 0; border-bottom: 1px solid #eef2f4; }

.cdoc__cell-naziv { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.cdoc__kat {
	font: 700 11px Montserrat, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cdoc-plava);
	text-decoration: none;
}

.cdoc__kat:hover { text-decoration: underline; }
.cdoc__naziv-t { font: 400 17px/1.45 Barlow, sans-serif; color: var(--cdoc-tamna); }
.cdoc__cell-datum { font: 400 15px Barlow, sans-serif; color: #586f7c; }

.cdoc__cell-dat { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.cdoc__ext {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 58px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #dfe7eb;
	font: 700 11.5px Montserrat, sans-serif;
	letter-spacing: .1em;
	color: #37474f;
}

.cdoc__vel { font: 400 14px Barlow, sans-serif; color: #8ba0ab; min-width: 54px; text-align: right; }

.cdoc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #cfdae0;
	background: #fff;
	color: #37474f;
	cursor: pointer;
	font: 700 11.5px Montserrat, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Tema boji svaki <button> na hoveru i pozadinu i tekst, pa oboje mora biti
   navedeno — inace natpis pobijeli na bijeloj podlozi. */
.cdoc__btn:hover { border-color: var(--cdoc-plava); background: #fff; color: var(--cdoc-plava); }

.cdoc__btn--pun { width: 38px; padding: 0; background: var(--cdoc-tamna); border-color: var(--cdoc-tamna); color: #fff; }
.cdoc__btn--pun:hover { background: var(--cdoc-plava); border-color: var(--cdoc-plava); color: #fff; }

.cdoc__prazno {
	margin: 26px 0 0;
	padding: 22px 24px;
	background: #f4f9fc;
	border: 1px solid var(--cdoc-rub);
	font: 400 16px/1.6 Barlow, sans-serif;
	color: #37474f;
}

.cdoc__prazno strong { display: block; margin-bottom: 6px; font: 700 18px Montserrat, sans-serif; color: var(--cdoc-tamna); }

.cdoc__jos-omot { display: flex; justify-content: center; margin-top: 26px; }

.cdoc__jos {
	height: 48px;
	padding: 0 28px;
	border: 1px solid #cfdae0;
	background: #fff;
	color: #37474f;
	cursor: pointer;
	font: 700 12px Montserrat, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cdoc__jos:hover { border-color: var(--cdoc-plava); background: #fff; color: var(--cdoc-plava); }

.cdoc [hidden] { display: none; }

.cdoc :focus-visible { outline: 3px solid rgba(128, 216, 255, .75); outline-offset: 2px; }

/* ---------- responzivno ---------- */

@media (min-width: 1920px) { .cdoc__hero-inner { max-width: 1600px; padding-left: 48px; padding-right: 48px; } }
@media (max-width: 1439px) and (min-width: 1025px) { .cdoc__hero-inner { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 767px) { .cdoc__hero-inner { padding-left: 16px; padding-right: 16px; } }

@media (max-width: 1439px) {
	.cdoc__col-head,
	.cdoc__row { grid-template-columns: minmax(0, 1fr) 150px 250px; }
	.cdoc__btn-t { display: none; }
	.cdoc__btn { width: 38px; padding: 0; }
}

@media (max-width: 1024px) {
	.cdoc__hero-inner { padding: 44px 20px 40px; }
	.cdoc__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cdoc__rest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
	.cdoc__servisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cdoc__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cdoc__col-head { display: none; }
	.cdoc__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
	.cdoc__cell-dat { justify-content: flex-start; }
	.cdoc__cell-datum { order: 3; }

	/* Redak po prototipu (Cerna Natjecaj v2, mobilni), isto kao popisi na
	   podstranicama i u registru: registar i naziv; sivi redak
	   „datum · XLSX · 13 KB"; Pregled (s natpisom) i preuzimanje iste
	   visine. Prije je datum stajao ispod gumba, velicina visjela u praznini,
	   a Pregled je bio ikona od 38 px (13.10.2026.). */
	.cdoc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
	.cdoc__cell-naziv { order: 1; flex: 1 1 100%; margin-bottom: 6px; }
	.cdoc__cell-datum { order: 2; }
	.cdoc__cell-dat { display: contents; }
	.cdoc .cdoc__ext,
	.cdoc__vel {
		order: 3;
		min-width: 0;
		height: auto;
		padding: 0;
		border: 0;
		font: 400 15px Barlow, sans-serif;
		letter-spacing: 0;
		color: #586f7c;
		text-align: left;
	}
	.cdoc__vel { order: 4; }
	.cdoc .cdoc__ext::before,
	.cdoc__vel::before { content: "·"; margin: 0 7px; }
	.cdoc__cell-datum:empty + .cdoc__cell-dat .cdoc__ext::before { content: none; }
	.cdoc__row::after { content: ""; order: 5; flex: 0 0 100%; height: 14px; }
	.cdoc .cdoc__btn { order: 6; height: 40px; width: auto; padding: 0 16px; }
	.cdoc .cdoc__btn--pun { order: 7; width: 40px; padding: 0; }
	.cdoc .cdoc__btn + .cdoc__btn--pun { margin-left: 10px; }
	.cdoc__btn-t { display: inline; }
}

@media (max-width: 767px) {
	.cdoc__search { height: 56px; }
	.cdoc__search-btn { height: 44px; padding: 0 16px; }
	.cdoc__polje { font-size: 16px; }
	.cdoc__top,
	.cdoc__rest-grid,
	.cdoc__servisi,
	.cdoc__filters { grid-template-columns: minmax(0, 1fr); }
	.cdoc__rest { padding: 20px; }
	.cdoc .cdoc__btn { height: 44px; }
	.cdoc .cdoc__btn--pun { width: 44px; }
}

/* ---------- nadjacavanje globalnog Elementor kita ----------
 *
 * Kit stilizira `h1`, `h2` i svaki `<button>` selektorima poput
 * `.elementor-kit-5 button` (specificnost 0,2,0), pa su naslov u tamnom
 * zaglavlju i cipovi dolazili u temine boje: naslov tamnosiv na tamnoj
 * podlozi, cipovi puni i verzalni umjesto prozirnih s rubom. `!important`
 * je zabranjen, pa se pravila ponavljaju s vecom specificnoscu.
 */

.cdoc .cdoc__naslov {
	font: 800 clamp(38px, 4vw, 58px)/1.05 Montserrat, sans-serif;
	color: #fff;
	text-transform: none;
	letter-spacing: normal;
}

.cdoc .cdoc__h2 {
	font: 800 27px/1.2 Montserrat, sans-serif;
	color: var(--cdoc-tamna);
	text-transform: none;
	letter-spacing: normal;
}

.cdoc .cdoc__chip {
	background: none;
	border: 1px solid rgba(255, 255, 255, .28);
	color: #c6d4db;
	font: 400 15px Barlow, sans-serif;
	text-transform: none;
	letter-spacing: normal;
	padding: 0 14px;
}

.cdoc .cdoc__chip:hover { background: none; border-color: #80d8ff; color: #fff; }

.cdoc .cdoc__search-btn {
	background: var(--cdoc-tamna);
	color: #fff;
	font: 700 12px Montserrat, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 0 24px;
}

.cdoc .cdoc__search-btn:hover { background: var(--cdoc-plava); color: #fff; }

.cdoc .cdoc__ocisti { background: none; color: #586f7c; padding: 0; }
.cdoc .cdoc__ocisti:hover { background: none; color: var(--cdoc-tamna); }

.cdoc .cdoc__btn {
	background: #fff;
	border: 1px solid #cfdae0;
	color: #37474f;
	font: 700 11.5px Montserrat, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 0 14px;
}

.cdoc .cdoc__btn:hover { background: #fff; border-color: var(--cdoc-plava); color: var(--cdoc-plava); }

.cdoc .cdoc__btn--pun {
	background: var(--cdoc-tamna);
	border-color: var(--cdoc-tamna);
	color: #fff;
	padding: 0;
}

.cdoc .cdoc__btn--pun:hover { background: var(--cdoc-plava); border-color: var(--cdoc-plava); color: #fff; }

.cdoc .cdoc__jos {
	background: #fff;
	border: 1px solid #cfdae0;
	color: #37474f;
	font: 700 12px Montserrat, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 0 28px;
}

.cdoc .cdoc__jos:hover { background: #fff; border-color: var(--cdoc-plava); color: var(--cdoc-plava); }

.cdoc .cdoc__reset {
	background: none;
	border: 0;
	color: var(--cdoc-plava);
	font: 400 15px Barlow, sans-serif;
	text-transform: none;
	letter-spacing: normal;
	padding: 0;
}

.cdoc .cdoc__reset:hover { background: none; color: var(--cdoc-tamna); }

.cdoc .cdoc__filters select {
	background: #fff;
	color: var(--cdoc-tamna);
	font: 400 16px Barlow, sans-serif;
	text-transform: none;
	letter-spacing: normal;
}

/* Temin reset stilizira `input[type="search"]` (rub 1px #666, radius 3px,
   vlastiti padding) jace od klase widgeta, pa se unutar bijele trazilice
   vidio jos jedan okvir. Isti reset zaobljava i gumbe, a projekt trazi
   kvadratne kutove. */
.cdoc .cdoc__polje {
	height: 100%;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.cdoc .cdoc__polje:focus { border: 0; box-shadow: none; }

.cdoc .cdoc__search,
.cdoc .cdoc__search-btn,
.cdoc .cdoc__chip,
.cdoc .cdoc__ocisti,
.cdoc .cdoc__btn,
.cdoc .cdoc__jos,
.cdoc .cdoc__reset,
.cdoc .cdoc__ext,
.cdoc .cdoc__filters select { border-radius: 0; }

/* Fokus obuhvaca cijelu trazilicu, ne unutarnje polje: polje nema vlastiti
   okvir, pa je prsten visio unutar bijele plohe i izgledao kao greska. Gumb
   „Pretrazite" i gumb za ponistavanje zadrzavaju svoj prsten. */
.cdoc .cdoc__polje:focus,
.cdoc .cdoc__polje:focus-visible { outline: 0; }

.cdoc .cdoc__search:has(.cdoc__polje:focus-visible) {
	outline: 3px solid rgba(128, 216, 255, .75);
	outline-offset: 2px;
}

/* Zadnja dva mjesta gdje tema jos pobjeduje. Danas se ne vide — kartica
   servisa ima djecu s vlastitim bojama, a gumb za ponistavanje sadrzi samo
   ikonu — ali svaki novi tekst u njima naslijedio bi teminu plavu, odnosno
   verzal i prored. Zatvara se dok je jeftino. */
.cdoc .cdoc__servis { color: #37474f; }

.cdoc .cdoc__ocisti {
	font: 400 14px Barlow, sans-serif;
	text-transform: none;
	letter-spacing: normal;
}