/* ==========================================================================
   tt24-7.ru / fn — слой современного оформления страницы «Замена ФН»
   Подключается ПОСЛЕ style.css и переопределяет только визуальные детали
   (отступы, скругления, тени, переходы) в том же стиле, что и модернизация
   главной страницы (см. /css/modern.css). Структура HTML, классы, формы и
   скрипты (script.js, слайдеры, попапы, карта) не затронуты — вся
   функциональность работает как прежде.
   ========================================================================== */

:root{
	--accent:#96c02c;
	--accent-dark:#6c8a20;
	--accent-light:#b3d856;
	--accent-soft:#f0f3e7;
	--ink:#242424;
	--ink-soft:#5b5f57;
	--paper:#ffffff;
	--paper-soft:#f6f7f2;
	--line:#e6e8e0;
	--radius-lg:20px;
	--radius-md:14px;
	--radius-sm:10px;
	--shadow-sm:0 2px 10px rgba(30,34,20,.08);
	--shadow-md:0 12px 30px rgba(30,34,20,.12);
	--shadow-lg:0 24px 60px rgba(30,34,20,.18);
	--ease:cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: reduce){
	*{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

html{scroll-behavior:smooth;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

a, button, input[type=submit], input[type=text], input[type=tel]{
	transition:all .25s var(--ease);
}

/* ---------- Шапка ---------- */
.page-header{
	box-shadow:0 2px 16px rgba(0,0,0,.25);
}
.page-header__menu-btn{
	transition:opacity .2s var(--ease);
}
.page-header__menu-btn:hover{ opacity:.8; }
.page-header ul li{
	transition:color .2s var(--ease), opacity .2s var(--ease);
}

/* ---------- Верхний информационный бар ---------- */
.info__callback{
	transition:transform .2s var(--ease), opacity .2s var(--ease);
	cursor:pointer;
}
.info__callback:hover{ transform:translateY(-1px); opacity:.85; }

/* ---------- Слайды-шапки (hero) ----------
   Заголовок первого слайда (slide-1) переведён из <h2> в <h1> для SEO
   (единственный H1 на странице) — дублируем его вид один в один через
   тег h1, поверх правил из style.css (h2), чтобы верстка не изменилась. */
.top-block .top-slider .slide-1 h1{
	margin:0;
	color:#1f1f1f;
	font-weight:900;
	font-size:41px;
	width:660px;
}
.top-block .top-slider .slide-1 h1 br{ display:none; }
@media (max-width:1189px) and (min-width:768px){
	.top-block .top-slider .slide-1 h1{ font-size:30px; width:345px; }
}
@media (max-width:767px){
	.top-block .top-slider .slide-1 h1{ font-size:22px; line-height:30px; width:225px; margin-top:23px; }
	.top-block .top-slider .slide-1 h1 br{ display:inline; }
}

.top-block .top-slider .slide-4__dt{
	border-radius:999px;
	box-shadow:var(--shadow-sm);
}
.top-block .top-slider .slide-1__info,
.top-block .top-slider .slide-1 .slide-1__info{
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-sm);
}

/* Кнопки-«пилюли» (жёлтый градиент) — мягче тень, лёгкий подъём на hover */
.top-block .top-slider .slide-1 button,
.top-block .top-slider .slide-2 button,
.top-block .top-slider .slide-3 button,
.top-block .top-slider .slide-4 button,
.popup-form form button,
.popup-success form button{
	box-shadow:var(--shadow-sm);
	transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.top-block .top-slider .slide-1 button:hover,
.top-block .top-slider .slide-2 button:hover,
.top-block .top-slider .slide-3 button:hover,
.top-block .top-slider .slide-4 button:hover,
.popup-form form button:hover,
.popup-success form button:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 28px rgba(212,154,14,.35);
}

/* ---------- «Основные причины замены устройства» ---------- */
.main-reasons__one{
	border-radius:var(--radius-lg) !important;
	box-shadow:var(--shadow-sm) !important;
	transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.main-reasons__one:hover{
	transform:translateY(-4px);
	box-shadow:var(--shadow-md) !important;
}
.main-reasons__shadow{
	border-radius:var(--radius-lg) !important;
	background:linear-gradient(160deg, var(--accent-light) 0%, var(--accent) 100%) !important;
}
.main-reasons__info{
	background:var(--paper-soft);
	border-radius:var(--radius-lg);
	padding:28px 32px;
	box-sizing:border-box;
	height:auto;
	color:var(--ink);
	border-left:6px solid var(--accent);
}
.main-reasons__info-head{ color:var(--ink); font-weight:700; }
.main-reasons__info-text{ color:var(--ink-soft); }
@media (max-width:767px){
	.main-reasons__info{ padding:22px 20px; }
}

/* ---------- Форма заявки (блок «Фискальные накопители для онлайн-касс») ---------- */
.online-form .content-wrapper,
.what-price form{
	background:var(--paper);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
}
.online-form input[type=text],
.online-form input[type=tel],
.what-price__input-wrapper input[type=text],
.what-price__input-wrapper input[type=tel],
.popup-form input[type=text],
.popup-form input[type=tel]{
	border-radius:var(--radius-sm) !important;
	border:1px solid var(--line) !important;
}
.online-form input[type=text]:focus,
.online-form input[type=tel]:focus,
.what-price__input-wrapper input:focus,
.popup-form input:focus{
	outline:none;
	border-color:var(--accent) !important;
	box-shadow:0 0 0 4px var(--accent-soft);
}
.online-form button,
.what-price__input-wrapper button{
	border-radius:999px !important;
	box-shadow:var(--shadow-sm);
	transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.online-form button:hover,
.what-price__input-wrapper button:hover{
	transform:translateY(-2px);
	box-shadow:var(--shadow-md);
}

/* ---------- «Как происходит замена ФН» ---------- */
.how-replace__one-step{
	border-radius:var(--radius-md) !important;
	box-shadow:var(--shadow-sm) !important;
	background:rgba(255,255,255,.14) !important;
	transition:transform .3s var(--ease), background .3s var(--ease);
}
.how-replace__one-step:hover{
	transform:translateY(-3px);
	background:rgba(255,255,255,.22) !important;
}
.how-replace__one-step.last{
	border-radius:var(--radius-md) !important;
	box-shadow:var(--shadow-sm) !important;
}

/* ---------- «Что потребуется для замены» ---------- */
.what-need ul{
	list-style:none;
	margin:0;
	padding:0;
}
.what-need ul li{
	position:relative;
	padding-left:28px;
}
.what-need ul li:before{
	content:"";
	position:absolute;
	left:0;
	top:.55em;
	width:10px;
	height:10px;
	border-radius:50%;
	background:var(--accent);
}
.what-need__text{
	border-radius:var(--radius-lg) !important;
	box-shadow:var(--shadow-sm);
}

/* ---------- «Почему надо вовремя заменить» (штрафы) ---------- */
.why-need__one-fine{
	border-radius:0 0 var(--radius-md) var(--radius-md);
	box-shadow:var(--shadow-sm);
	transition:transform .3s var(--ease), box-shadow .3s var(--ease);
	overflow:hidden;
}
.why-need__one-fine:hover{
	transform:translateY(-3px);
	box-shadow:var(--shadow-md);
}

/* ---------- «Сколько стоит замена накопителя» (таблица цен) ---------- */
.what-price__tariffs-wrapper .what-price__col .what-price__th{
	border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.what-price__tariffs-wrapper .what-price__col .what-price__td{
	transition:background .25s var(--ease);
}
.what-price__tariffs-wrapper .what-price__col:last-child .what-price__td:last-child{
	border-radius:0 0 var(--radius-md) var(--radius-md);
}

/* ---------- «Типы фискальных накопителей» ---------- */
.types__one{
	border-radius:var(--radius-lg) !important;
	box-shadow:var(--shadow-sm) !important;
	transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.types__one:hover{
	transform:translateY(-4px);
	box-shadow:var(--shadow-md) !important;
}
.types__price button{
	border-radius:999px !important;
	background:linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
	box-shadow:var(--shadow-sm);
	transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.types__price button:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 28px rgba(135,166,46,.35);
}

/* ---------- «Какой ФН подходит Вам?» ---------- */
.fn-accept__one{
	border-radius:var(--radius-lg) !important;
	box-shadow:var(--shadow-sm) !important;
	transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fn-accept__one:hover{
	transform:translateY(-4px);
	box-shadow:var(--shadow-md) !important;
}
.fn-accept__fn-13-15,
.fn-accept__fn-36{
	border-radius:999px !important;
	box-shadow:var(--shadow-sm);
	transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.fn-accept__fn-13-15:hover,
.fn-accept__fn-36:hover{
	transform:translateY(-2px);
	box-shadow:var(--shadow-md);
}

/* ---------- «Статусы нашей компании» ---------- */
.statuses__one{
	border-radius:var(--radius-md);
	transition:transform .3s var(--ease);
}
.statuses__one:hover{ transform:translateY(-3px); }

/* ---------- Контакты / карта ---------- */
.contacts__wrapper{
	border-radius:var(--radius-lg) !important;
	box-shadow:var(--shadow-lg) !important;
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
}
.contacts__wrapper:after{ display:none !important; }
.contacts__wrapper button{
	border-radius:999px !important;
	box-shadow:var(--shadow-sm);
	transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.contacts__wrapper button:hover{
	transform:translateY(-2px);
	box-shadow:var(--shadow-md);
}

/* ---------- Футер ---------- */
.page-footer{
	box-shadow:0 -2px 16px rgba(0,0,0,.15);
}

/* ---------- Модальные окна (заявка / успех) ---------- */
.popup-form,
.popup-success{
	border-radius:var(--radius-lg) !important;
	box-shadow:var(--shadow-lg) !important;
}
.popup-form__close,
.popup-success__close{
	transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.popup-form__close:hover,
.popup-success__close:hover{
	transform:rotate(90deg);
	opacity:.7;
}

/* стрелки между шагами «Как происходит замена ФН» вылезали за край экрана на телефоне */
.how-replace{overflow-x:hidden;}

/* ---------- Статусы — бегущая лента как на главной ---------- */
.statusCarousel{overflow:hidden;padding:6px 0 46px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%)}
.statusCarousel__track{display:flex;width:-webkit-max-content;width:max-content;gap:24px;animation:statusScroll 48s linear infinite}
.statusCarousel:hover .statusCarousel__track{animation-play-state:paused}
.statusCarousel__item{flex:0 0 auto;width:260px;text-align:center}
.statusCarousel__item .img{height:110px;background-color:var(--paper);background-repeat:no-repeat;background-position:center;background-size:contain;background-origin:content-box;box-sizing:border-box;padding:26px 30px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.statusCarousel__item:hover .img{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.statusCarousel__item .name{margin-top:14px;font-size:14px;font-weight:500;letter-spacing:.2px;color:var(--ink-soft);padding:0 8px}
.statusCarousel__item .img.icon1{background-image:url(../img/status-icon1.png)}
.statusCarousel__item .img.icon2{background-image:url(../img/status-icon2.png)}
.statusCarousel__item .img.icon3{background-image:url(../img/status-icon3.png)}
.statusCarousel__item .img.icon4{background-image:url(../img/status-icon4.png)}
.statusCarousel__item .img.icon5{background-image:url(../img/status-icon5.png)}
.statusCarousel__item .img.icon6{background-image:url(../img/status-icon6.png)}
.statusCarousel__item .img.icon7{background-image:url(../img/status-icon7.png)}
.statusCarousel__item .img.icon8{background-image:url(../img/status-icon8.png)}
.statusCarousel__item .img.icon9{background-image:url(../img/status-icon9.png)}
@keyframes statusScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.statusCarousel__track{animation:none}}
@media (max-width:600px){.statusCarousel__item{width:200px}.statusCarousel__item .img{padding:24px 22px}}
.statuses{background:var(--paper-soft)}