/* ==========================================================================
   UNLIMITED.RS — Top bar (redizajn 2026-10)
   Markup: header.php (.ut-topbar) · Ponašanje: js/topbar.js
   Sve je pod .ut-topbar da ne bi kolidiralo sa main.css / custom.css / style.css.
   ========================================================================== */

.ut-topbar {
	--ut-h: 40px;               /* visina trake */
	--ut-bg: #00294a;           /* ista navy kao mobilni meni */
	--ut-text: #c3d2e1;
	--ut-text-strong: #ffffff;
	--ut-muted: #7f97ae;
	--ut-hover: rgba(255, 255, 255, .08);
	--ut-accent: #1583d2;       /* plava iz .blue__btn--large */
	--ut-accent-hover: #289aea;
	--ut-focus: #7cc4ff;

	--ut-panel-bg: #ffffff;
	--ut-panel-text: #1d2b3a;
	--ut-panel-muted: #66788c;
	--ut-panel-line: #e4ebf2;
	--ut-panel-hover: #f0f5f9;
	--ut-chip: #e8f2fc;

	position: relative;
	z-index: 5;
	background: var(--ut-bg);
	color: var(--ut-text);
	font-family: 'robotoregular', Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ut-topbar .ut-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--ut-h);
	position: relative;
}
.ut-topbar .ut-topbar__inner:before,
.ut-topbar .ut-topbar__inner:after { display: none; } /* bootstrap clearfix na .container */

.ut-topbar .ut-topbar__info,
.ut-topbar .ut-topbar__nav {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}
.ut-topbar .ut-topbar__info { margin-left: -10px; } /* optičko poravnanje sa logom */
.ut-topbar .ut-topbar__nav  { margin-right: -10px; }

/* ---------- ikonice ---------- */
.ut-topbar .ut-ico {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

/* ---------- dugmad / linkovi u traci ---------- */
.ut-topbar .ut-tb-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--ut-text);
	font: inherit;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.ut-topbar .ut-tb-btn:hover,
.ut-topbar .ut-tb-btn:focus,
.ut-topbar .ut-dd.is-open > .ut-tb-btn {
	background: var(--ut-hover);
	color: var(--ut-text-strong);
	text-decoration: none;
}
.ut-topbar .ut-tb-btn:focus:not(:focus-visible) { background: transparent; color: var(--ut-text); }
.ut-topbar .ut-tb-btn:focus:not(:focus-visible):hover,
.ut-topbar .ut-dd.is-open > .ut-tb-btn:focus:not(:focus-visible) { background: var(--ut-hover); color: var(--ut-text-strong); }

.ut-topbar a:focus-visible,
.ut-topbar button:focus-visible {
	outline: 2px solid var(--ut-focus);
	outline-offset: 2px;
}

.ut-topbar .ut-ico--chev {
	width: 14px;
	height: 14px;
	margin-left: -3px;
	opacity: .7;
	transition: transform .15s ease;
}
.ut-topbar .ut-dd.is-open > .ut-tb-btn .ut-ico--chev { transform: rotate(180deg); }

/* telefon levo */
.ut-topbar .ut-tb-phone { color: var(--ut-text-strong); }
.ut-topbar .ut-tb-phone .ut-ico { opacity: .75; }
.ut-topbar .ut-tb-hours {
	color: var(--ut-muted);
	font-size: 13px;
	white-space: nowrap;
	margin-left: -2px;
}

/* Moj nalog — jedina "puna" akcija u traci */
.ut-topbar .ut-tb-account {
	height: 28px;
	margin-left: 6px;
	padding: 0 14px 0 11px;
	border-radius: 999px;
	background: var(--ut-accent);
	color: #fff;
	font-family: 'robotomedium', Roboto, Arial, sans-serif;
}
.ut-topbar .ut-tb-account:hover,
.ut-topbar .ut-tb-account:focus,
.ut-topbar .ut-tb-account:focus:not(:focus-visible) {
	background: var(--ut-accent);
	color: #fff;
}
.ut-topbar .ut-tb-account:hover { background: var(--ut-accent-hover); }

.ut-topbar .ut-tb-cart { width: 34px; padding: 0; justify-content: center; }
.ut-topbar .ut-tb-cart .ut-ico { width: 18px; height: 18px; }

/* ---------- dropdown ---------- */
.ut-topbar .ut-dd { position: relative; }

