/* Footer - po Figma "Footer" komponenti (variant=shop) */

.civava-footer {
	background: var(--c-ink);
	color: var(--c-cream-100);
	padding: 64px var(--container-padding) 32px;
}

.civava-footer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding-bottom: 32px;
}

.civava-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.civava-footer__brand img {
	width: 62px;
	height: auto;
}

.civava-footer__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.70);
}

.civava-footer__item svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--c-gold);
}

.civava-footer__item a:hover {
	color: var(--c-gold);
}

.civava-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.50);
}

.civava-footer__legal {
	display: flex;
	gap: 24px;
}

.civava-footer__legal a:hover {
	color: var(--c-gold);
}

@media (max-width: 700px) {
	.civava-footer__row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ===========================================================================
   MOBILNI FOOTER (<= 600px) - Figma "Mobile kako poruciti" (node 270:7838),
   Footer instanca. Sve je centrirano, ikonica stoji IZNAD teksta, a redosled
   je logo -> telefon -> imejl -> [radno vreme + Facebook u istom redu].
   Redosled se dobija preko "order"-a, pa markup ostaje isti kao na desktopu.
   =========================================================================== */
@media (max-width: 600px) {
	.civava-footer {
		/* Bocni razmak (20px) daje .civava-container iznutra - ovde mora 0,
		   inace se udvaja i sadrzaj (pa i linija iznad dna) bude uzi od 335px
		   koliko trazi dizajn. */
		padding: 48px 0 24px;
		text-align: center;
	}

	.civava-footer__row {
		/* Wrap umesto kolone - tako radno vreme i Facebook mogu da podele
		   poslednji red, dok logo/telefon/imejl uzimaju pun red. */
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		gap: 40px;
		padding-bottom: 20px;
	}

	.civava-footer__brand,
	.civava-footer__item--phone,
	.civava-footer__item--email {
		flex: 0 0 100%;
	}

	.civava-footer__brand {
		order: 1;
		justify-content: center;
	}

	.civava-footer__item--phone {
		order: 2;
	}

	.civava-footer__item--email {
		order: 3;
	}

	.civava-footer__item--hours {
		order: 4;
	}

	.civava-footer__item--social {
		order: 5;
	}

	/* Ikonica iznad teksta (na desktopu stoji pored). */
	.civava-footer__item {
		flex-direction: column;
		align-items: center;
		gap: 4px;
		line-height: 20px;
	}

	.civava-footer__bottom {
		flex-direction: column;
		align-items: center;
		gap: 4px;
		font-size: 11px;
		line-height: 16px;
	}

	/* Na najuzim ekranima (320px) cirilicni linkovi ne stanu jedan pored
	   drugog - bez wrap-a bi se prelomili usred fraze, ovako svaki ide u
	   svoj red. */
	.civava-footer__legal {
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 16px;
	}
}

/* Autorstvo pored copyright-a, razdvojeno uspravnom crtom. Drzi se kao JEDNA
   flex stavka da "justify-content: space-between" i dalje gura pravne linkove
   skroz desno. */
.civava-footer__credit {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.civava-footer__sep {
	opacity: 0.5;
}

.civava-footer__credit a:hover,
.civava-footer__credit a:focus-visible {
	color: var(--c-gold);
}