/* Popup dla płatności OneClick (BLIK/Karta/Apple Pay/Google Pay) nad
   klasycznym checkoutem. Tokeny kolorów/fontów z shared-foundation.css,
   z bezpiecznymi wartościami zapasowymi na wypadek, gdyby ten plik
   kiedyś ładował się niezależnie od reszty stylów checkoutu. */

.indizio-msc-payment-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(26, 26, 26, .6);
}

.indizio-msc-payment-popup-modal {
	position: relative;
	width: 100%;
	max-width: 480px;
	height: min(640px, 90vh);
	background: var(--indizio-color-surface, #fff);
	border-radius: var(--indizio-radius-card, 10px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
	overflow: hidden;
}

/* Każda deklaracja rozmiaru ma !important. Motyw stylizuje wszystkie
   <button> własną regułą z paddingiem 17,6 x 37,4 px i wygrywał z naszymi
   deklaracjami bez !important - zmierzone na produkcji: przycisk miał
   realnie 75 x 36 px zamiast koła 36 x 36 px, czyli zgłoszony przez klienta
   "owal". Po wymuszeniu ten sam pomiar daje 36 x 36 px. */
.indizio-msc-payment-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--indizio-color-border, #e2e2e2) !important;
	border-radius: 50% !important;
	background: var(--indizio-color-surface, #fff) !important;
	color: var(--indizio-color-text, #222) !important;
	font-family: var(--indizio-font, "Inter", sans-serif) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: pointer;
	box-shadow: none !important;
}

.indizio-msc-payment-popup-close:hover {
	border-color: var(--indizio-color-primary, #1a1a1a) !important;
	background: var(--indizio-color-surface-soft, #fafafa) !important;
}

.indizio-msc-payment-popup-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Blokujemy przewijanie strony pod spodem, gdy popup jest otwarty —
   inaczej na telefonie klient mógłby przypadkiem przewinąć checkout pod
   nakładką. */
body.indizio-msc-payment-popup-open {
	overflow: hidden;
}

/* Telefon: pełnoekranowy arkusz zamiast okna. Na małym ekranie okno
   modalne z marginesami zostawiłoby wąski, przewijalny formularz płatności
   nad drugim przewijalnym tłem - pełny ekran jest tu bezpieczniejszy i
   zgodny z tym, jak zachowują się natywne ekrany płatności. */
@media (max-width: 780px) {
	.indizio-msc-payment-popup-overlay {
		padding: 0;
	}

	.indizio-msc-payment-popup-modal {
		max-width: 100%;
		/* 100vh na telefonie liczy się razem z chowanym paskiem adresu, przez
		   co dolna część formularza potrafi zostać poza ekranem. dvh nadpisuje
		   tę wartość w przeglądarkach, które je znają. */
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
	}

	.indizio-msc-payment-popup-iframe {
		/* Wcięcie na pasek gestów/„brodę” iPhone'a - bez niego przycisk
		   płatności potrafi się schować pod systemowym paskiem. */
		height: calc(100% - env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		box-sizing: border-box;
	}

	.indizio-msc-payment-popup-close {
		top: max(12px, env(safe-area-inset-top, 0px));
		right: 12px;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		font-size: 22px !important;
	}
}