/*
 * Site dialogs, their forms and the video dialog (G-05, G-06, G-07; Phase 9).
 * Ported from the redesign PoC (css/site.css @ ed0ab9f7, "Modal", ".form")
 * using theme.json tokens and base.css aliases only.
 *
 * The dialogs are native <dialog> elements (sealcoin-core src/Dialogs and
 * assets/js/enhance-video.js). This file only styles them. It is printed in
 * the footer: a dialog is closed until JavaScript opens it.
 *
 * Literal values kept from the PoC: 1px borders, the round close button (50%)
 * and the 2px example rule. The open animation runs only when motion is
 * allowed.
 */

.sc-dialog {
	width: min(var(--wp--custom--dialog--width), calc(100% - 2 * var(--wp--custom--dialog--viewport-margin)));
	max-width: none;
	max-height: calc(100% - 2 * var(--wp--custom--dialog--viewport-margin));
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--c-navy);
	box-shadow: var(--shadow-dialog);
	color: var(--c-text);
}

.sc-dialog-video {
	width: min(var(--wp--custom--dialog--width-wide), calc(100% - 2 * var(--wp--custom--dialog--viewport-margin)));
}

.sc-dialog::backdrop {
	background: color-mix(in srgb, var(--c-black) 78%, transparent);
	backdrop-filter: blur(var(--wp--custom--dialog--backdrop-blur));
}

html.sc-has-dialog {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {

	.sc-dialog[open] {
		animation: sc-dialog-in var(--motion-fast) var(--motion-easing);
	}

	@keyframes sc-dialog-in {

		from {
			opacity: 0;
			transform: translateY(8px);
		}
	}
}

.sc-dialog-box {
	position: relative;
}

.sc-dialog-close {
	position: absolute;
	top: var(--wp--custom--dialog--close-offset);
	right: var(--wp--custom--dialog--close-offset);
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--wp--custom--dialog--close-size);
	height: var(--wp--custom--dialog--close-size);
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--c-black);
	color: var(--c-text);
	font-size: var(--wp--custom--font-size--dialog-close);
	cursor: pointer;
}

.sc-dialog-close .sc-icon,
.sc-dialog-close-icon {
	width: 1em;
	height: 1em;
}

.sc-dialog-close-icon {
	display: block;
	background-color: currentcolor;
	mask: var(--sc-icon-close) center / contain no-repeat;
}

.sc-dialog-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--dialog--gap);
	padding: var(--wp--custom--dialog--padding);
}

.sc-dialog :where(h2, p, form) {
	margin: 0;
}

.sc-dialog-title {

	/* Leave room for the close button. */
	padding-right: var(--wp--custom--dialog--close-size);
	font-size: var(--wp--preset--font-size--h-3);
}

.sc-dialog-intro {
	color: var(--c-muted);
}

/* ---------- Forms ---------- */

.sc-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--form--gap);
}

.sc-form[hidden] {
	display: none;
}

.sc-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--form--label-gap);
	font-size: var(--wp--custom--font-size--form-label);
	color: var(--c-muted);
}

.sc-field-required {
	color: var(--c-faint);
}

.sc-field :where(input:not([type="checkbox"]), textarea) {
	padding: var(--wp--custom--form--input-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-input);
	background: var(--c-ink-deep);
	color: var(--c-text);
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
}

/* The PoC removed the outline; here the border changes and the focus ring stays. */
.sc-field :where(input, textarea):focus {
	border-color: var(--c-orange);
}

.sc-field [aria-invalid="true"] {
	border-color: var(--c-bad);
}

.sc-field-error,
.sc-form-alert {
	color: var(--c-bad);
}

.sc-field-consent {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--custom--form--checkbox-gap);
}

.sc-field-consent label {
	flex: 1;
}

.sc-field-consent .sc-field-error {
	flex-basis: 100%;
}

.sc-form-success {
	padding: var(--wp--preset--spacing--m);
	border: 1px solid var(--c-ok);
	border-radius: var(--r-input);
	color: var(--c-ok);
}

.sc-form-alert:empty,
.sc-form-success:empty {
	display: none;
}

.sc-form-actions .wp-element-button,
.sc-dialog-actions .wp-element-button {
	display: inline-flex;
	cursor: pointer;
}

.sc-form [type="submit"]:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* ---------- Video dialog ---------- */

.sc-video-frame {
	aspect-ratio: 16 / 9;
	background: var(--c-black);
}

.sc-dialog-video.is-short .sc-video-frame {
	aspect-ratio: 9 / 16;
	max-height: var(--wp--custom--video--short-max-height);
	margin-inline: auto;
}

.sc-video-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.sc-video-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--dialog--gap);
	padding: var(--wp--custom--video--bar-padding);
}

.sc-video-bar .sc-dialog-title {
	padding-right: 0;
	font-size: var(--wp--custom--font-size--video-title);
}