/**
 * Модальное окно с формой заявки. Грузится на всём сайте:
 * окно вызывают кнопки шапки, подвала и сквозного блока.
 */

.pb-modal {
	inline-size: min(560px, calc(100vw - 32px));
	max-block-size: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--wd-form-brd-radius, 0px);
	background: #fff;
	color: var(--wd-text-color, #555);
	overflow: visible;
}

.pb-modal::backdrop {
	background: rgba(20, 28, 26, .6);
}

.pb-modal__box {
	position: relative;
	max-block-size: calc(100dvh - 32px);
	padding: 40px;
	overflow-y: auto;
}

/* Тема растягивает кнопки по ширине — отсюда овал вместо круга. */
.pb-modal__close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	min-inline-size: 36px;
	max-inline-size: 36px;
	block-size: 36px;
	min-block-size: 36px;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pb-text, #222);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.pb-modal__close:hover,
.pb-modal__close:focus-visible {
	background: rgba(0, 0, 0, .05);
	color: var(--wd-primary-color, #007cd6);
}

.pb-modal__head {
	margin-block-end: 24px;
	padding-inline-end: 32px;
}

.pb-modal__title {
	margin: 0;
	font-size: 26px;
	line-height: 1.25;
	color: var(--wd-title-color, #141c1a);
}

.pb-modal__subtitle {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pb-text, #222);
}

/* Пока окно открыто, страница под ним не должна скроллиться. */
.pb-modal-is-open,
.pb-modal-is-open body {
	overflow: hidden;
}

/* --------------------------------------------------------------- *
 * Форма. Поля оформляет сама тема — здесь только раскладка.
 * --------------------------------------------------------------- */

.pb-form .wpcf7-form > p:empty {
	display: none;
}

.pb-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.pb-form__field--full {
	grid-column: 1 / -1;
}

/* CF7 прогоняет разметку через wpautop — гасим лишние отступы. */
.pb-form__field > p,
.pb-form__field p:last-child {
	margin: 0;
}

.pb-form__label {
	display: block;
	margin-block-end: 6px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--pb-text, #222);
}

.pb-form .wpcf7-form-control-wrap {
	display: block;
}

.pb-form textarea {
	min-block-size: 96px;
	resize: vertical;
}

.pb-form__consent {
	grid-column: 1 / -1;
	font-size: 13px;
	line-height: 1.45;
}

.pb-form__consent .wpcf7-list-item {
	margin: 0;
}

.pb-form .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 14px;
}

.pb-form .wpcf7-not-valid-tip {
	margin-block-start: 4px;
	font-size: 12px;
}

@media (max-width: 575px) {
	.pb-modal__box {
		padding: 28px 20px;
	}

	.pb-modal__title {
		font-size: 22px;
	}

	.pb-form__grid {
		grid-template-columns: 1fr;
	}
}


/* --------------------------------------------------------------- *
 * Уведомления формы
 * --------------------------------------------------------------- */

.pb-form .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--pb-line, #e4e9e8);
	border-radius: 0;
	font-size: 14px;
	line-height: 1.5;
	animation: pb-notice-in .3s ease both;
}

.pb-form .wpcf7-response-output.pb-notice--ok,
.pb-form form.sent .wpcf7-response-output {
	border-color: #25d366;
	background: rgba(37, 211, 102, .1);
	color: #12692f;
}

.pb-form .wpcf7-response-output.pb-notice--error,
.pb-form form.invalid .wpcf7-response-output,
.pb-form form.failed .wpcf7-response-output {
	border-color: #e05252;
	background: rgba(224, 82, 82, .09);
	color: #9c2020;
}

@keyframes pb-notice-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pb-form .wpcf7-response-output {
		animation: none;
	}
}

.pb-form .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #9c2020;
}

.pb-form .wpcf7-not-valid {
	border-color: #e05252;
}

.pb-form .wpcf7-spinner {
	margin-inline-start: 10px;
}

.pb-form input.pb-form__submit {
	transition: background-color .2s ease, opacity .2s ease;
}

.pb-form form.submitting input.pb-form__submit {
	opacity: .7;
	pointer-events: none;
}

.pb-form__policy {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--pb-muted, #8d8d8d);
}

.pb-form__policy a {
	color: inherit;
	text-decoration: underline;
}

.pb-form__policy a:hover {
	color: var(--wd-primary-color, #007cd6);
}

/* --------------------------------------------------------------- *
 * Согласие и результат отправки
 * --------------------------------------------------------------- */

/* Кликабельна вся строка, а не только сам флажок. */
.pb-form__consent label,
.pb-form__consent .wpcf7-list-item-label,
.pb-form__consent input[type="checkbox"] {
	cursor: pointer;
}

/*
 * Флажок и подпись — по центру строки: при выравнивании по верху
 * квадратик уезжал вверх относительно текста.
 */
.pb-form__consent .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.35;
}

