/*
 * Комментарий эксперта — ТЗ десктоп 28.08, п. 20b.
 *
 * Блок целиком собран в Elementor (контейнер с классом `review-banner`),
 * своей разметки в теме нет. Поэтому селекторы структурные, по типам
 * виджетов: у трёх блоков на странице отеля и у блоков на других
 * страницах свои id, а порядок и состав детей одинаковые:
 *
 *   .review-banner
 *     > .elementor-widget-button        — каретка (в разметке это крестик)
 *     > .elementor-widget-image         — кавычки
 *     > .elementor-widget-text-editor   — текст комментария
 *     > .e-con                          — подпись «Коментарий эксперта»
 */

/* --- Каретка вместо крестика ---------------------------------------- */

/*
 * Внутри кнопки лежит инлайновый <svg> с двумя перекрещенными линиями.
 * Прячем его и рисуем каретку теми же двумя полосками под ±45°, что и
 * аккордеоны каталога (`.hotels-catalog__group-caret`) — чтобы элемент
 * управления на сайте был один и тот же.
 */
.review-banner .elementor-button-icon svg {
	display: none;
}

.review-banner .elementor-button-icon {
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	color: #323439;
	transition: transform 0.25s ease;
}

.review-banner .elementor-button-icon::before,
.review-banner .elementor-button-icon::after {
	content: "";
	position: absolute;
	top: 4px;
	width: 6px;
	height: 1.5px;
	background: currentColor;
}

.review-banner .elementor-button-icon::before {
	left: 0;
	transform: rotate(-45deg);
}

.review-banner .elementor-button-icon::after {
	right: 0;
	transform: rotate(45deg);
}

/* Развёрнут — каретка вверх (действие «свернуть»), свёрнут — вниз. */
.review-banner:not(.is-collapsed) .elementor-button-icon {
	transform: rotate(180deg);
}

/* --- Свёрнутое состояние -------------------------------------------- */

/*
 * Тонкая плашка: подпись слева, каретка справа, одной строкой.
 * Блок — flex-колонка, поэтому в свёрнутом виде разворачиваем его в ряд
 * и меняем порядок через `order`: в разметке кнопка идёт первой.
 */
.review-banner.is-collapsed {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
	cursor: pointer;
}

.review-banner.is-collapsed > .elementor-widget-image,
.review-banner.is-collapsed > .elementor-widget-text-editor {
	display: none;
}

/*
 * `width: auto` обязателен: Elementor раздаёт детям контейнера
 * `--container-widget-width: 100%`, и в ряду оба блока растянулись бы
 * на всю ширину.
 */
.review-banner.is-collapsed > .elementor-widget-button,
.review-banner.is-collapsed > .e-con {
	width: auto;
	flex: 0 0 auto;
}

.review-banner.is-collapsed > .e-con {
	order: 1;
}

.review-banner.is-collapsed > .elementor-widget-button {
	order: 2;
}

@media (prefers-reduced-motion: reduce) {
	.review-banner .elementor-button-icon {
		transition: none;
	}
}