/* JDEV Modal zapisu, styl Bienkowscy Clinic (Montserrat + Lato, ostre rogi, czern) */
.jdev-mz[hidden] { display: none; }
.jdev-mz {
	--mz-ink: #1a1a1a;
	--mz-muted: #666;
	--mz-line: #d9d9d9;
	--mz-soft: #f4f3f1;
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	font-family: lato, "Lato", sans-serif;
	color: var(--mz-ink);
}
.jdev-mz__overlay { position: absolute; inset: 0; background: rgba(10, 10, 10, .7); }
.jdev-mz__box {
	position: relative;
	display: grid; grid-template-columns: 1fr 450px; grid-template-rows: minmax(0, 1fr);
	width: 100%; max-width: 980px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
	background: #fff; overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	opacity: 0; transform: scale(.97);
	transition: opacity .3s ease, transform .3s ease;
}
.jdev-mz.is-open .jdev-mz__box { opacity: 1; transform: none; }

/* photo column (right) */
.jdev-mz__media { position: relative; background: #e9e7e3; }
.jdev-mz__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jdev-mz__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, 0) 45%);
}
.jdev-mz__brand {
	position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1;
	display: flex; align-items: center; gap: 14px;
	color: #fff; font-family: Montserrat, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.jdev-mz__brand img { width: 56px; height: auto; flex: none; }
.jdev-mz__brand span { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .5); line-height: 1.5; }

/* content column (left) */
.jdev-mz__body {
	padding: 40px 40px 28px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box;
}
.jdev-mz__close {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 40px; height: 40px; display: grid; place-items: center;
	border: 0; background: #fff; color: var(--mz-ink); cursor: pointer;
}
.jdev-mz__eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
	font-family: Montserrat, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--mz-muted);
}
.jdev-mz__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--mz-ink); }
.jdev-mz__title {
	margin: 0 0 20px; font-family: Montserrat, sans-serif; font-size: 20px; line-height: 1.35;
	font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mz-ink);
}
.jdev-mz__perks { margin: 0 0 24px; padding: 0; list-style: none; }
.jdev-mz__perks li { position: relative; margin: 0 0 8px; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.jdev-mz__perks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 1px; background: var(--mz-ink); }

.jdev-mz__channels { margin: 0 0 14px; padding: 18px; border: 0; background: var(--mz-soft); }
.jdev-mz__channels legend {
	float: left; width: 100%; margin: 0 0 12px; padding: 0;
	font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.jdev-mz__pills { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jdev-mz__pill { position: relative; cursor: pointer; }
.jdev-mz__pill input { position: absolute; opacity: 0; pointer-events: none; }
.jdev-mz__pill span {
	display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px;
	border: 1px solid var(--mz-ink); background: #fff;
	font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
	transition: background .15s, color .15s;
}
.jdev-mz__pill input:checked + span { background: var(--mz-ink); color: #fff; }
.jdev-mz__pill input:checked + span::before { content: "\2713"; font-size: 12px; }
.jdev-mz__pill input:focus-visible + span { outline: 2px solid var(--mz-ink); outline-offset: 2px; }
.jdev-mz__note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--mz-muted); }

.jdev-mz__fields { display: grid; gap: 10px; margin: 0 0 14px; }
.jdev-mz__fields:not(:has(input:not([hidden]))) { display: none; }
.jdev-mz__fields input[hidden] { display: none; }
.jdev-mz__fields input {
	width: 100%; height: 46px; padding: 0 2px; box-sizing: border-box;
	border: 0; border-bottom: 1px solid var(--mz-ink); border-radius: 0; background: transparent;
	font: inherit; font-size: 16px; color: var(--mz-ink); /* 16px: no iOS zoom on focus */
}
.jdev-mz__fields input:focus { outline: none; border-bottom-width: 2px; }

.jdev-mz__rodo { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 11.5px; line-height: 1.55; color: var(--mz-muted); cursor: pointer; }
.jdev-mz__rodo input {
	appearance: none; -webkit-appearance: none; flex: none;
	width: 16px; height: 16px; margin: 1px 0 0; border: 1px solid var(--mz-ink); border-radius: 0; background: #fff; cursor: pointer;
}
.jdev-mz__rodo input:checked {
	background: var(--mz-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.jdev-mz__rodo a { color: var(--mz-ink); text-decoration: underline; }
.jdev-mz__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jdev-mz__msg { margin: 0 0 10px; font-size: 12.5px; color: #b42318; }
.jdev-mz__msg:empty { display: none; }
.jdev-mz__btn {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	width: 100%; height: 50px; padding: 0 22px; border: 0; border-radius: 0;
	background: var(--mz-ink); color: #fff; cursor: pointer;
	font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
	transition: gap .2s, background .2s;
}
.jdev-mz__btn:hover { background: #000; gap: 20px; }
.jdev-mz__btn[disabled] { opacity: .6; cursor: wait; }
.jdev-mz__thanks { margin: 0 0 16px; padding: 16px 18px; border-left: 2px solid var(--mz-ink); background: var(--mz-soft); font-size: 15px; line-height: 1.5; }
.jdev-mz__more { display: block; margin: 16px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; color: var(--mz-muted); text-decoration: underline; cursor: pointer; }
/* consent details scroll inside their own box, the modal keeps its height */
.jdev-mz__more-text {
	margin: 8px 0 0; padding-right: 6px; max-height: 7.75em; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	font-size: 11px; line-height: 1.55; color: var(--mz-muted);
}
html.jdev-mz-lock { overflow: hidden; }

/* Phones: flex column so the text part scrolls inside the visible viewport
   (dvh = height without the Chrome/Android toolbars, vh is taller there). */
@media (max-width: 760px) {
	.jdev-mz { align-items: flex-end; padding: 0; }
	.jdev-mz__box { display: flex; flex-direction: column; max-height: 94vh; max-height: 94dvh; }
	/* 16:9 like the photo itself, so the doctors are not cropped flat */
	.jdev-mz__media { order: -1; flex: none; height: auto; aspect-ratio: 16 / 9; max-height: 32dvh; }
	.jdev-mz__media > img { object-position: 60% 30% !important; }
	.jdev-mz__brand { left: 16px; bottom: 14px; }
	.jdev-mz__brand img { display: none; } /* photo already carries the logo */
	.jdev-mz__brand span { padding-left: 0; border-left: 0; }
	.jdev-mz__body { flex: 1 1 auto; min-height: 0; max-height: none; padding: 22px 16px 20px; }
	.jdev-mz__close { top: 8px; right: 8px; }
	.jdev-mz__title { font-size: 16px; letter-spacing: 1.5px; margin-bottom: 14px; }
	.jdev-mz__perks { margin-bottom: 18px; }
	.jdev-mz__perks li { font-size: 13px; margin-bottom: 6px; }
	.jdev-mz__channels { padding: 14px; }
	.jdev-mz__pill span { padding: 0 4px; font-size: 10.5px; letter-spacing: .5px; }
}
/* Short phones (small Androids, landscape): less photo, more form. */
@media (max-width: 760px) and (max-height: 720px) {
	.jdev-mz__media { max-height: 150px; }
	.jdev-mz__body { padding-top: 18px; }
	.jdev-mz__eyebrow { margin-bottom: 10px; }
}
@media (max-width: 760px) and (max-height: 560px) {
	.jdev-mz__media { display: none; }
	.jdev-mz__close { box-shadow: 0 0 0 1px var(--mz-line); }
}