.pb-form__consent input[type="checkbox"] {
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
	margin: 0;
}

.pb-form__consent .wpcf7-list-item-label {
	flex: 1 1 auto;
}

.pb-modal__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-block: 30px 10px;
	text-align: center;
	animation: pb-notice-in .3s ease both;
}

.pb-modal__done-mark {
	position: relative;
	inline-size: 64px;
	block-size: 64px;
	margin-block-end: 10px;
	border-radius: 50%;
	background: rgba(37, 211, 102, .12);
}

/* Галочка из двух границ — без картинок и шрифтов иконок. */
.pb-modal__done-mark::after {
	content: '';
	position: absolute;
	inset-block-start: 21px;
	inset-inline-start: 22px;
	inline-size: 20px;
	block-size: 11px;
	border-inline-start: 3px solid #25a35a;
	border-block-end: 3px solid #25a35a;
	transform: rotate(-45deg);
}

.pb-modal__done-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	color: var(--wd-title-color, #141c1a);
}

.pb-modal__done-text {
	margin: 0;
	font-size: 15px;
	color: var(--wd-text-color, #777);
}

@media (prefers-reduced-motion: reduce) {
	.pb-modal__done {
		animation: none;
	}
}


/* --------------------------------------------------------------- *
 * Окно заказа в один клик (плагин AWOOC) — под формы сайта
 * --------------------------------------------------------------- */

.awooc-form-custom-order.awooc-popup-wrapper {
	inline-size: min(560px, calc(100vw - 32px));
	max-inline-size: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: 0 24px 60px rgba(10, 16, 22, .22);
}

.awooc-custom-order-wrap.awooc-popup-inner {
	padding: 34px 34px 36px;
}

.awooc-form-custom-order-title.awooc-popup-title {
	margin: 0 0 18px;
	padding: 0;
	font-family: inherit;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--pb-dark, #141c1a);
	text-align: start;
}

.awooc-col-wrap.awooc-row {
	display: block;
	margin: 0;
}

.awooc-col.columns-left:empty {
	display: none;
}

.awooc-col.columns-right {
	inline-size: 100%;
	padding: 0;
}

/* Поля — те же, что в остальных формах сайта (стили темы не перебиваем,
   задаём только ширину и внутренние отступы окна) */
.awooc-popup-wrapper .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]) {
	inline-size: 100%;
	margin: 0;
	border-radius: 0;
}

.awooc-popup-wrapper .wpcf7-form-control:not(.wpcf7-submit):focus {
	border-color: var(--pb-accent, #007cd6);
	outline: none;
}

.awooc-popup-wrapper textarea.wpcf7-form-control {
	min-block-size: 110px;
	padding-block: 12px;
	resize: vertical;
}

.awooc-popup-wrapper .wpcf7-form p {
	margin: 0 0 14px;
}

.awooc-popup-wrapper .wpcf7-form p:last-of-type {
	margin-block-end: 0;
}

.awooc-popup-wrapper .wpcf7-submit {
	inline-size: 100%;
	min-block-size: 42px;
	margin-block-start: 6px;
	padding: 0 24px;
	border: 1px solid var(--pb-accent, #007cd6);
	border-radius: 0;
	background: var(--pb-accent, #007cd6);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}

.awooc-popup-wrapper .wpcf7-submit:hover,
.awooc-popup-wrapper .wpcf7-submit:focus-visible {
	background: transparent;
	color: var(--pb-accent, #007cd6);
}

.awooc-form-custom-order .awooc-close {
	inset-block-start: 14px;
	inset-inline-end: 14px;
	inline-size: 36px;
	block-size: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pb-line, #e4e9e8);
	border-radius: 0;
	background: #fff;
	font-size: 22px;
	line-height: 1;
	color: var(--pb-dark, #141c1a);
	opacity: 1;
	transition: border-color .2s ease, color .2s ease;
}

.awooc-form-custom-order .awooc-close:hover {
	border-color: var(--pb-accent, #007cd6);
	color: var(--pb-accent, #007cd6);
}

.awooc-popup-wrapper .wpcf7-not-valid-tip {
	margin-block-start: 6px;
	font-size: 13px;
	color: #d1453b;
}

.awooc-popup-wrapper .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--pb-line, #e4e9e8);
	font-size: 14px;
}
