/* Fleur · Форма регистрации (дизайн «Дневник»).
   Фон секции base #FDF5FA задаётся ЗДЕСЬ: WordPress вырезает inline `background` у обёртки
   блока, из-за чего секция была прозрачной и вокруг тёмной карточки просвечивал белый фон body. */
.wp-block-fleur-register {
	/* Тон v2: біла підкладка (замість base) + мягкое розовое свечение под стеклянной карточкой */
	background: radial-gradient(58% 44% at 50% 44%, rgba(236, 72, 153, 0.13), transparent 68%), #FFFFFF;
}

@media (min-width: 768px) {
	.wp-block-fleur-register .fleur-register__inner { max-width: 620px; }
}

/* Плейсхолдеры полей — светлее (на стеклянной карточке дефолтные почти не видны). */
.wp-block-fleur-register .fleur-register-form input::placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; }
.wp-block-fleur-register .fleur-register-form input:focus::placeholder { color: rgba(255, 255, 255, 0.5); }

/* Селект тарифа: пункты выпадающего списка — тёмный текст на белом (иначе на части браузеров
   белый текст селекта наследуется в option и он «пропадает» на белом фоне списка). */
.wp-block-fleur-register .fleur-register__tariff option { color: #131B2B; background: #FFFFFF; }
.wp-block-fleur-register .fleur-register__tariff:focus { border-color: rgba(255, 156, 205, 0.6); }
/* Пока тариф не выбран, селект показывает подсказку — она должна выглядеть как плейсхолдер
   соседних полей (70% белого), а не как введённое значение: иначе строка «тяжелее» остальных.
   Класс ставит view.js по value; :has() не используем — состояние меняется скриптом.
   `!important` обязателен: у селекта есть ИНЛАЙНОВЫЙ `color: rgb(255,255,255)` из render.php,
   а инлайн бьёт таблицу стилей (та же грабля, что со свечением dessert-showcase). */
.wp-block-fleur-register .fleur-register__tariff.is-placeholder { color: rgba(255, 255, 255, 0.7) !important; }

/* Чекбокс согласия с офертой (перед кнопкой): кастомная розовая «плитка» с белой галочкой. */
.wp-block-fleur-register .fleur-register__agree {
	display: flex;
	align-items: center;
	gap: 11px;
	cursor: pointer;
	text-align: left;
}
.wp-block-fleur-register .fleur-register__agree input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	border: 2px solid rgba(255, 255, 255, 0.38);
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
	position: relative;
	transition: background-color 130ms ease, border-color 130ms ease;
}
/* Галочка — SVG-фоном по центру, а не CSS-уголком на фиксированных left/top: уголок из
   двух бордеров после rotate(45deg) центрируется «на глаз» и в боксе 22px читался кривым. */
.wp-block-fleur-register .fleur-register__agree input[type="checkbox"]:checked {
	background: #FF9CCD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center center / 13px 13px no-repeat;
	border-color: #FF9CCD;
}
.wp-block-fleur-register .fleur-register__agree input[type="checkbox"]:focus-visible {
	outline: 2px solid #FF9CCD;
	outline-offset: 2px;
}
.wp-block-fleur-register .fleur-register__agree span {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.62);
}
.wp-block-fleur-register .fleur-register__agree a {
	color: #FF9CCD;
	text-decoration: underline;
}

/* Кнопка «Зарегистрироваться» «переливается» в том же ритме, что и на hero (fleurBtnShine). */
@keyframes fleurBtnShine {
	0%        { transform: translateX(-130%); }
	31%, 100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-fleur-register .fleur-register__btn { position: relative; overflow: hidden; }
	.wp-block-fleur-register .fleur-register__btn::after {
		content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
		background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
		transform: translateX(-130%);
		animation: fleurBtnShine 7000ms cubic-bezier(.33, .1, .25, 1) 300ms infinite;
	}
}

/* Способ оплаты на шаге 2 — ДВА КВАДРАТНЫХ ЧЕКБОКСА внутри блока с ценой, register v0.9.0.
   Шесть итераций, и все предыдущие Илья забраковал: сегментные пилюли → ссылка-переключатель →
   чекбокс в рамке → чекбокс без рамки → чекбокс внутри цены. Причина одна и та же: ОДИНОЧНЫЙ
   чекбокс «оплатить частями» читается как незакрытый шаг — пустой квадрат выглядит как то, чего
   от тебя ждут. Решение: два варианта, полная оплата отмечена по умолчанию. Выбор уже сделан,
   и «частями» — равноправная альтернатива, а не действие.

   ⚠️ Под капотом это `type="radio"`, а не checkbox — намеренно: взаимное исключение и гарантию
   «всегда что-то выбрано» даёт браузер, а не наш JS. Реальными чекбоксами можно снять обе
   отметки и остаться без выбора. Квадратная форма (border-radius 5px + галочка) делает их
   визуально чекбоксами, как и просил Илья.

   Стили здесь, а не инлайном: инлайн не умеет :checked / :focus-visible / смежный селектор. */
