/* Panikulka — Popup rezerwacji
   Spokojna, dostępna paleta. Zmienne łatwe do dostrojenia pod stronę. */

.pbm-root {
	--pbm-accent: #5b8a8c;        /* stonowany morski/szałwiowy */
	--pbm-accent-dark: #3f6a6c;
	--pbm-text: #2b2b2b;
	--pbm-muted: #6b7280;
	--pbm-bg: #ffffff;
	--pbm-card-bg: #f6f8f8;
	--pbm-card-border: #e3e9e9;
	--pbm-radius: 14px;
	--pbm-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);

	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.pbm-root[hidden] { display: none; }

.pbm-root * { box-sizing: border-box; }

.pbm-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 28, 30, 0.55);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.pbm-dialog {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--pbm-bg);
	color: var(--pbm-text);
	border-radius: var(--pbm-radius);
	box-shadow: var(--pbm-shadow);
	padding: 32px 28px 22px;
	transform: translateY(12px) scale(0.98);
	opacity: 0;
	transition: transform 0.22s ease, opacity 0.22s ease;
	font-family: inherit;
	line-height: 1.5;
}

/* Stan otwarty (dodawany przez JS) */
.pbm-root.is-open .pbm-overlay { opacity: 1; }
.pbm-root.is-open .pbm-dialog { transform: translateY(0) scale(1); opacity: 1; }

.pbm-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--pbm-muted);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.pbm-close:hover { background: var(--pbm-card-bg); color: var(--pbm-text); }

.pbm-title {
	margin: 0 0 4px;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--pbm-text);
}
.pbm-subtitle {
	margin: 0 0 22px;
	color: var(--pbm-muted);
	font-size: 1rem;
}

/* Karty wyboru */
.pbm-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.pbm-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 22px 16px;
	background: var(--pbm-card-bg);
	border: 1px solid var(--pbm-card-border);
	border-radius: var(--pbm-radius);
	text-decoration: none;
	color: var(--pbm-text);
	cursor: pointer;
	font: inherit;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pbm-card:hover {
	border-color: var(--pbm-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
.pbm-card__icon { font-size: 1.9rem; line-height: 1; margin-bottom: 6px; }
.pbm-card__title { font-weight: 700; font-size: 1.05rem; }
.pbm-card__value { color: var(--pbm-accent-dark); font-weight: 600; }
.pbm-card__note { color: var(--pbm-muted); font-size: 0.82rem; }

.pbm-reassure {
	margin: 18px 0 4px;
	text-align: center;
	color: var(--pbm-muted);
	font-size: 0.88rem;
}

/* Krok online */
.pbm-back {
	border: 0;
	background: transparent;
	color: var(--pbm-accent-dark);
	cursor: pointer;
	font: inherit;
	padding: 4px 0;
	margin-bottom: 8px;
}
.pbm-back:hover { text-decoration: underline; }

.pbm-typeselect__label { margin: 0 0 10px; font-weight: 600; }
.pbm-typeselect__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pbm-type {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px;
	background: var(--pbm-card-bg);
	border: 1px solid var(--pbm-card-border);
	border-radius: 10px;
	cursor: pointer;
	font: inherit;
	text-align: left;
}
.pbm-type[aria-pressed="true"] { border-color: var(--pbm-accent); background: #eef4f4; }
.pbm-type:hover { border-color: var(--pbm-accent); }
.pbm-type span { color: var(--pbm-muted); font-size: 0.82rem; }

.pbm-embed { margin-top: 16px; }
.pbm-embed iframe { width: 100%; min-height: 560px; border: 0; border-radius: 10px; }

.pbm-embed__placeholder {
	padding: 22px;
	border: 1px dashed var(--pbm-card-border);
	border-radius: 10px;
	color: var(--pbm-muted);
	text-align: center;
	font-size: 0.9rem;
}
.pbm-embed__loading { padding: 22px; text-align: center; color: var(--pbm-muted); }

.pbm-privacy { margin: 18px 0 0; text-align: center; font-size: 0.8rem; }
.pbm-privacy a { color: var(--pbm-muted); }

/* Mobile */
@media (max-width: 480px) {
	.pbm-options,
	.pbm-typeselect__buttons { grid-template-columns: 1fr; }
	.pbm-dialog { padding: 28px 18px 18px; }
	.pbm-title { font-size: 1.35rem; }
}

/* Szanuj preferencję ograniczonego ruchu */
@media (prefers-reduced-motion: reduce) {
	.pbm-overlay,
	.pbm-dialog { transition: none; }
}