/* ==================================================================
   1. ОСНОВНОЙ КОНТЕЙНЕР (БИРЮЗОВЫЙ БЛОК)
   ================================================================== */
.reasons-teal-block {
	position: relative;
	overflow: hidden; /* Обрезаем декор, если вылезает */
	
	/* Градиентный фон */
	background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
	
	border-radius: 20px;
	padding: 40px 50px;
	margin: 40px 0;
	
	color: #ffffff;
	box-shadow: 0 15px 40px rgba(26, 188, 156, 0.3);
}

/* Контент поверх декора */
.reasons-content {
	position: relative;
	z-index: 2;
	max-width: 65%; /* Место справа для круга */
}

/* Заголовок */
.reasons-teal-block h2 {
	color: #ffffff !important;
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 28px;
	font-weight: 700;
}

/* Вводный текст */
.reasons-lead {
	font-size: 16px;
	margin-bottom: 30px;
	opacity: 0.9;
}

/* Белые ссылки */
.link-white-underline {
	color: #ffffff !important;
	border-bottom: 1px dashed rgba(255,255,255, 0.6);
	text-decoration: none;
}
.link-white-underline:hover {
	border-bottom-style: solid;
	opacity: 0.8;
}


/* ==================================================================
   2. ФОНОВЫЙ ДЕКОР С АНИМАЦИЕЙ (СПАСАТЕЛЬНЫЙ КРУГ)
   ================================================================== */
.reasons-bg-decor {
	position: absolute;
	top: 10%;
	right: -50px;
	width: 500px;
	height: 500px;
	
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	/* Путь к картинке */
	background-image: url('/bitrix/templates/.default/images/suppport2-4.png');
	
	/* Начальное состояние */
	transform: translateY(0) rotate(-15deg);
	opacity: 0.8;
	filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
	
	z-index: 1;
	pointer-events: none;
	
	/* АНИМАЦИЯ ПЛАВАНИЯ */
	animation: floatDecor 6s ease-in-out infinite;
	will-change: transform;
}

/* Ключевые кадры анимации (Десктоп) */
@keyframes floatDecor {
	0% { transform: translateY(0) rotate(-15deg); }
	50% { transform: translateY(-20px) rotate(-10deg); } /* Всплывает и поворачивается */
	100% { transform: translateY(0) rotate(-15deg); }
}


/* ==================================================================
   3. СПИСОК С ТОЧКАМИ (FIX МАРКЕРОВ)
   ================================================================== */
.modern-check-list.white-mode li {
	position: relative;
	color: #ffffff !important;
	font-weight: 400;
	margin-bottom: 10px;
	padding-left: 25px !important;
}

.modern-check-list.white-mode li strong {
	color: #ffffff;
	font-weight: 700;
	border-bottom: 2px solid rgba(255,255,255,0.3);
}

/* ВАЖНО: Отключаем старый маркер (убираем "полумесяцы") */
.modern-check-list.white-mode li::after {
	display: none !important;
	content: none !important;
	background: none !important;
}

/* Рисуем новый белый маркер */
.modern-check-list.white-mode li::before {
	content: "" !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	
	background: #ffffff !important;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.6) !important;
	
	position: absolute !important;
	left: 0 !important;
	top: 9px !important;
	
	opacity: 1 !important;
	z-index: 10 !important;
	border: none !important;
}


/* ==================================================================
   4. ВАРИАНТ С ПЛИТКАМИ (GRID) — ЕСЛИ ИСПОЛЬЗУЕТЕ ЕГО
   ================================================================== */
.reasons-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-top: 30px;
}

.reason-card {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 15px 20px;
	display: flex;
	align-items: flex-start;
	gap: 15px;
	transition: all 0.3s ease;
	cursor: default;
}

.reason-card:hover {
	background: rgba(255, 255, 255, 0.3) !important; 
	
	transform: translateY(-5px) !important;
	box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}

.reason-icon {
	font-size: 20px;
	color: #ffffff;
	opacity: 0.8;
	flex-shrink: 0;
	margin-top: 2px;
}