.wp-block-fleur-register .fleur-register-pay__opts {
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 1px dashed rgba(255, 156, 205, 0.22);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wp-block-fleur-register .fleur-register-pay__opt {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	text-align: left;
}
.wp-block-fleur-register .fleur-register-pay__opt-input {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1.5px solid rgba(255, 255, 255, 0.30);
	background: transparent;
	cursor: pointer;
	transition: background-color 130ms ease, border-color 130ms ease;
}
.wp-block-fleur-register .fleur-register-pay__opt:hover .fleur-register-pay__opt-input {
	border-color: rgba(255, 156, 205, 0.6);
}
.wp-block-fleur-register .fleur-register-pay__opt-input:checked {
	background: #FF9CCD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131B2B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center center / 11px 11px no-repeat;
	border-color: #FF9CCD;
}
.wp-block-fleur-register .fleur-register-pay__opt-input:focus { outline: none; }
.wp-block-fleur-register .fleur-register-pay__opt-input:focus-visible {
	outline: 2px solid #FF9CCD;
	outline-offset: 2px;
}
.wp-block-fleur-register .fleur-register-pay__opt-text {
	flex: 1 1 auto;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.62);
	transition: color 130ms ease;
}
.wp-block-fleur-register .fleur-register-pay__opt-price {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	color: rgba(255, 156, 205, 0.7);
	white-space: nowrap;
	transition: color 130ms ease, font-size 130ms ease;
}
/* Выбранный вариант — ярче: видно, что именно спишется. */
.wp-block-fleur-register .fleur-register-pay__opt-input:checked ~ .fleur-register-pay__opt-text {
	color: rgb(255, 255, 255);
	font-weight: 600;
}
.wp-block-fleur-register .fleur-register-pay__opt-input:checked ~ .fleur-register-pay__opt-price {
	color: rgb(255, 156, 205);
	font-size: 22px;
}
.wp-block-fleur-register .fleur-register-pay__mode-note {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
	text-align: center;
	margin: -6px 0 14px;
}

/* Тёмный тон секции (tone="dark"). Нужен, когда форма — первый блок страницы и заменяет hero:
   светлый верх читался как чужая белая плашка. Рецепт фона — тот же, что у hero. */
.wp-block-fleur-register.is-dark {
	background:
		radial-gradient(55% 40% at 88% 16%, rgba(236, 72, 153, 0.16), transparent 62%),
		radial-gradient(48% 38% at 6% 84%, rgba(255, 156, 205, 0.12), transparent 60%),
		#131B2B;
}
/* Карточку в тёмном тоне красит render.php инлайном: инлайн-стиль бьёт этот файл. */

/* Запиненная CTA на коротком лендинге, где форма стоит первым блоком и hero нет
   (класс тот же, что у hero — стили дублируются намеренно: block-style.css грузится
   только для присутствующих блоков, а на такой странице hero/style.css не подключается). */
.fleur-sticky-cta {
	position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px;
	display: block; max-width: 560px; margin: 0 auto; box-sizing: border-box;
	text-align: center; text-decoration: none;
	background: #FF9CCD; color: #131B2B;
	border-radius: 999px; padding: 16px 24px;
	font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
	box-shadow: 0 14px 40px rgba(60, 20, 45, 0.35), 0 6px 18px rgba(236, 72, 153, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	opacity: 0; transform: translateY(150%); pointer-events: none;
	transition: opacity .3s ease, transform .38s cubic-bezier(.2, .7, .2, 1);
}
.fleur-sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
	.fleur-sticky-cta { transition: opacity .2s ease; transform: none; }
	.fleur-sticky-cta.is-visible { transform: none; }
}
@media (min-width: 768px) {
	.fleur-sticky-cta { left: 0; right: 0; bottom: 24px; width: fit-content; max-width: none; margin-inline: auto; padding: 15px 42px; }
}

/* ── tariffOnPayStep (v0.18.0): переключатель «частями / одним платежом» + один список тарифов ──
   Одна цифра на строку в выбранном режиме; кружки (выбор один), а не квадраты-чекбоксы;
   цены тем же Manrope, что подписи, — без смеси курсива с гротеском. */
.wp-block-fleur-register .fleur-register-pay__switch {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin: 0 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.wp-block-fleur-register .fleur-register-pay__seg {
	flex: 1 1 0;
	position: relative;
	cursor: pointer;
}
.wp-block-fleur-register .fleur-register-pay__seg input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.wp-block-fleur-register .fleur-register-pay__seg span {
	display: block;
	text-align: center;
	padding: 9px 10px;
	border-radius: 999px;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.62);
	transition: background-color 130ms ease, color 130ms ease;
}
.wp-block-fleur-register .fleur-register-pay__seg input:checked + span {
	background: #FF9CCD;
	color: #131B2B;
}
.wp-block-fleur-register .fleur-register-pay__seg input:focus-visible + span {
	outline: 2px solid #FF9CCD;
	outline-offset: 2px;
}
.wp-block-fleur-register .fleur-register-pay__tariffs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 14px;
}
.wp-block-fleur-register .fleur-register-pay__trow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
	text-align: left;
	transition: border-color 130ms ease, background-color 130ms ease;
}
.wp-block-fleur-register .fleur-register-pay__trow:hover { border-color: rgba(255, 156, 205, 0.5); }
.wp-block-fleur-register .fleur-register-pay__trow:has( input:checked ) {
	border-color: #FF9CCD;
	background: rgba(255, 156, 205, 0.12);
}
.wp-block-fleur-register .fleur-register-pay__trow input {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	background: transparent;
	cursor: pointer;
}
.wp-block-fleur-register .fleur-register-pay__trow input:checked {
	border-color: #FF9CCD;
	background: radial-gradient( circle, #FF9CCD 0 4.5px, transparent 5px );
}
.wp-block-fleur-register .fleur-register-pay__trow input:focus { outline: none; }
.wp-block-fleur-register .fleur-register-pay__trow input:focus-visible {
	outline: 2px solid #FF9CCD;
	outline-offset: 2px;
}
.wp-block-fleur-register .fleur-register-pay__tname {
	flex: 1 1 auto;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.86);
}
.wp-block-fleur-register .fleur-register-pay__tprice {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	color: #FF9CCD;
	white-space: nowrap;
}
.wp-block-fleur-register .fleur-register-pay__tariffs + .fleur-register-pay__after .fleur-register-pay__mode-note { margin-top: 0; }