/*
 * Карточки товаров в чате Better Messages (дочерняя тема ppl.travel).
 * Вертикальная карточка (фото 16:9, название, цена, кнопка «Заказать»)
 * и карусель для сообщений из нескольких товарных ссылок.
 *
 * Важно: карточка ВСЕГДА белая с тёмным текстом, независимо от темы чата и цвета
 * бабла собеседника/пользователя — карточка не должна сливаться с фоном,
 * а текст (особенно цена) обязан читаться в обоих режимах.
 */

.bp-messages-wrap .ppl-bm-card,
.bp-messages-wrap .ppl-bm-card * {
	box-sizing: border-box;
}

.bp-messages-wrap .ppl-bm-card {
	display: block;
	width: 240px;
	max-width: 100%;
	margin: 4px 0;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: var(--bm-message-border-radius, 8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	text-decoration: none;
}

/* фото 16:9 */
.bp-messages-wrap .ppl-bm-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background: #f0f2f5;
}

/* старые iOS Safari (до 15) не знают aspect-ratio — фолбэк через padding-top */
@supports not (aspect-ratio: 16 / 9) {
	.bp-messages-wrap .ppl-bm-card__media {
		padding-top: 56.25%;
		height: 0;
		overflow: hidden;
	}

	.bp-messages-wrap .ppl-bm-card__media img {
		position: absolute;
		top: 0;
		left: 0;
	}
}

.bp-messages-wrap .ppl-bm-card__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

.bp-messages-wrap .ppl-bm-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px 12px;
	min-width: 0;
}

.bp-messages-wrap .ppl-bm-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.6em;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	color: #17212b !important;
	text-decoration: none !important;
}

.bp-messages-wrap .ppl-bm-card__title:hover,
.bp-messages-wrap .ppl-bm-card__title:focus {
	text-decoration: underline !important;
}

/* цена: крупная, жирная, по центру */
.bp-messages-wrap .ppl-bm-card__price {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	color: #17212b;
	margin-top: 2px;
}

.bp-messages-wrap .ppl-bm-card__price del {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	opacity: 0.45;
	margin-right: 4px;
}

.bp-messages-wrap .ppl-bm-card__price ins,
.bp-messages-wrap .ppl-bm-card__price mark {
	background: none;
	text-decoration: none;
}

/* кнопка «Заказать» — как на странице товара: зелёная с белым текстом */
.bp-messages-wrap .ppl-bm-card__btn {
	display: block;
	margin-top: 8px;
	padding: 9px 10px;
	border-radius: 8px;
	background: #11c149;
	color: #ffffff !important;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none !important;
	transition: background 0.2s ease;
}

.bp-messages-wrap .ppl-bm-card__btn:hover,
.bp-messages-wrap .ppl-bm-card__btn:focus {
	background: #0eaa40;
}

/*
 * Галерея-карусель.
 * Число карточек в ряд зависит от ширины экрана устройства:
 * смартфон — 1, планшет — 2, большой экран — 3. Стрелки плавают поверх карточек
 * (position:absolute), чтобы не отбирать ширину у трека.
 * Галерея лежит внутри inline-элемента контента сообщения, поэтому сама получает
 * определённую vw-ширину (иначе схлопывается по shrink-to-fit).
 */
.bp-messages-wrap .ppl-bm-gallery {
	position: relative;
	width: min(82vw, 320px);
	max-width: 100%;
	margin: 4px 0;
}

.bp-messages-wrap .ppl-bm-gallery__track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 2px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* iOS: инерционная прокрутка пальцем */
	-webkit-overflow-scrolling: touch;
}

.bp-messages-wrap .ppl-bm-gallery__track::-webkit-scrollbar {
	display: none;
}

/* смартфоны (до 640px): 1 карточка на всю ширину трека */
.bp-messages-wrap .ppl-bm-gallery .ppl-bm-card {
	flex: 0 0 100%;
	max-width: none;
	width: auto;
	scroll-snap-align: start;
}

/* планшеты (641–1024px): 2 карточки в ряд */
@media (min-width: 641px) {
	.bp-messages-wrap .ppl-bm-gallery {
		width: min(72vw, 540px);
	}

	.bp-messages-wrap .ppl-bm-gallery .ppl-bm-card {
		flex-basis: 230px;
	}
}

