/*
 * Запись на примерку /termin/ и страница «Danke» (24.09.2026).
 * Подключается только на этих двух страницах — см. inc/termin-form.php.
 *
 * Образец — касса piqyourdress.com (Shopify), просьба владельца 24.09:
 * узкая колонка формы, разделы с заголовками, поля в тонкой рамке с подписью
 * внутри, пары полей в строку, справа — сводка.
 *
 * Селекторы тяжёлые (#fieldlist_1, !important) вынужденно: в Qode Custom CSS
 * стоят глобальные правила `input { padding: 15px !important; … }` и
 * `.wp-time-slots-input input { … }` — их иначе не перебить.
 */

.buk-booking,
.buk-intro,
.buk-danke {
	--buk-text: #4f4f4f;
	--buk-muted: #8a8a8a;
	--buk-line: #d9d9d9;
	--buk-dark: #303030;
	--buk-radius: 5px;
	font-family: 'Lato', sans-serif;
	color: var(--buk-text);
}

/* ---------- Текст владелицы над формой ---------- */

.buk-intro {
	max-width: 1000px;
	margin: 0 auto 32px;
	padding: 22px 26px;
	background: #fff;
	border: 1px solid var(--buk-line);
	border-radius: var(--buk-radius);
	font-size: 14px;
	line-height: 1.6;
}

.buk-intro h2 {
	margin: 0 0 10px;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--buk-dark);
}

/* !important — тема задаёт абзацам свой шрифт и 18px. */
.buk-intro p,
.buk-intro li {
	font-family: 'Lato', sans-serif !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--buk-text);
}

.buk-intro p {
	margin: 0 0 8px;
}

.buk-intro ul {
	margin: 4px 0 10px 18px;
	padding: 0;
}

.buk-intro li {
	margin: 0 0 4px;
	list-style: disc;
}

/* Строка о согласии — механизм согласия с платой за неявку (см. PLAN.md,
   «Требования швейцарского права»). Не делать её мельче или бледнее. */
.buk-intro .buk-intro__consent {
	margin: 10px 0 0;
	font-style: italic;
}

/* Просьба указать размер и модели (25.09.2026) — отдельным абзацем после согласия. */
.buk-intro .buk-intro__models {
	margin: 10px 0 0;
}

.buk-intro .buk-intro__closed {
	margin: 10px 0 0;
	font-weight: 700;
	color: var(--buk-dark);
}

/* ---------- Две колонки ---------- */

.buk-booking {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	max-width: 1000px;
	margin: 0 auto 80px; /* отступ от кнопки до подвала */
	align-items: start;
}

.buk-booking__aside {
	position: sticky;
	top: 110px;
}

@media (max-width: 900px) {
	.buk-booking {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-bottom: 48px;
	}

	/* top: 0 — иначе остаётся десктопное смещение 110px: тема делает блок relative
	   вместо static, и карточка наезжала на начало формы (29.09.2026) */
	.buk-booking__aside {
		position: static;
		top: 0;
		order: -1;
	}
}

/* ---------- Сетка полей ---------- */

/* !important — плагин держит страницы формы (.pbreak) через display: block. */
.buk-booking #fieldlist_1 .pb0 {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.buk-booking #fieldlist_1 .pb0 > * {
	grid-column: 1 / -1;
	margin: 0;
}

/* Пары в строку — по именам полей, а не по порядку: владелица может
   переставить поля в конструкторе, пары от этого не развалятся. */
.buk-booking #fieldlist_1 .fields:has([name^="email_"]),
.buk-booking #fieldlist_1 .fields:has([name^="fieldname3_"]),
.buk-booking #fieldlist_1 .fields:has([name^="fieldname5_"]),
.buk-booking #fieldlist_1 .fields:has([name^="fieldname6_"]),
.buk-booking #fieldlist_1 .fields:has([name^="fieldname7_"]),
.buk-booking #fieldlist_1 .fields:has([name^="fieldname8_"]) {
	grid-column: auto;
}

@media (max-width: 560px) {
	.buk-booking #fieldlist_1 .pb0 > .fields {
		grid-column: 1 / -1;
	}
}

.buk-booking #fieldlist_1 .clearer {
	display: none;
}

/* ---------- Заголовки разделов ---------- */

.buk-booking .buk-section,
.buk-booking #fieldlist_1 .wp-time-slots-calendar > label,
.buk-summary__title {
	display: block;
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	letter-spacing: 0;
	text-transform: none;
	color: var(--buk-dark) !important;
}

.buk-booking .buk-section {
	margin-top: 22px;
}

