/**
 * Сделано на Лунной Базе
 *    https://mb4.ru
 *   	© 2006—2025
 **/
 
/**** Цветовая схема ****/
:root {
	/* Основные цвета */
	--white: #ffffff;          /* Белый */
	--black: #000000;          /* Чёрный */
	--gray: #D9D9D9;           /* Серый */
	--light-gray: #FFF8F8;     /* Светло-серый */
	--green: #3CAA32;          /* Зелёный */
	--light-green: #def1dc;    /* Светло-зелёный */
	--yellow: #FAB432;         /* Жёлтый */
	--light-yellow: #feeccc;   /* Светло-жёлтый */
}
.bg-gray {
	background: var(--gray);
	border-radius: 1rem 1rem;
	padding: 1rem;
}
.bg-light-green {
	background: var(--light-green);
	border-radius: 1rem 1rem;
	padding: 1rem;
}
.bg-light-yellow {
	background: var(--light-yellow);
	border: 2px solid #0000002E;
	padding: 1.5rem;
	min-height: 20rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	border-radius: 1rem;
}
.bg-yellow {
	background: var(--yellow);
	width: calc(100% + 3rem);
	margin: -1.5rem 0 0 0;
	border-radius: 1rem 1rem 0 0;
	padding: 1rem 0;
}
.under-yellow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-green {
	color: var(--green);
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-FAQ {
	text-align: left;
	display: block;
	width: 100%;
	margin: 1rem 0 0 1rem !important;
}
.text-FAQ.text-green ul {
	list-style: none;
	padding-left: 0;
}
.text-FAQ.text-green li {
	color: var(--green);
	margin: 0 0 1rem 0;
	font-weight: 500;
	display: flex;
	align-items: flex-start;
}
.text-FAQ.text-green li::before {
	content: "\25BA";
	padding-right: .5rem;
	flex-shrink: 0;
}

.mb-2 {
	margin: 0 0 2rem 0;
}

html {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* Скрываем горизонтальный скролл, но разрешаем вертикальный */
}

/* Основной контейнер страницы с Grid */
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  display: grid;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;

  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--black);
}

/* Центрирующий контейнер с максимальной шириной */
.container {
  max-width: 1920px;
  margin: 0 auto;
  
  /* Также можно сделать грид-контейнером для сложных макетов */
  display: grid;
  grid-template-columns: 1fr; /* Одна колонка по умолчанию */
  gap: 20px; /* Отступ между элементами-гридами :cite[1] */
}

/* Блок с paralax-эффектом */
.paralax {
	max-width: 2200px;
	width: 100%;
	margin: 0 auto;
	background-image: url('/img/jpg/decision.jpg');
	background-attachment: fixed;      /* ← ключ к parallax-эффекту */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}
.paralax.risks {
	background-image: url('/img/jpg/risks.jpg');
}
.paralax .block {
  position: relative;
  z-index: 2;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.paralax::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	z-index: 1;
}
.paralax .block ul {
  padding-left: 0;
  margin-left: 0;
  /*list-style-position: inside;*/
  padding: .5rem 1.5rem;
}
h2, p, li {
	color: var(--black);
}

/* Блок контента с адаптивной сеткой */
.block {
	max-width: 1516px;
	margin: 0 auto;

	/* Адаптивная сетка: автоматическое количество колонок :cite[1]:cite[10] */
	display: grid;
	/* Автоматически подбирает кол-во колонок (min 300px, max 1fr) :cite[1] */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	padding: 20px;
}
/* Mobile-First Grid */
.grid-container {
	display: grid;
	grid-template-columns: 1fr; /* 1 колонка на мобильных */
	gap: 20px;
	padding: 15px;
}

.grid-12-cols {
  display: grid;
  /*grid-template-columns: repeat(12, 1fr);*/ /* 12 колонок */
  grid-template-columns: 1fr; /* ← 1 колонка на мобильных */
  gap: 20px; /* Отступ между колонками */
  width: 100%;
}
.grid-9,
.grid-8,
.grid-6,
.grid-4,
.grid-3 {
	grid-column: 1 / -1; /* На мобильных - полная ширина */
}

