/* Кастомные стили поверх собранного бандла (index-*.css). */

/* ===== Отступ заголовка от шапки на внутренних страницах =====
   В бандле .clinic/.services/.specialists заданы только margin-top: 10px,
   а .fidback — padding-top: 30px. Из-за этого заголовок страницы лип к
   нижней границе шапки. Увеличиваем разрыв до ~70 px. */
.clinic,
.services,
.specialists,
.appointment {
	margin-top: 50px !important;
}
.fidback {
	padding-top: 50px !important;
}

/* ===== Главная: градиентовый переход между .promo-desctop и .information =====
   В бандле .information имел margin-top: 70px — пустая белая полоса.
   Убираем отступ и кладём поверх низа промо градиентовый слой
   (transparent → white). Слой — ::after на .promo-desctop, чтобы он
   рисовался поверх bg.png, но НЕ перекрывал контент .information. */
body:not(.a11y) .information {
	margin-top: 0 !important;
}
.promo-desctop {
	position: relative;
}
.promo-desctop::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%);
	pointer-events: none;
}
/* В версии для слабовидящих фон чёрный — белый градиент там был бы инородной
   светлой полосой, поэтому отключаем оверлей. */
body.a11y .promo-desctop::after { content: none; }

/* ===== Плавное появление модального окна услуг ===== */
@keyframes stoma-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes stoma-modal-in {
	from { opacity: 0; transform: translateY(18px) scale(.95); }
	to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.overlay {
	animation: stoma-overlay-in .25s ease both;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.modal {
	animation: stoma-modal-in .35s cubic-bezier(.16, 1, .3, 1) both;
}

/* ===== Красивые ховеры карточек услуг ===== */
.service-card {
	transition: transform .28s cubic-bezier(.16, 1, .3, 1),
	            box-shadow .28s ease;
	will-change: transform;
}

.service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 40px -12px rgba(26, 58, 107, .45);
}

.service-card__img {
	transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.service-card:hover .service-card__img {
	transform: scale(1.08);
}

.service-card__btn {
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.service-card:hover .service-card__btn,
.service-card__btn:hover {
	background: #25508f;
	box-shadow: 0 6px 16px -4px rgba(26, 58, 107, .6);
}

.service-card__btn:active {
	transform: translateY(1px);
}

/* ===== Заявки: колонки «Прочитана» и «Пришёл» с чекбоксами ===== */
/* Перекрываем grid-шаблон бандла (7 → 9 колонок) на всех брейкпоинтах. */
.grid-table[data-v-0b4e2e16] {
	grid-template-columns: 80px 200px 180px 140px 100px 1fr 90px 90px 60px !important;
	min-width: 1140px !important;
}

.cell--check[data-v-0b4e2e16],
.cell--check {
	justify-content: center;
	text-align: center;
}

/* Чекбокс в стиле сайта (как .checkbox__control в формах). */
.bid-checkbox {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.bid-checkbox .checkbox__input {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	opacity: 0;
}

.bid-checkbox .checkbox__control {
	width: 18px;
	height: 18px;
	background: #fff;
	border: 1.5px solid #1a3a6b;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}

.bid-checkbox .checkbox__control svg {
	display: none;
}

.bid-checkbox .checkbox__input:checked ~ .checkbox__state .checkbox__control {
	background: #1a3a6b;
}

.bid-checkbox .checkbox__input:checked ~ .checkbox__state .checkbox__control svg {
	display: block;
}

/* ===== Ховер для чипов-категорий услуг ===== */
.services__item[data-v-244a429d]:hover,
.services__item[data-v-61e736ef]:hover {
	background: var(--bg-blue);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px -6px rgba(26, 58, 107, .5);
}

/* ===== Ссылки-заглушки на документы в согласии (страница записи) ===== */
.consent-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: opacity .2s ease;
}

.consent-link:hover {
	opacity: .7;
}

/* ===== Невидимый скролл-бар (прокрутка остаётся рабочей) ===== */
* {
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* старый Edge / IE */
}

*::-webkit-scrollbar {           /* Chrome, Safari, новый Edge */
	width: 0;
	height: 0;
	display: none;
}

/* ===== Услуги на главной: бесконечная авто-прокрутка в линию ===== */
/* Плитки продублированы в JS; трек едет на -50% → бесшовный цикл. */
.services[data-v-244a429d] {
	flex-wrap: nowrap;
	overflow: hidden;
	padding: 40px 0;
}

.services-marquee {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: services-scroll 35s linear infinite;
}

/* Пауза при наведении. */
.services-marquee:hover {
	animation-play-state: paused;
}

/* Каждый чип = item + отступ справа; половина трека = ровно один набор. */
.services-marquee .services__item[data-v-244a429d] {
	flex: 0 0 auto;
	margin-right: 28px;
	white-space: nowrap;
	font-size: 20px;
	padding: 14px 28px;
	border-radius: 10px;
}

@keyframes services-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ===== «Адрес нашей клиники» — тот же шрифт, что у «Составим план лечения» ===== */
/* .treatmentplan__title задаёт только размер (шрифт/насыщенность наследуются),
   поэтому повторяем его размеры по тем же брейкпоинтам. */
.adress__title {
	font-size: 24px;
}

@media all and (min-width: 768px) {
	.adress__title {
		font-size: 30px;
	}
}

@media all and (min-width: 1280px) {
	.adress__title {
		font-size: 34px;
	}
}

/* ===== Синяя подложка под шапкой в самом верху страницы ===== */
/* Полоса прокручивается вместе со страницей: вверху шапка лежит на сплошном
   синем (#a5c8e5), а при скролле уходит — и шапка становится полупрозрачной
   поверх контента. Высота ≈ высоте шапки; мягкий переход прячет стык. */
body {
	margin: 0;
	background: linear-gradient(
		to bottom,
		#a5c8e5 0,
		#a5c8e5 92px,
		rgba(165, 200, 229, 0) 110px
	) no-repeat;
}

/* ===== Закреплённая шапка сайта ===== */
/* Только основная (нескоупленная) шапка; scoped-варианты не трогаем. */
.header:not([data-v-4111d62f]):not([data-v-cc8c5573]) {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Полупрозрачный фон: тот же синий (#a5c8e5) на 50%. Перебиваем инлайн через !important. */
	background: rgba(165, 200, 229, .7) !important;
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	box-shadow: 0 2px 12px -6px rgba(26, 58, 107, .35);
}

/* ===== Геро-блок главной: градиент + иллюстрация зуба (tooth.svg) ===== */
/* bg.png (412×525) в бандле задан без size/repeat — узкий градиент тайлился.
   Растягиваем его (cover) и кладём сверху прозрачный tooth.svg справа.
   У tooth.svg viewBox расширен на 20px по краям — блики-круги не обрезаются. */
.promo-desctop[data-v-244a429d] {
	background:
		url(/static/imgs/home2.png) center center / contain no-repeat,
		url(/static/imgs/bg.png)    center        / cover   no-repeat !important;
}

/* Старая растровая картинка зуба больше не нужна — её заменяет tooth.svg. */
.promo-desctop__pic[data-v-244a429d] {
	display: none !important;
}

.promo-mobile[data-v-244a429d] {
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* ===== Больше воздуха перед блоком «Почему нам доверяют свою улыбку?» ===== */
.information[data-v-c5cff60b] {
	margin-top: 70px;
}

/* ===== Плавный ховер карточек отзывов на главной ===== */
.fidback-items__item[data-v-5ebf6c20] {
	padding: 18px;
	border-radius: 12px;
	background: transparent;
	transition: transform .28s cubic-bezier(.16, 1, .3, 1),
	            box-shadow .28s ease,
	            background .28s ease;
	will-change: transform;
}

.fidback-items__item[data-v-5ebf6c20]:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 18px 40px -12px rgba(26, 58, 107, .45);
}

.fidback-items__user-img[data-v-5ebf6c20] {
	transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.fidback-items__item[data-v-5ebf6c20]:hover .fidback-items__user-img[data-v-5ebf6c20] {
	transform: scale(1.08);
}

/* ===== Выпадающее меню «Услуги» в шапке ===== */
.menu-hidden {
	transform-origin: top center;
	box-shadow: 0 18px 40px -12px rgba(26, 58, 107, .55);
	overflow: hidden;
}

/* Плавное появление И исчезновение (обёрнуто в <Transition name="menu-hidden">). */
.menu-hidden-enter-active,
.menu-hidden-leave-active {
	transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}

.menu-hidden-enter-from,
.menu-hidden-leave-to {
	opacity: 0;
	transform: translateY(-8px) scale(.98);
}

/* Красивый ховер пунктов внутри меню. */
.menu-hidden__item {
	transition: background .2s ease, padding-left .2s ease, color .2s ease;
}

.menu-hidden__item:hover {
	background: #4a4f86;
	padding-left: 26px;
}

/* Последний пункт без нижней границы — аккуратнее со скруглением. */
.menu-hidden__list li:last-child {
	border-bottom: none;
}

/* ===== SVG-иконки в info-блоках формы записи =====
   Скрипт static/js/icons.js заменяет PNG в .left-side__item на inline SVG
   (.left-side__icon-svg). Иконка в круге:
     обычный режим — тёмно-синий круг, белая иконка;
     a11y          — жёлтый круг, чёрная иконка. */
.left-side__icon-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #092147;
	color: #fff;
}

.left-side__icon-svg svg {
	width: 24px;
	height: 24px;
	display: block;
}
.left-side__icon-svg svg path { fill: #fff !important; }

body.a11y .left-side__icon-svg {
	background: #ff0;
	color: #000;
}
body.a11y .left-side__icon-svg svg path { fill: #000 !important; }

/* ===== Список документов клиники — карточки с превью =====
   Скрипт static/js/doc-preview.js перестраивает <a class="doc-link"> в
   карточку с превью (картинка / iframe-PDF / fallback-иконка) + подпись. */
/* В бандле .doc-list — flex column; перекрываем на grid для сетки карточек. */
.doc-list[data-v-3983d83c] {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 24px !important;
	padding: 0;
	margin: 16px 0 0;
	list-style: none;
}

.doc-list-item[data-v-3983d83c] {
	margin: 0;
	display: block !important;
}

a.doc-link.doc-card[data-v-3983d83c] {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease;
}

a.doc-link.doc-card[data-v-3983d83c]:hover {
	transform: translateY(-4px);
	text-decoration: none;
}

.doc-card__preview {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 133.33%;        /* соотношение 3:4 — гарантирует высоту даже */
	height: 0;                   /* для абсолютно-позиционированного контента */
	background: #f4f4f4;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 14px -6px rgba(26, 58, 107, .35);
}

.doc-card__preview img,
.doc-card__preview iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}
.doc-card__preview img { object-fit: cover; }
.doc-card__preview iframe { pointer-events: none; background: #fff; }

/* Невидимый щит поверх iframe-PDF — чтобы клик ловил <a>, а не PDF-viewer. */
.doc-card__shield {
	position: absolute;
	inset: 0;
}

/* Карточка-заглушка для неподдерживаемых форматов: вся плашка превью
   занята цветным фоном с крупной иконкой документа по центру. */
.doc-card__preview:has(.doc-card__fallback) {
	background: #d9e3ef;
}

body.a11y .doc-card__preview:has(.doc-card__fallback) {
	background: #2a2a2a;
	border: 2px solid #ff0;
}

.doc-card__fallback {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	height: 70%;
	display: block;
	color: #092147;
}

body.a11y .doc-card__fallback { color: #ff0 !important; }

.doc-card__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	color: inherit;
}

/* === a11y вариант === */
body.a11y .doc-card__preview {
	background: #1a1a1a;
	box-shadow: none;
	border: 1px solid rgba(255, 255, 0, .35);
}

body.a11y .doc-card__fallback { color: #ff0 !important; }

body.a11y .doc-card__title { color: #ff0 !important; }

/* ===== Модальное окно превью документов =====
   Скрипт static/js/doc-preview.js перехватывает клик по .doc-link и
   открывает картинку или PDF в этом оверлее. */
.doc-preview-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(0, 0, 0, .8);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	animation: stoma-overlay-in .2s ease both;
}

.doc-preview-modal {
	position: relative;
	background: #fff;
	border-radius: 12px;
	max-width: min(1100px, 100%);
	max-height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: stoma-modal-in .28s cubic-bezier(.16, 1, .3, 1) both;
}

.doc-preview-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
.doc-preview-close:hover { background: #000; }

.doc-preview-body {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	background: #f4f4f4;
}

.doc-preview-body img {
	max-width: 100%;
	max-height: 80vh;
	display: block;
	margin: auto;
}

.doc-preview-body iframe {
	width: 100%;
	height: 80vh;
	border: 0;
	display: block;
	background: #fff;
}

.doc-preview-msg {
	padding: 40px 30px;
	color: #333;
	font-size: 18px;
	text-align: center;
}

.doc-preview-download {
	display: block;
	padding: 14px 20px;
	background: #092147;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	transition: background .15s ease;
}
.doc-preview-download:hover { background: #1a3a6b; }

/* ===== Тёмная палитра для модалки в a11y ===== */
body.a11y .doc-preview-overlay { background: rgba(0, 0, 0, .92); }

body.a11y .doc-preview-modal {
	background: #000;
	border: 2px solid #ff0;
}

/* Перебиваем общее правило «все кнопки в a11y → большие жёлтые с радиусом 8px»:
   у кнопки закрытия модалки специфичный размер и круглая форма. Полная
   декларация с !important сохраняет круг 36×36 даже под действием
   глобального button-правила. */
body.a11y button.doc-preview-close {
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #ff0 !important;
	color: #000 !important;
	font-size: 18px !important;
	font-weight: 900 !important;
}
body.a11y button.doc-preview-close:hover { background: #fff !important; }

body.a11y .doc-preview-body {
	background: #000;
}

body.a11y .doc-preview-msg { color: #ff0 !important; }

/* Селектор a.doc-preview-download — нужен, чтобы перебить более
   специфичное `a:not(.button):not(.header__button) { color: #ff0 }`. */
body.a11y a.doc-preview-download {
	background: #ff0 !important;
	color: #000 !important;
}
body.a11y a.doc-preview-download:hover { background: #fff !important; }

/* =========================================================================
   Версия для слабовидящих
   Включается JS-тумблером (#a11y-toggle, см. static/js/a11y.js), который
   добавляет/снимает класс .a11y у <body>. Палитра по макету Figma:
     bg #000, text #fff, акцент #ff0; шрифт Inter, базовый размер 20 px.
   Vue-бандл править нельзя — поэтому всё перебиваем !important поверх
   scoped-селекторов из бандла.
   ========================================================================= */

/* --- Тумблер: inline-элемент в шапке (вставляется JS как <li> в .nav__list) --- */
#a11y-toggle {
	padding: 8px 14px;
	font: 600 14px/1 Inter, system-ui, sans-serif;
	background: #092147;
	color: #fff;
	border: 2px solid #092147;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}

/* Отступ от соседнего пункта задаёт gap родителя — собственный margin не нужен. */
.nav__list > li:has(#a11y-toggle) {
	margin: 0;
}

#a11y-toggle:hover { background: #1a3a6b; }
#a11y-toggle:active { transform: translateY(1px); }

body.a11y #a11y-toggle {
	background: #ff0;
	color: #000;
	border-color: #ff0;
	font-size: 16px;
	padding: 10px 16px;
}

body.a11y #a11y-toggle:hover { background: #fff; border-color: #fff; }

/* --- Группа кнопок размера шрифта: отдельная фиксированная панель,
       видна только в a11y. JS вешает её прямо в <body>. --- */
#a11y-fs-group {
	display: none;
}
body.a11y #a11y-fs-group {
	display: flex;
	gap: 8px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	padding: 10px 12px;
	background: #000;
	border: 2px solid #ff0;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
body.a11y #a11y-fs-group::before {
	content: 'Размер:';
	align-self: center;
	color: #ff0;
	font: 600 14px/1 Inter, system-ui, sans-serif;
	margin-right: 4px;
}
body.a11y .a11y-fs-btn {
	padding: 8px 12px;
	font: 600 14px/1 Inter, system-ui, sans-serif;
	background: #000;
	color: #ff0;
	border: 2px solid #ff0;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
}
body.a11y .a11y-fs-btn:hover { background: #ff0; color: #000; }
body.a11y .a11y-fs-btn[aria-pressed="true"] {
	background: #ff0;
	color: #000;
}

/* При zoom (150/200 %) полноширинные секции становятся шире вьюпорта и
   браузер показывает горизонтальный скролл. Обрезаем переполнение по
   горизонтали на корне — содержимое центрируется в контейнерах, поэтому
   режутся только фоновые «вылеты» секций, а не текст. Класс a11y-zoomed
   вешает JS только при масштабе > 100 %. */
body.a11y-zoomed,
html:has(> body.a11y-zoomed) {
	overflow-x: hidden;
}

/* --- Основа --- */
/* Перебиваем CSS-переменные бандла — этого достаточно, чтобы любые правила
   вида color:var(--text-blue) / background:var(--bg-blue) автоматически
   подхватили палитру a11y без точечных перекрытий. */
body.a11y {
	/* Весь текст — жёлтый. Никакого белого/серого. */
	--text-blue:  #ffff00;
	--text-black: #ffff00;
	--text-color: #ffff00;
	--text-white: #ffff00;
	--text-light-grey: #ffff00;
	--text-grey-1: #ffff00;
	--text-grey-2: #ffff00;
	--text-grey-3: #ffff00;
	--text-grey-4: #ffff00;
	--bg-blue:   #000000;
	--bg-blue-2: #000000;
	--bg-color:  #000000;
	--bg-white:  #000000;

	background: #000 !important;
	color: #ff0 !important;
	font-family: Inter, system-ui, sans-serif !important;
	font-size: 20px !important;
}

body.a11y * {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Декоративная подложка под шапкой (из секции «Синяя подложка…» выше) — гасим. */
body.a11y { background-image: none !important; }

/* --- Шапка --- */
body.a11y .header,
body.a11y .header:not([data-v-4111d62f]):not([data-v-cc8c5573]) {
	background: #000 !important;
	border-bottom: 2px solid #ff0;
	box-shadow: none !important;
}

body.a11y .header__title,
body.a11y .header__top,
body.a11y .nav__link,
body.a11y .nav__count {
	color: #ff0 !important;
	font-size: 20px !important;
}

body.a11y .logo__name { color: #ff0 !important; font-size: 28px !important; }

/* SVG-логотип (в шапке, подвале, любых местах с классом .logo) — жёлтый.
   В бандле fill задан через prop color компонента LogoName; перебиваем
   CSS-ом, накрывая все цветовые атрибуты. */
body.a11y .logo svg,
body.a11y .logo svg *,
body.a11y .doc-link svg,
body.a11y .doc-link svg * {
	fill: #ff0 !important;
	stroke: #ff0 !important;
	color: #ff0 !important;
}

/* Сама ссылка в списке документов — жёлтый текст. */
body.a11y .doc-link[data-v-3983d83c],
body.a11y .doc-link[data-v-3983d83c]:hover {
	color: #ff0 !important;
}

/* Описание услуг на подстраницах (Ортодонтическая, Терапевтическая и т.д.).
   В бандле .services__text имеет color:#333 во множестве data-v-* scope-ов —
   перекрываем один раз без scope с !important. */
body.a11y .services__text,
body.a11y .services__text * {
	color: #ff0 !important;
}
body.a11y .nav__link:hover { color: #ff0 !important; }

/* --- Бургер-меню и выпадающее «Услуги» --- */
body.a11y .burger-menu {
	background: #000 !important;
	border-right: 2px solid #ff0;
}
body.a11y .burger-menu__item { color: #ff0 !important; font-size: 22px !important; }

body.a11y .menu-hidden {
	background: #000 !important;
	border: 2px solid #ff0 !important;
}
body.a11y .menu-hidden__item {
	color: #ff0 !important;
	border-color: #ff0 !important;
	font-size: 20px !important;
}
body.a11y .menu-hidden__item:hover { background: #ff0 !important; color: #000 !important; padding-left: 15px; }

/* --- Все кнопки --- */
body.a11y .button,
body.a11y .header__button,
body.a11y .promo-mobile__button button,
body.a11y .form__button,
body.a11y .form-reg__button,
body.a11y button:not(#a11y-toggle):not(.a11y-fs-btn):not(.bid-checkbox):not(.bid-checkbox *):not(.doc-preview-close) {
	background: #ff0 !important;
	color: #000 !important;
	border: 2px solid #ff0 !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	padding: 14px 24px !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	transform: none !important;
}

body.a11y .button:hover,
body.a11y .header__button:hover {
	background: #fff !important;
	color: #000 !important;
	border-color: #ff0 !important;
}

/* --- Промо-блок --- */
body.a11y .promo-desctop[data-v-244a429d] {
	background:
		url(/static/imgs/home2.png) center center / contain no-repeat,
		#000 !important;
	height: 600px !important;
	border-bottom: 2px solid #ff0;
}
body.a11y .promo-mobile[data-v-244a429d] {
	background: #000 !important;
	border-bottom: 2px solid #ff0;
}

body.a11y .promo-desctop__card[data-v-244a429d] {
	background: #000 !important;
	color: #ff0 !important;
	border: 2px solid #ff0 !important;
	border-radius: 0 !important;
}

body.a11y .promo-desctop__title,
body.a11y .promo-mobile__title {
	color: #ff0 !important;
	font-size: 30px !important;
	font-weight: 600 !important;
}
body.a11y .promo-desctop__text,
body.a11y .promo-mobile__text {
	color: #ff0 !important;
	font-size: 20px !important;
}

/* --- Блок «Почему нам доверяют…» (information) --- */
body.a11y .information { color: #ff0 !important; }
body.a11y .information__text { color: #ff0 !important; font-size: 20px !important; }

/* Заголовок секции и подзаголовки карточек — жёлтые (акцент). */
body.a11y .information__title,
body.a11y .slide-content__title {
	color: #ff0 !important;
	font-weight: 600 !important;
}
body.a11y .information__title { font-size: 40px !important; font-weight: 400 !important; }
body.a11y .slide-content__title { font-size: 23px !important; }

/* Полоса-разделитель под заголовком карточки (в бандле: 1px solid #383b68). */
body.a11y .slide-content__title[data-v-e0b0a95d] {
	border-bottom-color: #ff0 !important;
	border-bottom-width: 2px !important;
}

/* Тело карточки — белый текст. */
body.a11y .slide-content,
body.a11y .slide-content__text { color: #ff0 !important; font-size: 20px !important; }

/* Карточки «Почему нам доверяют…»: чёрный фон, жёлтая рамка. */
body.a11y .grid-container .slide-content,
body.a11y .information .slide-content,
body.a11y .information > div > div,
body.a11y .information [class*="card"] {
	background: #000 !important;
	border: 2px solid #ff0 !important;
	box-shadow: none !important;
	border-radius: 16px !important;
}

/* --- Услуги: чипы-марки --- */
body.a11y .services[data-v-244a429d],
body.a11y .services[data-v-61e736ef] { background: transparent !important; }

body.a11y .services__item,
body.a11y .services__item[data-v-244a429d],
body.a11y .services__item[data-v-61e736ef] {
	background: #000 !important;
	color: #ff0 !important;
	border: 2px solid #ff0 !important;
	font-size: 20px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}
body.a11y .services__item:hover,
body.a11y .services__item[data-v-244a429d]:hover,
body.a11y .services__item[data-v-61e736ef]:hover {
	background: #ff0 !important;
	color: #000 !important;
}

/* Заголовки разделов «Полный спектр…», «Наша команда…» и т. п. — жёлтые. */
body.a11y .services-name,
body.a11y .services__title,
body.a11y .specialists__title,
body.a11y .specialists__information-title {
	color: #ff0 !important;
	font-size: 40px !important;
	font-weight: 400 !important;
}

/* Подпись под заголовком «Наша команда». */
body.a11y .specialists__information-text { color: #ff0 !important; font-size: 20px !important; }

/* --- Слайдеры (swiper): стрелки и точки в жёлтой обводке/заливке --- */
body.a11y .swiper-button-next,
body.a11y .swiper-button-prev {
	color: #000 !important;
	background: #ff0 !important;
	border-radius: 50% !important;
	width: 50px !important;
	height: 50px !important;
}
body.a11y .swiper-button-next::after,
body.a11y .swiper-button-prev::after {
	color: #000 !important;
	font-weight: 900 !important;
	font-size: 22px !important;
}

body.a11y .swiper-pagination-bullet {
	background: #fff !important;
	opacity: 1 !important;
}
body.a11y .swiper-pagination-bullet-active {
	background: #ff0 !important;
}

/* --- Карточки услуг (модалка/каталог) --- */
body.a11y .service-card,
body.a11y .service-card * {
	color: #ff0 !important;
	box-shadow: none !important;
}
body.a11y .service-card {
	background: #000 !important;
	border: 2px solid #ff0 !important;
	border-radius: 0 !important;
	transform: none !important;
}
body.a11y .service-card__title { color: #ff0 !important; font-size: 23px !important; font-weight: 600 !important; }
body.a11y .service-card__subtitle,
body.a11y .service-card__description,
body.a11y .service-card__price,
body.a11y .service-card__price-label { font-size: 20px !important; }

body.a11y .service-card__btn {
	background: #ff0 !important;
	color: #000 !important;
	border: 2px solid #ff0 !important;
}

/* --- Карточки врачей (.card) — на ГЛАВНОЙ страницы --- */
/* На главной — серая плашка-фото, поверх жёлтый бейдж, имя под карточкой жёлтое. */
body.a11y .card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
body.a11y .card__side,
body.a11y .card__photo-label {
	background: #ff0 !important;
	color: #000 !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
}
body.a11y .card__main,
body.a11y .card__main * { color: #ff0 !important; }

/* --- Карточки врачей на странице /specialists --- */
/* Оставляем оформление бандла как есть, только бейдж специальности —
   жёлтая плашка с чёрным текстом (как и на главной). */
body.a11y .slide-spec[data-v-569a3aa7] {
	background: #ff0 !important;
	color: #000 !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
}

/* --- Страница конкретного специалиста /specialists/:id --- */
/* Весь текст жёлтый: имя, специальность, стаж, описание, образование,
   опыт работы, сертификаты и т.п. */
body.a11y .doctor-header__name,
body.a11y .doctor-header__spec,
body.a11y .doctor-header__exp,
body.a11y .doctor-page,
body.a11y .doctor-page *,
body.a11y .field-label,
body.a11y .field-value {
	color: #ff0 !important;
}

/* --- Отзывы --- */
body.a11y .fidback { color: #ff0 !important; }
body.a11y .fidback__title { color: #ff0 !important; font-size: 40px !important; font-weight: 400 !important; }

/* На ГЛАВНОЙ карточка отзыва — слайд .slide-content[data-v-1371d399] с
   захардкоженным голубым фоном; делаем её жёлтой с чёрным текстом. */
body.a11y .slide-content[data-v-1371d399] {
	background: #ff0 !important;
	border: none !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	transform: none !important;
}
body.a11y .slide-content[data-v-1371d399],
body.a11y .slide-content[data-v-1371d399] * { color: #000 !important; }

/* На странице /fidback («Отзывы») карточки — прозрачные строки с жёлтым
   текстом, разделённые отступами. По макету — без подложки. */
body.a11y .fidback-items__item,
body.a11y .fidback-items__item[data-v-5ebf6c20] {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transform: none !important;
	padding: 20px 0 !important;
	border-bottom: 1px solid rgba(255, 255, 0, .25) !important;
}
body.a11y .fidback-items__item *,
body.a11y .fidback-items__item[data-v-5ebf6c20] * { color: #ff0 !important; }

/* Аватарка-инициалы (черный квадрат) на странице отзывов — прячем. */
body.a11y .fidback-items__user-img[data-v-5ebf6c20] { display: none !important; }

/* Имя автора отзыва — крупно, полужирно. */
body.a11y .fidback-items__user-name[data-v-5ebf6c20] {
	font-size: 22px !important;
	font-weight: 600 !important;
}

/* Звёзды в отзывах — inline SVG c fill="black" в атрибуте и width/height=16.
   Перекрываем цвет и увеличиваем размер. */
body.a11y .fidback-items svg,
body.a11y .fidback-items svg * {
	fill: #ff0 !important;
	stroke: #ff0 !important;
}
body.a11y .fidback-items svg {
	width: 28px !important;
	height: 28px !important;
}

/* Шапка отзывов: «ДентАлМакс» + крупная оценка + звёзды. */
body.a11y .fidback-items__title[data-v-5ebf6c20] {
	color: #ff0 !important;
	font-size: 32px !important;
	font-weight: 700 !important;
}
body.a11y .fidback-items__marks[data-v-5ebf6c20] {
	color: #ff0 !important;
	font-size: 56px !important;
	font-weight: 700 !important;
}
body.a11y .fidback-items__info[data-v-5ebf6c20] {
	color: #ff0 !important;
	font-size: 18px !important;
}

/* --- Адрес --- */
body.a11y .adress,
body.a11y .adress * { color: #ff0 !important; }
body.a11y .adress__title { color: #ff0 !important; font-size: 40px !important; font-weight: 400 !important; }
body.a11y .adress__value { font-size: 25px !important; font-weight: 600 !important; }

/* --- «Составим план лечения» --- */
body.a11y .treatmentplan,
body.a11y .treatmentplan * { color: #ff0 !important; }
body.a11y .treatmentplan__title { color: #ff0 !important; font-size: 40px !important; font-weight: 400 !important; }

/* --- Подвал --- */
/* .footer ограничен width:1280px (центрирован), а .footer-home — обёртка во
   всю ширину. Жёлтую полоску вешаем на .footer-home, чтобы линия шла на весь
   экран, как у шапки. На внутреннем .footer границы нет — иначе получались
   две линии (узкая + широкая). */
body.a11y .footer-home,
body.a11y .footer {
	background: #000 !important;
}
body.a11y .footer-home {
	border-top: 2px solid #ff0;
}
body.a11y .footer,
body.a11y .footer * { color: #ff0 !important; }
body.a11y .footer__tel,
body.a11y .footer__time,
body.a11y .footer__adress { font-size: 20px !important; font-weight: 600 !important; }

/* --- Чекбоксы: жёлтая галочка на чёрной коробочке с жёлтой рамкой --- */
/* В бандле галочка — это <img src="check.png"> (тёмный значок), который
   невидно на тёмном фоне. Скрываем картинку и рисуем жёлтый ✓ через ::after. */
body.a11y .checkbox__control {
	background: #000 !important;
	border: 2px solid #ff0 !important;
	position: relative;
}
body.a11y .checkbox__checked {
	display: none !important;
}
body.a11y .checkbox__input:checked ~ .checkbox__state .checkbox__control::after {
	content: '✓';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ff0;
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
}

/* --- Формы / поля ввода --- */
body.a11y input,
body.a11y textarea,
body.a11y select {
	background: #000 !important;
	color: #ff0 !important;
	border: 2px solid #ff0 !important;
	font-size: 20px !important;
	border-radius: 0 !important;
}
body.a11y input::placeholder,
body.a11y textarea::placeholder { color: #888 !important; }

body.a11y .form,
body.a11y .form * { color: #ff0 !important; }
body.a11y .form-reg__title { font-size: 30px !important; }
body.a11y .form-reg__text { font-size: 20px !important; }
body.a11y .form-reg__error { color: #ff0 !important; }

/* --- Ссылки --- */
body.a11y a:not(.button):not(.header__button):not(.doc-preview-download):not(.fidback-items__more) { color: #ff0 !important; }
body.a11y a:hover { text-decoration: underline; }
body.a11y .consent-link { color: #ff0 !important; }

/* --- Прочие декоративные перебивки --- */
body.a11y .overlay { background: rgba(0, 0, 0, .85) !important; backdrop-filter: none !important; }
body.a11y .modal {
	background: #000 !important;
	color: #ff0 !important;
	border: 2px solid #ff0 !important;
	border-radius: 0 !important;
}
body.a11y .modal * { color: #ff0 !important; }

/* --- Перекрашиваем все секции с синим фоном (var(--bg-blue)) в чёрный --- */
body.a11y .specialists,
body.a11y .specialists[data-v-244a429d],
body.a11y .fidback-items,
body.a11y .fidback-items[data-v-5ebf6c20],
body.a11y .treatmentplan__inner,
body.a11y .treatmentplan__inner[data-v-8e13580b] {
	background: #000 !important;
}

/* Кружок с инициалами в слайдере отзывов на главной — жёлтый. */
body.a11y .slide-shortname[data-v-1371d399] {
	background: #ff0 !important;
	color: #000 !important;
}

/* Пилюля «Поставьте нам оценку / Оставить отзыв»: вся подложка жёлтая,
   текст «Поставьте нам оценку» по центру (чёрный), кнопка «Оставить отзыв»
   справа — отдельная вложенная чёрная пилюля с жёлтым текстом. */
body.a11y .fidback-items__getfid[data-v-5ebf6c20] {
	background: #ff0 !important;
	color: #000 !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 6px !important;
	gap: 0 !important;
	align-items: center !important;
}
body.a11y .fidback-items__getfid[data-v-5ebf6c20] > span {
	background: transparent !important;
	color: #000 !important;
	flex: 1 !important;
	text-align: center !important;
	padding: 10px 20px !important;
	font-weight: 600 !important;
	font-size: 18px !important;
}
body.a11y .fidback-items__getfid[data-v-5ebf6c20] > a {
	background: #000 !important;
	color: #ff0 !important;
	padding: 10px 24px !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	white-space: nowrap !important;
}
/* Селектор с a.fidback-items__more — чтобы перебить ранее объявленное
   `a:not(.button) { color:#ff0 }` (специфичность 3,2 vs наше 3,2; этим
   правилом ставим равную специфичность + позже в источнике → выигрываем). */
body.a11y a.fidback-items__more[data-v-5ebf6c20] {
	background: #ff0 !important;
	color: #000 !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	padding: 14px 28px !important;
	border-radius: 999px !important;
	margin: 30px auto !important;
	display: inline-flex !important;
	max-width: max-content !important;
}

/* Фильтры на странице «Специалисты» (специальности).
   В бандле: border + color = var(--bg-blue), который в a11y → #000,
   и оба становятся невидимыми на чёрном фоне. Делаем рамку и текст жёлтыми. */
body.a11y .specialists__item[data-v-3c4392be] {
	border: 2px solid #ff0 !important;
	color: #ff0 !important;
	background: transparent !important;
}

/* Активный фильтр и ховер — заливка жёлтым, чёрный текст. */
body.a11y .specialists__item.active[data-v-3c4392be],
body.a11y .specialists__item[data-v-3c4392be]:hover,
body.a11y .active[data-v-3c4392be] {
	background: #ff0 !important;
	color: #000 !important;
}

/* Счётчик в навигации. */
body.a11y .nav__count[data-v-cc8c5573] {
	background: #ff0 !important;
	color: #000 !important;
}

/* --- Страница «Клиника»: баннер-приветствие --- */
/* В бандле .clinic-banner имеет background:#e6f4ff (светло-голубой), на котором
   жёлтый текст не виден. Делаем чёрный фон с жёлтой рамкой. */
body.a11y .clinic-banner[data-v-3983d83c] {
	background: #000 !important;
	border: 2px solid #ff0 !important;
}
body.a11y .banner-titie[data-v-3983d83c] {
	color: #ff0 !important;
	font-size: 28px !important;
}
body.a11y .banner-text[data-v-3983d83c] {
	color: #ff0 !important;
	font-size: 20px !important;
}
/* Логотип-картинка слева — тёмно-синяя; перекрашиваем CSS-фильтром в жёлтый
   (фильтр сгенерирован для #FFFF00 из чёрного: brightness(0) → invert → sepia → saturate). */
body.a11y .banner-img[data-v-3983d83c] {
	filter: brightness(0) invert(94%) sepia(98%) saturate(2867%) hue-rotate(5deg) brightness(106%) contrast(103%);
}

/* --- «Жёсткая» страховка: только два цвета на странице ---
   Любой текст в a11y по умолчанию жёлтый. Чёрный явно прописан только там,
   где фон сделан жёлтым (кнопки, бейджи, карточки отзывов) — те правила
   объявлены раньше и используют !important, так что эта секция их не сбивает. */
body.a11y :where(*) {
	color: #ff0;
}