.buk-booking #fieldlist_1 .wp-time-slots-calendar > label {
	margin-bottom: 12px;
}

/* Звёздочки обязательных полей — у образца их нет: обязательное видно
   по тому, что у остальных написано «(optional)». */
.buk-booking #fieldlist_1 label .r {
	display: none;
}

/* ---------- Поля ---------- */

.buk-booking #fieldlist_1 .buk-float {
	position: relative;
}

.buk-booking #fieldlist_1 .buk-float .dfield {
	position: relative;
}

.buk-booking #fieldlist_1 .buk-float input.field,
.buk-booking #fieldlist_1 .buk-float textarea.field {
	display: block;
	width: 100% !important;
	max-width: none;
	height: 50px;
	margin: 0;
	padding: 14px 12px !important;
	border: 1px solid var(--buk-line) !important;
	border-radius: var(--buk-radius);
	background: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	line-height: 20px;
	color: var(--buk-dark);
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s, padding .15s;
}

.buk-booking #fieldlist_1 .buk-float textarea.field {
	height: auto;
	min-height: 96px;
	resize: vertical;
}

.buk-booking #fieldlist_1 .buk-float input.field:focus,
.buk-booking #fieldlist_1 .buk-float textarea.field:focus {
	border-color: var(--buk-dark) !important;
	box-shadow: 0 0 0 1px var(--buk-dark);
	outline: 0;
}

.buk-booking #fieldlist_1 .buk-float input.field::placeholder,
.buk-booking #fieldlist_1 .buk-float textarea.field::placeholder {
	color: var(--buk-muted);
	opacity: 1;
}

/* Подпись: пока поле пустое — не видна (её роль играет плейсхолдер),
   у заполненного поля — мелко в верхнем углу рамки. */
.buk-booking #fieldlist_1 .buk-float > label {
	position: absolute;
	top: 7px;
	left: 13px;
	z-index: 1;
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif !important;
	font-size: 11px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	color: var(--buk-muted) !important;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
}

.buk-booking #fieldlist_1 .buk-float:has(.field:not(:placeholder-shown)) > label {
	opacity: 1;
}

.buk-booking #fieldlist_1 .buk-float:has(input.field:not(:placeholder-shown)) input.field {
	padding: 21px 12px 7px !important;
}

.buk-booking #fieldlist_1 .buk-float:has(textarea.field:not(:placeholder-shown)) textarea.field {
	padding: 24px 12px 8px !important;
}

/* Подсказка под полем — мелко и серым. */
.buk-booking #fieldlist_1 .uh {
	display: block;
	margin: 4px 2px 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--buk-muted);
}

.buk-booking #fieldlist_1 .uh:empty {
	display: none;
}

/* Сообщение об ошибке плагина. */
.buk-booking #fbuilder #fbuilder_1 div.cpefb_error {
	margin-top: 4px;
	padding: 0;
	border: 0;
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #c0392b;
	background: none;
}

.buk-booking #fieldlist_1 .field.cpefb_error {
	border-color: #c0392b !important;
}

/* ---------- Календарь и слоты ---------- */

.buk-booking #fieldlist_1 .fslots {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--buk-line);
	border-radius: var(--buk-radius);
}

.buk-booking .ui-datepicker {
	width: 280px !important;
	padding: 0;
	border: 0 !important;
	background: none !important;
	font-family: 'Lato', sans-serif;
}

.buk-booking .ui-datepicker .ui-datepicker-header {
	padding: 0 0 8px;
	border: 0;
	background: none;
}

.buk-booking .ui-datepicker .ui-datepicker-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--buk-dark);
}

.buk-booking .ui-datepicker th {
	padding: 4px 0;
	font-size: 11px;
	font-weight: 400;
	color: var(--buk-muted);
}

.buk-booking .ui-datepicker td {
	padding: 2px;
}

.buk-booking .ui-datepicker td a,
.buk-booking .ui-datepicker td span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 auto;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background: none !important;
	font-size: 14px;
	text-align: center;
}

.buk-booking .ui-datepicker td a {
	font-weight: 700;
	color: var(--buk-dark) !important;
}

.buk-booking .ui-datepicker td a:hover {
	background: #efefef !important;
}

/* Недоступные дни. Нерабочие дни плагин оставляет ссылкой <a>, только
   помечает ячейку ui-state-disabled, — поэтому гасим и span, и a. */
.buk-booking .ui-datepicker td.ui-datepicker-unselectable span,
.buk-booking .ui-datepicker td.ui-state-disabled span,
.buk-booking .ui-datepicker td.ui-datepicker-unselectable a,
.buk-booking .ui-datepicker td.ui-state-disabled a {
	color: #c8c8c8 !important;
	font-weight: 400;
	background: none !important;
	pointer-events: none;
}

