.elementor-kit-8{--e-global-color-primary:#F2F5FA;--e-global-color-secondary:#4A5565;--e-global-color-text:#111111;--e-global-color-accent:#0033A0;--e-global-color-064b828:#F2F5FA;--e-global-color-2f977d8:#FBFBFC;--e-global-color-3424f8c:#E5EAF5;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */html { scroll-padding-top: 100px; /* Поменяйте 120px на высоту вашего меню */ } html { scroll-snap-type: y proximity; scroll-padding-top: 120px; /* Высота вашего меню */ } .snap-section { scroll-snap-align: start; } /* Custom CSS для стилизации Radio Buttons как кнопок (Класс: styled-button-radio) */ /* ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ КОНТРОЛЯ РАЗМЕРА И ПОЗИЦИИ */ :root { /* КОНТРОЛЬ РАЗМЕРА */ --icon-size: 1.55rem; /* Размер кружка: 22px -> 1.375rem */ --checkmark-scale: 0.8; /* Размер самой галочки */ --checkbox-border: 2px; /* Толщина границы */ /* 1. СДВИГ КРУЖКА ОТНОСИТЕЛЬНО ТЕКСТА (Двигает внешний круг) */ --offset-y: -5px; /* Начните с 0px или -1px */ --offset-x: 0px; /* Горизонтальный сдвиг кружка */ /* 🔥 2. КОРРЕКЦИЯ ЦЕНТРИРОВАНИЯ ГАЛОЧКИ ВНУТРИ КРУЖКА (Двигает только галочку) */ --checkmark-offset-y: 8px; /* Сдвиг Y галочки: -2px = 2px ВВЕРХ */ --checkmark-offset-x: 4px; /* 🔥 НОВОЕ: Сдвиг X галочки: 2px = 2px ВПРАВО, -2px = 2px ВЛЕВО */ } /* 1. Гарантируем, что ВСЕ КНОПКИ растягиваются на 100% (без изменений) */ .styled-button-radio .elementor-field-option { width: 100% !important; float: none !important; box-sizing: border-box !important; } /* 2. Скрытие стандартной радиокнопки (input) (без изменений) */ .styled-button-radio input[type="radio"] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 0.0625rem !important; height: 0.0625rem !important; clip: rect(0 0 0 0) !important; overflow: hidden !important; } /* 3. Стилизация метки (label) (без изменений) */ .styled-button-radio .pafe-checkbox-label { display: flex !important; justify-content: flex-start !important; align-items: center !important; align-content: center !important; width: 100% !important; padding: 1.25rem 1.5rem !important; gap: 1rem !important; border: var(--checkbox-border) solid #E5E7EB !important; border-radius: 1rem !important; cursor: pointer !important; transition: all 0.2s ease !important; font-size: 1.125rem !important; font-weight: 600 !important; color: #374151 !important; background: #FFFFFF !important; line-height: 1.3 !important; position: relative !important; /* Добавляем для позиционирования ::after */ } /* 4. КРУЖОК (Невыбранное состояние) - ::before */ .styled-button-radio .pafe-checkbox-label::before { content: '' !important; order: -1 !important; width: var(--icon-size) !important; height: var(--icon-size) !important; border: var(--checkbox-border) solid #D1D5DB !important; border-radius: 50% !important; background-color: transparent !important; flex-shrink: 0 !important; display: block !important; transition: border-color 0.2s, background-color 0.2s !important; /* КОРРЕКЦИЯ ПОЗИЦИИ КРУЖКА ОТНОСИТЕЛЬНО ТЕКСТА (статичное смещение) */ transform: translate(var(--offset-x), var(--offset-y)) !important; } /* Эффект Hover (без изменений) */ .styled-button-radio .pafe-checkbox-label:hover { border-color: #BFDBFE !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; } /* 5. ВЫБРАННОЕ СОСТОЯНИЕ (изменение цвета кружка) */ .styled-button-radio input:checked + .pafe-checkbox-label { border-color: #0033a0 !important; background-color: #F0F5FF !important; color: #0033a0 !important; box-shadow: 0 0 0 1px #0033a0 !important; } /* 5.1 СИНЯЯ ЗАЛИВКА КРУЖКА (::before) */ .styled-button-radio input:checked + .pafe-checkbox-label::before { background-color: #0033a0 !important; border-color: #0033a0 !important; content: '' !important; } /* 6. ГАЛОЧКА (::after) - Добавляем НОВЫЙ элемент ТОЛЬКО для галочки */ .styled-button-radio input:checked + .pafe-checkbox-label::after { content: url('data:image/svg+xml;utf8,') !important; /* Позиционирование галочки точно поверх кружка */ position: absolute !important; /* 🔥 ПОЗИЦИОНИРОВАНИЕ X: Рассчитываем позицию центра кружка */ left: calc(1.25rem + 0.5 * var(--icon-size) + var(--offset-x)) !important; /* 1.25rem (левый padding) + 0.5 * icon-size (центр кружка) + var(--offset-x) (сдвиг кружка) */ top: 50% !important; /* Устанавливаем точку отсчета для Y */ /* Добавляем Flex для центрирования */ display: flex !important; justify-content: center !important; align-items: center !important; /* 🔥 КОРРЕКЦИЯ ПОЗИЦИИ: Объединяем X и Y сдвиги */ transform: translate( calc(-50% + var(--checkmark-offset-x)), /* Компенсируем ширину иконки (50%) + сдвиг X */ calc(var(--offset-y) + var(--checkmark-offset-y) - 50%) /* Выравниваем по Y, учитывая сдвиг кружка и собственный сдвиг */ ) scale(var(--checkmark-scale)) !important; z-index: 2 !important; } /* 7. Стилизация кнопки "Далее" (Общий стиль) (без изменений) */ .elementor-button-wrapper .elementor-button { height: 3.4375rem !important; font-size: 1.125rem !important; font-weight: 600 !important; border-radius: 0.5rem !important; background-color: #0033a0 !important; border: none !important; box-shadow: none !important; width: 100% !important; display: block !important; } .elementor-button-wrapper .elementor-button .elementor-button-icon { order: 2 !important; margin-left: 0.5rem !important; margin-right: 0 !important; } @media (max-width: 767px) { /* 1. ПЕРЕОПРЕДЕЛЕНИЕ ГЛОБАЛЬНЫХ ПЕРЕМЕННЫХ */ :root { /* Уменьшаем размер кружка для экономии места */ --icon-size: 1.3rem !important; /* Было 1.55rem */ --checkmark-scale: 0.7 !important; /* Немного уменьшаем галочку */ /* Корректируем общее вертикальное выравнивание кружка, так как шрифт уменьшится */ --offset-y: -5px !important; /* Скорректировано с -5px */ /* Скорректируем смещение галочки, так как круг стал меньше */ --checkmark-offset-y: 7px !important; /* Скорректировано с 8px */ --checkmark-offset-x: 1px !important; /* Скорректировано с 4px */ } /* 2. УМЕНЬШЕНИЕ РАЗМЕРА ШРИФТА */ .styled-button-radio .pafe-checkbox-label { font-size: 0.95rem !important; /* Было 1.125rem (18px) -> стало 1rem (16px) */ padding: 1rem 1.25rem !important; /* Уменьшаем внутренний отступ кнопки */ gap: 0.55rem !important; /* Уменьшаем расстояние между кружком и текстом */ } /* 3. КОРРЕКЦИЯ ПОЗИЦИИ ГАЛОЧКИ НА МОБИЛЬНЫХ */ .styled-button-radio input:checked + .pafe-checkbox-label::after { /* ПЕРЕСЧЕТ: Рассчитываем позицию центра кружка на основе новых размеров */ left: calc(1.25rem + 0.5 * var(--icon-size) + var(--offset-x)) !important; /* Обратите внимание, здесь 1.25rem соответствует новому padding: 1rem 1.25rem! */ /* Если вы поменяли padding: 1.25rem, нужно это число изменить. */ } }/* End custom CSS */