/**
 * Kutija „Достава" na strani proizvoda.
 *
 * Okvir, naslov, ikonica i strelica dolaze iz teme — kutija koristi istu
 * `.civava-accordion` komponentu kao „Ово буре укључује" i „Додатна опрема".
 *
 * Redovi sa izborom namerno PRESLIKAVAJU izgled redova dodatne opreme
 * (`.ppom-wrapper .form-check-label` iz mu-plugina): isti razmak, isti
 * prečnik zaobljenja, ista boja isticanja kad je red izabran, isti font.
 * Vrednosti su prepisane odatle, ne procenjene — dve kutije jedna ispod
 * druge odmah odaju i razliku od dva piksela.
 */

/* Boje su iste kao kod dodatne opreme; izdvojene su u promenljive da se na
   jednom mestu menjaju ako se taj stil ikad pomeri. */
.civava-izbor-dostave {
	--civava-izbor-naglasak: #8e5501;
	--civava-izbor-izabrano: #fdf6ec;
	--civava-izbor-prelaz: #fdfaf5;
	--civava-izbor-tekst: #7a6e63;
}

.civava-izbor-dostave .civava-accordion__panel {
	padding-top: 0;
}

/* Varijabilan proizvod.

   Kod obicnih proizvoda kutija stoji direktno u <form class="cart"> i slaze se
   sama. Kod varijabilnih WooCommerce kolicinu i dugme pakuje u zajednicki flex
   kontejner (.woocommerce-variation-add-to-cart), a kuka na koju se kacimo je
   UNUTAR njega — pa kutija postane jos jedna flex stavka i stane pored
   kolicine umesto iznad nje.

   Zauzima ceo red, cime kolicina i dugme ostaju zajedno u redu ispod. */
.woocommerce-variation-add-to-cart .civava-izbor-dostave {
	flex: 0 0 100%;
	width: 100%;
	margin-bottom: 16px;
}

.civava-izbor-dostave__lista {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

/* Isti red kao kod dodatne opreme: razmak, zaobljenje i prelaz boje.
   Okvira nema — tema ga i kod dodatne opreme gasi, pa bi ovde štrčao. */
.civava-izbor-dostave__red {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.6em 0.8em;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.civava-izbor-dostave__red:hover {
	background: var( --civava-izbor-prelaz );
}

/* Isticanje izabranog reda — isto kao kad se štiklira dodatna oprema. */
.civava-izbor-dostave__red:has( input:checked ) {
	background: var( --civava-izbor-izabrano );
}

/* Pregledači bez `:has()` ostaju bez isticanja, ali izbor i dalje radi;
   skript zato dodaje i klasu, kao rezervu. */
.civava-izbor-dostave__red.is-izabrano {
	background: var( --civava-izbor-izabrano );
}

/* Kvadratić se crta preko pravog dugmeta (`appearance: none`), a ne umesto
   njega — tako ostaje pravo polje za tastaturu i čitače ekrana. Veličina i
   boja su iste kao kod dodatne opreme. */
.civava-izbor-dostave__polje {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	border: 1px solid #c9c2b8;
	border-radius: 2px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.civava-izbor-dostave__polje:checked {
	border-color: var( --civava-izbor-naglasak );
	background: var( --civava-izbor-naglasak );
}

.civava-izbor-dostave__polje:checked::after {
	content: '';
	position: absolute;
	left: 0.33em;
	top: 0.1em;
	width: 0.3em;
	height: 0.58em;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.civava-izbor-dostave__polje:focus-visible {
	outline: 2px solid var( --civava-izbor-naglasak );
	outline-offset: 2px;
}

/* Isti font kao `.ppom-label-checkbox`. */
.civava-izbor-dostave__ime {
	flex: 1 1 auto;
	min-width: 0;
	color: var( --civava-izbor-tekst );
	font-family: "Open Sans";
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/* Isti font kao `.ppom-option-label-price`. */
.civava-izbor-dostave__cena {
	flex: 0 0 auto;
	color: var( --civava-izbor-naglasak );
	font-family: "Open Sans";
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
}

/* Prikazuje se SAMO iznos izabrane opcije. Dva iznosa jedan ispod drugog
   izgledaju kao da se oba naplaćuju. */
.civava-izbor-dostave__red input:not( :checked ) ~ .civava-izbor-dostave__cena {
	display: none;
}

.civava-izbor-dostave__napomena {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var( --c-warm-gray, #9b9188 );
}

/* Na uskom ekranu iznos ide u nov red, da naziv ne bude stisnut. */
@media ( max-width: 480px ) {
	.civava-izbor-dostave__red {
		flex-wrap: wrap;
	}

	.civava-izbor-dostave__cena {
		flex-basis: 100%;
		padding-left: 1.75em;
	}
}