/* «Сегодня» на нерабочий день не выделяем как выбранный. */
.buk-booking .ui-datepicker td.ui-state-disabled a.ui-state-active {
	color: #c8c8c8 !important;
}

.buk-booking .ui-datepicker td a.ui-state-active,
.buk-booking .ui-datepicker td.ui-datepicker-current-day a {
	background: var(--buk-dark) !important;
	color: #fff !important;
}

.buk-booking .slotsCalendar {
	flex: 1 1 180px;
	min-width: 0;
}

.buk-booking .slotsCalendar .slots {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
	gap: 8px;
	height: auto !important;
}

/* Дата над слотами. */
.buk-booking .slotsCalendar .slots > span {
	display: block;
	flex: 0 0 100%;
	height: auto !important;
	margin: 0 0 2px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--buk-dark);
}

.buk-booking .slotsCalendar .availableslot {
	height: auto !important;
	margin: 0;
	padding: 0;
	float: none;
	border: 0 !important;
	background: none !important;
}

.buk-booking .slotsCalendar .availableslot a {
	display: inline-block;
	min-width: 72px;
	padding: 9px 12px;
	border: 1px solid var(--buk-line) !important;
	border-radius: var(--buk-radius);
	background: #fff !important;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	color: var(--buk-dark) !important;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.buk-booking .slotsCalendar .availableslot a:hover {
	border-color: var(--buk-dark) !important;
}

.buk-booking .slotsCalendar .availableslot.currentSelection a,
.buk-booking .slotsCalendar .availableslot a.currentSelection {
	border-color: var(--buk-dark) !important;
	background: var(--buk-dark) !important;
	color: #fff !important;
}

/* Слот, уже выбранный этой клиенткой (плагин перерисовывает его
   в div.usedslot.currentSelection), — залитая кнопка. */
.buk-booking .slotsCalendar .usedslot {
	height: auto !important;
	margin: 0;
	padding: 0;
	float: none;
	border: 0 !important;
	background: none !important;
}

.buk-booking .slotsCalendar .usedslot a {
	display: inline-block;
	min-width: 72px;
	padding: 9px 12px;
	border: 1px solid #ececec !important;
	border-radius: var(--buk-radius);
	background: #f7f7f7 !important;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	color: #c8c8c8 !important;
	text-decoration: line-through;
	cursor: default;
}

.buk-booking .slotsCalendar .usedslot.currentSelection a {
	border-color: var(--buk-dark) !important;
	background: var(--buk-dark) !important;
	color: #fff !important;
	text-decoration: none;
}

.buk-booking .ts_slot_availability {
	display: none;
}

/* Выбранное под календарём: «24.09.2026 17:00 entfernen». */
.buk-booking .usedSlots {
	flex: 0 0 100%;
	font-size: 14px;
}

.buk-booking .usedSlots .sb_item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid #ececec;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var(--buk-dark);
}

.buk-booking .usedSlots .sb_item_time {
	font-weight: 700;
}

.buk-booking .usedSlots a.cancel {
	font-size: 13px;
	color: var(--buk-muted);
	text-decoration: underline;
}

/* ---------- Кнопка ---------- */

.buk-booking #fbuilder #fbuilder_1 .pbSubmit,
.buk-booking #fbuilder #fbuilder_1 .pbSubmit:not([disabled]) {
	display: block;
	width: 100%;
	height: 54px;
	margin: 20px 0 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--buk-radius);
	background: var(--buk-dark);
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 54px;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	box-sizing: border-box;
}

.buk-booking #fbuilder #fbuilder_1 .pbSubmit:not([disabled]):hover {
	border: 0;
	background: #000;
	color: #fff;
}

/* Строка о персональных данных под кнопкой. */
.buk-booking .buk-privacy {
	margin: 12px 0 0;
	font-family: 'Lato', sans-serif !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--buk-muted);
	text-align: center;
}

.buk-booking .buk-privacy a {
	color: var(--buk-text);
	text-decoration: underline;
}

/* ---------- Сводка «Ihr Termin» ---------- */

.buk-summary {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--buk-line);
	border-radius: var(--buk-radius);
	font-size: 14px;
}

.buk-summary__title {
	margin-bottom: 18px;
}

/* Платье и размер в сводке убраны 25.09.2026 (архив prefill-dress-size-2026-09-25). */

.buk-summary__rows {
	margin: 0;
}

.buk-summary__rows > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
}

.buk-summary__rows dt {
	font-weight: 400;
	color: var(--buk-text);
}

