:root {
	--arrow-color: #ffe600;
	--icon-inner-size: 60%;
	--icon-border-active: #ffe600;
	--icon-border-idle: #ffffff;
}

.ib8-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	border: none !important;
	padding: 40px;
	font-family: sans-serif;
}

.ib8-frame {
	position: absolute;
	top: 15px; left: 15px; right: 15px; bottom: 15px;
	border: 2px solid #fff;
	z-index: 2;
	pointer-events: none;
}

.ib8-bg {
	position: absolute;
	top: -15px; left: -15px; right: -15px; bottom: -15px;
	background-size: cover;
	background-position: center;
	z-index: 1;
}

.ib8-overlay {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background-color: #000;
	z-index: 2;
}

.ib8-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	justify-content: space-between;
}

/* Header */
.ib8-header {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 20px;
}
.ib8-title-1 { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; }
.ib8-title-2 { padding: 4px 15px; font-size: 2.5rem; font-weight: 800; transform: skewX(-8deg); text-transform: uppercase; }

/* Body Layout */
.ib8-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	flex-grow: 1;
	width: 100%;
	margin: 20px 0;
	gap: 30px;
}
.ib8-col-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1;
	min-width: 250px;
}
.ib8-navika-box {
	font-weight: bold; font-size: 1.2rem; line-height: 1.2; text-transform: uppercase;
	border-left: 4px solid; padding: 10px 15px;
}

/* Krug Sredina */
.ib8-col-right {
	display: flex;
	justify-content: center;
	flex: 1;
	min-width: 300px;
}
.ib8-circle-area {
	position: relative;
	box-sizing: border-box;
}

/* Z-INDEX POPRAVKA: Strelice ispod ikonica */
.ib8-arrows-spin {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	animation: spinArrows 8s linear infinite;
	z-index: 1; 
}
@keyframes spinArrows {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.ib8-center-text {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.2;
	z-index: 2;
}

/* Z-INDEX POPRAVKA: Ikonice iznad strelica */
.ib8-icon {
	position: absolute;
	border: 2px solid;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	animation: blinkCircle8 6s infinite;
	z-index: 10; 
	/* Transform translate osigurava da se pozicija odnosi na centar ikonice */
	transform: translate(-50%, -50%); 
}

/* Fiksiranje veličine SVG unutar kruga preko varijable iz Elementora */
.ib8-icon img, .ib8-icon svg {
	width: var(--icon-inner-size, 60%);
	height: var(--icon-inner-size, 60%);
	object-fit: contain; 
}

/* Animacija boja okvira - kontrolisana iz Elementora */
@keyframes blinkCircle8 {
	0%, 20% { opacity: 1; border-color: var(--icon-border-active); box-shadow: 0 0 15px var(--icon-border-active); }
	33%, 100% { opacity: 0.6; border-color: var(--icon-border-idle); box-shadow: none; }
}
.ib8-icon-1 { animation-delay: 0s; }
.ib8-icon-2 { animation-delay: 2s; }
.ib8-icon-3 { animation-delay: 4s; }

/* Footer: Rezultat Levo, Dugme Desno */
.ib8-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border-top: 1px solid rgba(255,255,255,0.2);
	padding-top: 20px;
	margin-top: 20px;
	flex-wrap: wrap;
	gap: 20px;
}

.ib8-rezultat-tekst {
	display: flex;
	align-items: center;
	font-weight: bold;
	padding: 10px 20px;
	text-transform: uppercase;
}

.ib8-kvadrat {
	width: 12px; height: 12px;
	margin-right: 10px;
	display: inline-block;
}

.ib8-btn {
	padding: 15px 30px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
	transition: transform 0.2s ease;
}
.ib8-btn:hover {
	transform: scale(1.05);
}

@media (max-width: 768px) {
	.ib8-footer { justify-content: center; text-align: center; }
	.ib8-header { flex-direction: column; }
}