/**
 * Форма заявки лабораторії.
 *
 * Кольори беруться зі змінних дочірньої теми, але з фолбеками: форма
 * має лишатися придатною, навіть якщо тему колись замінять.
 */

/* Змінні оголошуються на всіх трьох коренях компонента: обгортка в тексті,
   вікно в підвалі документа і сама кнопка, яка може стояти будь-де —
   у підвалі сайту вона поза обгорткою, і без цього лишалася б без фону. */
.ps-labform,
.ps-labform-dialog,
.ps-labform-open {
	--lf-teal: var(--psc-teal, #1f8378);
	--lf-teal-dark: var(--psc-teal-dark, #17655c);
	--lf-ink-900: var(--psc-ink-900, #14201f);
	--lf-ink-700: var(--psc-ink-700, #3d4a49);
	--lf-ink-500: var(--psc-ink-500, #6b7877);
	--lf-ink-100: var(--psc-ink-100, #e3e8e7);
	--lf-tint: var(--psc-teal-tint, #f2f7f6);

	font-family: var(--psc-sans, "Montserrat", system-ui, sans-serif);
}

.ps-labform { margin: 26px 0 8px; }

/* Тема роздає border-box переліком селекторів, у який div та input не
   входять, тож поле з width:100% ставало на 27px ширшим за свою колонку
   і налізало на сусіднє. Задаємо модель самі — форма не має залежати
   від того, що саме скидає активна тема. */
.ps-labform,
.ps-labform *,
.ps-labform *::before,
.ps-labform *::after,
.ps-labform-dialog,
.ps-labform-dialog *,
.ps-labform-dialog *::before,
.ps-labform-dialog *::after { box-sizing: border-box; }

/* Форма стоїть на світлій підкладці сторінки і на такому ж світлому тлі
   розгорнутого розділу контактів — без власного контуру вона зливалася
   з ними в одну пляму. */
.ps-labform-form {
	background: var(--lf-tint);
	border: 1px solid rgba(31, 131, 120, 0.22);
	border-radius: 12px;
	padding: 26px;
}

.ps-labform-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ps-labform-field { display: grid; gap: 6px; }
.ps-labform-field--wide { grid-column: 1 / -1; }

.ps-labform-field > span {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lf-ink-700);
}
.ps-labform-field > span b { color: var(--lf-teal); font-weight: 600; }

.ps-labform-field input,
.ps-labform-field textarea {
	font: inherit;
	font-size: 14.5px;
	color: var(--lf-ink-900);
	background: #fff;
	border: 1px solid var(--lf-ink-100);
	padding: 11px 13px;
	width: 100%;
	border-radius: 8px;
	transition: border-color .15s, box-shadow .15s;
}
.ps-labform-field textarea { resize: vertical; min-height: 96px; }

.ps-labform-field input:focus,
.ps-labform-field textarea:focus {
	outline: none;
	border-color: var(--lf-teal);
	box-shadow: 0 0 0 3px rgba(31, 131, 120, 0.12);
}

/* Пастка для ботів: прибрана з потоку так, щоб її не показали ні браузер,
   ні скрінрідер, але автозаповнювач бота все одно бачив поле. */
.ps-labform-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ps-labform-foot {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 18px;
}

/* Клас у кнопках подвоєний навмисно: тема фарбує button:hover і
   button:focus у сірий, а це (0,1,1) — одного класу (0,1,0) не вистачає,
   і кнопка сіріла, щойно на неї потрапляв фокус. Спиратись на предка тут
   не можна: кнопки стоять і в тексті, і в підвалі, і всередині вікна. */
.ps-labform-submit.ps-labform-submit {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--lf-teal);
	border: none;
	border-radius: 8px;
	padding: 12px 24px;
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.ps-labform-submit.ps-labform-submit:hover,
.ps-labform-submit.ps-labform-submit:focus {
	color: #fff;
	background: var(--lf-teal-dark);
}
.ps-labform-submit.ps-labform-submit:hover { transform: translateY(-1px); }
.ps-labform-submit.ps-labform-submit:active { background: var(--lf-teal-dark); transform: none; }
.ps-labform-submit.ps-labform-submit:focus-visible {
	outline: 2px solid var(--lf-teal-dark);
	outline-offset: 2px;
}

.ps-labform-note {
	margin: 0;
	flex: 1 1 260px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--lf-ink-500);
}
.ps-labform-note a { color: var(--lf-teal-dark); }

.ps-labform-done,
.ps-labform-error {
	padding: 16px 18px;
	border-left: 3px solid var(--lf-teal);
	background: var(--lf-tint);
	font-size: 14.5px;
	color: var(--lf-ink-900);
	line-height: 1.55;
}
.ps-labform-done strong { display: block; margin-bottom: 2px; }
.ps-labform-error {
	border-left-color: #c2453b;
	background: #fdf3f2;
	margin-bottom: 18px;
}
.ps-labform-error a { color: var(--lf-teal-dark); }

/* ============ РЕЖИМ МОДАЛЬНОГО ВІКНА ============ */
/* Кнопка-тригер. Телефон і пошта лишаються поруч у тексті — якщо скрипт
   не виконається, канал зв'язку в лабораторії однаково є. */
.ps-labform--modal { margin: 18px 0 8px; }

.ps-labform-open.ps-labform-open {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--lf-teal);
	border: none;
	border-radius: 999px;
	padding: 12px 24px;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(31, 131, 120, 0.16);
	transition: background .15s, transform .15s, box-shadow .15s;
}
.ps-labform-open.ps-labform-open:hover,
.ps-labform-open.ps-labform-open:focus {
	color: #fff;
	background: var(--lf-teal-dark);
}
.ps-labform-open.ps-labform-open:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(31, 131, 120, 0.22);
}
.ps-labform-open.ps-labform-open:active { background: var(--lf-teal-dark); transform: none; }
.ps-labform-open.ps-labform-open:focus-visible {
	outline: 2px solid var(--lf-teal-dark);
	outline-offset: 2px;
}
.ps-labform-open-ico { width: 17px; height: 17px; flex-shrink: 0; }

.ps-labform-dialog {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: none;
	border-radius: 14px;
	background: #fff;
	color: var(--lf-ink-900);
	box-shadow: 0 24px 60px rgba(15, 26, 24, 0.28);
	overflow: auto;
	overscroll-behavior: contain;
}
.ps-labform-dialog::backdrop {
	background: rgba(15, 26, 24, 0.55);
	backdrop-filter: blur(2px);
}

.ps-labform-dialog-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--lf-ink-100);
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}
.ps-labform-dialog-title {
	margin: 0;
	flex: 1 1 auto;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--lf-ink-900);
}
/* Вікно відкривається з фокусом на цій кнопці, тому стан :focus тут
   критичний: без нього тема малює на місці хрестика темний прямокутник. */
