/* ===== ЛОКАЛЬНЫЕ ШРИФТЫ Cygre ===== */

/* Regular */
@font-face {
	font-family: 'Cygre';
	src: url('./fonts/Cygre.woff2') format('woff2'),
		url('./fonts/Cygre.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Medium */
@font-face {
	font-family: 'Cygre';
	src: url('./fonts/Cygre.woff2') format('woff2'),
		url('./fonts/Cygre.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* SemiBold */
@font-face {
	font-family: 'Cygre';
	src: url('./fonts/Cygre-SemiBold.woff2') format('woff2'),
		url('./fonts/Cygre-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Bold */
@font-face {
	font-family: 'Cygre';
	src: url('./fonts/Cygre.woff2') format('woff2'),
		url('./fonts/Cygre.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ===== ШРИФТ Inter ===== */

/* Inter SemiBold */
@font-face {
	font-family: 'Inter';
	src: url('./fonts/Inter-SemiBold.woff2') format('woff2'),
		url('./fonts/Inter-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Класс для шрифта Inter SemiBold */
.font-inter-semibold {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, sans-serif;
}

/* ===== ОСНОВНЫЕ СТИЛИ ===== */
body {
	font-family: 'Cygre', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, sans-serif;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #FFF;
}

.container-custom {
	max-width: 1160px;
	margin: 0 auto;
}

/* Классы для начертаний шрифта */
.text-regular {
	font-weight: 400;
}

.text-medium {
	font-weight: 500;
}

.text-semibold {
	font-weight: 600;
}

.text-bold {
	font-weight: 700;
}

/* Высота (Height) */
.h-0\.5 {
	height: 0.125rem;
}

.h-3 {
	height: 0.75rem;
}

.h-6 {
	height: 1.5rem;
}

.h-8 {
	height: 2rem;
}

.h-20 {
	height: 5rem;
}

.h-auto {
	height: auto;
}

.h-fit {
	height: fit-content;
}

.h-full {
	height: 100%;
}

.min-h-screen {
	min-height: 100vh;
}

/* Ширина (Width) */
.w-6 {
	width: 1.5rem;
}

.w-8 {
	width: 2rem;
}

.w-12 {
	width: 12px;
}

.w-20 {
	width: 5rem;
}

.w-30 {
	width: 30px;
}

.h-30 {
	width: 30px;
}

.w-32 {
	width: 8rem;
}

.w-150 {
	width: 150px;
}

.w-full {
	width: 100%;
}

.w-64 {
	width: 16rem;
}

.w-auto {
	width: auto;
}

/* Отступы (Margin) */
.ml-10 {
	margin-left: 2.5rem;
}

.ml-30 {
	margin-left: 30px;
}

.ml-1 {
	margin-left: 0.2rem;
}

.ml-5 {
	margin-left: 0.4rem;
}

.ml-2 {
	margin-left: 1rem;
}

.ml-3 {
	margin-left: 2rem;
}

.ml-4 {
	margin-left: 3rem;
}

.ml-18 {
	margin-left: 0.18rem;
}

.ml-10-b {
	margin-left: -10px;
}

.ml-15-b {
	margin-left: -15px;
}

.ml-6-b {
	margin-left: -6px !important;
}

.mr-10-b {
	margin-right: -10px;
}

.mr-2 {
	margin-right: 0.5rem;
}

.mr-1 {
	margin-right: 0.25rem;
}

.mt-2-b {
	margin-top: -2px !important;
}

.mt-8 {
	margin-top: 2rem;
}

.mt-10 {
	margin-top: 10px;
}

.mt-15 {
	margin-top: 15px;
}

.mt-20 {
	margin-top: 20px;
}

.mt-30 {
	margin-top: 30px;
}

.mt-35 {
	margin-top: 35px;
}

.mt-20-b {
	margin-top: -20px;
}

.mt-40-b {
	margin-top: -40px;
}

.mt-5-b {
	margin-top: -5px;
}

.mt-2-b {
	margin-top: -2px;
}

.mt-3-b {
	margin-top: -3px;
}

.mt-45 {
	margin-top: 45px;
}

.mt-100 {
	margin-top: 100px;
}

.mt-60 {
	margin-top: 60px;
}

.mb-1 {
	margin-bottom: 0.25rem;
}

.mb-2 {
	margin-bottom: 0.5rem;
}

.mb-3 {
	margin-bottom: 0.75rem;
}

.mb-3-b {
	margin-bottom: -3px;
}

.mb-4 {
	margin-bottom: 1rem;
}

.mb-5 {
	margin-bottom: 1.2rem;
}

.mb-6 {
	margin-bottom: 1.5rem;
}

.mb-7 {
	margin-bottom: 2rem;
}

.mb-8 {
	margin-bottom: 3rem;
}

.mb-10 {
	margin-bottom: 5rem;
}

.mb-15 {
	margin-bottom: -15px;
}

/* Отступы (Padding) */
.p-2 {
	padding: 0.5rem;
}

.p-4 {
	padding: 1rem;
}

.p-6 {
	padding: 1.5rem;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.py-6 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.pt-4 {
	padding-top: 1rem;
}

.pb-4 {
	padding-bottom: 1rem;
}

.px-2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.py-1 {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

/* Flexbox */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.items-center {
	align-items: center;
}

.items-start {
	align-items: flex-start;
}

.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.flex-grow {
	flex-grow: 1;
}

/* Grid */
.grid {
	display: grid;
}

.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Gap */
.gap-1 {
	gap: 0.3rem;
}

.gap-2 {
	gap: 0.5rem;
}

.gap-4 {
	gap: 1rem;
}

.gap-6 {
	gap: 1.5rem;
}

.gap-8 {
	gap: 3.5rem;
}

.gap-10 {
	gap: 6.8rem;
}

.ml-auto,.ml-auto-2 {
	margin-left: auto;
}

.space-y-1>*+* {
	margin-top: 0.25rem;
}

.space-y-2>*+* {
	margin-top: 0.5rem;
}

.space-y-4>*+* {
	margin-top: 1rem;
}

.space-x-2>*+* {
	margin-left: 0.5rem;
}

.space-x-4>*+* {
	margin-left: 1rem;
}

.space-x-6>*+* {
	margin-left: 1.5rem;
}

/* Цвета фона */
.bg-gray-50 {
	background-color: #F9FAFB;
}

.bg-gray-600 {
	background-color: #4B5563;
}

.bg-white {
	background-color: #FFFFFF;
}

.bg-blue-50 {
	background-color: #EFF6FF;
}

.bg-blue-100 {
	background-color: #DBEAFE;
}

.bg-blue-500 {
	background-color: #3B82F6;
}

.bg-blue-600 {
	background-color: #2563EB;
}

.bg-green-50 {
	background-color: #ECFDF5;
}

.bg-green-500 {
	background-color: #10B981;
}

.bg-red-50 {
	background-color: #FEF2F2;
}

.bg-red-500 {
	background-color: #EF4444;
}

.bg-red-600 {
	background-color: #DC2626;
}

.bg-red-700 {
	background-color: #F76A6A;
}

.bg-black {
	background-color: #000000;
}

/* Прозрачность */
.bg-opacity-50 {
	--tw-bg-opacity: 0.5;
}

/* Текстовые цвета */
.text-gray-500 {
	color: #6B7280;
}

.text-gray-600 {
	color: #4B5563;
}

.text-gray-700 {
	color: #374151;
}

.text-gray-800 {
	color: #1F2937;
}

.text-gray-900 {
	color: #111827;
}

.text-blue-600 {
	color: #2563EB;
}

.text-blue-700 {
	color: #1D4ED8;
}

.text-blue-800 {
	color: #1E40AF;
}

.text-green-600 {
	color: #059669;
}

.text-red-600 {
	color: #DC2626;
}

.text-red-700 {
	color: #B91C1C;
}

.text-red-900 {
	color: #F76A6A;;
}

.text-white {
	color: #FFFFFF;
}

/* Размеры текста */
.text-sm {
	font-size: 0.875rem;
}

.text-base {
	font-size: 1rem;
}

.text-lg {
	font-size: 1.125rem;
}

.text-xl {
	font-size: 1.25rem;
}

.text-2xl {
	font-size: 1.5rem;
}

.text-3xl {
	font-size: 1.875rem;
}

/* Насыщенность шрифта */
.font-medium {
	font-weight: 500;
}

.font-semibold {
	font-weight: 600;
}

.font-bold {
	font-weight: 700;
}

/* Оформление текста */
.underline {
	text-decoration: underline;
}

/* Transition classes */
.transition-all {
	transition: all 0.3s ease;
}

.transition {
	transition: all 0.2s ease;
}

.transition-transform {
	transition-property: transform;
}

.duration-300 {
	transition-duration: 300ms;
}

/* Border */
.rounded {
	border-radius: 0.25rem;
}

.rounded-lg {
	border-radius: 0.5rem;
}

.rounded-xl {
	border-radius: 0.75rem;
}

.rounded-xxl {
	border-radius: 1.75rem;
}

.rounded-full {
	border-radius: 9999px;
}

.border {
	border-width: 1px;
}

.border-l-4 {
	border-left-width: 4px;
}

.border-t {
	border-top-width: 1px;
}

.border-gray-200 {
	border-color: #E5E7EB;
}

.border-blue-600 {
	border-color: #2563EB;
}

.border-red-500 {
	border-color: #EF4444;
}

/* Тень */
.shadow-sm {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-lg {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px
		rgba(0, 0, 0, 0.05);
}

/* Позиционирование */
.fixed {
	position: fixed;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.inset-0 {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.top-0 {
	top: 0;
}

.left-0 {
	left: 0;
}

.-translate-x-full {
	transform: translateX(-100%);
}

/* Z-index */
.z-40 {
	z-index: 40;
}

.z-50 {
	z-index: 50;
}

/* Overflow */
.overflow-auto {
	overflow: auto;
}

.overflow-hidden {
	overflow: hidden;
}

/* Display */
.hidden {
	display: none;
}

.block {
	display: block;
}

/* Mobile Navigation Styles */
#mobileNavigation {
	transition: all 0.3s ease-in-out;
}

#mobileMenuButton span {
	transition: all 0.3s ease;
}

/* Hover states */
.hover\:text-gray-700:hover {
	color: #374151;
}

.hover\:text-gray-800:hover {
	color: #1F2937;
}

.hover\:bg-gray-50:hover {
	background-color: #F9FAFB;
}

.hover\:underline:hover {
	text-decoration: underline;
}

/* Responsive behavior */
@media ( min-width : 768px) {
	.md\:flex {
		display: flex;
	}
	.md\:hidden {
		display: none;
	}
	.md\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.md\:flex-row {
		flex-direction: row;
	}
	.md\:space-y-0>*+* {
		margin-top: 0;
	}
	.btn-exit, .btn-new-message, .btn-pay {
		display: block;
	}
	.link-profile {
		display: flex;
	}
}

@media ( min-width : 1024px) {
	.lg\:block {
		display: block;
	}
	.lg\:hidden {
		display: none;
	}
	.lg\:flex-row {
		flex-direction: row;
	}
	.lg\:w-1\/4 {
		width: 25%;
	}
	.lg\:w-3\/4 {
		width: 75%;
	}
	.lg\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#mobileNavigation {
		display: none !important;
	}
	.link-socials {
		margin-left: auto;
	}
}

@media ( min-width : 640px) {
	.sm\:flex-row {
		flex-direction: row;
	}
	.sm\:space-y-0>*+* {
		margin-top: 0;
	}
	.sm\:space-x-2>*+* {
		margin-left: 0.5rem;
	}
	.sm\:w-auto {
		width: auto;
	}
	.sm\:text-base {
		font-size: 1rem;
	}
	.sm\:text-right {
		text-align: right;
	}
	.sm\:items-center {
		align-items: center;
	}
	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sm\:inline {
		display: inline;
	}
}

.w-150 {
	width: 150px;
}

.h-20 {
	height: 20px;
}

.w-20 {
	width: 20px;
}

.h-13 {
	height: 13px;
}

.w-13 {
	width: 13px;
}

.ml-10 {
	margin-left: 10px;
}

.ml-20 {
	margin-left: 20px;
}

.ml-30 {
	margin-left: 30px;
}

.btn-exit {
	background-color: #34589A;
	border-radius: 40px;
	width: 110px;
}

.btn-new-message {
	border-color: #34589A;
	border-radius: 40px;
	background-color: #34589A;
}

.btn-pay {
	border-radius: 40px;
}

/* Исправленные стили для кнопки "Обновить кредитную историю" */
.btn-update-history {
	border-color: #34589A;
	border-radius: 40px;
	background-color: #34589A;
	height: 54px;
	padding: 12px 20px;
	margin-left: auto;
	margin-top: 50px;
	margin-bottom: auto;
	width: auto;
	min-width: 326px;
	max-width: 100%;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	box-sizing: border-box;
}

.btn-more-l {
	border-color: #34589A;
	border-radius: 40px;
	background-color: #34589A;
	height: 45px;
	padding: 12px 20px;
	margin-left: auto;
	width: auto;
	min-width: 147px;
	max-width: 100%;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	box-sizing: border-box;
}

.btn-pay-2 {
	min-width: 139px;
	font-size: 18px;
}

.btn-sign {
	max-width: 110px;
	max-height: 32px;
	font-size: 14px !important;
}

.form-update-history {
	min-width: auto;
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	max-width: 100%;
}

.btn-more {
	border-color: #34589A;
	border-radius: 40px;
}

.w-100 {
	width: 100%;
}

.w-100-px {
	width: 100px;
}

.min-w-180 {
	min-width: 180px;
}

/* Специальный медиа-запрос для разрешения ~752px */
@media ( max-width : 800px) and (min-width: 641px) {
	.btn-update-history {
		height: 48px;
		padding: 10px 16px;
		min-width: 180px;
		font-size: 13px;
		margin-top: 0;
	}
	.form-update-history {
		margin-left: auto;
		flex: 0 0 180px;
	}

	/* Уменьшаем отступы в контейнере */
	.flex-col.sm\:flex-row.gap-4.items-stretch {
		gap: 8px;
	}

	/* Уменьшаем минимальную ширину блоков */
	.min-w-180 {
		min-width: 140px;
	}

	/* Уменьшаем padding в блоках */
	.bg-white.rounded-xxl.p-4 {
		padding: 12px;
	}

	/* Уменьшаем шрифты в блоках */
	.bg-white.rounded-xxl.p-4 .f-s-18 {
		font-size: 16px;
	}
	.bg-white.rounded-xxl.p-4 .f-s-14 {
		font-size: 12px;
	}
}

@media ( max-width : 768px) {
	.btn-exit, .link-profile, .btn-new-message, .btn-pay {
		display: none;
	}
	.btn-exit-mob {
	    display: block;
	    width: 100%;
	}
	.btn-update-history {
		height: 48px;
		padding: 10px 20px;
		min-width: 100%;
		font-size: 14px;
		margin-left: 0;
		margin-top: 16px;
	}
	.form-update-history {
		margin-left: 0;
		width: 100%;
	}
}

/* Для очень узких экранов */
@media ( max-width : 640px) {
	.btn-update-history {
		height: 46px;
		padding: 10px 18px;
		min-width: 100%;
		font-size: 14px;
		margin-left: 0;
		margin-top: 16px;
	}
	.form-update-history {
		margin-left: 0;
		width: 100%;
	}
	.flex-col.sm\:flex-row.gap-4.items-stretch {
		flex-direction: column;
		gap: 16px;
	}
	.min-w-180 {
		min-width: 100%;
	}
}

/* Выравнивание иконки профиля */
.link-profile {
	align-items: center;
	gap: 10px;
}

.link-profile img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.link-profile span {
	line-height: 1;
	white-space: nowrap;
}

.text-color {
	color: #002853;
}

.f-s-44 {
	font-size: 44px;
}

.f-s-18 {
	font-size: 18px;
}

.f-s-10 {
	font-size: 10px;
}

.f-s-12 {
	font-size: 12px;
}

.f-s-13 {
	font-size: 13px;
}

.f-s-14 {
	font-size: 14px;
}

.f-s-15 {
	font-size: 15px;
}

.f-s-16 {
	font-size: 16px;
}

.f-s-20 {
	font-size: 20px;
}

.f-s-22 {
	font-size: 22px;
}

.f-s-32 {
	font-size: 32px;
}

.f-s-30 {
	font-size: 30px;
}

.f-s-64 {
	font-size: 64px;
}

.f-s-24 {
	font-size: 24px;
}

.f-s-26 {
	font-size: 26px;
}

.f-s-28 {
	font-size: 28px;
}

.f-s-40 {
	font-size: 40px;
}

.bg-color {
	background: #F7F9FB;
}

.text-color-g {
	color: #75CD1C;
}

.text-color-m {
	color: #34589A;
}

.bg-status {
	background-color: #34589A;
}

.bg-footer {
	background-color: #F7F9FB;
}

.text-chart {
	font-size: 8px;
	color: #747474;
}

.menu-active {
	background-color: #FFF;
}

/* Для мобильной версии профиля в навигации */
#mobileNavigation .link-profile {
	display: flex;
	align-items: center;
	gap: 10px;
}

#mobileNavigation .link-profile img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* Размытые границы */
.blur-border-sm {
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.blur-border {
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.blur-border-lg {
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* Стили для контейнера с полукругом и числами */
.chart-container {
	position: relative;
	min-width: 150px;
	min-height: 80px;
}

/* Дополнительные стили для позиционирования */
.absolute {
	position: absolute;
}

.left-0 {
	left: -3px;
}

.right-0 {
	right: -15px;
}

.top-0 {
	top: -10px;
}

.bottom-0 {
	bottom: -5px;
}

.bottom-20 {
	bottom: 20px;
}

.left-1\/2 {
	left: 50%;
}

.left-1\/3 {
	left: 32%;
}

.transform {
	transform: translateX(-50%);
}

.-translate-x-1\/2 {
	transform: translateX(-50%);
}

/* Дополнительные классы для позиционирования */
.top-1\/2 {
	top: 50%;
}

.top-1\/3 {
	top: 30%;
}

.-translate-y-1\/2 {
	transform: translateY(-20%);
}

.translate-y-full {
	transform: translateY(100%);
}

.mt-0 {
	margin-top: 0.13rem;
}

.mt-1 {
	margin-top: 0.25rem;
}

.mt-2 {
	margin-top: 0.5rem;
}

.text-rating {
	left: 30%;
	width: 60px;
}

/* Для комбинированных трансформаций */
.-translate-x-1\/2\.-translate-y-1\/2 {
	transform: translate(-50%, -50%);
}

.-translate-x-1\/2\.translate-y-full {
	transform: translate(-50%, 100%);
}

/* Стили для стрелки */
.rotate-180 {
	transform: rotate(180deg);
}

.left-8 {
	left: 2rem;
}

.bottom-2 {
	bottom: 0.5rem;
}

/* Если нужно более точное позиционирование, можно добавить */
.arrow-position {
	left: 35px;
	bottom: 10px;
}

/* Стили для плавного движения стрелки */
.arrow-position {
	transition: all 0.5s ease-in-out;
	will-change: transform, left, bottom;
}

/* Убедитесь, что стрелка поверх других элементов */
.arrow-position {
	z-index: 10;
}

/* Цвета для текста рейтинга */
.text-color-g {
	color: #75CD1C;
}

.text-yellow {
	color: #F59E0B;
}

.text-red {
	color: #EF4444;
}

/* Плавное изменение цвета */
.text-rating {
	transition: color 0.3s ease-in-out;
}

/* Добавьте в ваш CSS файл */
@media ( max-width : 640px) {
	#warningModal {
		align-items: flex-start;
		padding-top: 20px;
	}
	#warningModal>div {
		margin-top: auto;
		margin-bottom: auto;
	}
}

.tooltip-container {
	position: relative;
	display: inline-block;
}

.tooltip-content {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: #1f2937;
	color: white;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	margin-bottom: 10px;
	z-index: 1000;
	width: max-content;
	max-width: 350px;
	min-width: 200px;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	word-wrap: break-word;
	white-space: normal;
}

.tooltip-content::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1f2937;
}

.tooltip-container:hover .tooltip-content {
	opacity: 1;
	visibility: visible;
}

/* Для мобильных устройств */
@media ( max-width : 768px) {
	.tooltip-content {
		width: 280px;
		max-width: 280px;
		font-size: 13px;
		padding: 10px 12px;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.tooltip-content {
		width: 250px;
		max-width: 250px;
		left: 50%;
		transform: translateX(-50%);
	}
	.tooltip-content::after {
		left: 50%;
	}
}

/* Стили для модального окна */
.modal-overlay {
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(2px);
}

.rating-border {
	border: 1px solid rgba(138, 188, 232, 0.15);
}

/* Стили для статусного блока */
.status-block {
	width: 300px;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: 1.75rem;
	padding: 1.5rem;
}

.status-text {
	color: #667E98;
	font-weight: 400;
}

.status-title {
	font-size: 16px;
	color: #667E98;
	font-weight: 400;
}

.status-main {
	font-size: 14px;
	color: #667E98;
	font-weight: 400;
}

.status-sub {
	font-size: 12px;
	color: #667E98;
	font-weight: 400;
}

.status-button {
	background-color: #34589A;
	color: white;
	border-radius: 40px;
	padding: 8px 24px;
	font-size: 14px;
	font-weight: 600;
	width: 100%;
	transition: opacity 0.3s ease;
}

.status-button:hover {
	opacity: 0.9;
}

.status-icon {
	width: 15px;
	height: 15px;
	background: #75CD1C;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: -2px;
}

.status-icon svg {
	width: 7px;
	height: 7px;
}

/* Стили для выравнивания иконки и текста в одну линию */
.status-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: white;
	border-radius: 1.75rem;
	padding: 4px 12px;
	margin-bottom: 32px;
	max-width: 320px;
}

.status-badge-text {
	color: #667E98;
	font-size: 16px;
	font-weight: 400;
	white-space: nowrap;
}

@media ( max-width : 768px) {
	.status-badge-text {
		font-size: 12px;
	}
}

/* Стили для выравнивания кнопки и текста в одну линию */
.status-content-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
}

.status-text-content {
	flex: 1;
}

.status-hr {
	width: 100%;
	height: 1px;
	background-color: rgba(255, 255, 255);
	border: none;
	margin: 15px 0 50px;
}

.btn-my-b {
	width: 156px;
	height: 54px;
}

/* Стили для плавающей кнопки чата */
a[href*="/message/create"] {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	display: block;
	transition: all 0.3s ease;
	text-decoration: none;
}

a[href*="/message/create"]:hover {
	transform: translateY(-2px);
}

a[href*="/message/create"] img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

/* Адаптивность для мобильных устройств */
@media ( max-width : 768px) {
	a[href*="/message/create"] {
		bottom: 15px;
		right: 15px;
	}
	a[href*="/message/create"] img {
		width: 50px;
		height: 50px;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	a[href*="/message/create"] {
		bottom: 10px;
		right: 10px;
	}
	a[href*="/message/create"] img {
		width: 45px;
		height: 45px;
	}
}

/* Стили для блока вариантов урегулирования */
.settlement-option {
	transition: all 0.3s ease;
}

.settlement-option:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Адаптивность для мобильных устройств */
@media ( max-width : 768px) {
	.settlement-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.settlement-option {
		padding: 1rem;
	}
}

/* Для планшетов */
@media ( max-width : 1024px) and (min-width: 769px) {
	.settlement-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Стили для блока вариантов урегулирования */
.settlement-option {
	transition: all 0.3s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.settlement-option:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.border-blue-200 {
	border-color: rgba(138, 188, 232, 0.15);
}

.border-opacity-15 {
	opacity: 0.15;
}

.max-w-3xl {
	max-width: 48rem;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* Адаптивность для мобильных устройств */
@media ( max-width : 768px) {
	.bg-color.rounded-xxl.p-8 {
		padding: 1.5rem;
	}
	.settlement-option {
		margin-bottom: 1rem;
	}
}

/* Дополнительные стили для блока урегулирования */
.text-custom-gray {
	color: #667E98;
}

.w-6 {
	width: 24px;
}

.h-6 {
	height: 24px;
}

.w-10 {
	width: 44px;
}

.h-10 {
	height: 44px;
}

.w-9 {
	width: 9px;
}

.h-18 {
	height: 18px;
}

.mt-1 {
	margin-top: 0.25rem;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

/* Дополнительные стили для выравнивания */
.w-5 {
	width: 20px;
}

.h-5 {
	height: 20px;
}

.ml-8 {
	margin-left: 2rem;
}

.ml-16 {
	margin-left: 4rem;
}

.text-standart {
	margin-left: 5.9rem;
	margin-top: -30px;
}

.text-standart-l {
	margin-left: 4.4rem;
	margin-top: -30px;
}

.text-standart-n {
	margin-left: 4.3rem;
}

.text-standart-m {
	margin-left: 4.9rem;
}

/* Уменьшение размера тултипа для лучшего соответствия */
.tooltip-container .tooltip-content {
	min-width: 160px;
	font-size: 12px;
	padding: 8px 12px;
}

/* Стили для равномерного распределения элементов */
.flex-1 {
	flex: 1 1 0%;
}

.text-center {
	text-align: center;
}

.justify-between {
	justify-content: space-between;
}

.items-start {
	align-items: flex-start;
}

/* Адаптивность для мобильных устройств */
@media ( max-width : 768px) {
	.flex.justify-between.items-start.ml-8.mt-4 {
		flex-direction: column;
		gap: 2rem;
		margin-left: 0;
	}
	.flex.justify-between.items-start.ml-8.mt-4>div {
		flex: none;
		width: 100%;
	}
}

/* Стили для выравнивания текста */
.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

/* Гарантируем, что элементы занимают равную ширину */
.flex.justify-between.items-start.ml-8.mt-4>div {
	flex: 1;
}

/* Адаптивность для мобильных устройств */
@media ( max-width : 768px) {
	.flex.justify-between.items-start.ml-8.mt-4 {
		flex-direction: column;
		gap: 2rem;
		margin-left: 0;
	}
	.flex.justify-between.items-start.ml-8.mt-4>div {
		text-align: center !important;
		flex: none;
		width: 100%;
	}
}

/* ===== КАРТОЧКИ ВАРИАНТОВ УРЕГУЛИРОВАНИЯ - ВСЕГДА ОДНА КОЛОНКА ===== */
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-6 {
	grid-template-columns: 1fr;
	gap: 1rem;
}

/* Адаптивность для блока вариантов урегулирования */
@media ( max-width : 768px) {
	/* Уменьшаем отступы в основном блоке */
	.bg-color.rounded-xxl.p-8 {
		padding: 1.5rem;
	}

	/* Заголовок блока - выравнивание иконки и текста */
	.flex.items-start.gap-4.mb-6 {
		flex-direction: column;
		gap: 1rem;
	}
	.flex.items-start.gap-4.mb-6 img {
		margin-top: 0;
	}

	/* Текущее погашение - мобильная версия */
	.mb-6 .flex.items-center.gap-2.mb-2.ml-3 {
		margin-left: 0;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	.mb-6 .flex.items-center.gap-2.mb-2.ml-3 img {
		margin-top: 0;
	}

	/* Описание под заголовком */
	.f-s-14.text-regular.status-text.mb-7.settlement-description {
		margin-top: 0.5rem;
		text-align: left;
	}

	/* Блок с цифрами - преобразуем в колонку */
	.flex.justify-between.items-start.ml-8.mt-4 {
		flex-direction: column;
		margin-left: 0;
		gap: 1.5rem;
	}
	.flex.justify-between.items-start.ml-8.mt-4>div {
		text-align: center;
		width: 100%;
		padding: 0.75rem;
		background: #f8fafc;
		border-radius: 0.75rem;
	}

	/* Карточки вариантов - мобильная адаптация */
	.bg-white.rounded-xxl.p-6.border-2.border-blue-600.shadow-lg.relative.settlement-option
		{
		padding: 1rem;
	}

	/* Заголовок в карточках */
	.settlement-option .flex.items-center.gap-2.mb-2.ml-2 {
		margin-left: 0;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	.settlement-option .flex.items-center.gap-2.mb-2.ml-2 img {
		margin-top: 0;
	}

	/* Кнопка "Подробнее" в карточках */
	.btn-more-l {
		min-width: 120px;
		height: 40px;
		font-size: 12px;
		margin-top: 0.5rem !important;
		margin-right: auto;
	}

	/* Описание в карточках */
	.settlement-option .f-s-14.text-regular.status-text {
		margin-top: 0.5rem;
		text-align: left;
	}

	/* Блок с цифрами в карточках */
	.settlement-option .flex.justify-between.items-start.ml-2.mt-4 {
		flex-direction: column;
		margin-left: 0;
		gap: 1rem;
	}
	.settlement-option .flex.justify-between.items-start.ml-2.mt-4>div {
		text-align: center;
		width: 100%;
		padding: 0.75rem;
		background: #f8fafc;
		border-radius: 0.75rem;
	}

	/* Уменьшаем размер шрифтов для мобильных */
	.f-s-28 {
		font-size: 1.5rem;
	}
	.f-s-18 {
		font-size: 1rem;
	}
	.f-s-15, .f-s-14, .f-s-16 {
		font-size: 0.875rem;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.bg-color.rounded-xxl.p-8 {
		padding: 1rem;
	}
	.bg-white.rounded-xxl.p-6.border-2.border-blue-600.shadow-lg.relative.settlement-option
		{
		padding: 0.75rem;
	}
	.f-s-28 {
		font-size: 1.25rem;
	}
	.btn-more-l {
		min-width: 100px;
		height: 36px;
		font-size: 11px;
		padding: 8px 12px;
	}
}

/* Убираем кастомные margin для мобильных */
@media ( max-width : 768px) {
	.mb-7 {
		margin-bottom: 1.5rem;
	}
	hr.mb-6.ml-8, hr.mb-6.ml-2 {
		margin-left: 0;
		margin-bottom: 1.5rem;
	}
}

/* Универсальный класс для описания в блоке урегулирования */
.settlement-description {
	margin-left: 0;
	margin-top: 0.5rem;
	text-align: left;
}

/* Для десктопной версии - добавляем отступы только для описания */
@media ( min-width : 769px) {
	.settlement-description {
		margin-left: 4rem;
	}

	/* Восстанавливаем горизонтальное расположение блоков с цифрами на десктопе */
	.flex.justify-between.items-start.ml-8.mt-4, .settlement-option .flex.justify-between.items-start.ml-2.mt-4
		{
		flex-direction: row;
		gap: 1rem;
	}
	.flex.justify-between.items-start.ml-8.mt-4>div, .settlement-option .flex.justify-between.items-start.ml-2.mt-4>div
		{
		text-align: left;
		padding: 0;
		background: transparent;
		border-radius: 0;
	}

	/* Восстанавливаем нормальные размеры шрифтов на десктопе */
	.f-s-28 {
		font-size: 1.75rem;
	}
	.f-s-18 {
		font-size: 1.125rem;
	}

	/* Восстанавливаем нормальные отступы на десктопе */
	.bg-color.rounded-xxl.p-8 {
		padding: 2rem;
	}
	.bg-white.rounded-xxl.p-6.border-2.border-blue-600.shadow-lg.relative.settlement-option
		{
		padding: 1.5rem;
	}
	.btn-more-l {
		min-width: 147px;
		height: 45px;
		font-size: 14px;
		margin-top: 0 !important;
	}
}

.var-first-section {
	margin-right: 20px;
	margin-left: 31px;
}

/* ===== АДАПТАЦИЯ var-first-section ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ ===== */
@media ( max-width : 768px) {
	.var-first-section.flex.justify-between.items-start {
		flex-direction: column !important;
		margin-left: 0 !important;
		gap: 1rem !important;
		margin-right: 0 !important;
	}
	.var-first-section.flex.justify-between.items-start>.text-left {
		width: 100% !important;
		text-align: center !important;
		padding: 1rem !important;
		background: #f8fafc !important;
		border-radius: 12px !important;
		border: 1px solid #e5e7eb !important;
		margin-bottom: 0.5rem !important;
		box-sizing: border-box !important;
	}

	/* Убираем gap-10 на мобильных */
	.var-first-section.gap-10 {
		gap: 1rem !important;
	}

	/* Уменьшаем размер шрифтов */
	.var-first-section .f-s-28 {
		font-size: 1.5rem !important;
	}
	.var-first-section .f-s-14 {
		font-size: 0.875rem !important;
	}
}

/* ===== ВЫРАВНИВАНИЕ ВТОРОЙ ЛИНИИ (ОПИСАНИЯ) НА ДЕСКТОПЕ ===== */

/* Для основного блока "Текущее погашение" */
.var-a {
	margin-left: 5.9rem;
	margin-top: -1.7rem;
}

.var-b {
	margin-left: 4.3rem;
	margin-top: -1.7rem;
}

.var-c {
	margin-left: 4.8rem;
	margin-top: -1.9rem;
}

@media ( max-width : 768px) {
	.var-a {
		margin-left: 20px;
	}
	.var-b {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.var-c {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

.m-auto {
	margin-left: auto;
	margin-right: auto;
}

.m-auto-right {
	margin-right: auto;
}

.login-block {
	max-width: 600px;
}

/* Применение шрифта Cygre ко всем элементам */
* {
	font-family: 'Cygre', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, sans-serif;
}

/* ===== СТИЛИ ДЛЯ СТРАНИЦЫ ЛОГИНА ===== */

/* Контейнер для кнопок и ссылок в колонку */
.login-buttons-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

/* Стили для кнопок входа */
.button-gos, .button-bank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	padding: 12px 24px;
	border: 1px solid #34589A;
	border-radius: 40px;
	background-color: #34589A;
	color: white;
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
	gap: 12px;
	box-sizing: border-box;
}

.button-bank {
	background-color: #FFF;
	border: 0;
	color: #002853;
	transition: all 0.3s ease;
}

.button-gos:hover {
	background-color: #2a487a;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(52, 88, 154, 0.3);
}

.button-gos img, .button-bank img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* Стили для ссылки "Войти с логином и паролем" */
.a-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 300px;
	padding: 12px 24px;
	color: #34589A;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	text-align: center;
}

.a-link:hover {
	color: #2a487a;
	text-decoration: underline;
}

.a-link-password {
	justify-content: left;
	padding: 0 0;
}

.input-login {
	margin-top: -10px;
}

@media ( max-width : 768px) {
	.input-login {
		margin-top: -15px;
	}
	.input-login-e {
		margin-top: 0px;
	}
	.next-btn-1 {
		max-width: 100% !important;
	}
}

}
}
.input-login-e {
	margin-top: 10px;
}

/* Разделитель "Или" */
.login-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 1rem 0;
}

.login-divider .rectangle {
	flex: 1;
	height: 1px;
	background-color: #E5E7EB;
}

.login-divider .or-text {
	padding: 0 1rem;
	color: #6B7280;
	font-size: 18px;
	font-weight: 400;
}

/* Стили для чекбоксов */
.custom-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	max-width: 600px;
}

.login-checkbox {
	display: none;
}

.checkmark {
	width: 20px;
	height: 20px;
	border: 2px solid #34589A;
	border-radius: 4px;
	background: white;
	position: relative;
	flex-shrink: 0;
	margin-top: 2px;
	cursor: pointer;
}

.checkmark-reg {
	border: 2px solid #667E98;
	border-radius: 5px;
	margin-top: -2px;
}

.login-checkbox:checked+.checkmark {
	background-color: #34589A;
}

.login-checkbox:checked+.checkmark::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.a-label {
	color: #667E98;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	margin: 0;
}

.a-label-link {
	color: #34589A;
	text-decoration: none;
}

.a-label-link:hover {
	text-decoration: underline;
}

/* Отступы */
.mb20 {
	margin-bottom: 20px;
}

.mt40 {
	margin-top: 40px;
}

.mt20 {
	margin-top: 20px;
}

.ml10 {
	margin-left: 10px;
}

.ml15 {
	margin-left: 15px;
}

/* Адаптивность для мобильных устройств */
@media ( max-width : 768px) {
	.login-block {
		margin-top: 20px;
		padding: 0 1rem;
	}
	.button-gos, .button-bank, .a-link {
		max-width: 100%;
		font-size: 14px;
		padding: 10px 20px;
	}

	/* ЧЕКБОКСЫ ВСЕГДА В ОДНУ СТРОКУ НА МОБИЛЬНЫХ */
	.custom-checkbox {
		flex-direction: row; /* Всегда в строку */
		align-items: flex-start;
		gap: 10px;
	}
	.a-label {
		font-size: 13px;
		line-height: 1.3;
	}
	.f-s-40 {
		font-size: 32px;
	}
}

/* Для очень маленьких экранов - дополнительная адаптация */
@media ( max-width : 480px) {
	.custom-checkbox {
		gap: 8px;
	}
	.a-label {
		font-size: 12px;
		line-height: 1.2;
	}
	.checkmark {
		width: 18px;
		height: 18px;
		margin-top: 1px;
	}
	.login-checkbox:checked+.checkmark::after {
		left: 5px;
		top: 1px;
		width: 5px;
		height: 9px;
	}
	.checkmark-reg {
		margin-top: -4px;
	}
}

.back-link {
	display: flex;
	align-items: center;
}

.back-link-desc {
	display: flex;
	align-items: center;
}
.back-link-mob {
	display: none !important;
	margin-top: -20px;
	margin-bottom: 10px;
}

.title-break-mobile {
    word-break: break-word !important;
    hyphens: auto !important;
}

@media ( max-width : 768px) {
	.back-link-desc {
		display: none !important;
	}
	.back-link-mob {
		display: flex !important;
	}
	#anketa-form {
	    max-width: 310px !important;
	    margin-left: auto;
	    margin-right: auto;
	}
}

.error-message {
	display: none;
}

.button-bank.error, .button-bank.error:focus {
	border: 1px solid #EF4444 !important;
	outline: none !important;
}

/* Новые стили для страницы регистрации */
.form-header-row {
	display: flex;
	justify-content: space-between !important;
	align-items: center !important;
	width: 100% !important;
	margin-bottom: 1.5rem;
}

@media ( max-width : 768px) {
	.form-header-row {
		display: block;
		margin-bottom: 0;
		margin-top: 20px;
	}
	.form-header-row-3 {
		margin-bottom: 10px;
	}
}

.form-title-left {
	flex: 1 !important;
	text-align: left !important;
	margin: 0 !important;
	line-height: 1;
}

.step-indicator-right {
	display: flex;
	align-items: center !important;
	margin-left: auto !important;
}

.back-arrow-icon {
	width: 24px !important;
	height: 24px !important;
}

.step-text {
	margin-left: 8px !important;
	white-space: nowrap !important;
}

/* Стили для радио кнопок выбора пола */
.gender-radio {
	display: flex;
	align-items: center;
	justify-content: flex-start !important;
	gap: 2rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	width: 100% !important;
	align-self: flex-start !important;
	padding-left: 0;
}

.gender-radio>div {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.gender-radio-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 35px;
	border: 1px solid #34589A;
	outline: none;
	cursor: pointer;
	position: relative;
	background-color: white;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.gender-radio-input:checked {
	border-color: #34589A;
	background-color: white; /* Фон остается белым */
}

.gender-radio-input:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px; /* Изменено с 8px на 12px */
	height: 12px; /* Изменено с 8px на 12px */
	border-radius: 50%;
	background-color: #34589A; /* Изменено с white на #34589A */
}

.gender-radio-input:hover {
	border-color: #2a487a;
}

.gender-radio-input:checked:hover {
	border-color: #2a487a;
}

.gender-radio-input:checked:hover::after {
	background-color: #2a487a; /* Меняем цвет кружка при hover */
}

/* Для мобильных устройств */
@media ( max-width : 768px) {
	.gender-radio {
		gap: 1rem;
		flex-direction: row !important;
		justify-content: flex-start !important;
		margin-left: 0;
	}
	.gender-radio>div {
		width: auto;
		justify-content: flex-start;
	}
}

.form-sub-text {
	margin-bottom: -1rem !important;
}

/* ===== СТИЛИ ДЛЯ ПОЛЯ ДАТЫ ===== */

/* Общие стили для всех инпутов одинаковой ширины */
.w-full-input {
	width: 100% !important;
	box-sizing: border-box !important;
	max-width: 100% !important;
}

/* Стили для контейнера поля даты */
.date-input-container {
	position: relative;
	width: 100% !important;
}

/* Стили для видимого поля даты */
.date-display-input {
	width: 100% !important;
	padding-right: 60px !important; /* Место для иконки */
	text-align: left !important;
	box-sizing: border-box !important;
	cursor: pointer;
	background-color: white !important;
	color: #002853 !important;
	text-align-last: left !important;
	height: 54px !important;
	line-height: 54px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: 0;
}

/* Явное выравнивание текста влево */
.date-display-input, .button-bank.input-login {
	text-align: left !important;
	text-align-last: left !important;
	direction: ltr;
}

/* Стили для иконки календаря - ИСПРАВЛЕНО ВЫРАВНИВАНИЕ */
.calendar-icon-wrapper {
	position: absolute;
	right: 15px;
	top: 39%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	pointer-events: all;
	margin: 0;
	padding: 0;
}

.calendar-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
	margin-top: -10px;
}

/* Убираем стандартную иконку календаря */
input[type="date"] {
	display: none !important;
}

/* Скрытый datepicker для правильного позиционирования */
.hidden-datepicker {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 250px;
	height: 300px;
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
}

/* Для мобильных устройств */
@media ( max-width : 768px) {
	.date-display-input {
		padding-right: 50px !important;
		font-size: 14px !important;
		height: 48px !important;
		line-height: 48px !important;
	}
	.calendar-icon-wrapper {
		right: 12px;
		width: 20px;
		height: 20px;
	}
	.calendar-icon {
		width: 20px;
		height: 20px;
		margin-top: -20px;
	}
}

/* Для textarea специальные стили */
textarea.button-bank.input-login {
	height: auto;
	min-height: 100px !important;
	resize: vertical;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	line-height: 1.5 !important;
}

/* Убираем стрелки у number инпутов */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

/* Для Firefox дополнительно */
@
-moz-document url-prefix() { .date-display-input { text-align:left!important;
	
}

}

/* Явное указание направления текста для всех инпутов */
.button-bank.input-login {
	direction: ltr;
	unicode-bidi: embed;
}

/* Стили для datepicker - исправление позиционирования */
input[type="date"] {
	/* Это убирает стандартную иконку, но сохраняет функциональность */
	position: relative;
}

/* Для Webkit браузеров (Chrome, Safari) */
input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	color: transparent;
	background: transparent;
	cursor: pointer;
}

/* Скрытие datepicker который мы создаем динамически */
.temp-datepicker {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	z-index: 10000 !important;
	cursor: pointer !important;
}

/* Для мобильных - оптимизация */
@media ( max-width : 768px) {
	.date-display-input {
		/* Увеличиваем область клика для touch устройств */
		min-height: 44px; /* Минимальная высота для touch */
	}
	.calendar-icon-wrapper {
		/* Увеличиваем область клика иконки */
		width: 44px;
		height: 44px;
		right: 5px;
	}
}

/* Глобальные стили для всех textarea */
textarea {
	border-radius: 25px !important;
	padding: 15px 20px !important;
	font-family: 'Cygre', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	resize: vertical;
	border: 1px solid #d1d5db;
	transition: border-color 0.2s ease;
}

/* Для textarea с классом button-bank */
textarea.button-bank {
	background-color: #FFF;
	color: #002853;
	border: 0;
}

/* Фокус состояние */
textarea:focus {
	outline: none;
	border-color: #34589A;
	box-shadow: 0 0 0 2px rgba(52, 88, 154, 0.1);
}

/* Стили для выравнивания в мобильной версии */
@media ( max-width : 640px) {
	.flex.flex-col.sm\:flex-row.gap-4.mb-2 {
		flex-direction: column !important;
		gap: 1rem !important;
		align-items: stretch !important;
		width: 100% !important;
	}
	.flex.flex-col.sm\:flex-row.gap-4.mb-2>div {
		width: 100% !important;
		flex: none !important;
		text-align: left !important;
	}
	.flex.flex-col.sm\:flex-row.gap-4.mb-2 label {
		text-align: left !important;
		display: block !important;
		width: 100% !important;
	}
	.flex.flex-col.sm\:flex-row.gap-4.mb-2 textarea {
		width: 100% !important;
		text-align: left !important;
	}
}

/* Гарантируем выравнивание влево для всех элементов внутри login-buttons-container */
.login-buttons-container label, .login-buttons-container input,
	.login-buttons-container textarea {
	text-align: left !important;
}

/* Для десктопной версии - центрирование контента внутри flex-контейнера */
@media ( min-width : 641px) {
	.flex.flex-col.sm\:flex-row.gap-4.mb-2 {
		justify-content: space-between !important;
		align-items: flex-start !important;
	}
	.flex.flex-col.sm\:flex-row.gap-4.mb-2>div {
		text-align: left !important;
	}
}

/* Убираем любые центрирующие стили */
.text-center .login-buttons-container * {
	text-align: left !important;
}

/* Явное указание выравнивания для всех текстовых элементов в форме */
.login-buttons-container>* {
	text-align: left !important;
	align-self: flex-start !important;
}

/* Стили для textarea с закругленными углами */
textarea.button-bank.input-login {
	border-radius: 25px !important;
	padding: 15px 20px !important;
	resize: vertical;
	text-align: left !important;
}

/* Для высоты h-32 */
textarea.button-bank.input-login.h-32 {
	height: 128px !important;
	min-height: 128px !important;
}

@media ( min-width : 640px) {
	.sm\:ml-20 {
		margin-left: 20px;
	}
}

/* ===== СТИЛИ ДЛЯ ОВАЛЬНЫХ ЭЛЕМЕНТОВ ШАГОВ ===== */
.step-dot {
	width: 43px;
	height: 10px;
	border-radius: 35px;
	background-color: #8ABCE826; /* Цвет по умолчанию (неактивные) */
	transition: background-color 0.3s ease;
	flex-shrink: 0;
}

.step-dot-active {
	background-color: #75CD1C; /* Цвет активного элемента */
}

/* Контейнер для точек шагов - ИСПРАВЛЕНО */
.step-dots-container {
	display: flex;
	flex-wrap: wrap !important;
	gap: 0.25rem;
	max-width: 100%;
	overflow-x: auto;
	/* Добавляем горизонтальную прокрутку если не помещается */
	scrollbar-width: none; /* Скрываем скроллбар для Firefox */
	-ms-overflow-style: none; /* Скрываем скроллбар для IE/Edge */
	padding-bottom: 2px; /* Немного места для скролла */
}

/* Скрываем скроллбар для Webkit браузеров */
.step-dots-container::-webkit-scrollbar {
	display: none;
	height: 0;
}

/* Обертка для выравнивания */
.step-info-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

/* Для десктопов - ИСПРАВЛЕНО */
@media ( min-width : 1025px) {
	.step-info-wrapper {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.step-dots-container {
		justify-content: flex-end;
		flex-wrap: nowrap; /* Точно запрещаем перенос */
		overflow-x: visible; /* Убираем прокрутку на десктопе */
	}

	/* Уменьшаем ширину точек на десктопе чтобы все поместились */
	.step-dot {
		width: 40px;
	}
}

/* Для больших планшетов и маленьких десктопов */
@media ( max-width : 1024px) and (min-width: 769px) {
	.step-info-wrapper {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.step-dot {
		width: 35px;
		height: 9px;
	}
	.step-dots-container {
		gap: 0.2rem;
		flex-wrap: nowrap;
	}
}

/* Для планшетов */
@media ( max-width : 768px) and (min-width: 481px) {
	.step-info-wrapper {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.step-dot {
		width: 32px;
		height: 10px;
	}
	.step-dots-container {
		gap: 0.15rem;
		flex-wrap: nowrap;
	}
}

/* Для мобильных устройств - РАЗРЕШАЕМ ПЕРЕНОС */
@media ( max-width : 480px) {
	.step-info-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.step-dot {
		width: 30px;
		height: 10px;
	}
	.step-dots-container {
		flex-wrap: wrap; /* Разрешаем перенос только на мобильных */
		gap: 0.15rem;
		justify-content: flex-start;
		overflow-x: visible;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 360px) {
	.step-dot {
		width: 25px;
		height: 6px;
	}
	.step-dots-container {
		gap: 0.1rem;
	}
}

/* Альтернативное решение: уменьшаем количество отображаемых точек на мобильных */
@media ( max-width : 640px) {
	.step-dots-container {
		/* Показываем только первые 7 точек на очень маленьких экранах */
		max-width: calc(7 * ( 30px + 0.15rem));
	}
}

/* ===== СТИЛИ ДЛЯ ЗАГОЛОВКОВ В БЛОКЕ "МОЁ ДЕЛО" ===== */

/* Базовые размеры для десктопа */
.deal-title-line-1, .deal-title-line-2 {
	font-weight: 600;
	color: #002853;
	line-height: 1.2;
}

.deal-title-line-1 {
	font-size: 2rem; /* 32px - уменьшено с f-s-32 (1.75rem) */
	margin-bottom: -0.5rem; /* Уменьшено с mb-15 */
}

.deal-title-line-2 {
	font-size: 2rem; /* 32px */
	margin-bottom: 1.5rem; /* mb-4 */
}

/* Для больших экранов (от 1440px) */
@media ( min-width : 1440px) {
	.deal-title-line-1, .deal-title-line-2 {
		font-size: 2.25rem; /* 36px */
	}
}

/* Для десктопа (1025px - 1439px) */
@media ( max-width : 1439px) and (min-width: 1025px) {
	.deal-title-line-1, .deal-title-line-2 {
		font-size: 1.875rem; /* 30px */
	}
}

/* Для планшетов в горизонтальной ориентации (769px - 1024px) */
@media ( max-width : 1024px) and (min-width: 769px) {
	.deal-title-line-1, .deal-title-line-2 {
		font-size: 1.625rem; /* 26px */
	}
	.deal-title-line-1 {
		margin-bottom: -0.75rem;
	}
}

/* Для планшетов в вертикальной ориентации (481px - 768px) */
@media ( max-width : 768px) and (min-width: 481px) {
	.deal-title-line-1, .deal-title-line-2 {
		font-size: 1.375rem; /* 22px */
		line-height: 1.3;
	}
	.deal-title-line-1 {
		margin-bottom: -0.5rem;
	}
	.deal-title-line-2 {
		margin-bottom: 1.25rem;
	}
}

/* Для мобильных устройств (до 480px) */
@media ( max-width : 480px) {
	.deal-title-line-1, .deal-title-line-2 {
		font-size: 1.5rem; /* 18px */
		line-height: 1.2;
		text-align: left;
	}
	.deal-title-line-1 {
		margin-bottom: 0.1rem;
	}
	.deal-title-line-2 {
		margin-bottom: 1rem;
	}
}

/* Для очень маленьких экранов (до 360px) */
@media ( max-width : 360px) {
	.deal-title-line-1, .deal-title-line-2 {
		font-size: 1rem; /* 16px */
		line-height: 1.4;
	}
}

/* ===== СТИЛИ ДЛЯ БЛОКА С НОМЕРОМ ШАГА ===== */

/* Контейнер для номера шага */
.step-number-container {
	width: 97px;
	flex-shrink: 0;
}

/* Общие стили для номера шага */
.step-number {
	width: 97px;
	height: 52px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #667E98; /* Цвет по умолчанию (неактивный) */
	transition: background-color 0.3s ease;
}

/* Активный номер шага */
.step-number-active {
	background-color: #002853;
}

/* Текст номера шага */
.step-number-text {
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
	font-family: 'Cygre', sans-serif;
}

.step-number-text-mobile {
	font-size: 12px;
	font-weight: 600;
	color: #FFFFFF;
	font-family: 'Cygre', sans-serif;
}

/* Блок с контентом шага */
.step-content-block {
	width: 100%;
}

/* Заголовок шага */
.step-title {
	font-size: 16px;
	font-weight: 600;
	color: #002853;
}

/* Описание шага */
.step-description {
	font-size: 16px;
	color: #667E98;
	line-height: 1.6;
	max-width: 518px;
}

.step-description-ext {
	font-size: 14px;
}

/* Кнопка "Подробнее" в блоке шага */
.step-details-btn {
	margin-top: 0;
	max-width: 250px;
	margin-left: 0;
}

.step-details-btn-ext {
	background-color: #667E98;
}

/* Блок "Приведи друга" */
.friend-bonus-block {
	margin-top: 1.5rem;
	padding: 0;
}

/* Адаптивность для мобильных устройств */
@media ( max-width : 768px) {
	.step-details-btn {
		max-width: 100%;
	}
	.step-card {
		flex-direction: column;
	}
	.step-number-container {
		width: 100%;
		display: none;
		justify-content: center;
		margin-bottom: 1rem;
	}
	.step-number, .step-number-active {
		width: 100%;
		height: 25px;
	}
	.step-content-block {
		padding: 1rem;
	}
	.friend-bonus-block {
		margin-top: 1rem;
		padding: 0 0.5rem;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.step-number-text {
		font-size: 16px;
	}
	.step-title {
		font-size: 15px;
	}
	.step-description {
		font-size: 13px;
	}
}

.step-icon {
	margin-top: -1px;
}

.step-card {
	margin-bottom: -15px;
}

/* ===== СТИЛИ ДЛЯ ВЕРТИКАЛЬНОЙ ЛИНИИ МЕЖДУ ШАГАМИ ===== */
.steps-vertical-line {
	position: relative;
}

.step-card {
	position: relative;
	margin-bottom: 1.5rem;
}

.step-number-container {
	position: relative;
}

/* ===== СТИЛИ ДЛЯ МОБИЛЬНОГО НОМЕРА ШАГА ===== */
.step-number-container-mobile {
	width: 100% !important;
	margin-bottom: 20px;
	padding: 0 !important;
	border-radius: 1.75rem 1.75rem 0 0 !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
	align-self: stretch !important;
	display: none;
	width: 100%;
	height: 25px;
}

.step-number-container-mobile .step-number,
	.step-number-container-mobile .step-number-active {
	width: 100% !important;
	border-radius: 0 !important;
	height: 25px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

@media ( max-width : 768px) {
	/* Если .step-number-container-mobile всегда в первом .step-content-block */
	.step-content-block:first-child {
		padding-top: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.expandable-item, .step-content-hidden {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* Вертикальная линия между шагами */
.step-number-container::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: calc(100% + 1.5rem);
	background-color: #E7F0F9;
	z-index: 1;
}

/* Убираем линию у последнего элемента */
.step-card:last-child .step-number-container::after {
	display: none;
}

.step-number, .step-number-active {
	position: relative;
	z-index: 2;
}

/* ===== СТИЛИ ДЛЯ ССЫЛКИ "ПРИВЕДИ ДРУГА" ===== */
.friend-bonus-block a {
	color: #34589A;
	text-decoration: underline;
	font-weight: 600;
	transition: color 0.3s ease;
}

.friend-bonus-block a:hover {
	color: #2a487a;
	text-decoration: none;
}

/* Адаптивность для мобильных устройств */
@media ( max-width : 768px) {
	.step-number-container::after {
		display: none;
	}
	.step-card {
		margin-bottom: 2rem;
	}
	.step-number-container-mobile {
		display: block;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.step-card {
		margin-bottom: 1.5rem;
	}
	.friend-bonus-block a {
		font-size: 13px;
	}
}

.collapsed {
	max-height: 72px;
}

@media ( max-width : 768px) {
	.collapsed {
		max-height: 140px;
	}
}

.arrow-outlined {
	height: 10px;
	margin-top: 5px;
	margin-left: 4px;
}

/* Переопределение f-s-32 для мобильных устройств */
@media ( max-width : 767px) {
	.f-s-32 {
		font-size: 1.5rem !important; /* 24px на мобильных */
	}
}

/* Для планшетов */
@media ( min-width : 768px) and (max-width: 1023px) {
	.f-s-32 {
		font-size: 1.875rem !important; /* 30px на планшетах */
	}
}

/* Для десктопов */
@media ( min-width : 1024px) {
	.f-s-32 {
		font-size: 2rem !important; /* 32px на десктопе */
	}
}

/* Адаптивные стили для профиля */
@media ( max-width : 640px) {
	.profile-contact-block {
		padding: 1rem 0;
	}
	.profile-contact-block .f-s-20 {
		font-size: 18px;
		margin-bottom: 0.25rem;
	}
	.profile-contact-block .f-s-16 {
		font-size: 14px;
		margin-bottom: 0.5rem;
		font-weight: 600;
	}
}

/* Центрирование текста на мобильных */
@media ( max-width : 640px) {
	.flex.flex-col.sm\:flex-row.sm\:justify-between.sm\:items-center {
		text-align: center;
	}
	.flex.flex-col.sm\:flex-row.sm\:items-center {
		align-items: center;
	}
}

/* ===== КАСТОМНЫЕ КЛАССЫ ДЛЯ ВЫРАВНИВАНИЯ ПРОФИЛЯ ===== */

/* Контейнер для элементов профиля с фиксированной шириной */
.profile-contact-row {
	display: flex;
	flex-direction: column;
}

@media ( min-width : 640px) {
	.profile-contact-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Лейбл слева */
.profile-contact-label {
	flex-shrink: 0;
	width: 100%;
	margin-bottom: 0.5rem;
}

@media ( min-width : 640px) {
	.profile-contact-label {
		width: auto;
		margin-bottom: 0;
		min-width: 200px; /* Фиксированная ширина для лейблов */
	}
}

/* Контейнер с данными прижимается вправо */
.profile-contact-data {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media ( min-width : 640px) {
	.profile-contact-data {
		width: auto;
		justify-content: flex-end;
		gap: 1rem;
		margin-left: auto;
	}
}

/* Вариант с более сильным прижатием вправо */
.profile-contact-data-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Для мобильной версии - перенос */
@media ( max-width : 639px) {
	.profile-contact-data-right {
		width: 100%;
		justify-content: space-between;
	}
}

/* Более компактный вариант для широких экранов */
.profile-contact-compact {
	min-width: 300px;
	max-width: 400px;
	margin-left: auto;
}

@media ( max-width : 639px) {
	.profile-contact-compact {
		min-width: 100%;
		max-width: 100%;
		margin-left: 0;
	}
}

/* ===== СТИЛИ ДЛЯ ВЫРАВНИВАНИЯ БЛОКА ПРОФИЛЯ ===== */
.profile-info-mobile-center {
	width: 100%;
	text-align: center;
}

@media ( min-width : 640px) {
	.profile-info-mobile-center {
		width: auto;
		text-align: left;
		margin-left: 0.2rem;
	}
}

.profile-avatar-mobile-center {
	margin-left: auto;
	margin-right: auto;
}

@media ( min-width : 640px) {
	.profile-avatar-mobile-center {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ===== СТИЛИ ДЛЯ ДОКУМЕНТОВ В ДВЕ КОЛОНКИ ===== */
.document-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.document-column-left {
	flex: 1;
	text-align: left;
	margin-right: 1rem;
}

.document-column-right {
	flex: 1;
	text-align: right;
	margin-left: auto;
}

/* Для десктопа - две равные колонки */
@media ( min-width : 641px) {
	.document-row {
		justify-content: space-between;
	}
	.document-column-left, .document-column-right {
		flex: 0 1 auto;
		/*width: 50%;*/
		max-width: 50%;
	}
	.document-column-left {
		text-align: left;
	}
	.document-column-right {
		text-align: right;
	}
}

/* Для мобильных - преобразуем в колонку */
@media ( max-width : 640px) {
	.document-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.document-column-left, .document-column-right {
		width: 100%;
		max-width: 100%;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.document-column-right {
		margin-left: 0;
		text-align: center;
	}
}

.text-left-d {
	text-align: left;
}

@media ( max-width : 640px) {
	.text-left-d {
		text-align: center;
	}
}

.hr-active {
	border-top: 1px solid #002853;
}

.subtitle {
	max-width: 450px;
}

.left-70 {
	width: 70%;
	max-width: 70%;
}

.right-30 {
	width: 30%;
	max-width: 30%;
}

.left-60 {
	width: 60%;
	max-width: 60%;
}

.right-40 {
	width: 40%;
	max-width: 40%;
}

.left-80 {
	width: 80%;
	max-width: 80%;
}

.right-20 {
	width: 20%;
	max-width: 20%;
}

/* ===== АЛЬТЕРНАТИВНЫЙ РАСЧЕТ ПРОГРЕСС-КРУГА ===== */
.progress-circle-calculated {
	width: 138px;
	height: 138px;
	border-radius: 50%;
	background: conic-gradient(from 180deg,
		/* Начинаем снизу (270 градусов = 6 часов) */
        #75CD1C 0deg calc(3.6deg * var(--progress-percentage, 0)),
		#E7F0F9 calc(3.6deg * var(--progress-percentage, 0)) 360deg);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.progress-circle-calculated::before {
	content: '';
	position: absolute;
	width: 122px; /* 138px - (8px * 2) = 122px */
	height: 122px;
	background: white;
	border-radius: 50%;
	z-index: 1;
	top: 8px;
	left: 8px;
}

.progress-circle-content {
	position: relative;
	z-index: 2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Fallback для браузеров, которые не поддерживают 'from' в conic-gradient */
@
supports not (background: conic-gradient(from 180deg, #75CD1C 0 %,
	#E7F0F9 100 %)) { .progress-circle-calculated { background:conic-gradient(#E7F0F90degcalc
	(360deg - (3.6deg * var(--progress-percentage, 0))), #75CD1Ccalc (360deg
	- (3.6deg * var(--progress-percentage, 0)))360deg);
	transform: rotate(90deg);
}

.progress-circle-calculated .progress-circle-content {
	transform: rotate(-90deg);
}

}

/* Контейнер для прогресс-круга */
.progress-circle-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 138px;
	height: 138px;
	margin: 0 auto;
}

/* Стили для кнопки btn-pay-2 */
.btn-pay-2 {
	background-color: #34589A;
	color: white;
	border: none;
	border-radius: 40px;
	padding: 12px 24px;
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	min-width: 139px;
}

.btn-pay-2:hover {
	background-color: #2a487a;
	transform: translateY(-2px);
}

.btn-call {
	background-color: #FFF;
	color: #34589A;
	font-weight: 600;
}

.btn-call:hover {
	background-color: #FFF;
	transform: translateY(-2px);
}

/* ===== АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ ===== */
@media ( max-width : 640px) {
	/* Центрирование всего блока на мобильных */
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-6 {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* Центрирование прогресс-круга на мобильных */
	.progress-circle-container {
		margin: 0 auto 1.5rem auto;
		display: flex;
		justify-content: center;
		margin-left: -15px;
	}

	/* Центрирование кнопки btn-pay-2 на мобильных */
	.btn-pay-2 {
		width: 100%;
		max-width: 100%;
		margin: 1rem auto 0 auto;
		display: flex;
		justify-content: center;
	}
	.btn-call {
		margin-left: -45px;
	}
	.btn-put-anketa {
		margin-left: 0;
	}
	.subtitle-extra {
		text-align: center;
	}
	/* Реорганизация блоков на мобильных */
	.document-row {
		flex-direction: column;
		gap: 1.5rem;
		align-items: center;
		width: 100%;
	}
	.document-column-left, .document-column-right {
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Центрирование текста в правом блоке */
	.document-column-right.right-30 {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 1rem;
	}

	/* Центрирование внутренних блоков */
	.document-row .document-row {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		width: 100%;
	}
	.right-30, .right-20, .right-40, .left-60 {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 1.5rem;
	}
	.left-70.ml-4, .left-80.ml-4 {
		margin-left: 0 !important;
		width: 100%;
		text-align: center;
	}

	/* Центрирование всех текстовых элементов */
	.f-s-16.text-regular.text-custom-gray, .f-s-20.text-semibold.text-color
		{
		text-align: center;
		width: 100%;
	}
}

/* Для планшетов (640px - 768px) */
@media ( min-width : 641px) and (max-width: 768px) {
	.btn-pay-2 {
		width: auto;
		min-width: 120px;
	}
	.progress-circle-container {
		margin: 0 auto;
	}
}

/* Для десктопной версии */
@media ( min-width : 769px) {
	.btn-pay-2 {
		margin-top: 80px;
		margin-right: -20px;
		width: auto;
	}
	.btn-put-anketa, .btn-sign, .btn-call {
		margin-top: 0;
		margin-right: 0;
	}
	.progress-circle-container {
		margin: 0;
	}
	.document-column-right.right-30 {
		display: flex;
		justify-content: flex-end;
	}
}

/* Кастомные стили для равномерного распределения */
.payment-steps-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start; /* Изменено с center на flex-start */
	width: 100%;
	gap: 20px;
}

.payment-step-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.payment-step-number {
	font-size: 1rem;
	font-weight: 400;
	color: #667E98;
	margin-bottom: 4px;
}

.payment-step-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #002853;
	line-height: 1.4;
}

.payment-step-right {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 40px;
}

.payment-step-amount, .payment-step-date {
	font-size: 1.25rem;
	font-weight: 600;
	color: #002853;
	white-space: nowrap;
}

.payment-step-status {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Мобильная версия - колонка */
@media ( max-width : 640px) {
	.payment-steps-container {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.payment-step-left {
		width: 100%;
		margin-bottom: 8px;
	}
	.payment-step-number {
		margin-bottom: 8px;
		text-align: left;
	}
	.payment-step-title {
		font-size: 1.125rem;
		margin-bottom: 16px;
		text-align: left;
	}
	.payment-step-right {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		width: 100%;
	}
	.payment-step-info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		gap: 16px;
	}
	.payment-step-amount, .payment-step-date {
		font-size: 1.125rem;
		white-space: normal;
		flex: 1;
	}
	.payment-step-status {
		justify-content: center; /* Центрирование на мобильных */
		width: 100%;
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid #E7F0F9;
	}
}

/* Для планшетов (641px-768px) */
@media ( min-width : 641px) and (max-width: 768px) {
	.payment-step-right {
		gap: 20px;
	}
	.payment-step-amount, .payment-step-date {
		font-size: 1.125rem;
	}
}

/* ===== СТИЛИ ДЛЯ КОМПАКТНОГО РАСПОЛОЖЕНИЯ ШАГОВ ОПЛАТЫ ===== */

/* Компактный контейнер для шагов оплаты */
.payment-steps-compact {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	gap: 10px;
}

/* Левая часть с номером и названием в одной строке на десктопе */
.payment-step-left-compact {
	display: flex;
	align-items: flex-start;
	/* Изменено на flex-start для выравнивания по верху */
	gap: 10px;
	flex: 1;
	min-width: 0;
}

/* Номер шага - компактный */
.payment-step-number-compact {
	font-size: 1rem;
	font-weight: 400;
	color: #667E98;
	flex-shrink: 0;
	line-height: 1.2;
	margin-top: 4px; /* Выравнивание по базовой линии с текстом */
}

/* Название шага - компактный */
.payment-step-title-compact {
	font-size: 1.25rem;
	font-weight: 600;
	color: #002853;
	line-height: 1.3;
	flex: 1;
}

/* Правая часть с данными */
.payment-step-right-compact {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 40px;
}

/* Мобильная версия */
@media ( max-width : 640px) {
	.payment-steps-compact {
		flex-direction: column;
		gap: 16px;
	}
	.payment-step-left-compact {
		flex-direction: column; /* Меняем на колонку на мобильных */
		gap: 4px; /* Минимальный отступ между номером и названием */
		width: 100%;
		margin-bottom: 0;
	}
	.payment-step-number-compact {
		font-size: 0.875rem;
		margin-top: 0;
		margin-bottom: 2px;
		order: 1; /* Номер будет сверху */
	}
	.payment-step-title-compact {
		font-size: 1.125rem;
		order: 2; /* Название будет снизу */
		width: 100%;
		line-height: 1.4;
	}
	.payment-step-right-compact {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		width: 100%;
		margin-top: 8px;
		order: 3; /* Правая часть будет последней */
	}
	.payment-step-right-compact .payment-step-info-row {
		display: flex;
		justify-content: space-between;
		width: 100%;
		gap: 16px;
		flex-direction: row;
	}
	.payment-step-status {
		display: flex;
		align-items: center;
		justify-content: flex-start; /* Выравнивание по левому краю */
		gap: 8px;
		width: 100%;
		margin-top: 8px;
		padding-top: 12px;
		border-top: 1px solid #E7F0F9;
	}
}

/* Для планшетов (641px-768px) */
@media ( min-width : 641px) and (max-width: 768px) {
	.payment-step-right-compact {
		gap: 20px;
	}
}

/* Строка с информацией о платеже */
.payment-step-info-row {
	display: flex;
	gap: 40px;
}

@media ( max-width : 640px) {
	.payment-step-info-row {
		flex-direction: column;
		gap: 8px;
	}
	.payment-step-amount, .payment-step-date {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 1.125rem;
	}
	.payment-step-amount::before {
		content: "Сумма:";
		font-weight: 400;
		color: #667E98;
		font-size: 0.875rem;
	}
	.payment-step-date::before {
		content: "Дата:";
		font-weight: 400;
		color: #667E98;
		font-size: 0.875rem;
	}
}

/* ===== СТИЛИ ДЛЯ БЛОКА ДОПОЛНИТЕЛЬНЫХ ОПЦИЙ ===== */

/* Контейнер для блока опции - ВЫСОТА 52PX */
.extra-option-container {
	height: 52px;
	display: flex;
	align-items: center;
	padding: 0 1.5rem;
	background: #F7F9FB;
	border-radius: 1.75rem;
	margin-bottom: 1.2rem;
	width: 100%;
	box-sizing: border-box;
}

/* Контейнер для элементов опции в одну линию */
.extra-option-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

/* Стили для чекбокса */
.extra-option-checkbox {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	border: 1px solid #667E98;
	background-color: white;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: all 0.3s ease;
}

/* Отмеченный чекбокс */
.extra-option-checkbox:checked {
	border-color: #34589A;
	background-color: #34589A;
}

/* Галочка в отмеченном чекбоксе - 21px */
.extra-option-checkbox:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 21px;
	height: 21px;
	background-image:
		url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.1875 5.90625L8.53125 13.5625L4.8125 9.84375' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Текст заголовка */
.extra-option-title {
	font-size: 18px;
	font-weight: 600;
	color: #002853;
	flex: 1;
	cursor: pointer;
	line-height: 1.2;
	margin-top: 3px;
	margin-left: 5px;
}

/* Группа рекомендации и иконки */
.extra-option-recommendation {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	margin-left: auto;
}

/* Текст "Рекомендуется" */
.recommendation-text {
	font-size: 14px;
	font-weight: 400;
	color: #75CD1C;
	white-space: nowrap;
	line-height: 1;
}

/* Иконка галочки */
.recommendation-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

/* Кнопка "Подписать" */
.btn-sign {
	min-width: 110px;
	height: 32px;
	font-size: 14px !important;
	padding: 6px 16px;
	background-color: #34589A;
	color: white;
	border: none;
	border-radius: 40px;
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.btn-sign:hover {
	background-color: #2a487a;
	transform: translateY(-2px);
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media ( max-width : 768px) {
	.extra-option-container {
		height: auto;
		min-height: auto;
		padding: 1.5rem;
		flex-direction: column;
		align-items: center;
	}
	.extra-option-row {
		flex-direction: column;
		align-items: start;
		text-align: left;
		gap: 1rem;
	}
	.extra-option-title {
		text-align: left;
		order: 2;
		width: 100%;
		margin-top: 0;
	}
	.extra-option-checkbox {
		order: 1;
		width: 36px;
		height: 36px;
		margin-bottom: 0.5rem;
	}

	/* Галочка на мобильных */
	.extra-option-checkbox:checked::after {
		width: 22px;
		height: 22px;
		background-image:
			url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.9375 6.1875L8.9375 14.1875L5.0625 10.3125' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
	.extra-option-recommendation {
		order: 3;
		margin-left: 0;
		width: 100%;
	}
	.btn-sign {
		order: 4;
		width: 100%;
		max-width: 200px;
		margin-top: 1rem;
	}

	/* Для очень маленьких экранов */
	@media ( max-width : 480px) {
		.extra-option-container {
			padding: 1rem;
		}
		.extra-option-checkbox {
			width: 32px;
			height: 32px;
		}
		.extra-option-checkbox:checked::after {
			width: 18px;
			height: 18px;
			background-image:
				url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.875 5.0625L7.3125 11.625L4.125 8.4375' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		}
		.extra-option-title {
			font-size: 16px;
		}
		.recommendation-text {
			font-size: 12px;
		}
		.recommendation-icon {
			width: 20px;
			height: 20px;
		}
	}
}

/* Для планшетов */
@media ( min-width : 769px) and (max-width: 1024px) {
	.extra-option-container {
		height: 48px; /* Немного меньше на планшетах */
		padding: 0 1rem;
	}
	.extra-option-row {
		gap: 0.75rem;
	}
	.extra-option-title {
		font-size: 16px;
	}
	.btn-sign {
		min-width: 100px;
		font-size: 13px !important;
	}
}

.extra-option-inactive {
	color: #667E98;
}

/* Альтернативное решение - добавляем линию через псевдоэлемент к правому блоку */
.document-row.mb-8 .document-column-left:nth-child(2) {
	position: relative;
	padding-left: 2rem;
}

.document-row.mb-8 .document-column-left:nth-child(2)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background-color: #E7F0F9;
}

.extra-option-checkbox-ext {
	margin-left: 3rem;
}

/* Для мобильных устройств */
@media ( max-width : 768px) {
	.document-row.mb-8 .document-column-left:nth-child(2) {
		padding-left: 0;
		padding-top: 1.5rem;
		margin-top: 1.5rem;
	}
	.document-row.mb-8 .document-column-left:nth-child(2)::before {
		display: none;
	}
	.document-row.mb-8 .document-column-left:nth-child(2)::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #E7F0F9;
	}
	.extra-option-checkbox-ext {
		margin-left: 0;
	}
}

.js_arrow {
	transition: transform 0.3s ease;
}

/* ===== СТИЛИ ДЛЯ ВКЛАДОК (TABS) ===== */
.tab-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 185px;
	height: 52px;
	border-radius: 15px;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid #667E98;
	background-color: transparent;
	color: #667E98;
	text-decoration: none;
	box-sizing: border-box;
}

.tab-link-active {
	background-color: #002853;
	color: #FFFFFF;
	border-color: #002853;
	font-weight: 600;
}

.tab-link:not(.tab-link-active):hover {
	background-color: rgba(0, 40, 83, 0.05);
}

/* Контейнер для табов */
.tabs-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: flex-start;
	align-items: center;
}

@media ( max-width : 768px) {
	.tabs-container {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}
	.tab-link {
		width: 100%;
		margin-bottom: 0;
	}
}

@media ( min-width : 769px) and (max-width: 1024px) {
	.tab-link {
		width: 180px;
	}
}

@media ( min-width : 1025px) {
	.tabs-container {
		gap: 0.75rem;
	}
}

.doc-image {
	max-height: 406px;
	width: 379px;
	object-fit: cover;
	border-radius: 25px;
	display: block;
}

/* Адаптивность */
@media ( max-width : 768px) {
	.doc-image {
		max-height: 300px;
		width: 100%;
		max-width: 379px;
		margin: 0 auto;
	}
}

.document-column-left-ext {
	margin-right: 0.5rem;
}

.article-title {
	max-width: 523px;
	line-height: 1.2;
}

.bonus-title {
	max-width: 610px;
	line-height: 1.2;
}

.bonus-title-card {
	max-width: 443px;
	line-height: 1.2;
}

.start-btn {
	max-width: 390px;
}

/* ===== СТИЛИ ДЛЯ FAQ АККОРДЕОНА ===== */

/* Кнопка развертывания */
.expand-faq-button {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: #34589A;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0;
	border: none;
	outline: none;
}

/* Знак "+" внутри кнопки */
.expand-faq-plus {
	color: white;
	font-size: 60px;
	font-weight: 400;
	transition: transform 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -2px;
	margin-left: 1px;
}

.expand-anketa-doc-button {
	width: 28px;
	height: 28px;
}

.expand-anketa-doc-plus {
	font-size: 40px;
}

/* Повернутое состояние "+" (45 градусов) */
.expand-faq-plus.rotated {
	transform: rotate(45deg);
}

/* Анимация для контента */
.faq-content {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s
		ease;
}

.faq-content.expanded {
	max-height: 1000px;
	opacity: 1;
	margin-top: 1rem;
}

/* Адаптивность */
@media ( max-width : 768px) {
	.expand-faq-button {
		width: 40px;
		height: 40px;
	}
	.expand-faq-plus {
		font-size: 50px;
		margin-left: 0;
	}
}

@media ( max-width : 480px) {
	.expand-faq-button {
		width: 24px;
		height: 24px;
	}
	.expand-faq-plus {
		font-size: 35px;
		margin-left: 0;
	}
}

.anketa-input-title {
	max-width: 371px;
	line-height: 1.2;
}

.anketa-select {
	/* Увеличиваем общий размер */
	padding: 10px;
	font-size: 16px;
	color: #667E98;
	/* Кастомные стрелки через background-image */
	background-image: url('/new/img/select_arrow.png');
	background-repeat: no-repeat;
	background-position: right 20px center;
	/* Убираем стандартную стрелку */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px; /* Добавляем место для стрелки */
}

.anketa-select-mini {
	background-image: url('/new/img/weui_arrow-outlined.png');
	background-position: right 15px center;
}

.next-btn {
	max-width: 160px;
	float: right;
}

.get-btn {
	float: left;
}

.input-anketa {
	background: #F7F9FB;
	color: #002853;
	font-size: 16px;
}

.add-more {
	min-width: 120px;
	margin-top: -10px;
}

.del-btn {
	transform: rotate(45deg);
}

/* ===== СТИЛИ ДЛЯ КНОПОК ДА/НЕТ ===== */

/* Общие стили для кнопок да/нет */
.yes-no-btn {
	width: 54px;
	height: 54px;
	border-radius: 15px;
	border: 1px solid;
	font-size: 14px;
	font-family: 'Cygre', sans-serif;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
}

/* Кнопка "Да" - невыбранное состояние */
.yes-btn.yes-no-not-selected {
	background-color: transparent;
	border-color: #34589A;
	color: #34589A;
}

/* Кнопка "Да" - выбранное состояние */
.yes-btn.yes-no-selected {
	background-color: #34589A;
	border-color: #34589A;
	color: #FFF;
}

/* Кнопка "Нет" - невыбранное состояние */
.no-btn.yes-no-not-selected {
	background-color: transparent;
	border-color: #34589A;
	color: #34589A;
}

/* Кнопка "Нет" - выбранное состояние */
.no-btn.yes-no-selected {
	background-color: #34589A;
	border-color: #34589A;
	color: #FFF;
}

/* Ховер эффекты */
.yes-no-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Контейнер для опций да/нет */
.yes-no-option {
	cursor: pointer;
}

/* Скрытый чекбокс */
.yes-no-hidden {
	display: none !important;
}

/* Поле ввода для вопросов анкеты */
.input-anketa-question {
	max-width: 230px;
	width: 100%;
}

/* ===== АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ ===== */

/* Для мобильных (до 640px) */
@media ( max-width : 640px) {
	/* Общие стили для контейнера */
	.flex.flex-col.sm\:flex-row.items-start.sm\:items-center.justify-between.w-full.mb-4
		{
		gap: 1rem;
	}

	/* Кнопки и текст вопроса на мобильных */
	.flex.items-center.gap-2.w-full.sm\:w-auto {
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: flex-start;
	}

	/* Кнопки да/нет на мобильных */
	.yes-no-btn {
		width: 46px;
		height: 46px;
		font-size: 13px;
	}

	/* Текст вопроса на мобильных */
	.text-semibold.f-s-18.text-color.ml-2.sm\:ml-4 {
		font-size: 16px;
		margin-left: 0.5rem;
		flex: 1;
		min-width: 200px;
	}

	/* Контейнер для инпута на мобильных - занимает всю ширину */
	.w-full.sm\:w-auto.sm\:flex-grow.sm\:ml-8 {
		width: 100% !important;
		margin-left: 0 !important;
		margin-top: 0.5rem;
	}

	/* Инпут на мобильных - на всю ширину */
	.input-anketa-question {
		max-width: 100% !important;
		width: 100% !important;
	}
}

/* Для планшетов (641px - 768px) */
@media ( min-width : 641px) and (max-width: 768px) {
	.yes-no-btn {
		width: 50px;
		height: 50px;
	}
	.text-semibold.f-s-18.text-color.ml-2.sm\:ml-4 {
		font-size: 17px;
	}
	.input-anketa-question {
		max-width: 200px;
	}
}

/* Для маленьких мобильных (до 480px) */
@media ( max-width : 480px) {
	.yes-no-btn {
		width: 42px;
		height: 42px;
		font-size: 12px;
	}
	.text-semibold.f-s-18.text-color.ml-2.sm\:ml-4 {
		font-size: 15px;
		min-width: 180px;
	}

	/* Делаем кнопки и текст в две строки на очень маленьких экранах */
	.flex.items-center.gap-2.w-full.sm\:w-auto {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* Для очень маленьких экранов (до 360px) */
@media ( max-width : 360px) {
	.yes-no-btn {
		width: 38px;
		height: 38px;
		font-size: 11px;
	}
	.text-semibold.f-s-18.text-color.ml-2.sm\:ml-4 {
		font-size: 14px;
		min-width: 150px;
	}
}

/* ===== СТИЛИ ДЛЯ PLACEHOLDER ===== */

/* Для всех инпутов в анкете */
.input-anketa-question::placeholder {
	font-size: 16px;
	color: #667E98;
	opacity: 1; /* Для Firefox */
}

/* Для всех инпутов с классом button-bank */
.button-bank::placeholder {
	font-size: 16px;
	color: #667E98;
	opacity: 1;
}

/* Для инпутов с placeholder на мобильных */
@media ( max-width : 640px) {
	.input-anketa-question::placeholder, .button-bank::placeholder {
		font-size: 14px; /* Можно уменьшить на мобильных если нужно */
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 360px) {
	.input-anketa-question::placeholder, .button-bank::placeholder {
		font-size: 13px;
	}
}

.input-car {
	max-width: 526px !important;
}

.property-label {
	min-width: 155px;
	margin-top: -5px;
}

/* ===== АДАПТИВНОСТЬ ДЛЯ ЧЕКБОКСОВ НА МОБИЛЬНОЙ ВЕРСИИ ===== */

/* Более специфичные селекторы для контейнеров с чекбоксами в анкете */
.bg-color.rounded-xxl.p-6 .flex>.custom-checkbox,
	.login-buttons-container .flex>.custom-checkbox,
	/* Селектор для конкретного контейнера анкеты */ [class*="anketa"] .flex>.custom-checkbox
	{
	width: 100% !important;
}

/* Второй чекбокс - убираем левый отступ и добавляем верхний */
.bg-color.rounded-xxl.p-6 .flex>.custom-checkbox.ml-16,
	.login-buttons-container .flex>.custom-checkbox.ml-16, [class*="anketa"] .flex>.custom-checkbox.ml-16
	{
	margin-left: 0 !important;
	margin-top: 1rem !important;
}

/* Делаем контейнер flex-direction: column, но только для контейнеров в анкете */
.bg-color.rounded-xxl.p-6 .flex:has(.custom-checkbox),
	.login-buttons-container .flex:has(.custom-checkbox), [class*="anketa"] .flex:has(.custom-checkbox)
	{
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 1.5rem !important;
}

/* Увеличиваем ширину текстовых блоков на мобильных */
.property-label {
	min-width: 100% !important;
}

/* Центрируем checkmark на мобильных */
.bg-color.rounded-xxl.p-6 .checkmark.mt-2-b, .login-buttons-container .checkmark.mt-2-b,
	[class*="anketa"] .checkmark.mt-2-b {
	margin-top: 0 !important;
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.bg-color.rounded-xxl.p-6 .flex>.custom-checkbox,
		.login-buttons-container .flex>.custom-checkbox, [class*="anketa"] .flex>.custom-checkbox
		{
		flex-direction: row !important;
		align-items: flex-start !important;
	}
	.bg-color.rounded-xxl.p-6 .custom-checkbox .property-label,
		.login-buttons-container .custom-checkbox .property-label, [class*="anketa"] .custom-checkbox .property-label
		{
		margin-left: 0.5rem !important;
	}
}

.qty-input {
	max-width: 30px;
}

/* ===== СТИЛИ ДЛЯ РАСПОЛОЖЕНИЯ КОЛИЧЕСТВА ДЕТЕЙ ===== */

/* Контейнер для блока с количеством детей - упрощенный */
.children-qty-container {
	display: flex;
	align-items: center;
	width: 100%;
}

/* Левый блок с чекбоксом - занимает все доступное пространство */
.children-qty-left {
	flex: 1;
	display: flex;
	align-items: center;
}

/* Правый блок с инпутом и текстом - прижимаем вправо */
.children-qty-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	margin-right: 100px;
}

/* Стили для поля ввода количества (сохраняем существующий стиль) */
.qty-input {
	width: 30px !important;
	max-width: 30px !important;
	min-width: 30px !important;
	text-align: center;
	padding: 0.25rem !important;
	margin: 0;
}

/* Убираем стандартные стрелки у number input */
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

.qty-input {
	-moz-appearance: textfield;
}

/* Мобильная версия */
@media ( max-width : 768px) {
	.children-qty-container {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
	.children-qty-left {
		width: 100%;
	}
	.children-qty-right {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* ===== СТИЛИ ДЛЯ БЛОКА БОНУСОВ ===== */

/* Десктоп: первая колонка растягивается, вторая прижата вправо */
@media ( min-width : 769px) {
	.bonus-block .document-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 2rem;
	}
	.bonus-block .document-column-left {
		flex: 1;
		min-width: 0;
	}
	.bonus-block .document-column-right {
		width: auto;
		max-width: 330px;
		margin-left: auto;
		flex-shrink: 0;
		display: flex;
		align-items: flex-start; /* Выравнивание по верху */
	}

	/* Текст по левому краю, но в правой колонке */
	.bonus-block .document-column-right .text-custom-gray {
		line-height: 1.4;
		word-wrap: break-word;
		white-space: normal;
		text-align: left; /* Левое выравнивание текста */
	}
}

/* Мобильная версия */
@media ( max-width : 768px) {
	.bonus-block .document-row {
		flex-direction: column;
		gap: 1rem;
	}
	.bonus-block .document-column-right {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
	.bonus-block .document-column-right .text-custom-gray {
		text-align: center;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.bonus-block .document-column-left .text-color.f-s-64 {
		font-size: 38px !important;
	}
}

.btn-align-left {
	margin-left: 15px;
}

/* Мобильная версия */
@media ( max-width : 768px) {
	.btn-align-left {
		margin-left: 0;
	}
}

.get-customer-btn {
	min-width: 250px;
}

.get-customer-btn-selected {
	color: #FFF;
	background: #002853;
}

/* ===== АДАПТИВНОСТЬ ДЛЯ КНОПОК "ПОРЕКОМЕНДОВАТЬ" И "СТАТЬ ПАРТНЁРОМ" ===== */

/* Десктоп: кнопки в строке */
@media ( min-width : 769px) {
	.bonus-block .flex {
		flex-direction: row;
		gap: 1rem;
	}
}

/* Мобильная версия: кнопки в колонку */
@media ( max-width : 768px) {
	.bonus-block .flex {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
	.bonus-block .get-customer-btn {
		width: 100%;
		min-width: 100%;
		justify-content: center;
	}
}

/* Для планшетов (641px-768px) */
@media ( min-width : 641px) and (max-width: 768px) {
	.bonus-block .get-customer-btn {
		min-width: 200px;
	}
}

.checkmark-bonus {
	border: 1px solid #667E98;
}

.textarea-bonus {
	height: 200px !important;
	margin-top: 30px;
}

/* ===== АДАПТИВНОСТЬ ДЛЯ РАДИО-КНОПОК В БЛОКЕ БОНУСОВ ===== */

/* Для мобильной версии (до 768px) */
@media ( max-width : 768px) {
	.bonus-block .gender-radio {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 1.5rem !important;
		margin-top: 0.5rem !important;
		align-self: center !important;
		width: 100% !important;
	}
	.bonus-block .gender-radio>div {
		flex: 0 0 auto !important;
		margin-bottom: 0.5rem !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Убираем все кастомные margin-left для контейнеров радио */
	.bonus-block .gender-radio>div.ml-1 {
		margin-left: 0 !important;
	}
	.bonus-block .gender-radio-input {
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}
	.bonus-block .gender-radio-input:checked::after {
		width: 10px !important;
		height: 10px !important;
	}

	/* Выравнивание лейблов с радио-кнопкой */
	.bonus-block .gender-radio .ml-6-b {
		margin-left: 0.5rem !important;
		margin-top: 0 !important;
		font-size: 14px !important;
		line-height: 1.2 !important;
		display: inline-block !important;
		vertical-align: middle !important;
	}

	/* Обеспечиваем одинаковую высоту для всех элементов */
	.bonus-block .gender-radio>div, .bonus-block .gender-radio-input,
		.bonus-block .gender-radio label {
		height: auto !important;
		min-height: 20px !important;
	}
}

/* Для планшетов (641px-768px) */
@media ( min-width : 641px) and (max-width: 768px) {
	.bonus-block .gender-radio {
		gap: 2rem !important;
	}
}

/* Для очень маленьких экранов (до 480px) */
@media ( max-width : 480px) {
	.bonus-block .gender-radio {
		gap: 1rem !important;
	}
	.bonus-block .gender-radio .ml-6-b {
		font-size: 13px !important;
		margin-left: 0.4rem !important;
	}
}

/* Для экстремально маленьких экранов (до 360px) */
@media ( max-width : 360px) {
	.bonus-block .gender-radio {
		gap: 0.75rem !important;
	}
	.bonus-block .gender-radio .ml-6-b {
		font-size: 12px !important;
		margin-left: 0.3rem !important;
	}
}

/* ===== СТИЛИ ДЛЯ БЛОКА С КНОПКОЙ КОПИРОВАНИЯ ===== */

/* Контейнер для блока с кнопкой копирования */
.copy-block-container {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	min-height: 120px; /* Минимальная высота для позиционирования */
}

/* Текстовая часть блока - растягивается */
.copy-text-content {
	flex: 1;
	min-width: 0; /* Позволяет тексту сжиматься */
}

/* Кнопка копирования - прижата к правому нижнему углу с отступом 10px */
.copy-button {
	position: absolute;
	right: 10px; /* Отступ от правого края */
	bottom: 10px; /* Отступ от нижнего края */
	width: 50px;
	height: 50px;
	border-radius: 10px;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0;
	border: none;
	outline: none;
	padding: 0;
	z-index: 2;
}

.copy-button:hover {
	background: #f0f0f0;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.copy-button:active {
	transform: translateY(0);
	background: #e0e0e0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.copy-button img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
}

/* Адаптация для блоков разной высоты */
@media ( min-width : 769px) {
	.copy-block-container {
		min-height: 140px; /* Увеличиваем минимальную высоту на десктопе */
	}
}

/* Мобильная адаптация */
@media ( max-width : 768px) {
	.copy-block-container {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
		min-height: auto;
		padding-bottom: 60px; /* Добавляем место для кнопки */
	}
	.copy-text-content {
		width: 100%;
		text-align: left;
	}
	.copy-button {
		position: absolute;
		right: 10px;
		bottom: 10px;
		margin: 0;
	}

	/* Уменьшаем шрифт заголовка на мобильных */
	.copy-text-content .bonus-title {
		font-size: 1.5rem !important;
		line-height: 1.3;
		text-align: center;
		margin-bottom: 1rem;
	}
	.feat-img {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Для планшетов */
@media ( min-width : 769px) and (max-width: 1024px) {
	.copy-button {
		width: 45px;
		height: 45px;
		right: 8px;
		bottom: 8px;
	}
	.copy-button img {
		width: 22px;
		height: 22px;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.copy-text-content .bonus-title {
		font-size: 1.25rem !important;
	}
	.copy-button {
		width: 40px;
		height: 40px;
		right: 8px;
		bottom: 8px;
	}
	.copy-button img {
		width: 20px;
		height: 20px;
	}
	.copy-block-container {
		padding-bottom: 50px; /* Меньше отступ для маленьких экранов */
	}
}

/* Для экстремально маленьких экранов */
@media ( max-width : 360px) {
	.copy-button {
		width: 36px;
		height: 36px;
		right: 6px;
		bottom: 6px;
	}
	.copy-button img {
		width: 18px;
		height: 18px;
	}
}

/* ===== КЛАССЫ ДЛЯ АДАПТАЦИИ БЛОКА С ТЕКСТОМ И ИЗОБРАЖЕНИЕМ ===== */

/* Основной контейнер для адаптации */
.mobile-row-adapt {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-wrap: nowrap !important;
}

/* Левый блок с цифрами */
.mobile-left-adapt {
	display: flex !important;
	align-items: flex-end !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 4px !important;
}

/* Правая колонка с изображением */
.mobile-right-adapt {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Большая цифра - адаптированная */
.mobile-big-number-adapt {
	font-size: 32px !important;
	line-height: 0.9 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Маленький текст рядом с цифрой */
.mobile-small-text-adapt {
	font-size: 14px !important;
	line-height: 1.2 !important;
	margin: 0 0 4px 4px !important;
	padding: 0 !important;
	display: inline-block !important;
}

/* Изображение - адаптированное */
.mobile-image-adapt {
	width: 40px !important;
	height: 40px !important;
	object-fit: contain !important;
	margin: 0;
	padding: 0 !important;
	display: block !important;
	margin-top: -10px;
}

/* Контейнер для верхней строки в карточке */
.mobile-card-top-row-adapt {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	width: 100% !important;
	margin-bottom: 1rem !important;
}

/* Мобильная адаптация */
@media ( max-width : 768px) {
	.mobile-row-adapt {
		align-items: center !important;
	}
	.mobile-big-number-adapt {
		font-size: 24px !important;
	}
	.mobile-small-text-adapt {
		font-size: 12px !important;
		margin-bottom: 3px !important;
	}
}

@media ( max-width : 480px) {
	.mobile-big-number-adapt {
		font-size: 20px !important;
	}
	.mobile-small-text-adapt {
		font-size: 10px !important;
		margin-bottom: 2px !important;
	}
}

/* ===== СТИЛИ ДЛЯ БЛОКА БОНУСОВ ===== */

/* Контейнер для правой колонки с описанием */
.bonus-description-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

/* Контейнер для описания и кнопки развернуть */
.bonus-description-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: 100px;
	margin-top: 30px;
}

/* Контейнер для кнопки "Развернуть" */
.bonus-expand-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: auto;
	padding-top: 1rem;
}

/* Для десктопной версии */
@media ( min-width : 769px) {
	.bonus-block .document-row {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: 2rem;
	}
	.bonus-block .document-column-left {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}
	.bonus-block .document-column-right {
		width: auto;
		max-width: 330px;
		margin-left: auto;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
	}
	.bonus-block .bonus-description-container {
		justify-content: space-between;
		flex: 1;
	}
	.bonus-block .bonus-expand-container {
		justify-content: flex-end;
		margin-top: auto;
	}
}

/* Мобильная версия */
@media ( max-width : 768px) {
	.bonus-block .document-row {
		flex-direction: column;
		gap: 1rem;
	}
	.bonus-block .document-column-right {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
	.bonus-block .bonus-expand-container {
		justify-content: center;
		margin-top: 0;
		padding-top: 0;
	}
}

.t-bank-icon {
	position: absolute;
	margin-left: -150px;
	width: 80px !important;
}

@media ( max-width : 768px) {
	.t-bank-icon {
		margin-left: -120px;
		margin-top: 3px;
	}
}

.vtb-bank-icon {
	width: 50px !important;
	margin-top: -7px;
}

.tid-4PNRE-inner {
	/* margin-left: 60px; */
	margin-left: 0;
}
/* Стили для ошибок ввода */
.input-error {
	border: 1px solid #EF4444 !important;
	background-color: #FEF2F2 !important;
}

.input-error:focus {
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Стили для ошибок чекбоксов */
.checkbox-error {
	border-color: #EF4444 !important;
}

.checkbox-error-label {
	color: #EF4444 !important;
}

/* Анимация для подсветки ошибок */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-animation {
	animation: shake 0.5s ease-in-out;
}

/* ===== СТИЛИ ДЛЯ РАСПОЛОЖЕНИЯ В ОДНУ ЛИНИЮ НА ДЕСКТОПЕ ===== */

/* Блок с автомобилем - десктопная версия */
.property-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 1rem !important;
	width: 100% !important;
}

/* Инпут автомобиля занимает основное пространство */
.property-row .input-car {
	flex: 1 !important;
	min-width: 0 !important;
}

/* Контейнер с чекбоксами - компактный */
.property-row .ml-2.mt-1 {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	flex-shrink: 0 !important;
	margin-left: 1rem !important;
	margin-top: 0 !important;
}

/* Чекбоксы внутри блока */
.property-row .custom-checkbox {
	display: flex !important;
	align-items: center !important;
	width: auto !important;
	margin: 0 !important;
}

/* Блок с детьми - десктопная версия */
.children-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
}

/* Левый блок с чекбоксом "Есть дети" */
.children-row .children-qty-left {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
}

/* Правый блок с количеством */
.children-row .children-qty-right {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin-left: 2rem !important;
	flex-shrink: 0 !important;
	margin-right: 0 !important;
}

/* Сброс существующих стилей которые мешают */
.children-row .children-qty-right {
	margin-right: 0 !important;
}

/* Мобильная версия для обоих блоков */
@media ( max-width : 768px) {
	.property-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 1rem !important;
	}
	.property-row .input-car {
		width: 100% !important;
	}
	.property-row .ml-2.mt-1 {
		margin-left: 0 !important;
		margin-top: 0.5rem !important;
	}
	.children-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 1rem !important;
	}
	.children-row .children-qty-right {
		width: 100% !important;
		margin-left: 0 !important;
		justify-content: flex-start !important;
		margin-top: 0.5rem !important;
	}
}

/* Убираем автоматические стили для flex контейнеров в этих блоках */
.property-row .flex:has(.custom-checkbox), .children-row .flex:has(.custom-checkbox)
	{
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

/* Гарантируем что чекбоксы в одну строку */
.property-row .custom-checkbox, .children-row .custom-checkbox {
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.5rem !important;
	width: auto !important;
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.property-row .ml-2.mt-1 {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.children-row .children-qty-right {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.25rem !important;
	}
}

/* ФИКС ДЛЯ ГОРИЗОНТАЛЬНОГО РАСПОЛОЖЕНИЯ НА ДЕСКТОПЕ */
@media ( min-width : 769px) {
	/* Отменяем ВСЕ стили которые ломают горизонтальное расположение */
	.flex.w-full.mt-2.mb-4[class*="js_credit-item-property"], .property-row
		{
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	/* Отменяем column для внутренних контейнеров */
	.flex.w-full.mt-2.mb-4[class*="js_credit-item-property"] .flex:has(.custom-checkbox),
		.property-row .flex:has(.custom-checkbox) {
		flex-direction: row !important;
		align-items: center !important;
		gap: 1rem !important;
		width: auto !important;
		flex-shrink: 0 !important;
	}

	/* Конкретно для блока с двумя чекбоксами */
	.flex.w-full.mt-2.mb-4[class*="js_credit-item-property"] .ml-2.mt-1,
		.property-row .ml-2.mt-1 {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.5rem !important;
		margin-left: 1rem !important;
		flex-shrink: 0 !important;
		min-width: 180px !important;
		margin-top: 0 !important;
	}

	/* Инпут автомобиля */
	.flex.w-full.mt-2.mb-4[class*="js_credit-item-property"] .input-car,
		.property-row .input-car {
		flex: 1 !important;
		min-width: 0 !important;
		width: auto !important;
	}

	/* Для блока с детьми */
	.flex.w-full.mb-4.children-qty-container, .children-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	/* Левая часть блока с детьми */
	.flex.w-full.mb-4.children-qty-container .children-qty-left,
		.children-row .children-qty-left {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		flex: 1 !important;
	}

	/* Отменяем column для чекбокса в блоке детей */
	.flex.w-full.mb-4.children-qty-container .children-qty-left .flex:has(.custom-checkbox),
		.children-row .children-qty-left .flex:has(.custom-checkbox) {
		flex-direction: row !important;
		align-items: center !important;
		gap: 0.5rem !important;
		width: auto !important;
	}

	/* Правая часть блока с детьми */
	.flex.w-full.mb-4.children-qty-container .children-qty-right,
		.children-row .children-qty-right {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 0.5rem !important;
		margin-left: 2rem !important;
		flex-shrink: 0 !important;
	}
}

/* Мобильная версия - оставляем как есть */
@media ( max-width : 768px) {
	.property-row, .children-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 1rem !important;
	}
}
/* Добавьте в самый конец style.css */

/* ФИКС: Отменяем ВСЕ стили ломающие горизонтальное расположение */
@media ( min-width : 769px) {
	/* Явно указываем все возможные селекторы для блока детей */
	.flex.w-full.mb-4.children-qty-container, div[class*="children-qty-container"],
		.children-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	/* Отменяем column для ВСЕХ внутренних flex контейнеров в блоке детей */
	.flex.w-full.mb-4.children-qty-container>*, .children-row>*,
		.children-qty-left, .children-qty-right {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
	}

	/* Особенно важно: отменяем column для контейнера с чекбоксом */
	.children-qty-left .custom-checkbox, .children-row .custom-checkbox {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 0.5rem !important;
		width: auto !important;
		margin: 0 !important;
	}

	/* Конкретно для .children-qty-left */
	.children-qty-left {
		flex: 1 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
	}

	/* Конкретно для .children-qty-right */
	.children-qty-right {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 0.5rem !important;
		margin-left: 2rem !important;
		flex-shrink: 0 !important;
		white-space: nowrap !important;
	}

	/* Отменяем абсолютно ВСЕ column направления в этих блоках */
	.children-row *, .flex.w-full.mb-4.children-qty-container * {
		flex-direction: row !important;
	}
}

/* Шаг 2: Самый агрессивный вариант */
@media ( min-width : 769px) {
	/* Селектор для ОЧЕНЬ конкретного блока */
	div.flex.w-full.mb-4.children-qty-container:not(.flex-col):not([class*="flex-col"])
		{
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	/* Отменяем ВСЕ стили которые могли быть заданы ранее */
	div.flex.w-full.mb-4.children-qty-container:not(.flex-col):not([class*="flex-col"]),
		div.flex.w-full.mb-4.children-qty-container.children-row {
		flex-direction: row !important;
	}

	/* Для внутренних элементов */
	div.flex.w-full.mb-4.children-qty-container .children-qty-left, div.flex.w-full.mb-4.children-qty-container.children-row .children-qty-left
		{
		flex-direction: row !important;
		align-items: center !important;
		flex: 1 !important;
	}
	div.flex.w-full.mb-4.children-qty-container .children-qty-right, div.flex.w-full.mb-4.children-qty-container.children-row .children-qty-right
		{
		flex-direction: row !important;
		align-items: center !important;
		margin-left: 2rem !important;
	}
}

@media ( min-width : 641px) {
	.document-column-left-w, .document-column-right-w {
		width: 50%;
	}
}

.max-w-50 {
	max-width: 50rem;
}

#sendModal {
	overflow-y: scroll;
}

.alfaid-button {
	width: 100%;
	max-width: 256px;
	font-family: 'SF Pro Text', sans-serif;
	background-color: #ef3124;
	color: white;
	border: none;
	border-radius: 8px;
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.vtb-button {
	width: 100%;
	max-width: 256px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 14px;
	color: #ffffff;
	background-color: #0663EF;
	border: none;
	cursor: pointer;
	gap: 10px;
	transition: background-color 0.3s ease;
}

.vtb-logo {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.sms-btn {
	width: 100%;
	max-width: 256px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 14px;
	color: #ffffff;
	background-color: #34589A;
	border: none;
	cursor: pointer;
	gap: 10px;
	transition: background-color 0.3s ease;
}

.sms-btn-2 {
	color: #ffffff;
	background-color: #34589A;
}

.head-login {
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

@media ( max-width : 768px) {
	.head-login {
		padding-top: 0;
	}
}

.head-login-icon {
	margin-left: auto;
	margin-right: auto;
	width: 150px;
	height: auto;
}

@media ( max-width : 768px) {
	.head-login-icon {
		margin-left: 0;
		width: 100px;
	}
}

.login-block>h2 {
	line-height: 1;
}

.accept-checkbox {
	margin-top: 40px;
}

@media ( max-width : 768px) {
	.accept-checkbox {
		margin-top: 0;
	}
}

.subtitle-login {
	font-size: 18px;
	color: #667E98;
	margin-top: -30px;
	line-height: 1;
}

@media ( max-width : 768px) {
	.subtitle-login {
		font-size: 12px;
		margin-top: 0;
	}
}

.head-login-subicon, .mob-show {
	display: none;
}

@media ( max-width : 768px) {
	.head-login-subicon {
		display: block;
		margin-left: 10px;
	}
	.head-login-icons {
		max-width: 140px;
	}
	.mob-hidden {
		display: none;
	}
	.mob-amount {
		font-size: 38px;
	}
	.mob-show {
		display: flex;
	}
	.rating-text-mob {
		margin-top: -20px;
	}
}

/* ===== КНОПКА МОБИЛЬНОГО МЕНЮ ===== */
.mobile-menu-btn {
	/* Размеры и внешний вид */
	width: 30px;
	height: 30px;
	border-radius: 5px;
	background-color: #34589A;
	/* Flexbox для линий */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Сброс стандартных стилей кнопки */
	padding: 0;
	border: none;
	cursor: pointer;
	position: relative;
	/* По умолчанию скрыта на всех экранах */
	display: none;
}

/* Скрываем линии по умолчанию */
.mobile-menu-line {
	width: 14px;
	height: 1px;
	background-color: #FFFFFF;
	margin: 1px 0;
	transition: all 0.3s ease;
	border-radius: 1px;
}

/* Показываем кнопку только на мобильных (до 768px) */
@media ( max-width : 768px) {
	.mobile-menu-btn {
		display: flex;
	}
}

/* Состояние при открытом меню (активная кнопка) */
.mobile-menu-btn.active .mobile-menu-line:nth-child(1) {
	transform: rotate(45deg) translate(2px, 2px);
}

.mobile-menu-btn.active .mobile-menu-line:nth-child(2) {
	opacity: 0;
}

.mobile-menu-btn.active .mobile-menu-line:nth-child(3) {
	transform: rotate(-45deg) translate(2px, -2px);
}

/* ===== СТИЛИ ДЛЯ ПРАВОГО ВЫРАВНИВАНИЯ КНОПКИ "ОПЛАТИТЬ" НА МОБИЛЬНЫХ ===== */
@media ( max-width : 768px) {
	.flex.mb-2.gap-4 {
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.flex.mb-2.gap-4>div:first-child {
		flex: 1;
	}
	.flex.mb-2.gap-4>.mob-show {
		margin-left: auto;
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		flex-shrink: 0;
	}

	/* Если внутри mob-show есть дополнительные элементы */
	.mob-show a {
		white-space: nowrap;
	}
	.mob-show img {
		flex-shrink: 0;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.flex.mb-2.gap-4 .mob-show {
		flex-direction: row;
		align-items: center;
	}
}

.rating-info {
	margin-top: 45px;
	margin-left: 1rem;
	font-size: 18px;
}

@media ( max-width : 768px) {
	.rating-info {
		margin-top: 0;
		margin-left: 0;
		font-size: 12px;
	}
}

/* ===== ГОРИЗОНТАЛЬНОЕ РАСПОЛОЖЕНИЕ CHART-CONTAINER И RATING-INFO ===== */
@media ( max-width : 768px) {
	/* Контейнер для рейтинга - делаем горизонтальным */
	.rounded-xxl.p-4.mb-4.flex.flex-col.sm\:flex-row.items-start.justify-between.gap-2
		{
		flex-direction: row !important;
		align-items: flex-start !important;
		padding: 1rem !important;
		gap: 1.5rem !important;
		flex-wrap: nowrap !important;
	}

	/* Chart-container остается своим обычным размером */
	.chart-container {
		flex-shrink: 0 !important;
		margin: 0 !important;
		width: auto !important;
		min-width: 150px !important; /* Минимальная ширина как в оригинале */
	}

	/* Блок с текстом рейтинга - правее, занимает оставшееся пространство */
	.rating-info {
		margin-top: 0 !important;
		margin-left: 0 !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
		flex: 1 !important;
		min-width: 0 !important; /* Позволяет тексту сжиматься */
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		text-align: left !important;
		align-self: center !important; /* Выравнивание по вертикали */
		max-width: 90px;
        margin-right: 30px;
	}

	/* Чуть уменьшаем элементы внутри chart-container для мобильных */
	.chart-container .text-color.text-semibold.f-s-30 {
		font-size: 24px !important;
	}
	.chart-container .text-color-g.text-semibold.f-s-14 {
		font-size: 12px !important;
	}
	.chart-container .text-chart {
		font-size: 9px !important;
	}
}

/* Для планшетов (768px и меньше) */
@media ( max-width : 768px) and (min-width: 481px) {
	.chart-container {
		min-width: 130px !important;
	}
	.rating-info {
		font-size: 15px !important;
	}
}

/* Для маленьких мобильных (до 480px) */
@media ( max-width : 480px) {
	.rounded-xxl.p-4.mb-4.flex.flex-col.sm\:flex-row.items-start.justify-between.gap-2
		{
		gap: 1rem !important;
		padding: 0.75rem !important;
	}
	.chart-container {
		min-width: 120px !important;
	}
	.chart-container .text-color.text-semibold.f-s-30 {
		font-size: 20px !important;
	}
	.chart-container .text-color-g.text-semibold.f-s-14 {
		font-size: 10px !important;
	}
	.rating-info {
		font-size: 12px !important;
		line-height: 1.3 !important;
	}
}

/* Для очень маленьких экранов (до 360px) */
@media ( max-width : 360px) {
	.rounded-xxl.p-4.mb-4.flex.flex-col.sm\:flex-row.items-start.justify-between.gap-2
		{
		gap: 0.75rem !important;
		padding: 0.5rem !important;
	}
	.chart-container {
		min-width: 100px !important;
	}
	.chart-container .text-color.text-semibold.f-s-30 {
		font-size: 18px !important;
	}
	.chart-container .text-color-g.text-semibold.f-s-14 {
		font-size: 9px !important;
	}
	.rating-info {
		font-size: 11px !important;
		line-height: 1.2 !important;
	}
}

.chart-block {
	min-width: 330px;
}

@media ( max-width : 768px) {
	.rating-value {
		margin-left: 10px;
	}
	.status-info-text, .status-text-content {
		line-height: 1.2;
	}
}

/* Добавьте эти стили в ваш файл style.css в раздел медиа-запросов для мобильных */
@media ( max-width : 768px) {
	.status-content-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 1.5rem !important;
		margin-top: -20px;
	}
	.status-text-content {
		text-align: left !important;
		margin-bottom: 0 !important;
		width: 100% !important;
	}
	.btn-my-b {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		justify-content: center !important;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.status-content-row {
		gap: 1rem !important;
	}
	.status-text-content {
		font-size: 16px !important;
		line-height: 1.4 !important;
	}
	.btn-my-b {
		padding: 12px 20px !important;
		font-size: 16px !important;
		height: 48px !important;
	}
}

/* Дополнительно: убедитесь, что текст не перекрывается на маленьких экранах */
.status-text-content {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ===== СТИЛИ ДЛЯ FAST-MENU-BLOCK ===== */

/* Контейнер меню - отображается только на мобильных */
.fast-menu-block {
	display: none;
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 40px);
	max-width: 500px;
	background-color: #34589A;
	border-radius: 12px;
	padding: 15px 10px;
	z-index: 1000; /* Увеличен с 999 до 1000 */
	box-shadow: 0 4px 20px rgba(52, 88, 154, 0.3);
}

/* Показываем только на мобильных устройствах */
@media ( max-width : 768px) {
	/* Альтернативное решение: сдвигаем кнопку Bitrix24 выше */
	.b24-widget-button-wrapper.b24-widget-button-position-bottom-right {
		bottom: 110px !important;
		right: 10px;
	}
	.fast-menu-block {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
	}
}

/* Контейнер для кнопок */
.fast-menu-block {
	justify-content: space-around;
	align-items: flex-start;
}

/* Стили для кнопок меню */
.fast-menu-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-decoration: none;
	width: 70px;
	min-height: 70px;
	padding: 8px 0;
	transition: transform 0.2s ease;
}

.fast-menu-btn:hover {
	transform: translateY(-2px);
}

.fast-menu-btn:active {
	transform: translateY(0);
}

/* Стили для изображений - фиксированный размер 51×28 */
.fast-menu-btn img {
	width: 51px;
	height: 28px;
	object-fit: contain;
	margin-bottom: 8px;
	display: block;
	flex-shrink: 0;
}

/* Стили для текста с переносом */
.fast-menu-btn span {
	text-align: center;
	font-family: 'Cygre', sans-serif;
	font-weight: 400;
	font-size: 10px;
	color: #FFFFFF;
	line-height: 1.2;
	display: block;
	width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	hyphens: auto;
}

/* Адаптация для планшетов */
@media ( max-width : 768px) and (min-width: 481px) {
	.fast-menu-block {
		width: calc(100% - 60px);
		max-width: 600px;
		padding: 20px 15px;
		bottom: 25px;
	}
	.fast-menu-btn {
		width: 80px;
		min-height: 80px;
	}
	.fast-menu-btn img {
		width: 51px;
		height: 28px;
		margin-bottom: 10px;
	}
	.fast-menu-btn span {
		font-size: 11px;
		line-height: 1.3;
	}
}

/* Адаптация для маленьких экранов */
@media ( max-width : 480px) {
	.fast-menu-block {
		bottom: 15px;
		width: calc(100% - 30px);
		padding: 12px 8px;
	}
	.fast-menu-btn {
		width: 65px;
		min-height: 65px;
		padding: 6px 0;
	}
	.fast-menu-btn img {
		width: 51px;
		height: 28px;
		margin-bottom: 6px;
	}
	.fast-menu-btn span {
		font-size: 9px;
		line-height: 1.2;
	}
}

/* Для экстремально маленьких экранов */
@media ( max-width : 360px) {
	.fast-menu-block {
		bottom: 10px;
		width: calc(100% - 20px);
		padding: 10px 5px;
	}
	.fast-menu-btn {
		width: 60px;
		min-height: 60px;
		padding: 4px 0;
	}
	.fast-menu-btn img {
		width: 51px;
		height: 28px;
		margin-bottom: 4px;
	}
	.fast-menu-btn span {
		font-size: 8px;
		line-height: 1.1;
	}
}

/* Для очень высоких текстов - увеличение отступов */
@media ( max-width : 320px) {
	.fast-menu-block {
		padding: 8px 4px;
	}
	.fast-menu-btn {
		width: 55px;
		min-height: 70px;
	}
	.fast-menu-btn span {
		font-size: 7px;
		padding: 0 1px;
	}
}

/* ===== ИСПРАВЛЕНИЯ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ ПРОФИЛЯ ===== */

/* 1. Выравнивание всего текстового контента по левому краю на мобильных */
@media ( max-width : 768px) {
	/* Контейнер с профилем */
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-8 {
		padding: 1.5rem !important;
	}

	/* Выравнивание всей текстовой информации по левому краю */
	.profile-info-mobile-center, .profile-contact-row, .document-row,
		.document-column-left, .document-column-right, .f-s-16.text-regular.text-custom-gray,
		.f-s-20.text-semibold.text-color, .f-s-26.text-semibold.text-color,
		.f-s-22.text-semibold.text-color, .subtitle-extra {
		text-align: left !important;
		align-items: flex-start !important;
	}

	/* Специально для блоков с контактами */
	.profile-contact-row {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 0.5rem;
	}
	.profile-contact-label {
		width: 100%;
		text-align: left !important;
	}
	.profile-contact-data-right {
		width: 100%;
		justify-content: flex-start !important;
		margin-left: 0 !important;
	}

	/* Для документов в две колонки */
	.document-row {
		flex-direction: column;
		gap: 1.5rem;
	}
	.document-column-left, .document-column-right {
		width: 100% !important;
		max-width: 100% !important;
		text-align: left !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.document-column-left.ml-4 {
		margin-left: 0 !important;
	}

	/* Для двух колоночных блоков (СНИЛС и ИНН) */
	.document-row.mb-8 {
		flex-direction: column;
		gap: 1rem;
	}
	.document-row.mb-8 .document-column-left, .document-row.mb-8 .document-column-right
		{
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Заголовки разделов */
	.subtitle-extra {
		text-align: left !important;
		margin-bottom: 1.5rem;
		font-size: 1.75rem !important;
	}
}

/* 2. Уменьшение размера аватара и выравнивание по левому краю на мобильных */
@media ( max-width : 768px) {
	.profile-avatar-mobile-center {
		align-self: flex-start !important; /* Прижатие к левому краю */
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Контейнер аватара 70x70 */
	.profile-avatar-mobile-center .w-24.h-24 {
		width: 70px !important;
		height: 70px !important;
		min-width: 70px !important;
		min-height: 70px !important;
	}

	/* Иконка внутри аватара - адаптируем размер */
	.profile-avatar-mobile-center .absolute img {
		width: 40px !important;
		height: 40px !important;
		object-fit: contain;
	}

	/* Перестраиваем контейнер профиля */
	.flex.flex-col.sm\:flex-row.items-center.sm\:items-start.gap-4.sm\:gap-6.mb-6
		{
		align-items: flex-start !important;
		gap: 1rem !important;
	}

	/* Информация профиля прижимается к аватару */
	.profile-info-mobile-center {
		margin-left: 0 !important;
		text-align: left !important;
	}
	.profile-info-mobile-center h1 {
		text-align: left !important;
		font-size: 1.5rem !important;
	}
}

/* Для очень маленьких экранов (до 480px) */
@media ( max-width : 480px) {
	.profile-avatar-mobile-center .w-24.h-24 {
		width: 60px !important;
		height: 60px !important;
	}
	.profile-avatar-mobile-center .absolute img {
		width: 35px !important;
		height: 35px !important;
	}
	.profile-info-mobile-center h1 {
		font-size: 1.25rem !important;
	}
	.subtitle-extra {
		font-size: 1.5rem !important;
	}
}

/* ===== ОДИНАКОВЫЕ ОТСТУПЫ ДЛЯ ВСЕХ БЛОКОВ ПРОФИЛЯ ===== */

/* На мобильных устройствах все блоки получают одинаковые отступы */
@media ( max-width : 768px) {
	/* 1. ОСНОВНОЙ КОНТЕЙНЕР - задаем общий отступ */
	.container-custom.px-4.py-6 .lg\:w-3\/4 {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	/* 2. ВСЕ КАРТОЧКИ ПРОФИЛЯ - одинаковые отступы */
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* 3. ОСНОВНАЯ КАРТОЧКА ПРОФИЛЯ (первая) */
	.lg\:w-3\/4>.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-8:first-of-type
		{
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	/* 4. КАРТОЧКА ДОКУМЕНТОВ (паспорт и др.) */
	.lg\:w-3\/4>.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-8:nth-of-type(2)
		{
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	/* 5. КАРТОЧКИ СНИЛС и ИНН (внутри .document-row.mb-8) */
	.document-row.mb-8 .bg-white.rounded-xxl.shadow-sm.p-6.bg-color {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* 6. КАРТОЧКИ АДРЕСОВ (второй .document-row.mb-8) */
	.document-row.mb-8:last-of-type .bg-white.rounded-xxl.shadow-sm.p-6.bg-color
		{
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* 7. КАРТОЧКА БРАКА */
	.f-s-32.text-semibold.mb-4.subtitle-extra+.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-8
		{
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	/* 8. КАРТОЧКА ИЖДИВЕНЦЕВ */
	.f-s-32.text-semibold.mb-4.subtitle-extra:last-of-type+.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-8
		{
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	/* 9. ЗАГОЛОВКИ РАЗДЕЛОВ - одинаковые отступы */
	.f-s-32.text-semibold.mb-4.subtitle-extra {
		padding-left: 0 !important;
		margin-left: 0 !important;
		text-align: left !important;
	}

	/* 10. ИСПРАВЛЕНИЕ ДЛЯ .document-row КОТОРЫЕ СОЗДАЮТ ЛИШНИЕ ОТСТУПЫ */
	.document-row.mb-8 {
		margin-left: 0 !important;
		margin-right: 0 !important;
		gap: 1rem !important;
	}

	/* 11. ОСОБЫЙ СЛУЧАЙ: если есть карточки с классом document-column-left/document-column-right */
	.document-column-left.bg-white.rounded-xxl.shadow-sm.p-6.bg-color,
		.document-column-right.bg-white.rounded-xxl.shadow-sm.p-6.bg-color {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
		width: 100% !important;
	}

	/* 12. Убираем автоматические margin у блоков адресов */
	.document-column-right.ml-auto {
		margin-left: 0 !important;
	}
}

/* Для планшетов (отступы чуть меньше) */
@media ( max-width : 1024px) and (min-width: 769px) {
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.document-row.mb-8 .bg-white.rounded-xxl.shadow-sm.p-6.bg-color {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* ДОПОЛНИТЕЛЬНО: чтобы убедиться, что все блоки выровнены одинаково */
@media ( max-width : 768px) {
	/* Делаем все карточки одинаковой ширины */
	.lg\:w-3\/4>* {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Убираем любые кастомные отступы */
	.ml-4, .ml-auto, .mr-auto {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Карточки в строках (СНИЛС/ИНН, Адреса) */
	.document-row.mb-8>div {
		width: 100% !important;
		margin-bottom: 1rem !important;
	}

	/* Последняя карточка в строке */
	.document-row.mb-8>div:last-child {
		margin-bottom: 0 !important;
	}
	.document-row.mb-8 .document-column-left:nth-child(2) {
		position: initial;
	}
}

/* ===== АДАПТИВНАЯ ВЕРСИЯ ДЛЯ БЛОКА ПЛАТЕЖЕЙ ===== */
@media ( max-width : 640px) {
	.payment-steps-compact {
		flex-direction: column;
		gap: 16px;
	}

	/* Статус вверху на мобильных */
	.payment-step-status {
		order: 1;
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin-bottom: 12px;
		padding-bottom: 12px;
		border-bottom: 1px solid #E7F0F9;
	}

	/* Номер и название в одну строку */
	.payment-step-left-compact {
		order: 2;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 8px;
		width: 100%;
		margin-bottom: 8px;
	}
	.payment-step-number-compact {
		margin-top: 4px;
		white-space: nowrap;
		flex-shrink: 0;
		width: 10% !important;
	}
	.payment-step-title-compact {
		flex: 1;
		min-width: 0;
	}

	/* Сумма и дата в одну строку (только цифры) */
	.payment-step-right-compact {
		order: 3;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
	}
	.payment-step-info-row {
		display: flex;
		justify-content: space-between;
		width: 100%;
		gap: 16px;
	}
	.payment-step-amount, .payment-step-date {
		font-size: 18px;
		font-weight: 600;
		color: #002853;
		white-space: nowrap;
	}

	/* Скрываем текстовые метки на мобильных */
	.payment-step-amount::before, .payment-step-date::before {
		content: none !important;
	}

	/* Скрываем старый блок статуса справа */
	.payment-step-right-compact .payment-step-status {
		display: none;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.payment-step-amount, .payment-step-date {
		font-size: 16px;
	}
	.payment-step-title-compact {
		font-size: 18px;
	}
}

/* Классы для отображения/скрытия статуса */
.mobile-only {
	display: none;
}

.desktop-only {
	display: flex;
}

@media ( max-width : 640px) {
	.mobile-only {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.desktop-only {
		display: none;
	}
}

.extra-option-block {
	display: flex;
}

/* ===== АДАПТИВНОСТЬ ДЛЯ ВКЛАДОК НА МОБИЛЬНЫХ ===== */
@media ( max-width : 768px) {
	.tabs-container {
		flex-direction: row !important; /* Изменено с column на row */
		align-items: stretch !important;
		gap: 0.5rem !important;
		flex-wrap: wrap !important;
		/* Разрешаем перенос на следующую строку */
		justify-content: space-between !important;
	}
	.tab-link {
		width: calc(50% - 0.25rem) !important;
		/* Две кнопки в строке с отступом */
		margin-bottom: 0.5rem !important;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.tab-link {
		width: calc(50% - 0.25rem) !important;
		font-size: 12px !important;
		height: 40px !important;
	}
}

/* Для экстремально маленьких экранов */
@media ( max-width : 360px) {
	.tab-link {
		font-size: 11px !important;
		height: 38px !important;
	}
}

/* ===== ИСПРАВЛЕНИЕ ДЛЯ FAQ БЛОКОВ НА МОБИЛЬНЫХ ===== */
@media ( max-width : 640px) {
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-5 .flex.flex-col.sm\:flex-row.sm\:items-start.sm\:justify-between.items-center
		{
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-5 .flex.flex-col.sm\:flex-row.sm\:items-start.sm\:justify-between.items-center>div:first-child
		{
		flex: 1 !important;
		text-align: left !important;
		margin-right: 1rem !important;
		white-space: normal !important;
		word-wrap: break-word !important;
	}
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-5 .flex.items-center.justify-center.sm\:justify-end.w-full.sm\:w-auto.ml-auto
		{
		width: auto !important;
		flex-shrink: 0 !important;
		margin-left: auto !important;
		justify-content: flex-end !important;
	}
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-5 .expand-faq-button {
		width: 36px !important;
		height: 36px !important;
	}
	.bg-white.rounded-xxl.shadow-sm.p-6.bg-color.mb-5 .expand-faq-plus {
		font-size: 40px !important;
		margin-left: 0 !important;
		margin-top: -4px !important;
	}
}

.anketa-tooltip {
	margin-top: 7px;
}

@media ( max-width : 390px) {
	.anketa-tooltip {
		margin-top: 0;
		margin-left: -70px
	}
}

/* ===== ПРАВОЕ ВЫРАВНИВАНИЕ КНОПКИ УДАЛЕНИЯ НА МОБИЛЬНЫХ ===== */
@media ( max-width : 768px) {
	/* Стили для контейнера кредитного элемента */
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .form-header-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	/* Заголовок номера кредита */
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .form-header-row .f-s-18.text-semibold.flex
		{
		flex: 1 !important;
		text-align: left !important;
		white-space: nowrap !important;
		margin: 0 !important;
	}

	/* Контейнер кнопки удаления */
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .form-header-row .step-indicator-right
		{
		margin-left: auto !important;
		flex-shrink: 0 !important;
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
	}

	/* Сама кнопка удаления */
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .del-btn {
		width: 36px !important;
		height: 36px !important;
		font-size: 24px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1 !important;
		background: transparent !important;
		border: none !important;
	}

	/* Ховер эффект для кнопки */
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .del-btn:hover {
		opacity: 0.8 !important;
		transform: scale(1.1) !important;
	}
}

/* Для планшетов */
@media ( min-width : 769px) and (max-width: 1024px) {
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .del-btn {
		width: 40px !important;
		height: 40px !important;
		font-size: 26px !important;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .del-btn {
		width: 32px !important;
		height: 32px !important;
		font-size: 20px !important;
	}
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .form-header-row .f-s-18.text-semibold.flex
		{
		font-size: 16px !important;
	}
}

/* АЛЬТЕРНАТИВНОЕ РЕШЕНИЕ - БОЛЕЕ АГРЕССИВНОЕ */
@media ( max-width : 768px) {
	/* Принудительное позиционирование кнопки удаления в правый верхний угол */
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .form-header-row {
		position: relative !important;
		padding-right: 45px !important;
		min-height: 36px !important;
	}
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .step-indicator-right.back-link
		{
		position: absolute !important;
		right: 0 !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Гарантируем что заголовок не перекрывает кнопку */
	.bg-white.rounded-xxl.shadow-sm.p-6.mb-4.w-full .form-header-row .f-s-18.text-semibold.flex
		{
		max-width: calc(100% - 50px) !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		padding-right: 10px !important;
	}
}

.next-btn-anketa {
	margin-top: -40px;
}

@media ( max-width : 768px) {
	.back-link-anketa {
		margin-top: 30px;
	}
	.next-btn-anketa {
		margin-top: -40px;
	}
}

/* ===== ИСПРАВЛЕННЫЕ КЛАССЫ ДЛЯ ДА/НЕТ ЭЛЕМЕНТОВ ===== */

/* Мобильная версия: текст сверху, кнопки в строке */
@media ( max-width : 768px) {
	/* Контейнер вопроса в колонку */
	.yes-no-mobile-column {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.75rem !important;
	}

	/* Внутренний контейнер в колонку */
	.yes-no-inner-mobile-column {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.5rem !important;
		width: 100% !important;
	}

	/* Текст вопроса вверху на мобильных */
	.yes-no-text-mobile-top {
		order: -1 !important;
		margin-left: 0 !important;
		margin-bottom: 0.25rem !important;
		width: 100% !important;
		font-size: 16px !important;
		line-height: 1.3 !important;
	}

	/* Кнопки Да/Нет в одну строку под текстом */
	.yes-no-buttons-mobile-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 1rem !important;
		width: 100% !important;
		margin-top: 0.25rem !important;
		flex-wrap: nowrap !important;
	}

	/* Кнопки на мобильных */
	.yes-no-btn-mobile {
		width: 44px !important;
		height: 44px !important;
		font-size: 13px !important;
		flex-shrink: 0 !important;
	}

	/* Поле комментария на всю ширину */
	.yes-no-comment-mobile-full {
		width: 100% !important;
		margin-left: 0 !important;
		margin-top: 0.75rem !important;
	}

	/* Инпут комментария на всю ширину */
	.yes-no-input-mobile-full {
		max-width: 100% !important;
		width: 100% !important;
	}
}

/* Десктопная версия: Да/Нет → Текст → Комментарий */
@media ( min-width : 769px) {
	.yes-no-mobile-column {
		flex-direction: row !important;
		align-items: center !important;
		gap: 0 !important;
	}
	.yes-no-inner-mobile-column {
		flex-direction: row !important;
		align-items: center !important;
		gap: 0 !important;
		width: auto !important;
	}

	/* ВАЖНО: на десктопе текст вопроса НЕ должен быть первым */
	.yes-no-text-mobile-top {
		order: 0 !important;
		margin-left: 1rem !important;
		margin-bottom: 0 !important;
		font-size: 18px !important;
		white-space: nowrap !important;
	}

	/* Контейнер кнопок первым на десктопе */
	.yes-no-buttons-mobile-row {
		order: -1 !important;
		display: flex !important;
		flex-direction: row !important;
		gap: 0.5rem !important;
		width: auto !important;
		margin-top: 0 !important;
	}
	.yes-no-btn-mobile {
		width: 54px !important;
		height: 54px !important;
		font-size: 14px !important;
	}
	.yes-no-comment-mobile-full {
		width: auto !important;
		margin-left: 2rem !important;
		margin-top: 0 !important;
		flex-grow: 1 !important;
	}
	.yes-no-input-mobile-full {
		max-width: 230px !important;
		width: auto !important;
		float: right !important;
	}
}

.anketa-doc-item {
	margin-top: 10px;
	margin-bottom: 10px;
}

.anketa-doc-content {
	margin-bottom: 10px;
}

/* Добавьте в ваш файл style.css */
.expand-anketa-doc-plus {
	transition: transform 0.3s ease;
}

.expand-anketa-doc-plus.rotated {
	transform: rotate(45deg);
}

/* ===== КЛАСС ДЛЯ ВЕРТИКАЛЬНОГО РАСПОЛОЖЕНИЯ КНОПОК НА МОБИЛЬНЫХ ===== */
.buttons-stack-mobile {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

/* На мобильных устройствах - вертикальное расположение */
@media ( max-width : 768px) {
	.buttons-stack-mobile {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.75rem !important;
	}
	.buttons-stack-mobile .btn-more-l {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		justify-content: center !important;
	}
}

/* Для очень маленьких экранов */
@media ( max-width : 480px) {
	.buttons-stack-mobile {
		gap: 0.5rem !important;
	}
	.buttons-stack-mobile .btn-more-l {
		height: 40px !important;
		font-size: 13px !important;
		padding: 8px 16px !important;
	}
}

/* ===== СТИЛИ ДЛЯ РАСКРЫВАЕМЫХ ЭЛЕМЕНТОВ ===== */

/* Общие стили для expandable элемента */
.expandable-item {
	transition: all 0.3s ease;
}

.expandable-header {
	display: flex;
	align-items: center;
}

.expandable-title {
	transition: color 0.3s ease;
}

.expandable-toggle-btn {
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
	background: none;
	font-family: inherit;
	padding: 0;
}

.expandable-toggle-btn:hover {
	opacity: 0.8;
}

.arrow-outlined {
	transition: transform 0.3s ease;
}

/* Состояние при развернутом элементе */
.expandable-item.expanded .expandable-toggle-btn {
	color: #34589A;
}

.expandable-item.expanded .arrow-outlined {
	transform: rotate(180deg);
}

/* Мобильная версия - кнопка под заголовком */
@media ( max-width : 640px) {
	.expandable-item {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.5rem !important;
	}
	.expandable-header {
		width: 100% !important;
		justify-content: flex-start !important;
	}
	.expandable-title {
		text-align: left !important;
		flex-grow: 1 !important;
		padding-right: 0.5rem !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}
	.expandable-toggle-btn {
		width: 100% !important;
		justify-content: flex-start !important;
		margin-top: 0.25rem !important;
		padding: 0.25rem 0 !important;
		order: 2; /* Кнопка идет после заголовка */
	}

	/* Для очень маленьких экранов */
	@media ( max-width : 480px) {
		.expandable-toggle-btn {
			font-size: 13px !important;
		}
		.expandable-title {
			font-size: 15px !important;
		}
	}
	@media ( max-width : 360px) {
		.expandable-toggle-btn {
			margin-left: 1.5rem !important;
			font-size: 12px !important;
		}
		.expandable-title {
			font-size: 14px !important;
		}
		.step-icon {
			width: 16px !important;
			height: 16px !important;
		}
	}
}

/* Десктопная версия - кнопка справа */
@media ( min-width : 641px) {
	.expandable-item {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	.expandable-header {
		flex: 1 !important;
		min-width: 0; /* Позволяет тексту сжиматься */
	}
	.expandable-toggle-btn {
		width: auto !important;
		justify-content: flex-end !important;
		margin-left: auto !important;
		margin-top: 0 !important;
		order: 1; /* Кнопка сохраняет свое положение */
		white-space: nowrap; /* Запрет переноса текста кнопки */
	}

	/* Для планшетов (641px-768px) */
	@media ( max-width : 768px) {
		.expandable-title {
			font-size: 15px !important;
		}
		.expandable-toggle-btn {
			font-size: 13px !important;
		}
	}
}

/* Стили для анкеты документа на мобильных устройствах */
@media ( max-width : 640px) {
	.anketa-doc-item .flex.items-center.justify-between {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}
	.anketa-doc-item .f-s-18.text-semibold.text-color {
		font-size: 16px !important;
		white-space: normal;
		overflow: rever;
		text-overflow: ellipsis;
	}
	.anketa-doc-item .expand-faq-button {
		width: 36px !important;
		height: 36px !important;
	}
	.anketa-doc-item .expand-faq-plus {
		font-size: 30px !important;
	}
	.anketa-upload-item {
		margin-top: 10px;
	}
}

.bonus-extra-info {
	margin-top: -20px;
}

.bonus-extra-desc-mob {
	display: none;
}
@media ( max-width : 768px) {
	.bonus-extra-info {
	   margin-top: -10px;
    }
    
    .get-btn {
       max-width: 300px;
    }
    
    .bonus-extra-desc {
       display: none;
    }
    
    .bonus-description-container {
       margin-top: 0;
       min-height: 0;
    }
    
    .bonus-extra-desc-mob {
	   display: block;
    }
}

/* ===== РЕШЕНИЕ БЕЗ ДУБЛИРОВАНИЯ КОНТЕНТА ===== */

@media (min-width: 769px) {
    /* Десктоп - оставляем как есть */
}

@media (max-width: 768px) {
    /* Контейнер блока */
    .bonus-row {
        display: grid;
        grid-template-areas:
            "value"
            "title"
            "description";
        gap: 8px;
    }
    
    /* Цифра/иконка становится первым элементом */
    .bonus-row .right-20 {
        grid-area: value;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 4px;
    }
    
    /* Заголовок становится вторым элементом */
    .bonus-row .left-80 .text-color.f-s-18.text-semibold {
        grid-area: title;
        margin-bottom: 4px;
    }
    
    /* Описание становится третьим элементом */
    .bonus-row .left-80 .text-custom-gray {
        grid-area: description;
    }
    
    /* Увеличиваем цифру для мобильных */
    .bonus-row .right-20 .text-color {
        font-size: 14px;
        font-weight: 600;
    }
    
    /* Увеличиваем иконку для мобильных */
    .bonus-row .right-20 img {
        width: 24px;
        height: 24px;
    }
    
    /* Делаем левую колонку полноразмерной */
    .bonus-row .left-80 {
        width: 100% !important;
    }
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ДЛЯ БЛОКОВ БОНУСОВ ===== */

/* Контейнер для карточки бонуса */
.mobile-bonus-card {
    position: relative;
}

/* Десктопная версия - вертикальное расположение */
.mobile-bonus-row {
    display: flex;
    flex-direction: column;
}

/* Сумма бонуса - десктоп */
.mobile-bonus-amount {
    font-size: 2rem; /* 32px для десктопа */
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/* Текст бонуса - десктоп */
.mobile-bonus-text {
    font-size: 0.875rem; /* 14px для десктопа */
    line-height: 1.4;
    color: #667E98;
}

/* Мобильная версия - горизонтальное расположение */
@media (max-width: 768px) {
    .mobile-bonus-row {
        flex-direction: row !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.75rem;
        width: 100%;
    }
    
    /* Сумма бонуса - мобильная */
    .mobile-bonus-amount {
        font-size: 1.5rem !important; /* 24px для мобильных */
        line-height: 1;
        margin-bottom: 0 !important;
        flex-shrink: 0;
        min-width: 110px; /* Фиксированная минимальная ширина */
        margin-top: 10px;
    }
    
    /* Текст бонуса - мобильная */
    .mobile-bonus-text {
        font-size: 0.625rem !important; /* 10px для мобильных */
        line-height: 1.3;
        margin-bottom: 0 !important;
        flex: 1;
        min-width: 0; /* Позволяет тексту сжиматься */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Адаптация для карточек бонусов на мобильных */
    .document-row.mb-6 {
        flex-direction: column;
        gap: 1rem;
    }
    
    .document-column-left.document-column-left-w {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .bg-color.rounded-xxl.p-6.border {
        padding: 1.5rem !important;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    .mobile-bonus-amount {
        font-size: 1.25rem !important; /* 20px для очень маленьких экранов */
        min-width: 100px;
    }
    
    .mobile-bonus-text {
        font-size: 0.5625rem !important; /* 9px для очень маленьких экранов */
        line-height: 1.2;
    }
}

/* Для экстремально маленьких экранов */
@media (max-width: 360px) {
    .mobile-bonus-amount {
        font-size: 1.125rem !important; /* 18px */
        min-width: 70px;
    }
    
    .mobile-bonus-text {
        font-size: 0.5rem !important; /* 8px */
    }
    
    .mobile-bonus-row {
        gap: 0.5rem;
    }
}

/* ===== ГОРИЗОНТАЛЬНОЕ РАСПОЛОЖЕНИЕ КАРТИНКИ И ЗАГОЛОВКА НА МОБИЛЬНЫХ ===== */

/* Класс для горизонтального расположения картинки и заголовка */
.image-title-row-mobile {
    display: flex;
    flex-direction: column;
}

/* Десктопная версия - обычное расположение */
@media (min-width: 769px) {
    .image-title-row-mobile {
        display: block;
    }
}

/* Мобильная версия - картинка и заголовок в одну строку */
@media (max-width: 768px) {
    .image-title-row-mobile {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Изображение фиксированного размера */
    .image-title-row-mobile img.feat-img {
        width: 40px !important;
        height: 40px !important;
        object-fit: contain !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        margin-top: -2px !important;
    }
    
    /* Заголовок занимает оставшееся пространство */
    .image-title-row-mobile .text-color.f-s-16.text-semibold {
        flex: 1 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        text-align: left !important;
        line-height: 1.3 !important;
        padding-top: 2px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        min-height: 40px !important; /* Выравнивание по высоте картинки */
        display: flex !important;
        align-items: center !important;
    }
    
    /* Описание текста идет под блоком с картинкой и заголовком */
    .bg-color.rounded-xxl.p-6.border .text-custom-gray.f-s-14.text-regular {
        margin-top: 0.5rem !important;
        text-align: left !important;
        width: 100% !important;
        padding-left: 0 !important;
        clear: both !important;
    }
}

/* Для планшетов (640px-768px) */
@media (max-width: 768px) and (min-width: 641px) {
    .image-title-row-mobile {
        gap: 0.75rem !important;
    }
    
    .image-title-row-mobile img.feat-img {
        width: 35px !important;
        height: 35px !important;
    }
    
    .image-title-row-mobile .text-color.f-s-16.text-semibold {
        font-size: 15px !important;
        min-height: 35px !important;
    }
    
    .bg-color.rounded-xxl.p-6.border .text-custom-gray.f-s-14.text-regular {
        font-size: 13px !important;
    }
}

/* Для мобильных (до 640px) */
@media (max-width: 640px) {
    .image-title-row-mobile {
        gap: 0.75rem !important;
    }
    
    .image-title-row-mobile img.feat-img {
        width: 32px !important;
        height: 32px !important;
        margin-top: 0 !important;
    }
    
    .image-title-row-mobile .text-color.f-s-16.text-semibold {
        font-size: 14px !important;
        min-height: 32px !important;
        line-height: 1.2 !important;
        padding-top: 0 !important;
    }
    
    .bg-color.rounded-xxl.p-6.border .text-custom-gray.f-s-14.text-regular {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-top: 0.4rem !important;
    }
}

/* Для очень маленьких экранов (до 480px) */
@media (max-width: 480px) {
    .image-title-row-mobile {
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .image-title-row-mobile img.feat-img {
        width: 28px !important;
        height: 28px !important;
    }
    
    .image-title-row-mobile .text-color.f-s-16.text-semibold {
        font-size: 13px !important;
        min-height: 28px !important;
    }
    
    .bg-color.rounded-xxl.p-6.border .text-custom-gray.f-s-14.text-regular {
        font-size: 11px !important;
        line-height: 1.2 !important;
        margin-top: 0.3rem !important;
    }
}

/* Для экстремально маленьких экранов (до 360px) */
@media (max-width: 360px) {
    .image-title-row-mobile {
        gap: 0.4rem !important;
    }
    
    .image-title-row-mobile img.feat-img {
        width: 24px !important;
        height: 24px !important;
    }
    
    .image-title-row-mobile .text-color.f-s-16.text-semibold {
        font-size: 12px !important;
        min-height: 24px !important;
    }
    
    .bg-color.rounded-xxl.p-6.border .text-custom-gray.f-s-14.text-regular {
        font-size: 10px !important;
        margin-top: 0.25rem !important;
    }
}

.l-h-1 {
    line-height: 1.1;
}

.socials-descktop {
	display: block;
}
.socials-mobile {
	display: none;
	margin-top: 15px;
}
.footer-links-mobile {
	display: none;
}
@media (max-width: 768px) {
	.logo-footer {
	   width: 150px;
	}
	.socials-descktop {
	   display: none;
    }
    .socials-mobile {
		display: block;
	}
	
	/* Мобильные ссылки футера в столбец */
	.footer-links-mobile {
	    display: flex;
	    flex-direction: column;
	    gap: 0.5rem;
	}
}

/* ===== СТИЛИ ДЛЯ ФУТЕРА ===== */

.footer-links-mobile .text-semibold.text-color.f-s-16 {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.footer-links-mobile a {
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.footer-links-mobile a:hover {
    color: #34589A;
    text-decoration: underline;
}

/* Для десктопной версии - если нужно горизонтальное расположение */
@media (min-width: 769px) {
    .footer-links-mobile {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
    
    .footer-links-mobile .text-semibold.text-color.f-s-16 {
        margin-bottom: 0;
        margin-right: 0.5rem;
    }
}