/*
 * Sidrena cijena za WooCommerce — frontend stilovi.
 * Vrijednosti dolaze iz CSS varijabli (--wsc-*) koje plugin ispisuje na
 * temelju postavki u WooCommerce → Sidrena cijena → Izgled prikaza.
 * Zadane vrijednosti u var() koriste se ako varijable iz nekog razloga
 * nisu ispisane, tako da prikaz ne bude potpuno bez stila.
 */

.wsc-sidrena-cijena {
	position: relative;
	font-size: var(--wsc-font-size, 13px);
	color: var(--wsc-color-text, #444444);
	line-height: 1.4;
	margin: 4px 0;
	max-width: 100%;
	word-wrap: break-word;
}

.wsc-sidrena-cijena__label {
	font-weight: 600;
}

.wsc-sidrena-cijena__amount {
	white-space: nowrap;
}

.wsc-sidrena-cijena__unit {
	font-size: 0.92em;
	opacity: 0.85;
	white-space: nowrap;
}

/* Tooltip s objašnjenjem pojma "sidrena cijena" - element ostaje u DOM-u
 * (ne display:none) da ga aria-describedby pouzdano izloži čitačima ekrana
 * bez obzira na hover/fokus; vizualno se skriva pomicanjem izvan zaslona,
 * a ne display/visibility trikovima. */
.wsc-sidrena-cijena__tooltip {
	position: absolute;
	left: -9999px;
	bottom: 100%;
	margin-bottom: 6px;
	width: max-content;
	max-width: min(280px, 80vw);
	padding: 6px 10px;
	background: #222222;
	color: #ffffff;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
	border-radius: 4px;
	z-index: 10;
}

.wsc-sidrena-cijena:hover .wsc-sidrena-cijena__tooltip,
.wsc-sidrena-cijena:focus-within .wsc-sidrena-cijena__tooltip {
	left: 0;
}

/* Malen vizualni znak da značka ima tooltip (samo kad ga stvarno ima -
 * atribut tabindex je postavljen isključivo uz aktivan tooltip). */
.wsc-sidrena-cijena[tabindex]:not([tabindex="-1"]) .wsc-sidrena-cijena__label::after {
	content: " ⓘ";
	font-weight: 400;
	opacity: 0.7;
}

/* Pozicija "pored cijene": inline, bez novog reda. */
.wsc-sidrena-cijena--inline {
	display: inline-block;
	margin: 0 0 0 8px;
}

/* Pozicija "iznad/ispod cijene": vlastiti red. */
.wsc-sidrena-cijena--block {
	display: block;
}

/* Stil: obična oznaka bez okvira (zadano). */
.wsc-sidrena-cijena--obican-tekst {
	background: none;
	border: none;
	padding: 0;
}

/* Stil: okvir bez pozadine. */
.wsc-sidrena-cijena--oznaka-obrub {
	display: inline-block;
	padding: 2px 8px;
	border: var(--wsc-border-width, 1px) solid var(--wsc-color-border, #cccccc);
	border-radius: var(--wsc-border-radius, 4px);
	background: none;
}

/* Stil: puna pozadina + okvir. */
.wsc-sidrena-cijena--oznaka-pozadina {
	display: inline-block;
	padding: 2px 8px;
	border: var(--wsc-border-width, 1px) solid var(--wsc-color-border, #cccccc);
	border-radius: var(--wsc-border-radius, 4px);
	background: var(--wsc-color-bg, #f5f5f5);
}

/* Fokus (kad je unutar linka/proizvoda koji se može fokusirati tipkovnicom)
 * — ne oslanjamo se samo na boju, obrub ostaje vidljiv i uz high-contrast teme. */
.wsc-sidrena-cijena:focus-within {
	outline: 1px dotted currentColor;
	outline-offset: 2px;
}

/* Poštuj korisničku postavku "smanji animacije" - ovdje nema animacija, ali
 * pravilo je ovdje pripremljeno za eventualne buduće prijelaze/tranzicije. */
@media (prefers-reduced-motion: reduce) {
	.wsc-sidrena-cijena {
		transition: none;
	}
}

/* Sitni ekrani: spriječi da značka gura layout, dopusti prijelom retka. */
@media (max-width: 480px) {
	.wsc-sidrena-cijena--inline {
		display: block;
		margin: 4px 0 0;
	}
}

/* Varijabilni proizvod prije odabira varijacije: raspon (npr. "8,50 € – 12,00 €")
 * je duži od jedne cijene, pa mu dopuštamo prijelom retka umjesto nowrap-a
 * koji vrijedi za običan (jednostruki) iznos. */
.wsc-sidrena-cijena--variable .wsc-sidrena-cijena__amount {
	white-space: normal;
}