/**
 * Kasa — przycisk „Pobierz dane firmy” i komunikat pod polem NIP.
 *
 * Wszystko w `:where()`, czyli z zerową wagą: motyw sklepu nadpisze każdą z tych reguł jedną własną klasą
 * i nie musi walczyć z `!important`. Kolory biorą się z otoczenia (`currentColor`), więc przycisk wygląda
 * tak samo w kasie na jasnym i na ciemnym tle.
 */

:where(.twf-nip-tools) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	/* Dodatni odstęp od pola: pod polem kasy blokowej jest jeszcze miejsce na komunikat walidacji. */
	margin: 12px 0 20px;
}

:where(.twf-nip-btn) {
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 100px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.88em;
	font-weight: 600;
	padding: 10px 18px;
	cursor: pointer;
	transition: border-color 0.3s, opacity 0.3s;
}

:where(.twf-nip-btn:hover:not(:disabled)) {
	border-color: currentColor;
}

:where(.twf-nip-btn:disabled) {
	opacity: 0.5;
	cursor: wait;
}

:where(.twf-nip-msg) {
	font-size: 0.86em;
	line-height: 1.5;
	opacity: 0.8;
}

/* Pusty komunikat nie może zabierać wiersza — inaczej przycisk „skacze” po każdej odpowiedzi. */
:where(.twf-nip-msg:empty) {
	display: none;
}

:where(.twf-nip-msg.is-ok) {
	opacity: 1;
}

:where(.twf-nip-msg.is-error) {
	color: #c0341f;
	opacity: 1;
}

/* Safari na iOS powiększa stronę przy wejściu w pole z czcionką poniżej 16 px i nie wraca do skali. */
@media (max-width: 860px) {
	:where(.twf-nip-tools) {
		align-items: stretch;
	}

	:where(.twf-nip-btn) {
		width: 100%;
		padding: 14px 18px;
	}

	:where(.twf-nip-row input, .twf-company-row input) {
		font-size: max(16px, 1em);
	}
}