/*
 * Pop-ups built on <dialog>: the download form (Figma "Overlay_Download" / "_Success",
 * parts/download-dialog.php + assets/js/downloads.js) and the video player (assets/js/video.js).
 */

.sn-dialog {
	width: min(752px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 32px;
	border: 0;
	background: var(--c-beige);
	color: var(--c-text);
	overflow: auto;
}

.sn-dialog::backdrop {
	background: rgb(0 0 0 / 0.8);
}

html:has(.sn-dialog[open]) {
	overflow: hidden;
}

.sn-dialog__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	margin-bottom: 40px;
}

.sn-dialog__title {
	font-size: var(--t-title);
	line-height: var(--lh-title);
}

.sn-dialog__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	margin: -8px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.sn-dialog__close .icon {
	width: 24px;
	height: 24px;
	stroke-width: 2.2;
}

/* Download form. */
.download-form {
	display: grid;
	gap: 32px;
}

.download-form__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.download-form .field {
	flex: 0 1 272px;
	gap: 16px;
}

.download-form .field label {
	color: var(--c-text-2);
}

.download-form .field input {
	padding: 10px 12px 10px 4px;
	border-bottom-color: var(--c-text);
	font-size: var(--t-body);
	line-height: var(--lh-body);
}

.download-form .field input::placeholder {
	color: var(--c-muted);
	opacity: 1;
}

.download-form__send {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}

.download-form .form-status:empty {
	display: none;
}

.download-form .form-status:not(.is-error) {
	color: var(--c-success, #1f9842);
}

/* After sending: Figma "Primary_Disabled". */
.download-form .btn:disabled {
	border-color: var(--c-line);
	background: var(--c-line);
	color: var(--c-light);
	cursor: default;
}

/* Video player. */
.video-dialog {
	width: min(1136px, calc(100% - 32px), calc((100dvh - 120px) * 16 / 9));
	padding: 0;
	background: transparent;
	overflow: visible;
}

.video-dialog__bar {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 8px;
}

.video-dialog__bar .sn-dialog__close {
	margin: 0 -8px 0 0;
	color: var(--c-light);
}

.video-dialog__frame {
	aspect-ratio: 16 / 9;
	background: var(--c-dark);
}

.video-dialog__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.sn-dialog:not(.video-dialog) {
		padding: 24px 16px;
	}

	.sn-dialog__head {
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 32px;
	}

	.sn-dialog__title {
		font-size: var(--t-title-s);
		line-height: var(--lh-title-s);
	}

	.download-form .field {
		flex-basis: 100%;
	}

	.download-form__send .btn {
		width: 100%;
	}
}