/* TEN-18: кнопки месенджерів у шапці. Власний файл, template_styles.css не чіпати. */

/* Зовнішній рядок шапки (логотип | al-right) у бойовій верстці — bootstrap-колонки
   на float, тобто вирівняні по верху. Через наш блок месенджерів права колонка стала
   вищою, і логотип завис угорі. Робимо цей рядок flex і центруємо колонки по вертикалі;
   ширини колонок і горизонтальні відступи лишаються бойові. */
@media (min-width: 768px) {
	.top-pan > .container > .row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	.top-pan > .container > .row::before,
	.top-pan > .container > .row::after {
		content: none;
	}
	/* бойові margin-top/bottom логотипа несиметричні (20/15, на lg 5/15) — вони
	   зсували б логотип з центру рядка; горизонтальні відступи й розміри не чіпаємо */
	.top-pan > .container > .row .logo {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* --- рядок "телефони + месенджери" (≥768px) --- */
@media (min-width: 768px) {
	/* відступи рядка симетричні, інакше його вміст стоїть нижче за центр
	   зовнішнього рядка й логотип виглядає піднятим */
	.ten18-header-row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin-top: 7px;
		margin-bottom: 7px;
	}
	/* clearfix bootstrap .row у flex/grid став би зайвим елементом */
	.ten18-header-row::before,
	.ten18-header-row::after {
		content: none;
	}
	.ten18-header-row--narrow {
		margin-top: 14px;
		margin-bottom: 14px;
	}
	.ten18-col-phones1,
	.ten18-col-phones2,
	.ten18-col-msgr {
		position: relative;
		box-sizing: border-box;
	}
	/* телефонні колонки — за шириною вмісту, номери ніколи не переносяться */
	.ten18-col-phones1,
	.ten18-col-phones2 {
		flex: 0 0 auto;
		padding-left: 15px;
	}
	.ten18-header-row a[href^="tel:"],
	.ten18-header-row .free,
	.ten18-header-row .free > div {
		white-space: nowrap;
	}
	.ten18-col-phones1 .tel_top_region.top-icon.top-phone,
	.ten18-col-phones2 .tel_top_region2.top-icon.top-phone {
		margin-top: 0;
		padding-top: 0;
		padding-right: 0;
	}
	.ten18-col-phones1 .tel_top_region.top-icon.top-phone {
		padding-left: 54px;
		background-position: left center;
		background-size: 40px;
	}
	.ten18-col-phones2 .tel_top_region2.top-icon.top-phone {
		margin-left: 0;
		line-height: 24px;
	}
	/* іконка "Стан Нагрев" — праворуч від мобільних номерів, як у макеті */
	.ten18-col-phones2 {
		display: flex;
		align-items: center;
	}
	.ten18-col-phones2 .sn {
		order: 2;
		position: static;
		flex: 0 0 auto;
		margin: 0 0 0 16px;
	}
	.ten18-col-phones2 .sn img {
		display: block;
		width: 44px;
		height: auto;
	}
	/* колонка месенджерів забирає решту ширини; вміст притиснутий праворуч
	   через margin-left:auto, тож при нестачі місця він не наповзає на номери */
	.ten18-col-msgr {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: center;
		padding-left: 16px;
		padding-right: 15px;
	}
	/* блок звужується до вільного місця (min-width:0), інакше довші підписи
	   de/pl не давали б нижньому рядку перенестись і він вилазив би за контейнер */
	.ten18-col-msgr .tel_top_region.top-icon.top-order.mess {
		flex: 0 1 auto;
		min-width: 0;
		margin: 0 0 0 auto;
		padding: 0;
	}
	.ten18-col-msgr .ten18-msgr {
		width: 100%;
	}
	/* якщо примітка поруч із поштою не влазить — переходить під неї */
	.ten18-msgr__bottom {
		flex-wrap: wrap;
	}
}

@media (min-width: 1200px) {
	/* розділювач між групами телефонів, як у макеті */
	.ten18-col-phones2 {
		padding-left: 16px;
	}
	.ten18-col-phones2 .tel_top_region2.top-icon.top-phone {
		padding-left: 16px;
		border-left: 1px solid rgba(255, 255, 255, .18);
	}
	/* праворуч від логотипа в його колонці порожньо (printshim_copy ~125px,
	   ten24EN/DE/PL ~220px) — рядок заходить туди, щоб кнопки були повного розміру */
	.ten18-header-row {
		margin-left: -115px;
	}
	.ten18-header-row--narrow {
		margin-left: -165px;
	}
	.ten18-header-row--narrow .ten18-col-phones2 .tel_top_region2.top-icon.top-phone {
		padding-left: 0;
		border-left: 0;
	}
}

/* ≥992, ten24EN/DE/PL: перемикач мов лишається абсолютним, як у бойовому CSS.
   Колонка месенджерів звужується до вмісту, а її лівий відступ — місце під перемикач,
   тож він стає ліворуч від кнопок, як на проді, і ні на що не налазить. */
@media (min-width: 992px) {
	.ten18-header-row--narrow .ten18-col-msgr {
		flex: 0 1 auto;
		min-width: auto;
		align-items: flex-start;
		padding-left: 66px;
	}
	.ten18-header-row--narrow .ten18-col-msgr .tel_top_region.top-icon.top-order.mess {
		margin-left: 18px;
	}
	.ten18-header-row--narrow .ten18-col-msgr {
		margin-left: auto;
	}
}

/* 768–991 (контейнер 750, al-right 500): блок месенджерів лишається в одному
   рядку з телефонами, праворуч — шапка та сама, тільки менша */
@media (min-width: 768px) and (max-width: 991px) {
	.ten18-header-row {
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.ten18-col-phones1 .tel_top_region.top-icon.top-phone {
		padding-left: 42px;
		background-size: 30px;
	}
	.ten18-col-msgr {
		padding-left: 8px;
	}
	/* перемикач мов (en/de/pl) — у потік, ліворуч від кнопок: місця на резерв
	   під абсолютний, як на ширших екранах, тут немає */
	.ten18-col-msgr .lang-choose {
		position: relative;
		flex: 0 0 auto;
		top: auto;
		left: auto;
		right: auto;
		float: none;
		margin: 0 8px 0 auto;
		padding: 4px 6px;
	}
	.ten18-col-msgr .lang-choose + .tel_top_region.top-icon.top-order.mess {
		margin-left: 0;
	}
}

/* --- сам блок кнопок --- */
.ten18-msgr {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

/* ≥768: підпис і кнопка пошти вирівняні по лівому краю ряду кнопок (Viber),
   а не по правому, як за макетом; мобільна лишається без змін */
@media (min-width: 768px) {
	.ten18-msgr {
		align-items: flex-start;
	}
}

.ten18-msgr__caption {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #cfcfcf;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
}

.ten18-msgr__arrow {
	color: #cfcfcf;
	flex: 0 0 auto;
	width: 42px;
	height: 21px;
}

.ten18-msgr__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
}

.ten18-msgr__btn,
.ten18-msgr__email {
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ten18-msgr__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 10px 14px;
	border-radius: 12px;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	border: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 0 14px rgba(255, 255, 255, .22);
	transition: filter .15s ease;
}

.ten18-msgr__btn:hover,
.ten18-msgr__btn:focus-visible {
	filter: brightness(0.9);
	color: #fff;
	text-decoration: none;
}

.ten18-msgr__btn:focus-visible,
.ten18-msgr__email:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ten18-msgr__btn svg {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
}

.ten18-msgr__btn--viber { background: #7B5CF6; }
.ten18-msgr__btn--whatsapp { background: #25D366; }
.ten18-msgr__btn--telegram { background: #29A9EB; }

.ten18-msgr__bottom {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ten18-msgr__email {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 8px 20px;
	border-radius: 10px;
	background: #333;
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.ten18-msgr__email svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.ten18-msgr__email:hover,
.ten18-msgr__email:focus-visible {
	color: #fff;
	text-decoration: none;
	border-color: rgba(255, 255, 255, .6);
}

.ten18-msgr__note {
	color: #bdbdbd;
	font-size: 14px;
	white-space: nowrap;
}

/* ten24EN/DE/PL: бюджет вужчий (al-right 7/12), кнопки трохи менші за макетні */
@media (min-width: 1200px) {
	.ten18-col-msgr--narrow .ten18-msgr__caption {
		font-size: 15px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__arrow {
		width: 38px;
		height: 19px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__row {
		gap: 8px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__btn {
		min-height: 50px;
		padding: 9px 12px;
		gap: 7px;
		font-size: 17px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__btn svg {
		width: 24px;
		height: 24px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__email {
		min-height: 44px;
		padding: 7px 16px;
		font-size: 15px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.ten18-header-row--narrow .ten18-col-msgr {
		padding-left: 62px;
	}
	.ten18-header-row--narrow .ten18-col-msgr .tel_top_region.top-icon.top-order.mess {
		margin-left: 14px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__caption {
		font-size: 12px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__arrow {
		width: 30px;
		height: 15px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__btn {
		min-height: 44px;
		padding: 7px 8px;
		gap: 5px;
		font-size: 13px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__btn svg {
		width: 18px;
		height: 18px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__email {
		min-height: 44px;
		padding: 6px 8px;
		font-size: 12px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__email svg {
		width: 16px;
		height: 16px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__note {
		font-size: 12px;
	}
}

/* 992–1199 (контейнер 970) — компактніше */
@media (min-width: 992px) and (max-width: 1199px) {
	.ten18-msgr {
		gap: 8px;
	}
	.ten18-msgr__caption {
		font-size: 14px;
	}
	.ten18-msgr__arrow {
		width: 36px;
		height: 18px;
	}
	.ten18-msgr__row {
		gap: 8px;
	}
	.ten18-msgr__btn {
		min-height: 46px;
		padding: 8px 10px;
		gap: 7px;
		font-size: 16px;
		border-radius: 10px;
	}
	.ten18-msgr__btn svg {
		width: 22px;
		height: 22px;
	}
	.ten18-msgr__email {
		min-height: 44px;
		padding: 6px 14px;
		font-size: 14px;
	}
	.ten18-msgr__email svg {
		width: 18px;
		height: 18px;
	}
	.ten18-msgr__note {
		font-size: 13px;
	}
}

/* 768–991 (контейнер 750) — ще компактніше */
@media (min-width: 768px) and (max-width: 991px) {
	.ten18-msgr {
		gap: 7px;
	}
	.ten18-msgr__caption {
		font-size: 12px;
		gap: 6px;
	}
	.ten18-msgr__arrow {
		width: 28px;
		height: 14px;
	}
	.ten18-msgr__row {
		gap: 5px;
	}
	.ten18-msgr__btn {
		min-height: 44px;
		padding: 7px 6px;
		gap: 5px;
		font-size: 13px;
		border-radius: 10px;
	}
	.ten18-msgr__btn svg {
		width: 18px;
		height: 18px;
	}
	.ten18-msgr__email {
		min-height: 44px;
		padding: 6px 7px;
		font-size: 12px;
	}
	.ten18-msgr__email svg {
		width: 16px;
		height: 16px;
	}
	/* якщо "Ми завжди на зв'язку!" поруч із поштою не влазить — переходить під неї */
	.ten18-msgr__bottom {
		flex-wrap: wrap;
		gap: 6px 8px;
	}
	.ten18-msgr__note {
		font-size: 11px;
	}
	/* en/de/pl: у тому ж рядку ще й перемикач мов, тож іще на крок менше */
	.ten18-col-msgr--narrow .ten18-msgr__btn {
		padding: 6px 5px;
		font-size: 11px;
		gap: 4px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__btn svg {
		width: 16px;
		height: 16px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__row {
		gap: 5px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__caption {
		font-size: 11px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__arrow {
		width: 24px;
		height: 12px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__email {
		font-size: 11px;
		padding: 6px 7px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__email svg {
		width: 14px;
		height: 14px;
	}
	.ten18-col-msgr--narrow .ten18-msgr__note {
		font-size: 11px;
	}
}

/* --- мобільний (до 767px): блок у top-menu-xs (printshim_copy) і окремий
   .ten18-msgr-mobile (ten24EN/DE/PL) --- */
@media (max-width: 767px) {
	.ten18-msgr-mobile {
		padding: 10px 15px 14px;
	}
	/* printshim_copy: мобільний блок месенджерів лежить прямо в .top-menu-xs,
	   без .ten18-msgr-mobile — сайтовий div.tel_top_region{padding-right:20px} зсуває його праворуч */
	.top-menu-xs .mess {
		padding-right: 0;
	}
	/* ten24EN/DE/PL: бойовий CSS зсуває .mess на -20px — у повноширинному блоці це виносить кнопки за лівий край */
	.ten18-msgr-mobile .tel_top_region.top-icon.top-order.mess {
		margin-left: 0;
		margin-right: 0;
		padding-right: 0;
	}
	.ten18-msgr {
		width: 100%;
		align-items: stretch;
		gap: 10px;
	}
	.ten18-msgr__caption {
		display: none;
	}
	.ten18-msgr__row {
		width: 100%;
		gap: 8px;
	}
	.ten18-msgr__btn {
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		gap: 4px;
		min-height: 56px;
		padding: 8px 4px;
		font-size: 13px;
		border-radius: 10px;
	}
	.ten18-msgr__btn svg {
		width: 22px;
		height: 22px;
	}
	.ten18-msgr__btn span {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ten18-msgr__bottom {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}
	.ten18-msgr__email {
		flex: 1 1 auto;
		justify-content: center;
		min-height: 44px;
		font-size: 14px;
	}
	.ten18-msgr__note {
		flex: 1 1 100%;
		text-align: center;
	}
}