/* Rockit Free Shipping Badge
 * -------------------------------------------------------------
 * Sve boje/veličine su CSS varijable — može se pregaziti iz teme
 * ili Elementor Custom CSS-a bez diranja plugina.
 */

:root {
	--rockit-fsb-size: 50px;          /* arhiva — isto kao Porto "-XX%" label */
	--rockit-fsb-offset: 10px;        /* razmak od ivice slike */
	--rockit-fsb-single-size: 24px;   /* veličina ikonice na single strani */
	--rockit-fsb-color: #222529;      /* boja teksta na single strani (Porto) */
	--rockit-fsb-single-bg: rgba(83, 201, 11, .07);
	--rockit-fsb-single-border: rgba(83, 201, 11, .32);
	--rockit-fsb-single-gap-top: 22px;
	--rockit-fsb-shadow: none;        /* npr. drop-shadow(0 2px 6px rgba(0,0,0,.28)) */
	--rockit-fsb-tip-bg: #222222;
	--rockit-fsb-tip-color: #ffffff;
	--rockit-fsb-z: 5;
}

/* Offset parent za apsolutno pozicioniran bedž na arhivi. */
li.product:has(> .rockit-fsb--loop),
.product:has(> .rockit-fsb--loop),
.product-inner:has(> .rockit-fsb--loop),
.product-image:has(> .rockit-fsb--loop) {
	position: relative;
}

/* Fallback za pregledače bez :has() */
.woocommerce ul.products li.product,
ul.products li.product,
.elementor-widget-woocommerce-products li.product {
	position: relative;
}

/* ---------------------------------------------------------------
 * Arhiva — ikonica preko slike, donji desni ugao
 * Veličina je poravnata sa Porto "-XX%" labelom (50x50).
 * Gornji desni ugao je zauzet Porto "Uporedi" dugmetom.
 * ------------------------------------------------------------ */

.rockit-fsb--loop {
	position: absolute;
	top: auto;
	bottom: var(--rockit-fsb-offset);
	right: var(--rockit-fsb-offset);
	z-index: var(--rockit-fsb-z);
	width: var(--rockit-fsb-size);
	height: var(--rockit-fsb-size);
	display: block;
	box-sizing: border-box;
	line-height: 0;
	cursor: help;
	pointer-events: auto;
	/* Neutralizacija nasleđenih stilova teme. */
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	padding: 0;
	margin: 0;
	transform: none;
	transition: none;
}

.rockit-fsb--loop:hover,
.rockit-fsb--loop:focus,
.rockit-fsb--loop:active {
	background: none;
	border: 0;
	box-shadow: none;
	outline: none;
	transform: none;
}

.rockit-fsb--loop .rockit-fsb__icon {
	width: 100%;
	height: 100%;
	display: block;
	line-height: 0;
	filter: var(--rockit-fsb-shadow);
}

.rockit-fsb__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	box-shadow: none;
	background: none;
	max-width: none;
}

/* Tooltip / mali modal — iznad ikonice, poravnat desno,
 * da ne izlazi izvan slike proizvoda. */
.rockit-fsb--loop .rockit-fsb__tip {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	top: auto;
	left: auto;
	transform: translateY(4px);
	padding: 6px 10px;
	background: var(--rockit-fsb-tip-bg);
	color: var(--rockit-fsb-tip-color);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.rockit-fsb--loop:hover .rockit-fsb__tip,
.rockit-fsb--loop:focus .rockit-fsb__tip,
.rockit-fsb--loop:focus-within .rockit-fsb__tip,
.rockit-fsb--loop:active .rockit-fsb__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ---------------------------------------------------------------
 * Single proizvod — ikonica + tekst iznad "Dodaj u korpu"
 * ------------------------------------------------------------ */

.rockit-fsb--single {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	max-width: 100%;
	float: none;
	clear: both;
	box-sizing: border-box;
	margin: var(--rockit-fsb-single-gap-top) 0 0;
	padding: 10px 14px;
	background: var(--rockit-fsb-single-bg);
	border: 1px solid var(--rockit-fsb-single-border);
	border-radius: 4px;
	color: var(--rockit-fsb-color);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.rockit-fsb--single .rockit-fsb__icon {
	flex: 0 0 var(--rockit-fsb-single-size);
	width: var(--rockit-fsb-single-size);
	height: var(--rockit-fsb-single-size);
	line-height: 0;
}

.rockit-fsb--single.is-hidden {
	display: none;
}