.ps-labform-close.ps-labform-close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	font: inherit;
	font-size: 24px;
	line-height: 1;
	color: var(--lf-ink-500);
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.ps-labform-close.ps-labform-close:hover,
.ps-labform-close.ps-labform-close:focus,
.ps-labform-close.ps-labform-close:active {
	background: var(--lf-ink-100);
	color: var(--lf-ink-900);
}
.ps-labform-close.ps-labform-close:focus-visible {
	outline: 2px solid var(--lf-teal);
	outline-offset: -2px;
}

.ps-labform-dialog-body { padding: 20px; }
.ps-labform-dialog-body .ps-labform-done,
.ps-labform-dialog-body .ps-labform-error { margin: 0; }

/* Усередині вікна форма вже має власну підкладку — рамка й тінь зайві */
.ps-labform-dialog .ps-labform-form {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 20px;
}

@media (max-width: 720px) {
	.ps-labform-form { padding: 20px 16px; }
	.ps-labform-grid { grid-template-columns: 1fr; gap: 14px; }
	.ps-labform-submit.ps-labform-submit { width: 100%; }

	.ps-labform-open.ps-labform-open { width: 100%; justify-content: center; }
	.ps-labform-dialog {
		width: 100vw;
		max-width: 100vw;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
		margin: 0;
	}
	.ps-labform-dialog .ps-labform-form { padding: 18px 16px 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.ps-labform-submit,
	.ps-labform-open,
	.ps-labform-close,
	.ps-labform-field input,
	.ps-labform-field textarea { transition: none; }

	.ps-labform-submit:hover,
	.ps-labform-open:hover { transform: none; }
}