/* Container query prati stvarnu širinu forme, ne samo ceo ekran. */
@container sh-nlv-selector (max-width: 600px) {
	.sh-nlv-card-label {
		grid-template-columns: 32px minmax(0, 1fr) auto;
		padding-inline: clamp(20px, 5vw, 30px);
	}

	.sh-nlv-badge {
		grid-column: 2;
		justify-self: start;
		min-width: 0;
		max-width: 100%;
		min-height: 34px;
		padding: 7px 18px;
	}

	.sh-nlv-price-box {
		grid-column: 3;
		grid-row: 1 / span 2;
	}
}

@container sh-nlv-selector (max-width: 440px) {
	.sh-nlv-options {
		padding: 16px;
		border-radius: min(var(--sh-nlv-outer-radius), 24px);
	}

	.sh-nlv-card,
	.sh-nlv-card-label {
		border-radius: min(var(--sh-nlv-card-radius), 22px);
	}

	.sh-nlv-card-label {
		grid-template-columns: 30px minmax(0, 1fr);
		min-height: 0;
		padding: 20px;
		gap: 12px 14px;
	}

	.sh-nlv-radio {
		width: 28px;
		height: 28px;
	}

	.sh-nlv-title {
		font-size: 15px;
	}

	.sh-nlv-description {
		font-size: 13px;
	}

	.sh-nlv-badge,
	.sh-nlv-price-box {
		grid-column: 2;
		grid-row: auto;
		justify-self: start;
		text-align: left;
	}

	.sh-nlv-price-box {
		min-width: 0;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.sh-nlv-current-price {
		font-size: 19px;
	}

	.sh-nlv-daily-price,
	.sh-nlv-regular-price {
		font-size: 14px;
	}
}

/* Fallback za starije pregledače bez container queries podrške. */
@supports not (container-type: inline-size) {
	@media (max-width: 767px) {
		.sh-nlv-card-label {
			grid-template-columns: 32px minmax(0, 1fr) auto;
			padding-inline: clamp(20px, 5vw, 30px);
		}

		.sh-nlv-badge {
			grid-column: 2;
			justify-self: start;
			min-width: 0;
			max-width: 100%;
			min-height: 34px;
			padding: 7px 18px;
		}

		.sh-nlv-price-box {
			grid-column: 3;
			grid-row: 1 / span 2;
		}
	}

	@media (max-width: 480px) {
		.sh-nlv-options {
			padding: 16px;
			border-radius: min(var(--sh-nlv-outer-radius), 24px);
		}

		.sh-nlv-card,
		.sh-nlv-card-label {
			border-radius: min(var(--sh-nlv-card-radius), 22px);
		}

		.sh-nlv-card-label {
			grid-template-columns: 30px minmax(0, 1fr);
			min-height: 0;
			padding: 20px;
			gap: 12px 14px;
		}

		.sh-nlv-badge,
		.sh-nlv-price-box {
			grid-column: 2;
			grid-row: auto;
			justify-self: start;
			text-align: left;
		}

		.sh-nlv-price-box {
			min-width: 0;
			max-width: 100%;
			white-space: normal;
			overflow-wrap: anywhere;
		}
	}
}