.buk-summary__rows dd {
	margin: 0;
	text-align: right;
	color: var(--buk-muted);
}

.buk-summary__rows dd.is-set {
	color: var(--buk-dark);
}

.buk-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 14px;
	margin-top: 14px;
	border-top: 1px solid #ececec;
	font-size: 16px;
	color: var(--buk-dark);
}

.buk-summary__total strong {
	font-size: 17px;
	font-weight: 700;
}

.buk-summary__note {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--buk-muted);
}

/* ---------- Страница «Danke» ---------- */

.buk-danke {
	max-width: 560px;
	margin: 20px auto 60px;
	padding: 44px 36px 36px;
	background: #fff;
	border: 1px solid var(--buk-line);
	border-radius: var(--buk-radius);
	text-align: center;
	font-size: 15px;
	line-height: 1.6;
}

.buk-danke__icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	margin: 0 0 18px;
	color: var(--buk-dark);
}

.buk-danke__icon svg {
	width: 100%;
	height: 100%;
}

.buk-danke h2 {
	margin: 0 0 12px;
	font-family: 'Lato', sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--buk-dark);
}

.buk-danke p,
.buk-danke li {
	font-family: 'Lato', sans-serif !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--buk-text);
}

.buk-danke p {
	margin: 0 0 12px;
}

.buk-danke .buk-danke__hint {
	font-size: 13px !important;
	color: var(--buk-muted);
}

.buk-danke__box li {
	font-size: 14px !important;
}

.buk-danke__box {
	margin: 26px 0 28px;
	padding: 18px 20px;
	background: #f7f7f7;
	border-radius: var(--buk-radius);
	text-align: left;
	font-size: 14px;
}

.buk-danke__box h3 {
	margin: 0 0 8px;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--buk-dark);
}

.buk-danke__box ul {
	margin: 0 0 0 18px;
	padding: 0;
}

.buk-danke__box li {
	margin: 0 0 6px;
	list-style: disc;
}

.buk-danke__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.buk-danke__actions a {
	display: inline-block;
	padding: 0 22px;
	height: 46px;
	line-height: 46px;
	border: 1px solid var(--buk-dark);
	border-radius: var(--buk-radius);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--buk-dark);
	text-decoration: none;
}

.buk-danke__actions a.is-primary {
	background: var(--buk-dark);
	color: #fff;
}

.buk-danke__actions a:hover {
	background: #000;
	border-color: #000;
	color: #fff;
}

@media (max-width: 560px) {
	.buk-danke {
		padding: 32px 20px 24px;
	}
}

/* Поле-ловушка для ботов (inc/termin-schutz.php): человек его не видит и не заполняет.
   Не display:none — такие поля часть ботов пропускает. 29.09.2026 */
.buk-hp {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Пояснение над формой, если заявку не приняли (лимит, занятый или недоступный слот). */
.buk-notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-left: 3px solid #d4a5a5;
	background: #fff;
	color: #000;
	font-size: 15px;
	line-height: 1.5;
}

/* Пауза онлайн-записи (BUK_TERMIN_PAUSE, inc/termin-schutz.php). 29.09.2026 */
.buk-notice--pause strong {
	display: block;
	margin-bottom: 4px;
	font-weight: 700;
}
.buk-booking #fbuilder #fbuilder_1 .pbSubmit[disabled] {
	background: #c9c9c9;
	color: #fff;
	cursor: not-allowed;
}
.buk-booking .buk-pause-line {
	margin: 20px 0 -8px;
	font-size: 14px;
	text-align: center;
	color: var(--buk-text);
}

/* ---------- Галочка «согласна с условиями» (02.10.2026) ---------- */

.buk-booking .buk-consent {
	margin: 4px 0 16px;
}

.buk-booking .buk-consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--buk-text);
	cursor: pointer;
}

/* Видимым: валидатор плагина скрытые поля пропускает. !important — против правила
   из Qode Custom CSS, которое оформляет все input сайта как текстовые поля. */
.buk-booking .buk-consent input[type="checkbox"] {
	flex: none;
	-webkit-appearance: checkbox !important;
	appearance: auto !important;
	width: 16px !important;
	height: 16px !important;
	margin: 3px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
	accent-color: #000;
}

.buk-booking .buk-consent a {
	color: var(--buk-text);
	text-decoration: underline;
}

.buk-booking .buk-consent .cpefb_error {
	margin: 4px 0 0 26px;
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	color: #c0392b;
}

/* Ссылка из галочки ведёт к условиям — не прятать их под закреплённой шапкой. */
#terminbedingungen {
	scroll-margin-top: 120px;
}