/* Title + видеообзор в одной строке */
.mlux-video-review-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-bottom: 10px;
}

.mlux-video-review-title-row .product_title {
	margin: 0;
	flex: 0 1 auto;
}

/* Как кнопка «Отправить» на /contact-us/ (Elementor form button) */
.mlux-video-review__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 16px !important;
	min-height: 40px;
	height: 40px;
	border: 0 !important;
	border-radius: 0 !important;
	background: #248c37 !important;
	background-color: #248c37 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.mlux-video-review__btn:hover,
.mlux-video-review__btn:focus,
.mlux-video-review__btn:focus-visible,
.mlux-video-review__btn:active {
	background: #248c37 !important;
	background-color: #248c37 !important;
	color: #fff !important;
	box-shadow: none !important;
	outline: none;
	opacity: 0.92;
}

/*
 * Модалка в духе WoodMart Magnific video popup:
 * тёмный оверлей, крестик над плеером, лёгкий fade/slide.
 */
.mlux-video-review-modal {
	--mlux-video-w: 16;
	--mlux-video-h: 9;
	--mlux-video-chrome: 84px;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 24px 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.35s;
}

.mlux-video-review-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.mlux-video-review-modal[hidden] {
	display: none !important;
}

.mlux-video-review-modal.is-open:not([hidden]) {
	display: flex !important;
}

.mlux-video-review-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
}

.mlux-video-review-modal__dialog {
	position: relative;
	z-index: 1;
	/* Ширина = min(потолок, высота окна × соотношение, доступная ширина).
	   Для вертикального ролика окно сужается — чёрные поля по бокам не нужны. */
	width: min(
		900px,
		calc((100vh - var(--mlux-video-chrome)) * var(--mlux-video-w) / var(--mlux-video-h)),
		100%
	);
	background: #000;
	border-radius: var(--wd-brd-radius, 0);
	line-height: 0;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), width 0.2s ease;
}

.mlux-video-review-modal.is-open .mlux-video-review-modal__dialog {
	opacity: 1;
	transform: none;
}

@supports (height: 100dvh) {
	.mlux-video-review-modal__dialog {
		width: min(
			900px,
			calc((100dvh - var(--mlux-video-chrome)) * var(--mlux-video-w) / var(--mlux-video-h)),
			100%
		);
	}
}

.mlux-video-review-modal__close {
	/* WoodMart даёт button { position: relative } — без !important крестик
	   остаётся в потоке и рисует чёрную полосу над роликом. */
	position: absolute !important;
	top: -48px;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	font-size: 0;
	line-height: 1;
	transition: color 0.25s ease, opacity 0.25s ease 0.15s;
}

.mlux-video-review-modal.is-open .mlux-video-review-modal__close {
	opacity: 1;
}

.mlux-video-review-modal__close::after {
	content: "\00d7";
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1;
	speak: never;
}

.mlux-video-review-modal__close:hover,
.mlux-video-review-modal__close:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	color: rgba(255, 255, 255, 0.8);
	outline: none;
}

.mlux-video-review-modal__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--mlux-video-w) / var(--mlux-video-h);
	background: #000;
	overflow: hidden;
}

.mlux-video-review-modal__media iframe,
.mlux-video-review-modal__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: transparent;
}

.mlux-video-review-modal__media video {
	/* cover: нативный controls не оставляет чёрную кромку сверху, как contain */
	object-fit: cover;
	object-position: center;
}

body.mlux-video-review-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.mlux-video-review-title-row {
		gap: 8px 14px;
	}

	.mlux-video-review__btn {
		font-size: 12px;
		padding: 0 12px !important;
		min-height: 36px;
		height: 36px;
	}

	.mlux-video-review-modal {
		--mlux-video-chrome: 64px;
		padding: 52px 12px 12px;
	}

	.mlux-video-review-modal__close {
		top: -44px;
		right: 0;
	}
}