/* Оформление формы онлайн-записи: шаги, чипы филиалов, плитка специальностей. */

.booking-step{
	display:flex;
	align-items:center;
	gap:10px;
	margin:26px 0 12px;
	font-size:15px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.02em;
	color:#20303f;
}

.booking-step__num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:26px;
	height:26px;
	border-radius:50%;
	background:#17a2b8;
	color:#fff;
	font-size:13px;
	font-weight:700;
	flex:0 0 26px;
}

.booking-step__hint,
.booking-step__req{
	font-size:12px;
	font-weight:400;
	text-transform:none;
	letter-spacing:0;
}

.booking-step__hint{ color:#8a99a8; }
.booking-step__req{ color:#e2725b; }

/* Филиалы: горизонтальные чипы, «Все филиалы» выбран по умолчанию */
.booking-chips{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.booking-chip{
	border:1px solid #d7dee5;
	background:#fff;
	color:#20303f;
	border-radius:8px;
	padding:10px 14px;
	font-size:14px;
	line-height:1.25;
	cursor:pointer;
	transition:border-color .15s, background .15s, color .15s;
}

.booking-chip:hover{ border-color:#17a2b8; color:#17a2b8; }

.booking-chip.is-active{
	border-color:#17a2b8;
	background:#eaf8fa;
	color:#0f7f91;
	font-weight:600;
}

/* На телефоне логотип занимал половину шапки и оттеснял кнопку записи */
@media (max-width: 767px){
	.logo{ width:120px!important; }
	.navbar-brand{ margin-right:0!important; }
}

/* Содержимому шапки нужно около 1758px. От 1200px меню уже развёрнуто, но до этой
   ширины в строку не помещается: шапка уезжала вправо и внизу появлялась
   горизонтальная прокрутка. Разрешаем перенос только в этом промежутке — выше
   строка влезает целиком и переносить нечего. */
@media (min-width: 1200px) and (max-width: 1757px){
	.navbar-nav{ flex-wrap:wrap; }
}

/* Свёрнутый фильтр: показываем выбранное строкой, список раскрывается по «изменить».
   Так филиалы и специальности не занимают пол-экрана, особенно на телефоне. */
.booking-picked{
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:6px;
	font-size:14px;
	color:#20303f;
}

.booking-picked__value{ font-weight:600; }

.booking-picked__edit{
	border:0;
	background:none;
	padding:0;
	color:#17a2b8;
	font-size:13px;
	text-decoration:underline;
	cursor:pointer;
}

.booking-picked__edit:hover{ color:#0f7f91; }

/* Специальности: плитка в несколько колонок */
.booking-tiles{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
	gap:8px;
}

.booking-tile{
	border:1px solid #d7dee5;
	background:#fff;
	color:#20303f;
	border-radius:8px;
	padding:12px 14px;
	font-size:14px;
	line-height:1.25;
	text-align:left;
	cursor:pointer;
	transition:border-color .15s, box-shadow .15s, color .15s;
}

.booking-tile:hover{
	border-color:#17a2b8;
	color:#17a2b8;
	box-shadow:0 2px 10px rgba(23,162,184,.12);
}

.booking-tile.is-active{
	border-color:#17a2b8;
	background:#eaf8fa;
	color:#0f7f91;
	font-weight:600;
}

/* Строка с уже выбранным: возврат на любой шаг */
.booking-summary{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:18px;
	padding:12px 14px;
	background:#f5f8fa;
	border-radius:8px;
}

.booking-summary__item{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	color:#20303f;
}

.booking-summary__item b{ font-weight:600; }

.booking-summary__reset{
	border:0;
	background:none;
	color:#8a99a8;
	cursor:pointer;
	font-size:15px;
	line-height:1;
	padding:0 2px;
}

.booking-summary__reset:hover{ color:#e2725b; }

@media (max-width: 575px){
	.booking-tiles{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
	.booking-step{ margin-top:20px; }
}

/* Лента ближайших рабочих дней врача */
.booking-days{
	display:flex;
	gap:8px;
	overflow-x:auto;
	padding-bottom:6px;
	-webkit-overflow-scrolling:touch;
}

.booking-day{
	flex:0 0 auto;
	min-width:76px;
	border:1px solid #d7dee5;
	background:#fff;
	border-radius:10px;
	padding:10px 8px;
	text-align:center;
	cursor:pointer;
	transition:border-color .15s, background .15s, color .15s;
}

.booking-day:hover{ border-color:#17a2b8; }

.booking-day.is-active{
	background:#17a2b8;
	border-color:#17a2b8;
	color:#fff;
}

.booking-day__dow{
	display:block;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.03em;
	color:#8a99a8;
}

.booking-day.is-active .booking-day__dow{ color:rgba(255,255,255,.8); }

.booking-day__num{
	display:block;
	font-size:19px;
	font-weight:700;
	line-height:1.2;
}

.booking-day__mon{
	display:block;
	font-size:11px;
	color:#8a99a8;
}

.booking-day.is-active .booking-day__mon{ color:rgba(255,255,255,.8); }

/* Время: сетка чипов вместо колонок бутстрапа */
.booking-times{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(86px, 1fr));
	gap:8px;
}

.booking-times__group{
	grid-column:1 / -1;
	margin:10px 0 2px;
	font-size:13px;
	font-weight:600;
	color:#0f7f91;
}

.booking-times__empty{
	grid-column:1 / -1;
	font-size:13px;
	color:#8a99a8;
}

.booking-time{
	border:1px solid #d7dee5;
	background:#fff;
	color:#20303f;
	border-radius:8px;
	padding:10px 6px;
	font-size:14px;
	cursor:pointer;
	transition:border-color .15s, background .15s, color .15s;
}

.booking-time:hover{ border-color:#17a2b8; color:#17a2b8; }

.booking-time.is-active,
.booking-time.btn-primary{
	background:#17a2b8;
	border-color:#17a2b8;
	color:#fff;
}

/* «Заказать звонок» рядом с «Записаться»: в front.css геометрия задана только для
   .btn-info, поэтому вторая кнопка брала бутстраповские радиус, отступы и шрифт.
   Правило ограничено кнопками меню, чтобы не задеть остальные outline-кнопки. */
.btn-menu.btn-outline-info{
	font-weight:600!important;
	color:#53cbe8!important;
	background-color:#fff!important;
	border-color:#53cbe8!important;
	border-radius:.45rem!important;
	padding:.675rem 1.675rem!important;
}

.btn-menu.btn-outline-info:hover{
	color:#fff!important;
	background-color:#53cbe8!important;
	border-color:#53cbe8!important;
}

/* Быстрая запись внутри модалки */
.booking-quick{
	border:1px solid #d7dee5;
	border-radius:8px;
	padding:14px;
	margin-top:10px;
}

/* Выбор врача, когда на одно время свободны несколько */
.booking-slot-doctors{
	width:100%;
	margin-top:12px;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.booking-slot-doctors .booking-step{ width:100%; margin:0; }