/**
 * Frizerland PJ Lager Check — checkout oznake i napomene.
 * Sve vrijednosti izvedene su iz tokena definiranih ovdje.
 * Boje se prepisuju inline stilom iz postavki plugina.
 */

:root {
	/* --- tokeni --- */
	--fpl-text: 0.875rem;
	--fpl-space: 0.5rem;
	--fpl-radius: 0.375rem;
	--fpl-line: 1.45;

	--fpl-in: #15803d;
	--fpl-out: #b45309;
	--fpl-gone: #b42318;
}

/* ------------------------------------------------------------------ */
/* Oznaka ispod artikla                                                */
/* ------------------------------------------------------------------ */

.fpl-badge {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--fpl-space) * 0.75);
	margin-top: calc(var(--fpl-space) * 0.75);
	padding: calc(var(--fpl-space) * 0.5) calc(var(--fpl-space) * 0.875);
	border: 1px solid currentColor;
	border-radius: var(--fpl-radius);
	font-size: calc(var(--fpl-text) * 0.9);
	line-height: var(--fpl-line);
	font-weight: 600;
	text-align: left;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.fpl-badge__dot {
	flex: 0 0 auto;
	width: calc(var(--fpl-text) * 0.5);
	height: calc(var(--fpl-text) * 0.5);
	margin-top: calc(var(--fpl-text) * 0.35);
	border-radius: 50%;
	background: currentColor;
}

.fpl-badge--in {
	color: var(--fpl-in);
}

.fpl-badge--out,
.fpl-badge--gone {
	color: var(--fpl-gone);
}

.fpl-badge--gone {
	font-style: italic;
}

/* Fallback za preglednike bez color-mix() */
@supports not (background: color-mix(in srgb, red 8%, transparent)) {

	.fpl-badge--in {
		background: #eefbf3;
	}

	.fpl-badge--out,
	.fpl-badge--gone {
		background: #fef3f2;
	}
}

/* ------------------------------------------------------------------ */
/* Skupna napomena ispod popisa artikala                               */
/* ------------------------------------------------------------------ */

.woocommerce-checkout-review-order tr.fpl-summary > td,
tr.fpl-summary > td {
	padding: calc(var(--fpl-space) * 1.25) 0 calc(var(--fpl-space) * 0.5);
	border: 0;
}

.fpl-note {
	padding: calc(var(--fpl-space) * 1.25) calc(var(--fpl-space) * 1.5);
	border: 1px solid currentColor;
	border-left-width: calc(var(--fpl-space) * 0.5);
	border-radius: var(--fpl-radius);
	font-size: calc(var(--fpl-text) * 0.95);
	line-height: calc(var(--fpl-line) * 1.05);
	font-weight: 400;
	text-align: left;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.fpl-note + .fpl-note {
	margin-top: calc(var(--fpl-space) * 0.75);
}

.fpl-note strong {
	font-weight: 700;
}

.fpl-note--in {
	color: var(--fpl-in);
}

.fpl-note--out {
	color: var(--fpl-out);
}

.fpl-note--gone {
	color: var(--fpl-gone);
}

@supports not (background: color-mix(in srgb, red 8%, transparent)) {

	.fpl-note--in {
		background: #eefbf3;
	}

	.fpl-note--out {
		background: #fff8ec;
	}

	.fpl-note--gone {
		background: #fef3f2;
	}
}

/* ------------------------------------------------------------------ */
/* Načini dostave punom širinom                                        */
/*                                                                     */
/* Tema ih gura u uski desni stupac pa se dugi nazivi poslovnica lome  */
/* i radio gumb završi odvojen od teksta. Redak razlamamo u dva bloka  */
/* preko cijele širine, s radiom ispred naziva.                        */
/* ------------------------------------------------------------------ */

.woocommerce-cart tr.woocommerce-shipping-totals > th,
.woocommerce-cart tr.woocommerce-shipping-totals > td,
.woocommerce-checkout tr.woocommerce-shipping-totals > th,
.woocommerce-checkout tr.woocommerce-shipping-totals > td {
	display: block;
	width: 100%;
	text-align: left;
}

.woocommerce-cart tr.woocommerce-shipping-totals > th,
.woocommerce-checkout tr.woocommerce-shipping-totals > th {
	padding-bottom: calc(var(--fpl-space) * 0.5);
}

ul#shipping_method {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

ul#shipping_method > li {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--fpl-space) * 1.25);
	width: 100%;
	margin: 0;
	padding: calc(var(--fpl-space) * 0.75) 0;
	text-align: left;
	line-height: var(--fpl-line);
}

ul#shipping_method > li + li {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

ul#shipping_method > li > input[type="radio"] {
	flex: 0 0 auto;
	margin: calc(var(--fpl-text) * 0.2) 0 0;
}

ul#shipping_method > li > label {
	flex: 1 1 auto;
	display: block;
	width: auto;
	margin: 0;
	text-align: left;
}

/* Iznos dostave desno, naziv lijevo. */
ul#shipping_method > li > label .amount,
ul#shipping_method > li > label .woocommerce-Price-amount {
	float: right;
	margin-left: calc(var(--fpl-space) * 1.25);
}

/* Opis metode i naša napomena idu ispod, poravnati s nazivom. */
.woocommerce-shipping-totals .fpl-rate-note,
ul#shipping_method > li > .description {
	display: block;
	width: 100%;
	text-align: left;
}

/* ------------------------------------------------------------------ */
/* Napomena ispod načina dostave                                       */
/* ------------------------------------------------------------------ */

.fpl-rate-note {
	display: block;
	margin-top: calc(var(--fpl-space) * 0.5);
	padding-left: calc(var(--fpl-space) * 1.25);
	border-left: calc(var(--fpl-space) * 0.375) solid var(--fpl-out);
	color: var(--fpl-out);
	font-size: calc(var(--fpl-text) * 0.85);
	line-height: var(--fpl-line);
	font-weight: 500;
	text-align: left;
	white-space: normal;
}

/* ------------------------------------------------------------------ */
/* Košarica                                                            */
/* ------------------------------------------------------------------ */

.fpl-slot:empty {
	display: none;
}

.fpl-slot--loading {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.fpl-cart-notice:empty {
	display: none;
}

.fpl-cart-notice {
	margin-top: calc(var(--fpl-space) * 2);
}

.woocommerce-cart .fpl-badge {
	display: inline-flex;
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {

	.fpl-badge {
		font-size: calc(var(--fpl-text) * 0.85);
		padding: calc(var(--fpl-space) * 0.5) calc(var(--fpl-space) * 0.75);
	}

	.fpl-note {
		padding: var(--fpl-space) calc(var(--fpl-space) * 1.125);
		font-size: calc(var(--fpl-text) * 0.9);
	}
}