/* Darcode Dodatna cijena — storefront.
   Oznaka mora biti jasna, vidljiva i čitljiva (Odluka NN 101/2026, t. II.),
   ali ne mora biti iste veličine ni grafičkog izgleda kao aktualna cijena. */

/* Zadane vrijednosti; postavke plugina ih prepisuju inline stilom na :root. */
:root {
	--darcode-dc-size: 0.875em;
	--darcode-dc-weight: 400;
	--darcode-dc-style: normal;
	--darcode-dc-color: inherit;
	--darcode-dc-opacity: 0.95;
}

.darcode-dc {
	position: relative;
	display: block;
	margin-top: 0.35em;
	/* Relativna mjera prati cijenu, ali nikad ispod 11px: tema popisu daje
	   cijenu od 16px, pa bi 0.5em ispalo 8px — na granici čitljivosti, a
	   Odluka traži da oznaka bude jasna, vidljiva i čitljiva (t. II.). */
	font-size: max(var(--darcode-dc-size, 0.875em), 11px);
	font-weight: var(--darcode-dc-weight, 400);
	font-style: var(--darcode-dc-style, normal);
	/* Teme s odvojenim „Bold” obitelji fonta (npr. „Quicksand Bold” na cijeni) čine
	   font-weight beskorisnim — zato postavka obitelji fonta; prazno = kao tema. */
	font-family: var(--darcode-dc-font, inherit);
	line-height: 1.4;
	color: var(--darcode-dc-color, inherit);
	opacity: var(--darcode-dc-opacity, 0.95);
}

.darcode-dc__label,
.darcode-dc__sep,
.darcode-dc__amount {
	display: inline;
}

/* Font, debljina i boja oznake su POSTAVKA i moraju pobijediti pravila teme
   koja cijelom sadržaju cijene nameću podebljanu obitelj fonta ili boju
   s !important (npr. `.price span { font-family: "Quicksand Bold" !important }`).
   Četverostruka klasa (0,4,0 / 0,4,1) nadmašuje i pravila s tri klase i
   elementom kakva imaju blokovi tema (`.wrapper .price span`, 0,2,1);
   vrijednosti su iz CSS varijabli, pa prazna postavka i dalje znači „kao
   tema” (inherit). */
.darcode-dc.darcode-dc.darcode-dc.darcode-dc,
.darcode-dc.darcode-dc.darcode-dc .darcode-dc__label,
.darcode-dc.darcode-dc.darcode-dc .darcode-dc__sep,
.darcode-dc.darcode-dc.darcode-dc .darcode-dc__amount,
.darcode-dc.darcode-dc.darcode-dc .darcode-dc__amount span,
.darcode-dc.darcode-dc.darcode-dc .darcode-dc__amount bdi {
	font-family: var(--darcode-dc-font, inherit) !important;
	font-weight: var(--darcode-dc-weight, 400) !important;
	font-style: var(--darcode-dc-style, normal) !important;
	color: var(--darcode-dc-color, inherit) !important;
}

/* Dvije oznake jedna ispod druge (najniža u 30 dana pa dodatna cijena):
   drugoj ne treba puni razmak, dovoljno je da se redci ne slijepe. */
.darcode-dc + .darcode-dc {
	margin-top: 0.15em;
}

/* Iznos u eurima mora izgledati identično oznaci uz koju stoji: isti font,
   veličina, debljina i boja iz postavki dodatka.

   Klase koje bi tema mogla gađati uklanjaju se već u PHP-u (clean_amount),
   pa je ovo pojas i naramenice za generička pravila tipa `.price span`.
   Klasa se ponavlja radi specifičnosti — teme redovito imaju pravila s
   četiri i više klasa na `.price`. Cilja se isključivo iznos, da se ne
   pogodi oblačić s napomenom. */
.darcode-dc.darcode-dc .darcode-dc__amount,
.darcode-dc.darcode-dc .darcode-dc__amount * {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-transform: none !important;
	color: inherit !important;
	background: none !important;
	opacity: 1 !important;
	text-decoration: none !important;
	vertical-align: baseline !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: inline !important;
}

