/**
 * Elementor Pro Form: кастомный чекбокс (круг с обводкой), как на макете.
 *
 * Работает для разметки:
 * .elementor-field-option > input[type="checkbox"] + label
 *
 * Переменные (задайте на обёртке секции/колонки при светлом фоне):
 *   --noma-form-checkbox-ring: #fff;
 *   --noma-form-checkbox-fill: #fff;
 *   --noma-form-checkbox-label: #fff;
 */

.elementor-widget-form .elementor-field-type-checkbox .elementor-field-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin: 0;
}

.elementor-widget-form .elementor-field-type-checkbox .elementor-field-option input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.elementor-widget-form .elementor-field-type-checkbox .elementor-field-option label {
	position: relative;
	display: inline-block;
	padding: 0 0 0 1.25rem;
	margin: 0;
	cursor: pointer;
	font-weight: 700;
	line-height: 1.35;
	color: var(--noma-form-checkbox-label, #fff);
	user-select: none;
}

/* Круг-обводка */
.elementor-widget-form .elementor-field-type-checkbox .elementor-field-option label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border: 1px solid var(--noma-form-checkbox-ring, #fff);
	border-radius: 50%;
	background: transparent;
	flex-shrink: 0;
}

/* Внутренняя точка при включении */
.elementor-widget-form .elementor-field-type-checkbox .elementor-field-option input[type='checkbox']:checked + label::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--noma-form-checkbox-fill, #fff);
	pointer-events: none;
}

.elementor-widget-form .elementor-field-type-checkbox .elementor-field-option input[type='checkbox']:focus-visible + label::before {
	outline: 2px solid var(--noma-form-checkbox-ring, #fff);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   «Палочка» под кнопкой submit — как у кнопок корзины (.t-btnflex): вертикальная
   линия 1px, при наведении/фокусе стягивается в точку у кнопки.

   ОТДЕЛЬНЫЙ опт-ин класс: повесь `noma-form-stick` в Advanced → CSS Classes у
   виджета Form. Добавляет ТОЛЬКО линию, верстку/скин формы не трогает.
   Цвета — переменными (дефолт под тёмный фон; для светлого задай dot #151515):
     .noma-form-stick { --noma-form-stick-color:#848484; --noma-form-stick-dot:#fff; }
   ------------------------------------------------------------------------- */
.noma-form-stick .elementor-field-type-submit {
	position: relative;
	padding-bottom: 24px; /* отступ под линию (зазор 4 + линия 20) */
}

.noma-form-stick .elementor-field-type-submit::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 1px;
	height: 20px;
	background-color: var(--noma-form-stick-color, #848484);
	transition: width 0.3s ease, height 0.3s ease, bottom 0.3s ease,
		border-radius 0.3s ease, background-color 0.3s ease;
	pointer-events: none;
}

.noma-form-stick .elementor-field-type-submit:hover::after,
.noma-form-stick .elementor-field-type-submit:focus-within::after {
	width: 6px;
	height: 6px;
	bottom: 16px; /* точка у кнопки (верх линии) */
	border-radius: 50%;
	background-color: var(--noma-form-stick-dot, #ffffff);
}

/* Планшет: линия 30px (×1.5 к desktop), зазор и hover-bottom пропорционально */
@media (max-width: 1199px) {
	.noma-form-stick .elementor-field-type-submit {
		padding-bottom: 36px; /* зазор 6 + линия 30 */
	}
	.noma-form-stick .elementor-field-type-submit::after {
		height: 30px;
	}
	.noma-form-stick .elementor-field-type-submit:hover::after,
	.noma-form-stick .elementor-field-type-submit:focus-within::after {
		bottom: 24px;
	}
}

/* Мобила: как desktop — линия 20px */
@media (max-width: 767px) {
	.noma-form-stick .elementor-field-type-submit {
		padding-bottom: 24px;
	}
	.noma-form-stick .elementor-field-type-submit::after {
		height: 20px;
	}
	.noma-form-stick .elementor-field-type-submit:hover::after,
	.noma-form-stick .elementor-field-type-submit:focus-within::after {
		bottom: 16px;
	}
}