.psf-wrapper {
	/* Значения по умолчанию — реально применяемые цвета приходят инлайн из настроек плагина (wp_add_inline_style) */
	--psf-accent: #cf9979;
	--psf-accent-dark: #b97c5b;
	--psf-btn-text: #ffffff;
	--psf-launcher-bg: #e8825a;
	--psf-launcher-text: #ffffff;

	/* Текст внутри карточки формы всегда на светлом фоне — цвет фиксирован намеренно,
	   чтобы не "пропадать" на тёмных темах (см. описание бага с невидимым текстом). */
	--psf-text: #2f2a26;
	--psf-muted: #7a7268;
	--psf-border: #e2d9cc;
	--psf-field-bg: #fbfaf7;

	/* Шрифт наследуем у темы сайта, а не задаём свой */
	font-family: inherit;
}

/* Принудительно наследуем шрифт темы для всех вложенных элементов,
   чтобы плагин не выглядел "инородным" на сайте. */
.psf-wrapper,
.psf-wrapper * {
	font-family: inherit;
	box-sizing: border-box;
}

/* ВАЖНО: некоторые темы навязывают всем <button> и <li> позиционирование
   (position: absolute), float или transform для собственных эффектов —
   из-за этого карточки тарифов/историй наезжали друг на друга.
   Жёстко сбрасываем это внутри модалки, а нужное позиционирование
   (бейдж тарифа, точки прогресса) переопределяем ниже с !important,
   поэтому оно всё равно применится. */
.psf-modal * {
	position: static !important;
	float: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
}
/* transform сбрасываем отдельным правилом и не трогаем .psf-spinner —
   иначе анимация вращения спиннера не смогла бы работать: !important
   всегда побеждает CSS-анимации, независимо от специфичности. */
.psf-modal *:not(.psf-spinner) {
	transform: none !important;
}

/* --- Кнопка запуска (текст/цвет настраиваются в админке) --- */
.psf-open-btn {
	background: var(--psf-launcher-bg) !important;
	color: var(--psf-launcher-text) !important;
	border: none;
	padding: 16px 28px;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.psf-open-btn:hover {
	transform: translateY(-1px);
	opacity: .92;
}

/* --- Оверлей и модалка --- */
.psf-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20, 18, 15, 0.55);
	z-index: 999998;
}
.psf-modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	max-width: 520px;
	max-height: 88vh;
	overflow-y: auto;
	background: #ffffff !important;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	z-index: 999999;
	padding-bottom: 8px;
}
.psf-wrapper.psf-open .psf-overlay,
.psf-wrapper.psf-open .psf-modal {
	display: block;
}

.psf-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--psf-border);
}
.psf-modal-header h2 {
	font-size: 19px;
	font-weight: 700;
	margin: 0;
	text-align: center;
	flex: 1;
	color: var(--psf-text) !important;
}
.psf-nav-btn {
	background: none !important;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: var(--psf-muted) !important;
	width: 32px;
	height: 32px;
	line-height: 1;
	padding: 0;
}
.psf-nav-btn:hover { color: var(--psf-text) !important; }

.psf-progress {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 14px 0 4px;
}
.psf-step-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--psf-border);
}
.psf-step-dot.active { background: var(--psf-accent); }

/* --- Общий текст внутри формы (описания, подписи) --- */
.psf-step p,
.psf-step label,
.psf-step span:not(.psf-story-emoji) {
	color: var(--psf-text);
}

/* --- Шаги --- */
.psf-step {
	padding: 20px 28px 24px;
}
.psf-step input[type="text"],
.psf-step input[type="number"],
.psf-step input[type="email"],
.psf-step input[type="tel"],
.psf-step textarea {
	width: 100%;
	border: 1px solid var(--psf-border);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 15px;
	margin-bottom: 14px;
	background: var(--psf-field-bg) !important;
	color: var(--psf-text) !important;
}
.psf-step input::placeholder,
.psf-step textarea::placeholder {
	color: var(--psf-muted);
	opacity: 1;
}
.psf-step input:focus,
.psf-step textarea:focus {
	outline: none;
	border-color: var(--psf-accent);
}

.psf-step-caption {
	text-align: center;
	color: var(--psf-muted) !important;
	margin: 4px 0 18px;
}
.psf-select-label {
	color: var(--psf-muted) !important;
	margin: 0 0 12px;
	font-size: 14px;
}

