/* сервис-айфон.рф — правки поверх css/app.min.css (ТЗ №12 «скорость», ТЗ №13 «телефон», страницы 404 и «Спасибо») */

/* Карта: место зарезервировано, скрипт подгружается при подходе к блоку (js/site.js) */
.ymap { width: 100%; min-height: 464px; background: #f2f2f2; }

/* Кнопка звонка в шапке: на телефоне номер спрятан в меню, на первом экране позвонить было нечем */
.header__hamburger { display: flex; align-items: center; gap: 8px; }
.header__call {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 1px solid #040607; background: #ffd800; color: #040607;
}
.menu-hamburger { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Попап «Заказать звонок»: крестик под палец */
.popup span[onclick] { top: 0; right: 0; width: 44px; height: 44px; line-height: 44px; text-align: center; }

@media (max-width: 991px) {
	.ymap { min-height: 380px; }

	/* поля форм: 16 px — iOS не зумит страницу при фокусе; высота под палец */
	.input__input, .popup form input, .popup form textarea { font-size: 16px; }
	.input__input { min-height: 48px; }
	.form__form .btn, .popup form button { min-height: 48px; }

	/* попап был жёстко 460 px — на телефоне обрезался справа */
	.popup {
		width: calc(100% - 24px); max-width: 460px; max-height: calc(100% - 24px); overflow-y: auto;
		padding: 44px 16px 20px; font-size: 20px;
	}
	.popup form input, .popup form textarea { width: 100%; margin-top: 10px; box-sizing: border-box; }
	.popup form button { width: 100%; max-width: 280px; }
	.popup p { font-size: 15px; margin-top: 10px; }

	/* зоны нажатия: пункты меню, соцсети, телефоны в контактах, точки и стрелки каруселей */
	.header-menu__link { display: block; min-height: 44px; line-height: 44px; padding-top: 0; padding-bottom: 0; }
	.header-contacts__phone-link { display: inline-block; min-height: 44px; line-height: 44px; font-size: 20px; }
	.soc__item { margin: 6px 5px 0; }
	.soc__link { width: 44px; height: 44px; line-height: 44px; }
	.soc__link img { width: auto; height: auto; max-width: 22px; max-height: 22px; }   /* 24.09: было 44×44 — иконки (25×15 и т.п.) растягивались; зона нажатия — сама ссылка 44×44 */
	.slick-dots li { width: 12px; height: 12px; margin: 16px 10px 6px; }
	.slick-dots li button::before { content: ''; position: absolute; top: -14px; right: -9px; bottom: -14px; left: -9px; }
	.slick-arrow { min-width: 44px; min-height: 44px; }
	.header__logo .b-logo__descr { font-size: 12px; }
	.header-contacts__btn-wrap .btn__center { height: 38px; } /* кнопка «Заказать звонок» в меню: 36 → 44 px */
	.contacts-items__phone { padding: 0; white-space: nowrap; }
	.contacts-items__phone .link { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 12px; }
	.s-contacts a[href^="tel:"], .footer a[href^="tel:"] { display: inline-block; min-height: 44px; line-height: 44px; }

	/* кнопка чата Jivo не закрывает кнопку «Отправить» в открытом попапе */
	body.popup-open jdiv[class^="wrap_"], body.popup-open jdiv[class*=" wrap_"] { display: none !important; }
}

/* ---------- Лист «Юзабилити»: прайс (№3), кнопки в карточках (№14), FAQ (№9), панель связи (№12) ---------- */
.services-items__cta {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 0 22px;
	border-radius: 22px; background: #040607; color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; text-decoration: none;
}
.services-items__cta:hover { background: #feea00; color: #040607; }

.price { max-width: 920px; margin: 40px auto 0; }
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; text-align: left; }
.price-table th { padding: 12px 14px; background: #040607; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
.price-table td { padding: 12px 14px; border-bottom: 1px solid #e6e6e6; vertical-align: top; }
.price-table tbody tr:nth-child(even) { background: #fafafa; }
.price-table__price { font-weight: 800; font-size: 17px; white-space: nowrap; }
.price-table__price--ask { font-weight: 600; font-size: 14px; white-space: normal; color: #555; }
.price__note { margin-top: 16px; font-size: 15px; line-height: 1.5; text-align: center; }

.s-faq { padding: 50px 0 20px; }
.faq { max-width: 860px; margin: 30px auto 0; }
.faq__item { border-bottom: 1px solid #e6e6e6; }
.faq__q { position: relative; display: block; min-height: 48px; padding: 14px 44px 14px 0; font-size: 17px; font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: '+'; position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: #feea00; font-size: 22px; font-weight: 400; }
.faq__item[open] .faq__q::after { content: '–'; }
.faq__a { padding: 0 44px 18px 0; font-size: 16px; line-height: 1.55; }

.sticky-cta { display: none; }
@media (max-width: 991px) {
	.sticky-cta {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
	}
	.sticky-cta a.sticky-cta__btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 24px; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; }   /* ревью 24.09: .footer a[href^=tel] выше перебивал display — «Позвонить» прижимался влево */
	.sticky-cta__btn--call { background: #feea00; color: #040607; }
	.sticky-cta__btn--chat { background: #040607; color: #fff; }
	body { padding-bottom: 64px; }                                   /* низ страницы не прячется под панелью */
	jdiv[class^="wrap_"], jdiv[class*=" wrap_"] { margin-bottom: 68px !important; } /* кнопка чата Jivo — над панелью */
	body.popup-open .sticky-cta { display: none; }

	.services-items__cta { padding: 0 12px; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
	.price-table thead { display: none; }
	.price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
	.price-table tr { padding: 12px 0; border-bottom: 1px solid #e6e6e6; background: none !important; }
	.price-table td { padding: 2px 0; border: none; }
	.price-table td[data-label="Услуга"] { font-weight: 700; font-size: 16px; }
	.price-table td[data-label="Устройство"]::before { content: 'Устройство: '; color: #777; }
	.price-table td[data-label="Цена от"]::before { content: 'Цена от: '; color: #777; font-weight: 400; font-size: 15px; }
	.price-table td[data-label="Комментарий"] { color: #555; font-size: 14px; }
	.s-faq { padding: 30px 0 10px; }
	.faq__q { font-size: 16px; }
}

/* ---------- Служебные страницы: 404, «Спасибо», ошибка формы ---------- */
.service-page { padding: 150px 0 60px; text-align: center; }
.service-page__title { font-size: 34px; font-weight: 800; line-height: 1.2; color: #040607; }
.service-page__text { max-width: 640px; margin: 18px auto 0; font-size: 17px; line-height: 1.5; }
.service-page__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.service-page__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
	border-radius: 25px; border: 2px solid #4971d0; background: #4971d0; color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
}
.service-page__btn--ghost { background: #fff; color: #4971d0; }
.service-page__btn:hover { opacity: .9; }
.service-page__links { margin-top: 30px; font-size: 16px; }
.service-page__links a { display: inline-block; min-height: 44px; line-height: 44px; margin: 0 10px; color: #4971d0; text-decoration: underline; }
.service-page__soc { margin-top: 20px; }
.service-page__addresses { max-width: 640px; margin: 34px auto 0; padding: 0; list-style: none; text-align: left; font-size: 16px; }
.service-page__addresses li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #e6e6e6; }
.service-page__addresses a { color: #040607; font-weight: 700; white-space: nowrap; min-height: 44px; line-height: 44px; }
.service-page__note { margin-top: 14px; font-size: 15px; color: #555; }
.service-page__note a { display: inline-block; min-height: 44px; line-height: 44px; color: #040607; font-weight: 700; }
@media (max-width: 767px) {
	.service-page { padding: 110px 0 40px; }
	.service-page__title { font-size: 26px; }
	.service-page__btn { width: 100%; max-width: 340px; }
	.service-page__addresses li { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ---------- Блог: список статей и статья (страницы собирает docs/servis-iphone/build_blog.py) ---------- */
.article-page { padding: 140px 0 50px; }
.crumbs { margin-bottom: 22px; font-size: 14px; line-height: 1.6; color: #777; }
.crumbs a { color: #4971d0; text-decoration: underline; }
.crumbs__sep { margin: 0 4px; }
.article, .blog__lead { max-width: 820px; }
.article__title { font-size: 34px; font-weight: 800; line-height: 1.2; color: #040607; }
.article h2 { margin: 38px 0 14px; font-size: 25px; font-weight: 800; line-height: 1.25; }
.article h3 { margin: 26px 0 10px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.article p, .article li { font-size: 17px; line-height: 1.65; }
.article p { margin: 14px 0 0; }
.article ul, .article ol { margin: 14px 0 0; padding-left: 24px; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { display: list-item; margin-top: 8px; list-style: inherit; }
.article a { color: #4971d0; text-decoration: underline; }
.article strong { font-weight: 700; }
.article__table { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article__table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.article__table th, .article__table td { padding: 10px 12px; border: 1px solid #e0e0e0; text-align: left; vertical-align: top; }
.article__table th { background: #040607; color: #fff; font-weight: 700; }
.article .faq__item { border-bottom: 1px solid #e6e6e6; }
.article .faq__q h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.article .faq__a { padding: 0 44px 18px 0; }
.article .faq__a p:first-child { margin-top: 0; }
.article__back { margin-top: 34px; font-size: 16px; }
.article__back a { display: inline-block; min-height: 44px; line-height: 44px; color: #4971d0; text-decoration: underline; }
.article-cta { margin-top: 10px; }
.article-contacts { padding: 40px 0 50px; }
.article-contacts__title { font-size: 24px; font-weight: 800; text-align: center; }
.article-contacts .service-page__addresses { margin-top: 20px; }
.article-contacts .service-page__note { text-align: center; }
.blog__lead { margin-top: 16px; font-size: 18px; line-height: 1.55; }
.blog-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.blog-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid #e6e6e6; border-radius: 14px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .05); }
.blog-card__title { font-size: 20px; font-weight: 800; line-height: 1.3; }
.blog-card__title a { color: #040607; text-decoration: none; }
.blog-card__title a:hover { color: #4971d0; }
.blog-card__text { margin: 12px 0 18px; font-size: 15px; line-height: 1.55; color: #444; }
.blog-card__more { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 22px; background: #feea00; color: #040607; font-size: 14px; font-weight: 700; text-decoration: none; }
.blog-card__more:hover { background: #040607; color: #fff; }
@media (max-width: 767px) {
	.article-page { padding: 100px 0 36px; }
	.article__title { font-size: 26px; }
	.article h2 { font-size: 21px; margin-top: 30px; }
	.article h3 { font-size: 18px; }
	.article p, .article li { font-size: 16px; }
	.blog-cards { grid-template-columns: 1fr; gap: 16px; }
	.blog-card { padding: 18px; }
	.crumbs a, .crumbs span { display: inline-block; min-height: 32px; line-height: 32px; }
}


/* №15 «Юзабилити»: отзывы с Яндекс Карт — аватар-буква вместо фото, дата/точка, пометка источника */
.reviews-items__author-img--letter { height: 50px; border-radius: 50%; background: #feea00; color: #040607; font-weight: 800; font-size: 22px; text-align: center; }
.reviews-items__author-meta { font-size: 12px; color: #666; margin-top: 2px; }
.reviews-items__source { margin-top: 8px; font-size: 12px; color: #888; }

/* ---------- Ревью тестировщика 24.09.2026 (задача 4481) ---------- */
/* Картинки контактов, галерей и «Преимуществ» были фоном .b-img через data-src (без webp и размеров) — теперь <picture> внутри */
.b-img > picture, .b-img > picture > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; }
.b-img > picture > img { display: block; object-fit: cover; }
.gallery-items__img > picture { z-index: 1; }   /* под .b-img-hover (z-index 3) */
/* Карточки услуг: кнопки «Оценить ремонт» на одной линии в ряду, «Nano/Touch/Shuffle/Classic» переносится, а не вылезает */
.services-items .row > [class*="col-"] { display: flex; }
.services-items__item { display: flex; flex-direction: column; width: 100%; }
.services-items__text { display: flex; flex-direction: column; flex: 1 1 auto; }
.services-items__title { flex: 1 1 auto; overflow-wrap: anywhere; }
.services-items__cta { align-self: center; }
/* Контакты: жёлтые телефоны на одной линии (у «ТЦ Торговый парк №1 (Глобус)» название в две строки) */
.contacts-items__title-street { min-height: 2.9em; }   /* две строки названия */
/* Форма «Узнать точную цену ремонта»: заголовок по центру, как у «Получи скидку» */
#application_price .form__title { text-align: center; }
/* Служебные страницы и блог: синего на сайте нет — чёрный и жёлтый; соцсети по центру */
.service-page__btn { border-color: #040607; background: #040607; }
.service-page__btn--ghost { background: #feea00; color: #040607; border-color: #feea00; }
.service-page__links a, .crumbs a, .article a, .article__back a, .blog-card__title a:hover { color: #040607; }
.service-page__soc .soc__items { justify-content: center; }
@media (max-width: 767px) {
	/* стрелки каруселей стояли за краем экрана (left/right: -20px) и терялись; точек у галереи 17 — не влезали в строку */
	.slick-arrow { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
	.slick-arrow.slick-prev { left: 6px; }
	.slick-arrow.slick-next { right: 6px; }
	.slick-arrow::before, .slick-arrow::after { top: 12px; bottom: 12px; left: 14px; right: 14px; }
	.slick-dots li { margin: 8px 4px 0; }
	.slick-dots li button::before { top: -8px; right: -4px; bottom: -8px; left: -4px; }
}
/* Форма «Узнать точную цену ремонта»: длинная кнопка сжимала поле телефона до 150 px (ревью 24.09) — форме шире */
@media (min-width: 992px) { #application_price .form__form { max-width: 470px; } }

/* ---------- Павел 24.09.2026: подвал как у ключи-тверь.рф, меню в ровные ряды, контакты 5 в ряд ---------- */
.footer { padding: 35px 0 40px; text-align: left; }
.footer-cols { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; max-width: 980px; margin: 0 auto; }
.footer-col__title { margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: .12px; }
.footer-col__text { margin: 0; font-size: 12px; font-weight: 600; line-height: 18px; }
.footer-col__text a { color: inherit; text-decoration: none; }
.footer-col__text a:hover { text-decoration: underline; }
.footer-bottom { display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 980px; margin: 25px auto 0; }
.footer-bottom__logo img { display: block; width: auto; height: 56px; }
.header__logo .b-logo__img img { max-height: none; height: 72px; width: auto; }
@media (max-width: 991px) { .header__logo .b-logo__img img { height: 50px; } }
.footer-bottom__copy { font-size: 13px; font-weight: 600; }
@media (max-width: 767px) {
	.footer { text-align: center; }
	.footer-cols { flex-direction: column; align-items: center; gap: 22px; }
	.footer-bottom { flex-direction: column; gap: 10px; }
	.footer-col__text a { display: inline-block; min-height: 32px; line-height: 32px; }
}
/* Меню на десктопе шло в два неровных ряда (9 пунктов, первый ряд из четырёх в растяжку) — ряды по центру с одинаковыми промежутками */
@media (min-width: 992px) {
	.header-menu__items { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }
	.header-menu__item { padding: 0; }
	.header-menu__link { padding: 6px 14px; font-size: 14px; letter-spacing: .4px; }
	/* Контакты: пять точек в один ряд, а не 4 + 1 */
	.contacts-items .row > [class*="col-"] { flex: 0 0 20%; max-width: 20%; }
}
/* Активный пункт меню (по прокрутке, site.js): подчёркивание — читается и на белой шапке, и на чёрном закреплённом меню */
.header-menu__link.is-active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Карта упиралась в строку часов последней точки (Павел, 24.09) */
.ymap { margin-top: 36px; }
/* Переход на главную по якорю с блога/404 (/#services): браузер ставит секцию в самый верх, а затем прилипает меню (148 px)
   или закреплена шапка (70 px на ≤ 991) и накрывает начало. Отступ якорной цели под них. На самой главной прокрутку считает site.js. */
section[id], #price { scroll-margin-top: 90px; }   /* закреплённое меню ≈ 71 px + 16 */
@media (max-width: 991px) { section[id], #price { scroll-margin-top: 86px; } }
/* Прилипающее меню (#menu.fixed из site.js): правило жило во встроенном <style> главной, на блоге его не было — меню там оставалось статичным (Павел, 24.09) */
#menu.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 998; background: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }   /* та же высота, что в потоке — переход без прыжка */
.menu-spacer { height: 0; }
/* Павел, 24.09: на ≤ 478 px картинку первого экрана корёжило — после добавления width/height ширина 445 из атрибута оставалась,
   а .main__img img { max-height: 300px } резал высоту. Картинка по ширине колонки, высота по пропорции; и вообще всем img с атрибутами — height: auto */
img { height: auto; }
@media (max-width: 991px) { .main__img img { width: auto; max-width: 100%; height: auto; max-height: none; } }   /* и планшет 768–991: там max-height: 300px при ширине 445 из атрибута */
/* Онлайн-оплата: виджет Модульбанка внутри страницы сайта (build_pages.py, 24.09) */
.pay-page__widget { max-width: 460px; margin: 26px auto 0; text-align: left; }
.pay-page__widget input, .pay-page__widget select, .pay-page__widget textarea { font-size: 16px; max-width: 100%; box-sizing: border-box; }
.pay-page__widget button, .pay-page__widget [role="button"] { min-height: 48px; }
/* Отзывы на телефоне (тестировщик 24.09, 15:36): звёзды стояли внизу карточки по центру — теперь сразу под именем автора */
@media (max-width: 767px) {
	.reviews-items__item { padding-bottom: 20px; }
	.reviews-items__text { display: flex; flex-direction: column; }   /* звёзды лежат внутри блока текста: звёзды → текст → «Отзыв с Яндекс Карт» */
	.reviews-items__stars { order: 0; position: static; padding: 0 0 10px; text-align: left; }
	.reviews-items__stars-item { width: 16px; height: 16px; margin: 0 2px 0 0; }
	.reviews-items__descr { order: 1; }
	.reviews-items__source { order: 2; }
}

.keys .keys__title .link:hover, .keys .keys__title .link:focus { color: #feea00; text-decoration: underline; }

/* ---------- 13.10.2026: тексты главной по документу «Оптимизация» ---------- */
.s-seo { padding: 50px 0 10px; }
.s-seo_intro { padding-top: 40px; }
.seo-text { max-width: 980px; margin: 0 auto; }
.seo-text h2 { margin: 28px 0 14px; font-size: 28px; font-weight: 800; line-height: 1.25; color: #040607; }
.seo-text h2:first-child { margin-top: 0; }
.seo-text h3 { margin: 22px 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.seo-text p, .seo-text li { font-size: 17px; font-weight: 400; line-height: 1.65; }
.seo-text p { margin: 12px 0 0; }
.seo-text ul, .seo-text ol { margin: 12px 0 0; padding-left: 24px; }
.seo-text ul { list-style: disc; }
.seo-text ol { list-style: decimal; }
.seo-text li { display: list-item; margin-top: 8px; list-style: inherit; }
.s-seo_end { padding: 40px 0 50px; background: #feea00; margin-top: 40px; }
.seo-cta { margin-top: 22px; }
@media (max-width: 767px) {
	.s-seo { padding: 32px 0 6px; }
	.seo-text h2 { font-size: 22px; }
	.seo-text h3 { font-size: 18px; }
	.seo-text p, .seo-text li { font-size: 16px; }
}

.advantages__list { margin-top: 30px; }
.adv-merge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.adv-merge li { display: flex; align-items: flex-start; gap: 18px; margin: 0; padding: 20px 22px; border: 2px solid #040607; border-radius: 14px; background: #fff; list-style: none; }
.adv-merge__icon { flex: 0 0 72px; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #fe0; }
.adv-merge__text b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 800; line-height: 1.3; }
.adv-merge__text span { display: block; font-size: 15px; font-weight: 400; line-height: 1.55; color: #333; }
@media (max-width: 767px) { .adv-merge { grid-template-columns: 1fr; gap: 10px; } .adv-merge li { gap: 14px; padding: 14px 16px; } .adv-merge__icon { flex-basis: 56px; width: 56px; height: 56px; } .adv-merge__icon img { max-width: 30px; height: auto; } .adv-merge__icon svg { width: 30px; height: 30px; } }