.reason-text {
	font-size: 15px;
	line-height: 1.4;
	color: #ffffff;
}

.reason-text strong {
	font-weight: 700;
	border-bottom: 1px solid rgba(255,255,255,0.4);
}


/* ==================================================================
   5. АДАПТИВНОСТЬ (МОБИЛЬНЫЕ)
   ================================================================== */
@media (max-width: 768px) {
	.reasons-teal-block {
		padding: 30px 25px;
	}
	
	.reasons-content {
		max-width: 100%;
	}
	
	/* Упрощенная анимация и позиция для мобильных */
	.reasons-bg-decor {
		width: 250px;
		height: 250px;
		top: auto;
		bottom: -80px;
		right: -40px;
		opacity: 0.15;
		
		/* Переопределяем анимацию (без поворота) */
		animation-name: floatDecorMobile;
	}
	
	/* Сетка в одну колонку */
	.reasons-grid {
		grid-template-columns: 1fr;
	}
}

/* Анимация для мобильных (вверх-вниз без вращения) */
@keyframes floatDecorMobile {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-10px) rotate(0deg); }
}

/* ==================================================================
   МОДИФИКАТОР: 3 КОЛОНКИ (Только для нужных блоков)
   ================================================================== */

/* 1. Растягиваем контент на всю ширину (поверх круга) */
.reasons-teal-block.mode-3-cols .reasons-content {
	max-width: 100% !important; 
}

/* 2. Включаем сетку 3 колонки */
.reasons-teal-block.mode-3-cols .reasons-grid {
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 30px; /* Чуть больше воздуха между колонками */
}

/* --- Адаптивность для этого блока --- */

/* На средних экранах (ноутбуки) — 2 колонки */
@media (max-width: 1200px) {
	.reasons-teal-block.mode-3-cols .reasons-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* На телефонах — 1 колонка */
@media (max-width: 768px) {
	.reasons-teal-block.mode-3-cols .reasons-grid {
		grid-template-columns: 1fr !important;
	}
}

/* 1. Скрываем старые иконки */
.custom-icon-list li .fui-icon:before {
	content: none !important;
	display: none !important;
}

/* 2. Настраиваем сам кружок */
.custom-icon-list li .fui-icon {
	/* === ЖЕЛЕЗОБЕТОННАЯ ФИКСАЦИЯ РАЗМЕРА === */
	display: flex !important;
	
	/* Запрещаем сжатие */
	flex-shrink: 0 !important; 
	flex-grow: 0 !important;
	flex-basis: 44px !important;
	
	/* Жесткие размеры */
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	
	/* Делаем круг */
	border-radius: 50% !important;
	box-sizing: border-box !important;
	
	/* === ДИЗАЙН (Естественный стиль) === */
	/* Градиент сверху вниз */
	background: linear-gradient(180deg, #3FE0C4 0%, #129A80 100%);
	
	/* Тени и блики */
	box-shadow: 
		0 3px 6px rgba(0, 0, 0, 0.1),      /* Тень под кнопкой */
		inset 0 1px 0 rgba(255,255,255,0.5), /* Блик сверху */
		inset 0 -2px 0 rgba(0,0,0,0.1);      /* Объем снизу */
	
	border: 1px solid rgba(22, 160, 133, 0.5); 
	
	/* Позиционирование */
	align-items: center;
	justify-content: center;
	margin-right: 15px !important;
	margin-top: 0 !important; /* Убираем лишний отступ сверху */
	position: relative;
}

/* 3. Галочка внутри */
.custom-icon-list li .fui-icon:after {
	content: '';
	display: block;
	width: 11px;           
	height: 16px;         
	border: solid #ffffff;
	border-width: 0 5px 5px 0;
	transform: rotate(45deg);
	margin-bottom: 2px; /* Центровка */
	margin-left: 0;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,0.1));
}

/* 4. Выравнивание самого пункта списка, чтобы иконка не уезжала */
.custom-icon-list li {
	display: flex;
	align-items: center; /* Центрируем иконку относительно текста по вертикали */
}