/* Пол */
.psf-gender-row {
	display: flex;
	gap: 12px;
	margin-bottom: 8px;
}
.psf-gender-btn {
	flex: 1;
	padding: 14px;
	border-radius: 999px;
	border: 1px solid var(--psf-border);
	background: #ffffff !important;
	color: var(--psf-text) !important;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
}
.psf-gender-btn.selected {
	border-color: var(--psf-accent);
	background: #f6ece5 !important; /* фоллбэк для браузеров без color-mix() */
	background: color-mix(in srgb, var(--psf-accent) 15%, #ffffff) !important;
	color: var(--psf-accent-dark) !important;
}

/* Глаза */
.psf-eye-icon {
	text-align: center;
	font-size: 34px;
	margin: 6px 0 10px;
	color: var(--psf-muted);
}
.psf-eye-row {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.psf-eye-btn {
	background: none !important;
	border: none;
	cursor: pointer;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px;
	font-size: 13px;
	color: var(--psf-muted) !important;
	padding: 4px !important;
}
.psf-eye-circle {
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	flex-shrink: 0;
	border-radius: 50% !important;
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--psf-border) !important;
	transition: box-shadow .15s ease, transform .15s ease;
}
.psf-eye-btn.selected .psf-eye-circle {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--psf-accent) !important;
	transform: scale(1.08);
}
.psf-eye-btn.selected .psf-eye-label { color: var(--psf-text) !important; font-weight: 600; }

/* Фото */
.psf-photo-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 200px;
	height: 200px;
	border: 2px dashed var(--psf-border);
	border-radius: 50%;
	margin: 10px auto 16px;
	cursor: pointer;
	color: var(--psf-accent-dark) !important;
	background: var(--psf-field-bg) !important;
	overflow: hidden;
}
.psf-photo-drop img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.psf-photo-icon { font-size: 30px; }
.psf-photo-text { color: var(--psf-accent-dark) !important; font-weight: 600; }
.psf-safe-note {
	text-align: center;
	color: var(--psf-muted) !important;
	font-size: 13px;
	margin-bottom: 10px;
}

/* Истории */
.psf-category-title {
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--psf-muted) !important;
	margin: 16px 0 8px;
}
.psf-story-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.psf-story-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var(--psf-border);
	background: #ffffff !important;
	cursor: pointer;
	font-size: 14px;
}
.psf-story-btn .psf-story-label {
	color: var(--psf-text) !important;
}
.psf-story-btn.selected {
	border-color: var(--psf-accent);
	background: #f6ece5 !important;
	background: color-mix(in srgb, var(--psf-accent) 15%, #ffffff) !important;
}
.psf-story-emoji { font-size: 20px; }

/* Тарифы */
.psf-tariff-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 6px;
}
.psf-tariff-card {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	text-align: left;
	border: 2px solid var(--psf-border);
	border-radius: 16px;
	padding: 16px 20px;
	background: #ffffff !important;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.psf-tariff-card.selected {
	border-color: var(--psf-accent);
	background: #faf3ee !important;
	background: color-mix(in srgb, var(--psf-accent) 10%, #ffffff) !important;
}
.psf-tariff-badge {
	position: absolute !important;
	top: -11px !important;
	right: 16px !important;
	display: inline-block !important;
	background: var(--psf-accent) !important;
	color: var(--psf-btn-text) !important;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

/* Заголовок карточки тарифа: название/цена слева, стрелка-индикатор справа.
   Виден всегда, даже когда карточка свёрнута. */
.psf-tariff-card-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
}
.psf-tariff-card-main {
	display: block !important;
}
.psf-tariff-title {
	display: block !important;
	font-size: 17px;
	font-weight: 700;
	color: var(--psf-text) !important;
	margin-bottom: 2px;
}
.psf-tariff-price {
	display: block !important;
	font-size: 20px;
	font-weight: 800;
	color: var(--psf-accent-dark) !important;
}
.psf-tariff-chevron {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--psf-muted);
	border-bottom: 2px solid var(--psf-muted);
	transform: rotate(45deg) !important;
	transition: transform .2s ease, border-color .2s ease;
}
.psf-tariff-card.selected .psf-tariff-chevron {
	border-color: var(--psf-accent-dark);
	transform: rotate(-135deg) !important;
}

/* Список «что входит» — свёрнут по умолчанию, разворачивается только
   у выбранного тарифа. Так на экране не накладываются друг на друга
   пункты сразу нескольких карточек. */
.psf-tariff-features {
	display: none !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--psf-text) !important;
	font-size: 13.5px;
	line-height: 1.6;
}
.psf-tariff-card.selected .psf-tariff-features {
	display: block !important;
	margin-top: 12px !important;
	padding-top: 12px !important;
	border-top: 1px solid var(--psf-border);
}
.psf-tariff-features li {
	display: list-item !important;
	list-style: none !important;
	position: relative !important;
	color: var(--psf-text) !important;
	margin-bottom: 4px;
	padding-left: 16px !important;
}
.psf-tariff-features li::marker {
	content: none !important;
}
.psf-tariff-features li::before {
	content: "•" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	color: var(--psf-accent) !important;
	font-weight: 700;
}