/* большие экраны (от 1025px): 3 карточки в ряд */
@media (min-width: 1025px) {
	.bp-messages-wrap .ppl-bm-gallery {
		width: min(60vw, 640px);
	}

	.bp-messages-wrap .ppl-bm-gallery .ppl-bm-card {
		flex-basis: 200px;
	}
}

/*
 * Стрелки карусели.
 * По умолчанию скрыты — показываются только когда есть что листать
 * (классы ppl-bm-gallery--scrollable / --at-start / --at-end ставит JS).
 * Расположены по центру ФОТО карточки (top ~60px), а не всей галереи,
 * чтобы не закрывать заголовок и цену.
 */
.bp-messages-wrap .ppl-bm-gallery__arrow {
	display: none;
	position: absolute;
	top: 60px;
	z-index: 5;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: #17212b;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
	transition: background-color 0.15s ease;
	/* совместимость с iOS/Apple: сброс нативного вида кнопки, без подсветки тапа и задержки зума */
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.bp-messages-wrap .ppl-bm-gallery--scrollable .ppl-bm-gallery__arrow {
	display: flex;
}

/* у края списка соответствующая стрелка не нужна */
.bp-messages-wrap .ppl-bm-gallery--at-start .ppl-bm-gallery__arrow--prev,
.bp-messages-wrap .ppl-bm-gallery--at-end .ppl-bm-gallery__arrow--next {
	display: none;
}

.bp-messages-wrap .ppl-bm-gallery__arrow--prev {
	left: 2px;
}

.bp-messages-wrap .ppl-bm-gallery__arrow--next {
	right: 2px;
}

/* на тач-устройствах стрелки крупнее (рекомендация Apple — цель от 44px ближе к ней) */
@media (pointer: coarse) {
	.bp-messages-wrap .ppl-bm-gallery__arrow {
		width: 34px;
		height: 34px;
	}
}

/*
 * Перекрываем жёсткие правила чата. У плагина есть сторонние цепочки с !important,
 * включая универсальную ".bm-message-content:not(.bm-hide-background) *" (0,10,0),
 * которая перекрашивает ВСЁ внутри сообщения (цену, стрелки) в цвет стороны бабла —
 * на правой стороне это белый текст на белой карточке. Поэтому повторяем цепочку
 * селекторов плагина и удваиваем класс — (0,11,0) перебивает все его правила.
 */
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) a.ppl-bm-card__title.ppl-bm-card__title,
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .ppl-bm-card__title.ppl-bm-card__title {
	color: #17212b !important;
	text-decoration: none !important;
}

.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) a.ppl-bm-card__title.ppl-bm-card__title:hover,
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .ppl-bm-card__title.ppl-bm-card__title:hover {
	text-decoration: underline !important;
}

/* цена: сам блок и все вложенные span'ы (woocommerce-Price-amount и т.п.) */
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .ppl-bm-card__price.ppl-bm-card__price,
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .ppl-bm-card__price.ppl-bm-card__price * {
	color: #17212b !important;
}

/*
 * Стрелки: правило плагина ".bp-messages-wrap button { background/padding/border-radius !important }"
 * крадёт вид стрелок — повторяем цепочку селекторов и удваиваем класс, перебивая всё.
 * display здесь сознательно не трогаем: им управляют классы --scrollable/--at-start/--at-end.
 */
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .ppl-bm-gallery__arrow.ppl-bm-gallery__arrow {
	background: #ffffff !important;
	color: #17212b !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) a.ppl-bm-card__btn.ppl-bm-card__btn,
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .ppl-bm-card__btn.ppl-bm-card__btn {
	color: #ffffff !important;
	text-decoration: none !important;
}

.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) a.ppl-bm-card__btn.ppl-bm-card__btn:hover,
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .ppl-bm-card__btn.ppl-bm-card__btn:hover,
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) a.ppl-bm-card__btn.ppl-bm-card__btn:focus,
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .ppl-bm-card__btn.ppl-bm-card__btn:focus {
	color: #ffffff !important;
	text-decoration: none !important;
}