.ui-wrapper {
	display: flex;
	padding: 30px;
}
.buttons {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
button {
	cursor: pointer;
	border: none;
}
.btn-arrow {
	position: relative;
	overflow: hidden;
	padding: 8px 8px 8px 24px;
	border-radius: 100px;
	color: var(--color-light);
	background: var(--color-accent);
	display: flex;
	text-decoration: none;
	cursor: pointer;
	align-items: center;
	font-weight: 500;
	justify-content: center;
	transition: 0.4s;
	gap: 16px;
	width: fit-content;
	height: 56px;
	border: none;
}
.btn-arrow::after {
	content: '';
	background: url('../img/icon/btn-arrow.svg') no-repeat center center;
	width: 40px;
	height: 40px;
	background-color: var(--color-light);
	border-radius: 50%;
	transition: 0.4s;
}
.btn-arrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75px;
	width: 50px;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent,
		rgba(255, 255, 255, 0.6),
		transparent
	);
	transform: skewX(-25deg);
}

.btn-arrow:hover::before {
	animation: shine 0.75s forwards;
	opacity: 1;
}
.btn-arrow:hover {
	background: var(--color-accent);
	opacity: 1;
}
.btn-link {
	padding: 8px 8px 8px 24px;
	border-radius: 100px;
	color: var(--color-primary);
	border: 1px solid var(--color-border);
	background: transparent;
	display: flex;
	text-decoration: none;
	cursor: pointer;
	align-items: center;
	font-weight: 500;
	width: fit-content;
	justify-content: center;
	transition: 0.4s;
	gap: 16px;
	height: 56px;
}
.btn-link::after {
	content: '';
	background: url('../img/icon/btn-arrow.svg') no-repeat center center;
	width: 24px;
	height: 24px;
	width: 40px;
	height: 40px;
	background-color: transparent;
	border-radius: 50%;
	font-size: var(--fs-text-16);
	transition: 0.4s;
}
.btn-link:hover.btn-link::after {
	transform: translateX(-5px);
}
.btn {
	position: relative; /* чтобы псевдоэлемент позиционировался внутри */
	overflow: hidden; /* чтобы блик не вылазил */
	height: 16px 24px;
	background: var(--color-accent);
	border-radius: 10px;
	display: flex;
	text-decoration: none;
	cursor: pointer;
	width: fit-content;
	height: 51px;
	padding: 16px 24px;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	justify-content: center;
	transition: 0.4s;
	color: var(--color-light);
}
.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75px;
	width: 50px;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent,
		rgba(255, 255, 255, 0.6),
		transparent
	);
	transform: skewX(-25deg);
}

.btn:hover::before {
	animation: shine 0.75s forwards;
	opacity: 1;
}
.wpcf7-not-valid-tip {
	position: absolute;
}

@keyframes shine {
	0% {
		left: -75px;
	}
	100% {
		left: 120%;
	}
}

.btn:hover {
	opacity: 1;
}
.form-wrapp {
	background: #172b4ada;
	padding: 32px;
	border-radius: 16px;
	max-width: 572px;
	border: 1px solid #030b16;
}
.form-title {
	font-size: var(--fs-card-title-24);
	color: var(--color-light);
	text-align: center;
	font-weight: 500;
	margin-bottom: 35px;
}
.form-title span {
	color: var(--color-accent) !important;
	font-weight: 500;
}
.form-twoo-input p {
	display: flex;
	gap: var(--gap-block);
	width: 100%;
}
form br {
	display: none;
}
form input {
	background: #ffffffb6;
	padding: 17px 16px;
	height: 50px;
	border-radius: 6px;
	border: 1px solid #e4e4e4;
	width: 100%;
	font-size: 16px;
}
form input:focus {
	outline: none;
	border: 1px solid var(--color-accent);
}
label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--color-light);
	font-size: var(--fs-text-sm-14);
	width: 100%;
}
/* Плейсхолдер */
form input::placeholder {
	color: var(--color-primary); /* задай свой цвет */
	opacity: 1;
}

/* Группа поиска */
.form-search-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
}