/* Кнопки действий */
.psf-continue-btn,
.psf-submit-btn {
	width: 100%;
	padding: 15px;
	margin-top: 14px;
	border: none;
	border-radius: 999px;
	background: var(--psf-accent) !important;
	color: var(--psf-btn-text) !important;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.psf-continue-btn:hover,
.psf-submit-btn:hover { background: var(--psf-accent-dark) !important; }
.psf-submit-btn[disabled] { opacity: .6; cursor: default; }

.psf-error {
	color: #c0392b !important;
	font-size: 13px;
	min-height: 16px;
	margin: 4px 0 0;
}

/* Согласия (чекбоксы обязательны для отправки формы) */
.psf-consent-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px;
	margin-top: 4px;
}
.psf-consent-row {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px;
	cursor: pointer;
}
.psf-consent-row input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px !important;
	height: 18px !important;
	margin: 2px 0 0 !important;
	accent-color: var(--psf-accent);
	cursor: pointer;
}
.psf-consent-row span {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--psf-muted) !important;
}
.psf-consent-row a {
	color: var(--psf-accent-dark) !important;
	text-decoration: underline;
}
.psf-consent-row a:hover {
	color: var(--psf-text) !important;
}

/* Успех */
.psf-success {
	text-align: center;
	padding: 50px 30px;
}
.psf-success-icon { font-size: 48px; margin-bottom: 12px; }
.psf-success-title { font-size: 20px; font-weight: 700; color: var(--psf-text) !important; margin-bottom: 8px; }
.psf-success-text { color: var(--psf-muted) !important; }

@media (max-width: 480px) {
	.psf-story-grid { grid-template-columns: 1fr; }
	.psf-eye-row { gap: 10px; }
	.psf-eye-circle { width: 38px; height: 38px; }
}

/* =====================================================================
   ЖЁСТКАЯ ЗАЩИТА ВЁРСТКИ ШАГОВ/АККОРДЕОНА ОТ СТИЛЕЙ ТЕМЫ САЙТА
   -----------------------------------------------------------------
   На некоторых темах/билдерах (в т.ч. на кастомной теме этого сайта)
   есть собственные глобальные правила для "шагов" мастера форм и для
   кнопок — например, фиксированная высота шага, overflow:hidden или
   position:sticky/absolute у кнопки "Продолжить" (частый приём для
   "прилипающих" кнопок внизу модалки). Из-за этого при разворачивании
   тарифа кнопка визуально остаётся на месте и наезжает на текст
   вместо того, чтобы сместиться вниз вслед за выросшим контентом.

   Все правила ниже используют #psf-modal (ID), поэтому по специфичности
   они приоритетнее почти любых классовых стилей темы — это гарантирует,
   что шаг и карточки тарифов всегда имеют auto-высоту и обычное
   (static/relative) позиционирование, а кнопки не "прилипают".
   ===================================================================== */
#psf-modal .psf-step {
	position: static !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}
#psf-modal .psf-tariff-list {
	position: static !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
#psf-modal .psf-tariff-card {
	position: relative !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
#psf-modal .psf-tariff-card-head,
#psf-modal .psf-tariff-card-main {
	position: static !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
#psf-modal .psf-tariff-features {
	position: static !important;
	max-height: none !important;
	overflow: visible !important;
	list-style: none !important;
	padding-left: 0 !important;
}
#psf-modal .psf-tariff-features li {
	list-style: none !important;
	list-style-type: none !important;
	padding-left: 16px !important;
}
#psf-modal .psf-tariff-features li::marker {
	content: none !important;
	font-size: 0 !important;
}
#psf-modal .psf-tariff-features li::before {
	content: "•" !important;
	color: var(--psf-accent) !important;
}
#psf-modal .psf-tariff-features li::after {
	content: none !important;
}
#psf-modal .psf-tariff-badge {
	position: absolute !important;
}
#psf-modal .psf-continue-btn,
#psf-modal .psf-submit-btn {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	z-index: auto !important;
	transform: none !important;
}
#psf-modal .psf-eye-btn {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	background: none !important;
	border: none !important;
}
#psf-modal .psf-eye-circle {
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	max-width: none !important;
	max-height: none !important;
	border-radius: 50% !important;
	overflow: visible !important;
}

/* Кнопка отправки: спиннер + меняющиеся фразы во время отправки заявки,
   чтобы было понятно, что форма реально работает, а не зависла. */
#psf-modal .psf-submit-btn.psf-loading {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px;
	cursor: progress;
	opacity: .94;
	color: #ffffff !important;
}
#psf-modal .psf-submit-btn.psf-loading .psf-btn-text {
	color: #ffffff !important;
}
.psf-spinner {
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	border: 2px solid rgba(255, 255, 255, .4) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: psf-spin .8s linear infinite;
	flex-shrink: 0;
}
@keyframes psf-spin {
	to { transform: rotate(360deg); }
}