.darcode-dc del,
.darcode-dc ins {
	text-decoration: none;
	background: none;
}

/* Kad oznaka završi unutar p.price zbog petlje ili bloka. */
.price .darcode-dc,
p.price .darcode-dc,
.wc-block-components-product-price .darcode-dc {
	display: block;
	margin-top: 0.35em;
}

/* U popisu proizvoda oznaka se ispisuje izvan elementa cijene (vidi
   Darcode_DC_Frontend::loop_render). Tema tako smije normalno sakriti cijenu
   na prijelaz mišem i podići svoj gumb, a oznaka i ikona ostaju vidljive i
   dohvatljive — bez preklapanja. */
.darcode-dc-slot {
	display: block;
	margin: 0.25em 0 0;
	clear: both;
}

.darcode-dc-slot .darcode-dc {
	margin-top: 0;
}

/* Napomena — ikona uz cijenu, sadržaj se otvara klikom. !important: generičko
   pravilo teme (`.price span { display: inline }`) inače otkrije 200 znakova
   napomene u svakoj kartici. */
.darcode-dc .darcode-dc__note,
.darcode-dc [hidden] {
	display: none !important;
}

/* Ikona mora ostati mali krug bez obzira na temu. Salient ima
   `body[data-button-style*=slightly_rounded] button { border-radius:4px !important }`
   i niz globalnih pravila za gumbe, pa se sve što određuje oblik postavlja
   s !important. Klasa se ponavlja radi specifičnosti. */
.darcode-dc .darcode-dc__help,
.darcode-dc .darcode-dc__help:hover,
.darcode-dc .darcode-dc__help:focus,
.darcode-dc .darcode-dc__help:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 1.35em !important;
	height: 1.35em !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 0 0 0.4em !important;
	padding: 0 !important;
	border: 1px solid currentColor !important;
	border-radius: 50% !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: max(0.85em, 10px) !important;
	font-weight: 700 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-indent: 0 !important;
	/* Sredina kruga na sredini malih slova: baseline bi krug spuštao ispod
	   retka na fontovima s većim spustom (Salient/Poppins, Roboto). */
	vertical-align: middle !important;
	top: -0.05em;
	cursor: pointer !important;
	transform: none !important;
	transition: opacity 0.15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative !important;
	float: none !important;
	opacity: 0.75;
}

/* Vidljivi krug ostaje malen, ali površina dodira se proširuje na ~24px,
   koliko traže smjernice za dodirne zaslone. Ne mijenja raspored. */
.darcode-dc .darcode-dc__help::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
}

.darcode-dc .darcode-dc__help > span {
	display: block !important;
	font: inherit !important;
	color: inherit !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.darcode-dc .darcode-dc__help:hover,
.darcode-dc .darcode-dc__help:focus-visible,
.darcode-dc .darcode-dc__help[aria-expanded="true"] {
	opacity: 1;
}

.darcode-dc__help:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Oblačić živi na <body>, pa ga overflow i transform kartice ne dosežu. */
.darcode-dc-popover {
	position: fixed;
	/* Iznad zaglavlja teme (100000) i njezinih modala (100001), a ispod
	   WP admin trake (1000000) i lightboxa (1000001). */
	z-index: 999900;
	max-width: 320px;
	padding: 0.7em 0.9em;
	border-radius: 6px;
	background: #1d2327;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.45;
	text-align: left;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	opacity: 1;
	pointer-events: auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.darcode-dc-popover[hidden] {
	display: none;
}

.darcode-dc:focus {
	outline: none;
}

.darcode-dc:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Veličina se ne nadjačava po širini zaslona — mjera je relativna (em), pa
   prati cijenu, a trgovac je kontrolira iz postavki. */

/* Oznaka je drugi redak uz cijenu, pa kartici proizvoda treba nešto prostora.
   Ne veže se ni uz jednu temu — `min-height` na spremniku cijene primjenjuje
   se samo ako tema sama ne propisuje svoju vrijednost. */

.products li.product .price .darcode-dc {
	margin-top: 0.2em;
}