/* ==========================================================================
   Обратный звонок: кнопка в шапке, модальное окно и блок формы на странице.
   --------------------------------------------------------------------------
   Файл подключается в header.php на всех страницах, поэтому кнопка и окно
   доступны везде. Раньше окно лежало внутри страницы «Комплексные решения
   для ЦОД» и работало только там.
   ========================================================================== */

/* ---------- 1. Кнопка «Заказать обратный звонок» ---------- */
.callback-trigger{
	display:inline-block;
	box-sizing:border-box;
	margin:0;
	padding:10px 18px;
	border:0;
	border-radius:4px;
	background:#fff;
	color:#e1261c;
	font:inherit;
	font-size:15px;
	line-height:1.2;
	white-space:nowrap;
	cursor:pointer;
	transition:background .2s ease,color .2s ease;
}
.callback-trigger:hover{background:#ffe9e8}

/* Компактная кнопка-телефон рядом с бургером. На планшете и телефоне меню
   свёрнуто, и текстовая кнопка была бы не видна без его открытия, а рекламный
   трафик приходит в основном с мобильных. 1310px — брейкпоинт бургера в теме. */
.callback-trigger_icon{display:none}
@media screen and (max-width:1310px){
	.callback-trigger_icon{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		flex:0 0 auto;
		width:44px;
		height:44px;
		margin-right:14px;
		padding:0;
		border-radius:50%;
		background:#fff;
		color:#e1261c;
	}
	.callback-trigger_icon:hover{background:#ffe9e8}
}

/* в выпадающем меню планшета/телефона подложка светлая — кнопку делаем красной */
.menu__line .callback-trigger,
.menu-mobile .callback-trigger{
	width:100%;
	padding:13px 18px;
	background:#e1261c;
	color:#fff;
	font-size:16px;
	text-align:center;
}
.menu__line .callback-trigger:hover,
.menu-mobile .callback-trigger:hover{background:#c91f17}

/* ---------- 2. Модальное окно ---------- */
.callback-modal{
	display:none;
	position:fixed;
	inset:0;
	width:100%;
	height:100%;
	z-index:99999;
	overflow-y:auto;
	padding:32px 16px;
	box-sizing:border-box;
	font-family:inherit;
}
.callback-modal.is-active{display:flex;align-items:center;justify-content:center}
.callback-modal__overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1}
.callback-modal__window{
	position:relative;
	z-index:2;
	box-sizing:border-box;
	width:min(92vw,920px);
	max-height:calc(100vh - 64px);
	overflow-y:auto;
	margin:0;
	padding:34px 42px 38px;
	background:#fff;
	border-radius:22px;
}
.callback-modal__close{
	position:absolute;
	top:18px;
	right:22px;
	z-index:3;
	width:34px;
	height:34px;
	padding:0;
	border:0;
	border-radius:50%;
	background:transparent;
	color:#9a9a9a;
	font-size:0;
	line-height:0;
	cursor:pointer;
	transition:background .2s ease,color .2s ease;
}
.callback-modal__close::before,
.callback-modal__close::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:17px;
	height:1.8px;
	background:currentColor;
	border-radius:2px;
}
.callback-modal__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.callback-modal__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.callback-modal__close:hover{background:#f3f3f3;color:#e1261c}

/* ---------- 3. Форма (общая для окна и блока на странице) ---------- */
.callback-form{position:relative;width:100%;box-sizing:border-box}

/* Экран «заявка отправлена». Раньше это была строка под формой: на телефоне
   её почти не было видно, потому что она уходила за нижний край. Теперь
   сообщение перекрывает форму и всегда оказывается перед глазами. */
.callback-form__done{
	position:absolute;
	inset:-12px;
	z-index:5;
	display:none;
	align-items:center;
	justify-content:center;
	padding:24px;
	background:rgba(255,255,255,.97);
	border-radius:14px;
	text-align:center;
}
.callback-form__done.is-visible{display:flex}
.callback-form__done-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:64px;
	height:64px;
	margin:0 auto 18px;
	border-radius:50%;
	background:#e8f6ec;
	color:#1e7a3c;
}
.callback-form__done-title{
	margin:0 0 8px;
	color:#2f2f2f;
	font-size:26px;
	line-height:1.2;
	font-weight:700;
	text-align:center;
}
.callback-form__done-text{
	margin:0;
	color:#5a5a5a;
	font-size:17px;
	line-height:1.4;
	text-align:center;
}
.callback-form__title{
	margin:0 42px 14px 0;
	color:#4a4a4a;
	font-size:40px;
	line-height:1.15;
	font-weight:700;
	letter-spacing:0;
}
.callback-form__subtitle{margin:0 0 30px;color:#333;font-size:22px;line-height:1.35}
.callback-form__body{display:block;margin:0;padding:0}
.callback-form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.callback-form__input{
	display:block;
	box-sizing:border-box;
	width:100%;
	height:54px;
	margin:0 0 22px;
	padding:0;
	border:0;
	border-bottom:1px solid #bdbdbd;
	border-radius:0;
	background:transparent;
	color:#333;
	font:inherit;
	font-size:18px;
	line-height:1.3;
	outline:none;
	transition:border-color .2s ease;
}
.callback-form__input:focus{border-bottom-color:#e1261c}
.callback-form__input::placeholder{color:#8a8a8a;opacity:1}
.callback-form__footer{
	display:grid;
	grid-template-columns:304px 180px minmax(220px,1fr);
	align-items:center;
	gap:22px;
	margin-top:4px;
}
.callback-form__captcha{width:304px;min-height:78px;overflow:hidden}
.callback-form__submit{
	display:block;
	box-sizing:border-box;
	width:180px;
	min-width:180px;
	height:68px;
	margin:0;
	padding:0 20px;
	border:0;
	border-radius:4px;
	background:#e1261c;
	color:#fff;
	font:inherit;
	font-size:22px;
	line-height:1;
	cursor:pointer;
	transition:background .2s ease;
}
.callback-form__submit:hover{background:#c91f17}
.callback-form__submit:disabled{background:#c9c9c9;cursor:default}
.callback-form__agreement{max-width:300px;margin:0;color:#333;font-size:13px;line-height:1.45}
.callback-form__agreement a{color:#e1261c;text-decoration:underline}

/* сообщение о результате отправки — вместо системного alert */
.callback-form__status{
	display:none;
	margin:18px 0 0;
	padding:14px 18px;
	border-radius:6px;
	font-size:16px;
	line-height:1.4;
}
.callback-form__status.is-visible{display:block}
.callback-form__status_ok{background:#e8f6ec;color:#1e7a3c}
.callback-form__status_error{background:#fdeceb;color:#c02219}

/* ---------- 4. Блок формы внутри страницы ---------- */
.callback-block{
	margin:64px 0 0;
	padding:48px;
	background:#fff;
	border-radius:12px;
}
.callback-block .callback-form__title{margin-right:0;font-size:36px}
.callback-block .callback-form__subtitle{font-size:20px}

/* ---------- 5. Адаптив ---------- */
@media (max-width:1100px){
	.callback-block{padding:36px 28px}
	.callback-block .callback-form__title{font-size:30px}
}
@media (max-width:980px){
	.callback-modal.is-active{align-items:flex-start}
	.callback-form__footer{grid-template-columns:304px 180px}
	.callback-form__agreement{grid-column:1 / -1;max-width:100%}
}
@media (max-width:767px){
	.callback-modal{padding:18px 12px}
	.callback-modal.is-active{align-items:flex-start}
	.callback-modal__window{
		width:100%;
		max-height:calc(100vh - 36px);
		padding:28px 18px 30px;
		border-radius:16px;
	}
	.callback-modal__close{top:10px;right:12px}
	.callback-form__title{margin-right:34px;font-size:30px}
	.callback-form__subtitle{margin-bottom:24px;font-size:18px}
	.callback-form__row{grid-template-columns:1fr;gap:0}
	.callback-form__footer{display:block}
	.callback-form__captcha,
	.callback-form__submit,
	.callback-form__agreement{margin-top:16px}
	.callback-form__captcha{max-width:100%;overflow-x:auto}
	.callback-form__submit{width:100%}
	.callback-block{margin-top:40px;padding:28px 18px}
	.callback-block .callback-form__title{margin-right:0;font-size:26px}
	.callback-block .callback-form__subtitle{font-size:17px}
	.callback-form__done{padding:18px}
	.callback-form__done-icon{width:54px;height:54px;margin-bottom:14px}
	.callback-form__done-title{font-size:22px}
	.callback-form__done-text{font-size:16px}
}