.grid-10-cols {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 колонок */
  gap: 20px; /* Отступ между колонками */
  width: 100%;
}
.grid10-10,
.grid10-9,
.grid10-8,
.grid10-7,
.grid10-6,
.grid10-5,
.grid10-4,
.grid10-3,
.grid10-2,
.grid10-1 {
	grid-column: 1 / -1; /* На мобильных - полная ширина */
}

h1, h2 {
	font-size: 1.8rem;
	font-weight: 600;
	text-align: center;
}
h3 {
	font-size: 2.5rem;
	font-weight: 600;
	text-align: center;
}

.block1p {
	margin: 2rem 0;
}

.button {
    padding: .5rem 1.5rem;
	margin: 0 auto;
	width: fit-content;
	color: var(--white);
	border: unset;
	border-radius: .25rem;
	cursor: pointer;
	font-size: 1.25rem;
}
.button-green {
	background: var(--green);
}

.button-green:hover {
	background: var(--white);
	color: var(--green);
	border: 2px solid var(--green);
}
.button-yellow {
	background: var(--yellow);
}

.button-yellow:hover {
	background: var(--white);
	color: var(--yellow);
	border: 2px solid var(--yellow);
}
.bolder {
	font-weight: 700;
}

/* Форма обратной связи */
.callback {
	background: var(--gray);
	padding: 1.5rem;
	border-radius: .25rem;
}

.form-container {
	background: var(--white);
	padding: 30px;
	border-radius: 8px;
}
.form-group {
	margin-bottom: 20px;
}
label {
	display: block;
	margin-bottom: .25rem;
	font-size: 1rem;
	font-weight: 500;
}
        
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select {
	width: 100%;
	padding: .75rem;
	border: 2px solid var(--black);
	border-radius: .5rem;
	font-size: 1.0rem;
	transition: border-color 0.3s;
}
input:focus,
select:focus {
	outline: none;
	border-color: var(--green);
}
button.button.button-yellow {
	margin: 0 auto;
	display: block;
	text-transform: uppercase;
	color: var(--black);
	transition: background-color 0.3s;
	border: 2px solid var(--yellow);
}

.required {
	color: red;
}

#how-it-works p img {
	width: 10rem;
	padding: 0 0 1rem 0;
}
#uniqueness p img {
	width: 5rem;
	padding: 3rem 0 1rem 0;
}
#uniqueness p.text-right.step-item {
	text-align: center;
}
.uniqueness-txt {
    text-align: center;
}
.tenth p.text-right.step-item {
    font-size: 3rem;
    font-weight: 900;
	text-align: center;
	margin: 0 0 1rem 0;
}

.advantage {
	background: var(--yellow);
	color: var(--white);
	max-width: 1219px;
	margin: 0 auto 0 auto;
	padding: 1rem 2rem;
	border-radius: 0.25rem;
	line-height: 1.75rem;
	text-align: center;
	text-transform: uppercase;
}

