/**
 * Video Modal Styles
 * Remote Madam Design System
 */

/* ============================================
   VIDEO MODAL
   ============================================ */

.video-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all var(--transition);
}

.video-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.video-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

.video-modal__content {
	position: relative;
	width: 90%;
	max-width: 900px;
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transform: scale(0.9);
	transition: transform var(--transition);
}

.video-modal[aria-hidden="false"] .video-modal__content {
	transform: scale(1);
}

.video-modal__close {
	position: absolute;
	top: var(--spacing-4);
	right: var(--spacing-4);
	width: 40px;
	height: 40px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	cursor: pointer;
	transition: all var(--transition);
	z-index: 10;
}

.video-modal__close:hover {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.video-modal__wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	background-color: #000;
}

.video-modal__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	.video-modal__content {
		width: 95%;
	}

	.video-modal__close {
		width: 36px;
		height: 36px;
	}
}