/* ----------------------------------------------------------------------
   Popup — „Załóż darmowe konto"

   Projekt: „Oliwa z Hiszpanii — popup nowe konto". W systemie projektowym
   to komponent `Dialog` (feedback/Dialog.jsx): scrim z rozmyciem, karta
   460 px, nagłówek z eyebrow i krzyżykiem, treść i para przycisków.

   Nośnikiem jest natywny <dialog> otwierany przez showModal(). Przeglądarka
   daje wtedy za darmo cztery rzeczy, które w wersji na <div> trzeba pisać
   ręcznie: pułapkę fokusa, zamykanie klawiszem Esc, warstwę nad całą stroną
   (top layer — żaden z-index strony jej nie przykryje) i pseudoelement
   ::backdrop na scrim. Stąd brak osobnego elementu tła: sam <dialog> to
   karta z projektu, a ::backdrop to jego przyciemnienie.
   ---------------------------------------------------------------------- */

.oliwa-popup {
	background: var(--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-raised);
	color: var(--text-body);
	margin: auto;
	max-width: min(460px, calc(100vw - 2 * var(--space-6)));
	overflow: hidden;
	padding: 0;
	width: 100%;
}

/* Okno dostaje fokus programowo (patrz inc/popup-account.php), żeby czytnik
   ekranu zaczął od tytułu. Obwódka wokół całej karty byłaby wtedy myląca:
   sugerowałaby element do kliknięcia. Kontrolki w środku swoje pierścienie
   fokusa zachowują. */
.oliwa-popup:focus,
.oliwa-popup:focus-visible {
	outline: none;
}

.oliwa-popup::backdrop {
	-webkit-backdrop-filter: var(--blur-veil);
	backdrop-filter: var(--blur-veil);
	background: var(--scrim);
}

/* Wejście karty. `allow-discrete` jest tu konieczne: <dialog> przełącza
   `display` z none na block, a bez tej wartości przeglądarka pomija
   przejście na właściwościach zmienianych w tym samym kroku. */
@media (prefers-reduced-motion: no-preference) {

	.oliwa-popup,
	.oliwa-popup::backdrop {
		transition:
			display var(--duration-base) allow-discrete,
			opacity var(--duration-base) var(--easing-entrance),
			overlay var(--duration-base) allow-discrete,
			transform var(--duration-base) var(--easing-entrance);
	}

	.oliwa-popup:not([open]),
	.oliwa-popup:not([open])::backdrop {
		opacity: 0;
	}

	.oliwa-popup:not([open]) {
		transform: translateY(var(--space-3));
	}

	@starting-style {

		.oliwa-popup[open],
		.oliwa-popup[open]::backdrop {
			opacity: 0;
		}

		.oliwa-popup[open] {
			transform: translateY(var(--space-3));
		}
	}
}

/* Nagłówek: kolumna eyebrow + tytuł po lewej, krzyżyk dosunięty do prawej.
   `align-items: flex-start` trzyma krzyżyk przy pierwszej linii tytułu,
   a nie w pionowym środku dwuwierszowego nagłówka. */
.oliwa-popup__head {
	align-items: flex-start;
	display: flex;
	gap: var(--space-4);
	justify-content: space-between;
	padding: var(--space-6) var(--space-6) 0;
}

.oliwa-popup__heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.oliwa-popup__eyebrow {
	color: var(--text-accent);
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
}

.oliwa-popup__title {
	color: var(--text-heading);
	font: var(--type-h3);
	margin: 0;
}

/* Krzyżyk to IconButton w wariancie `quiet`, rozmiar sm (32 px w systemie
   projektowym — u nas najbliższy stopień skali to --control-h-sm). */
.oliwa-popup__close {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	color: var(--text-heading);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: var(--control-h-sm);
	justify-content: center;
	padding: 0;
	transition: background-color var(--duration-base) var(--easing-standard);
	width: var(--control-h-sm);
}

.oliwa-popup__close:hover {
	background: var(--surface-warm);
}

.oliwa-popup__close:focus-visible {
	box-shadow: var(--focus-ring-shadow);
	outline: 1px solid var(--accent);
}

/* Glif rysujemy tak samo jak `.oliwa-ico--*` w account.css — maska w kolorze
   `currentColor`. Klasy stamtąd nie używamy celowo: popup ma działać także
   wtedy, gdy account.css nie wejdzie do kolejki. */
.oliwa-popup__close::before {
	background-color: currentColor;
	content: "";
	display: block;
	height: var(--icon-sm);
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	width: var(--icon-sm);
}

.oliwa-popup__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-5) var(--space-6) var(--space-6);
}

.oliwa-popup__lead {
	font: var(--type-body);
	margin: 0;
}

.oliwa-popup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}