/* Финансовые условия */
.gradient-grey {
  background: linear-gradient(to bottom, #FFFFFF, var(--gray));
  border: 2px solid #0000002E;
  padding: 1.5rem;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  border-radius: 1rem;
}
.gradient-grey > div:first-child {
  margin-top: 0;
  margin-bottom: auto;
}
.big-green {
	font-size: 3rem;
	font-weight: 500;
	color: var(--green);
}
.gradient-grey > div.big-green {
  margin: auto;
}
.gradient-grey > div:last-child {
  margin-top: auto;
  margin-bottom: 0;
}

/**** Калькулятор ****/

.tabs {
	display: flex;
	flex-direction: column;
}

/* Обёртка для заголовков — в строку */
.tabs-header {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #ccc;
}

/* Скрываем переключатели */
.tabs input[type="radio"] {
	display: none;
}

/* Стили для заголовков табов */
.tab-label {
	padding: 1rem;
	cursor: pointer;
	background: #f4f4f4;
	border: 2px solid #ddd;
	border-bottom: none;
	margin-right: 0.25rem;
	border-radius: 0.25rem 0.25rem 0 0;
	text-align: center;
}

/* Активный таб */
/* Так как label теперь внутри .tabs-header, используем ~ (общий родитель) */
#tab1:checked ~ .tabs-header .tab-label[for="tab1"],
#tab2:checked ~ .tabs-header .tab-label[for="tab2"] {
  background: linear-gradient(to bottom, var(--gray), #FFFFFF);
  border: 2px solid #0000002E;
  border-bottom: none;
  border-top: 2px solid #0000005E;
  margin-bottom: -2px;
  font-weight: bold;
}

/* Содержимое табов */
.tab-content {
  display: none;
  background: linear-gradient(to bottom, #FFFFFF, var(--gray));
  border: 2px solid #0000002E;
  padding: 1.5rem;
  margin-top: -1px;
  border-radius: 0 0 0.25rem 0.25rem;
}
.tabs h3 {
	font-size: 2rem;
	margin: 0 0 1rem 0;
}

/* Показываем содержимое активного таба */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
	display: block;
}
.tabs .form-container {
    background: none;
}
.form-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.form-part-1,
.form-part-2 {
  width: 100%;
}

/* Десктопная версия */
@media (min-width: 768px) {
	/* 12-колоночная сетка */
	.grid-12-cols {
		grid-template-columns: repeat(12, 1fr);
	}
	.grid-12 { grid-column: 1 / -1; } /* На всю ширину */
	.grid-9 { grid-column: span 9; }   /* 75% от 12 колонок */
	.grid-8 { grid-column: span 8; }   /* 66% */
	.grid-6 { grid-column: span 6; }   /* 50% */
	.grid-4 { grid-column: span 4; }   /* 33.33% */
	.grid-3 { grid-column: span 3; }   /* 25% */
  
	.grid-container {
		grid-template-columns: repeat(12, 1fr); /* 12-колоночная сетка */
	}

	/* 10-колоночная сетка */
	.grid10-10 { grid-column: 1 / -1; } /* На всю ширину (10/10 = 100%) */
	.grid10-9  { grid-column: span 9; }  /* 90% */
	.grid10-8  { grid-column: span 8; }  /* 80% */
	.grid10-7  { grid-column: span 7; }  /* 70% */
	.grid10-6  { grid-column: span 6; }  /* 60% */
	.grid10-5  { grid-column: span 5; }  /* 50% */
	.grid10-4  { grid-column: span 4; }  /* 40% */
	.grid10-3  { grid-column: span 3; }  /* 30% */
	.grid10-2  { grid-column: span 2; }  /* 20% */
	.grid10-1  { grid-column: span 1; }  /* 10% */

	.container-10 {
		display: grid;
		grid-template-columns: repeat(10, 1fr); /* 10-колоночная сетка */
		gap: 1rem; /* по желанию */
	}

	h1, h2 {
		font-size: 4rem;
	}
	.block1p {
		margin: 4rem 0;
		text-align: center;
	}
	#how-it-works .step-item:not(:last-child)::after {
		content: "→";
		color: var(--green);
		font-size: 3.0rem;
		margin: -7.5rem -107% 4.5rem 0;
		display: block;
	}
	.paralax .block {
		padding: 2rem;
	}
	#uniqueness p img {
		width: 2rem;
		padding: .5rem 0;
	}
	#uniqueness p.text-right.step-item {
		text-align: right;
	}
	.uniqueness-txt {
		text-align: left;
	}
	#uniqueness .grid10-9 {
		margin: .75rem 0;
	}
	.tenth {
		width: 80%
	}
	.tenth .uniqueness-txt {
		margin: auto;
	}
	.tenth .grid10-9 {
		display: grid;
		justify-content: start;
	}
	.tenth .grid10-1 {
		display: grid;
		justify-content: end;
	}
	.tenth p.text-right.step-item {
		text-align: right;
		margin: auto;
	}
	.form-container {
		flex-direction: row;
	}
	.form-part-1,
	.form-part-2 {
		flex: 1; /* Занимают равную долю */
	}
	/* Защита от вылезания полей */
	.form-part-1 .form-group input,
	.form-part-1 .form-group select {
		width: 100%;
		box-sizing: border-box;
	}
}