.input-with-icon p {
	position: relative;
	display: flex;
	align-items: center;
}
.input-with-icon p span {
	width: 100%;
}

.input-with-icon img {
	position: absolute;
	left: 12px;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.input-with-icon input {
	padding-left: 40px; /* отступ под иконку */
}

/* Чекбокс */
.form-checkbox label {
	font-size: 12px;
	color: var(--color-light);

	display: flex;
	gap: 8px;
	align-items: center;
	flex-direction: row;
}
form div {
	color: #fff;
}
.form-checkbox label span {
	gap: 8px;
	font-size: 12px;
	color: var(--color-light);
}
.wpcf7-not-valid-tip {
	color: #dc3232 !important;
}
.form-checkbox input[type='checkbox'] {
	accent-color: var(--color-accent); /* активный цвет */
	width: 20px;
	height: 20px;
}
form .btn {
	width: 100%;
	border: none;
}
/* Попап */
.popup {
	position: fixed;
	inset: 0;
	display: none; /* скрыт по умолчанию */
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

/* Активный попап */
.popup.active {
	display: flex;
}

/* Оверлей */
.popup-overlay {
	position: absolute;
	inset: 0;
	background: #172b4ad0;
}

/* Контент */
.popup-content {
	position: relative;
	z-index: 1001;
	animation: popupFadeIn 0.3s ease;
}

/* Кнопка закрытия */
.close-form-btn {
	position: absolute;
	top: -40px;
	right: -40px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	padding: 8px;
	cursor: pointer;
	background: #ffffff02;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.close-form-btn:before {
	content: '';
	background: url('../img/icon/close-form-btn.svg') no-repeat center;
	width: 15px;
	height: 15px;
	transition: background-color 0.2s ease;
}
.close-form-btn:hover {
	background: #ffffff2d;
}

/* Анимация */
@keyframes popupFadeIn {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Блокировка скролла */
body.popup-open {
	overflow: hidden;
}
/* БАЗА: фиксируем блок уведомления снизу по центру */
.wpcf7 .wpcf7-response-output {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  transform: translateX(-50%);
  z-index: 9999;

  /* внешний вид */
  max-width: min(92vw, 680px);
  width: max-content;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #1f2937;           /* тёмно-серый фон по умолчанию */
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);

  /* плавное появление/скрытие */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  transform-origin: center bottom;
  transform: translateX(-50%) translateY(8px);
  pointer-events: auto;          /* можно кликать по ссылкам внутри сообщения */
}

/* Когда CF7 убирает класс скрытия, показываем блок */
.wpcf7 .wpcf7-response-output:not(.wpcf7-display-none) {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* СТАТУСЫ (поддержка разных версий CF7) */
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok,
.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
  background: #14532d;           /* успех */
  border-color: #22c55e;
  color: #e7f7ec;
}

.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output.wpcf7-acceptance-missing,
.wpcf7 .wpcf7-form.invalid .wpcf7-response-output {
  background: #6b1a1a;           /* ошибки валидации */
  border-color: #f87171;
  color: #ffecec;
}

.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-response-output.wpcf7-aborted,
.wpcf7 .wpcf7-form.failed .wpcf7-response-output,
.wpcf7 .wpcf7-form.aborted .wpcf7-response-output {
  background: #7c1d1d;           /* сбой отправки */
  border-color: #fb7185;
  color: #fff1f2;
}

.wpcf7 .wpcf7-response-output.wpcf7-spam-blocked,
.wpcf7 .wpcf7-form.spam .wpcf7-response-output {
  background: #4a1d7c;           /* спам */
  border-color: #c084fc;
  color: #f5f3ff;
}

/* МЕЛОЧИ ДЛЯ МОБИЛОК */
@media (max-width: 480px) {
  .wpcf7 .wpcf7-response-output {
    padding: 12px 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    max-width: 94vw;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
  }
}

/* Уважение к системной настройке «меньше анимации» */
@media (prefers-reduced-motion: reduce) {
  .wpcf7 .wpcf7-response-output {
    transition: none;
  }
}