/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Loading state for lowest price */
.najnizacijena30dana.codeart-loading {
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.najnizacijena30dana.codeart-loading .description {
	font-style: italic;
	color: #666;
}

/* Animated loading dots */
.codeart-loading-dots {
	display: inline-block;
	animation: codeart-dots 1.4s ease-in-out infinite;
}

@keyframes codeart-dots {
	0%, 80%, 100% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
}

/* Optional: Add a subtle pulse to the loading text */
@keyframes codeart-pulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

.najnizacijena30dana.codeart-loading .description {
	animation: codeart-pulse 1.5s ease-in-out infinite;
}

/* Sidrena cijena (anchor price) — sits inside the price markup, so it is a span shown as its own row.
   order + flex-basis put it after the price and on its own line when a theme lays the price out as flexbox
   (themes order their own price parts; without this the line jumped in front of them). A quiet line of small,
   muted text in the theme's own colour — no box — so it never competes with the price itself. */
.codeart-sidrena-cijena {
	display: block;
	flex: 0 0 100%;
	order: 99;
	width: 100%;
	box-sizing: border-box;
	margin: 0.3em 0 0;
	padding: 0;
	font-size: 0.8125em;
	line-height: 1.4;
	font-weight: 400;
	text-align: inherit;
	white-space: normal;
	color: inherit;
	opacity: 0.72;
	background: none;
	border: 0;
	border-radius: 0;
}

/* Codeart starter themes draw a price tag as .priceInner::before, centred on the box's height. With the anchor row
   inside the box the tag drifted down beside the row. Centre it on the box minus the row instead: the row is
   0.8125em of the box font × (0.3 margin + 1.4 line) = 1.38125em, so move up by half.
   --codeart-f carries the box's font size (registered, so 1em resolves on the box, not on the icon). */
@property --codeart-f {
	syntax: '<length>';
	inherits: true;
	initial-value: 16px;
}

.priceInner:has(> .codeart-sidrena-cijena) {
	--codeart-f: 1em;
}

.priceInner:has(> .codeart-sidrena-cijena)::before {
	top: calc(50% - var(--codeart-f) * 0.690625) !important;
}

/* !important on the size: themes size the price amount with long selectors (limacshop:
   `div.product .summary p.price span.amount {font-size:30px}`), which made the anchor as large as the price. */
.codeart-sidrena-cijena .woocommerce-Price-amount {
	display: inline;
	font-size: inherit !important;
	font-weight: 600;
	color: inherit;
	white-space: nowrap;
}