.ut-topbar .ut-dd__panel {
	position: absolute;
	top: calc(100% + 9px);
	right: 0;
	z-index: 20;
	background: var(--ut-panel-bg);
	color: var(--ut-panel-text);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 41, 74, .08), 0 12px 32px -6px rgba(0, 41, 74, .28);
	text-align: left;
}
.ut-topbar .ut-dd__panel:before { /* nevidljiv most da hover/klik ne "propadne" */
	content: '';
	position: absolute;
	left: 0; right: 0; top: -9px;
	height: 9px;
}
.ut-topbar .ut-dd.is-open .ut-dd__panel { animation: ut-pop .14s ease-out; }
@keyframes ut-pop {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* jezik */
.ut-topbar .ut-dd__panel--lang { min-width: 160px; padding: 6px; }
.ut-topbar .ut-lang__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-radius: 7px;
	color: var(--ut-panel-text);
	text-decoration: none;
	transition: background-color .12s ease;
}
.ut-topbar .ut-lang__item:hover,
.ut-topbar .ut-lang__item:focus { background: var(--ut-panel-hover); color: var(--ut-panel-text); }
.ut-topbar .ut-lang__item.is-current { font-family: 'robotomedium', Roboto, Arial, sans-serif; }
.ut-topbar .ut-lang__item .ut-ico { color: var(--ut-accent); }

/* pomoć */
.ut-topbar .ut-dd__panel--help { width: 320px; padding: 18px 8px 8px; }
.ut-topbar .ut-help__title {
	margin: 0 12px 3px;
	padding: 0;
	color: var(--ut-panel-text);
	font-family: 'robotomedium', Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 22px;
}
.ut-topbar .ut-help__lead {
	margin: 0 12px 12px;
	padding: 0;
	color: var(--ut-panel-muted);
	font-size: 13px;
	line-height: 19px;
}
.ut-topbar .ut-help__list {
	margin: 0;
	padding: 6px 0 0;
	border-top: 1px solid var(--ut-panel-line);
	list-style: none;
}
.ut-topbar .ut-help__list li { margin: 0; padding: 0; border: 0; list-style: none; }

.ut-topbar .ut-help__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 9px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--ut-panel-text);
	font: inherit;
	font-weight: normal;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .12s ease;
}
.ut-topbar .ut-help__row:hover,
.ut-topbar .ut-help__row:focus {
	background: var(--ut-panel-hover);
	color: var(--ut-panel-text);
	text-decoration: none;
}
.ut-topbar .ut-help__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--ut-chip);
	color: var(--ut-accent);
}
.ut-topbar .ut-help__ic .ut-ico { width: 18px; height: 18px; }
.ut-topbar .ut-help__txt { display: flex; flex-direction: column; min-width: 0; }
.ut-topbar .ut-help__name {
	font-family: 'robotomedium', Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: var(--ut-panel-text);
}
.ut-topbar .ut-help__meta {
	font-size: 12.5px;
	line-height: 17px;
	color: var(--ut-panel-muted);
}
.ut-topbar .ut-dd__panel a:focus-visible,
.ut-topbar .ut-dd__panel button:focus-visible {
	outline: 2px solid var(--ut-accent);
	outline-offset: -2px;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.ut-topbar .ut-tb-hours { display: none; }
}

@media (max-width: 767px) {
	.ut-topbar .ut-tb-phone__num { display: none; }
	.ut-topbar .ut-tb-phone { width: 34px; padding: 0; justify-content: center; }
	.ut-topbar .ut-topbar__info { margin-left: -8px; }
	.ut-topbar .ut-topbar__nav { margin-right: -6px; gap: 2px; }
	.ut-topbar .ut-tb-btn { padding: 0 8px; }
	.ut-topbar .ut-tb-account { padding: 0 12px 0 10px; margin-left: 4px; }
	.ut-topbar .ut-tb-cart { width: 34px; padding: 0; }

	/* panel "Pomoć" se kači za celu traku (pun širina), jezik ostaje ispod svog dugmeta */
	.ut-topbar .ut-dd--help { position: static; }
	.ut-topbar .ut-dd__panel { top: calc(100% + 6px); }
	.ut-topbar .ut-dd__panel--help { left: 15px; right: 15px; width: auto; max-width: 360px; margin-left: auto; }
}

@media (max-width: 400px) {
	.ut-topbar .ut-tb-account__label { display: none; }
	.ut-topbar .ut-tb-account { width: 34px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ut-topbar *,
	.ut-topbar *:before,
	.ut-topbar *:after { animation: none !important; transition: none !important; }
}

/* body{padding-top} (visina celog hedera) je u css/nav.css */