/**
 * VX Toolkit Dialog — CSS.
 *
 * Verbatim port of Voxel's `dialog.css` (themes/voxel/assets/dist/
 * dialog.css), with the following class renames:
 *   .vx-native-dialog          → .vx-toolkit-dialog
 *   .vx-native-dialog__close   → .vx-toolkit-dialog__close
 *   .vx-native-dialog__trigger → .vx-toolkit-dialog__trigger
 *
 * One addition: `.vx-toolkit-dialog-backdrop` (manual backdrop, used
 * because our inline `onclick` calls `dialog.show()` not `showModal()`,
 * which loses the native `::backdrop` pseudo).
 */

/* ============================================================
 *  VOXEL MIRROR — copied verbatim from dialog.css
 * ============================================================ */
.vx-toolkit-dialog {
	position: fixed;
	inset: 0;
	z-index: 500000;
	display: block;
	width: min(720px, 90vw);
	max-width: 90vw;
	max-height: 90dvh;
	margin: auto;
	padding: 20px;
	border: none;
	background: #fff;
	box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
	border-radius: 0.475rem;
	color: inherit;
	overflow: auto;
	animation-name: smooth-vx-toolkit-dialog-reveal;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.22, 0.68, 0, 1);
	opacity: 0;
	will-change: transform, opacity;
}

.vx-toolkit-dialog:not([open]) {
	display: none;
}

/* Native ::backdrop only paints for showModal()'d dialogs. We use
 * show() instead (see widget render comment) so this rule never
 * actually renders — kept here just so the file is a complete
 * mirror of Voxel's. The manual backdrop element below does the work. */
.vx-toolkit-dialog::backdrop {
	background: rgba(0, 0, 0, 0.45);
	animation-name: smooth-vx-toolkit-dialog-backdrop;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
	opacity: 0;
	will-change: opacity;
}

.vx-toolkit-dialog__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 200;
	background-color: #fff;

	/* The following base properties (rounded button look) match what
	 * Voxel's `.ts-icon-btn` gives their close button. We don't
	 * inherit that helper class so we redeclare what we need. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 50%;
	color: #475569;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.vx-toolkit-dialog__close:hover {
	background-color: #f3f4f6;
	color: #0f172a;
}

.vx-toolkit-dialog > .e-con {
	min-height: 160px;
}

.vx-toolkit-dialog__trigger {
	width: auto;
	cursor: pointer;
	/* Default look so the button is usable before any styling controls
	 * are applied (Voxel's trigger inherits `.ts-btn .ts-btn-1` from
	 * the theme — we provide our own minimal default here). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: none;
	border-radius: 6px;
	background: #2563eb;
	color: #fff;
	font: inherit;
	font-weight: 500;
}

.vx-toolkit-dialog__trigger:hover {
	background: #1d4ed8;
}

@keyframes smooth-vx-toolkit-dialog-reveal {
	0%  { opacity: 0; transform: scale(0.95) translateZ(0); }
	to  { opacity: 1; transform: scale(1)    translateZ(0); }
}

@keyframes smooth-vx-toolkit-dialog-backdrop {
	0% { opacity: 0; }
	to { opacity: 1; }
}

/* ============================================================
 *  MANUAL BACKDROP — our addition.
 *
 *  We use dialog.show() not showModal() (so Voxel popup dropdowns
 *  inside the dialog don't get top-layer-trapped behind it). Native
 *  ::backdrop doesn't paint for show()'d dialogs, so we render a
 *  real backdrop div and fade it in/out via the `.is-open` class.
 *  Z-index 499999 — one below the dialog (500000).
 * ============================================================ */
.vx-toolkit-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 499999;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.2s ease-out;
	cursor: pointer;
}

.vx-toolkit-dialog-backdrop.is-open {
	opacity: 1;
}

.vx-toolkit-dialog-backdrop[hidden] {
	display: none;
}

/* ============================================================
 *  CONTENT-SOURCE MODES
 *
 *  When `data-content-source="elementor_template"` (or anything
 *  other than `nested`) the user has chosen to render an Elementor
 *  template inside the dialog body. Elementor's editor still
 *  injects the default child Container into the placeholder
 *  selector — we hide it so the user doesn't see an empty
 *  drop-zone alongside the template note.
 *
 *  The CSS rule only applies inside Elementor's editor preview
 *  (`body.elementor-editor-active`) so it never affects the
 *  published page, where render() correctly outputs the template
 *  HTML instead of the child Container.
 * ============================================================ */
/* Editor-only — the `.vx-toolkit-dialog-in-editor` class is added to
 * body by dialog.js when it detects Elementor preview iframe context
 * (via `elementorFrontend.config.isEditMode`). The default
 * `.elementor-editor-active` class is on the OUTER editor app, not
 * the iframe body, so it doesn't help here.
 *
 * On the frontend in template mode, `.e-con` doesn't render at all
 * (render() uses echo $template_html, not print_child), so removing
 * the body scope entirely would also be safe — but keeping it scoped
 * to editor mode is defensive. */
body.vx-toolkit-dialog-in-editor .vx-toolkit-dialog[data-content-source="elementor_template"] > .e-con {
	display: none !important;
}

/* Container that holds either the loading state or — once dialog.js
 * fetches it via AJAX — the actual template HTML. Editor-only;
 * frontend never renders this element. */
.vx-toolkit-dialog__template-preview {
	min-height: 80px;
}

/* Editor-only "template mode" indicator shown in place of the
 * drop zone. Kept visually subtle so it doesn't fight Elementor's
 * own UI. */
.vx-toolkit-dialog__template-note {
	margin: 24px auto;
	padding: 16px 20px;
	max-width: 480px;
	background: rgba(46, 109, 255, 0.06);
	border: 1px dashed rgba(46, 109, 255, 0.35);
	border-radius: 8px;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: #1e293b;
}

.vx-toolkit-dialog__template-note strong {
	display: block;
	font-size: 15px;
	margin-bottom: 6px;
	color: #2e6dff;
}

.vx-toolkit-dialog__template-note code {
	display: inline-block;
	padding: 1px 6px;
	background: rgba(46, 109, 255, 0.12);
	border-radius: 3px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
}

.vx-toolkit-dialog__template-warning {
	color: #b91c1c;
	font-weight: 500;
	margin: 6px 0;
}

.vx-toolkit-dialog__template-hint {
	margin-top: 8px;
	color: #475569;
	font-size: 12px;
}

/* ============================================================
 *  EDITOR MODE
 *
 *  When the user flips `toggle_view` on, the dialog renders with
 *  the native `[open]` attribute. The dialog's base CSS (above)
 *  already centres it via `position: fixed; inset: 0; margin: auto`
 *  — same as on the published page. We disable the entrance
 *  animation to avoid re-flicker on every settings change, and
 *  hide the manual backdrop (no point dimming the canvas while
 *  editing).
 * ============================================================ */
body.vx-toolkit-dialog-in-editor .vx-toolkit-dialog[open] {
	animation: none !important;
	opacity: 1 !important;
}

body.vx-toolkit-dialog-in-editor .vx-toolkit-dialog-backdrop {
	display: none !important;
}

/* The template note is editor-only — on the published page the
 * dialog renders the actual template HTML, no note. */
body:not(.vx-toolkit-dialog-in-editor) .vx-toolkit-dialog__template-note {
	display: none !important;
}

/* ============================================================
 *  DRAG HANDLE — hidden on desktop, visible on mobile.
 *
 *  Always in the DOM (rendered by PHP) but `display: none` above
 *  the mobile breakpoint. On mobile, it's the first child of the
 *  dialog, shown as a small gray pill the user can grab to drag
 *  the bottom sheet closed.
 * ============================================================ */
.vx-toolkit-dialog__drag-handle {
	display: none;
}

/* ============================================================
 *  MOBILE BOTTOM SHEET
 *
 *  On viewports ≤ 767px the dialog transforms from a centered
 *  modal into a bottom sheet that slides up from the viewport
 *  edge. Features:
 *    - Full-width, anchored to bottom
 *    - Rounded top corners, flush bottom
 *    - Drag handle bar for swipe-to-close
 *    - Content scrolls independently inside
 *    - Slide-up entrance / slide-down exit
 *    - Body scroll locked when open
 * ============================================================ */
@media ( max-width: 767px ) {

	/* --- Sheet layout --- */
	.vx-toolkit-dialog {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100% !important;
		max-width: 100% !important;
		max-height: 90dvh;
		margin: 0;
		padding: 0;
		border-radius: 16px 16px 0 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		/* Override desktop animation — open/close handled by JS to
		 * avoid animation-fill-mode vs inline transform conflicts. */
		opacity: 1;
		animation: none;
	}

	/* Kill transitions while user is dragging — raw transform only. */
	.vx-toolkit-dialog.is-dragging {
		transition: none !important;
	}

	/* --- Drag handle --- */
	.vx-toolkit-dialog__drag-handle {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px 0 4px;
		flex-shrink: 0;
		cursor: grab;
		-webkit-user-select: none;
		user-select: none;
		touch-action: none;
	}

	.vx-toolkit-dialog__drag-bar {
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: #d1d5db;
		transition: background-color 0.15s ease;
	}

	.vx-toolkit-dialog__drag-handle:active .vx-toolkit-dialog__drag-bar {
		background: #9ca3af;
	}

	/* --- Close button — repositioned for sheet header --- */
	.vx-toolkit-dialog__close {
		top: 6px;
		right: 10px;
		width: 32px;
		height: 32px;
	}

	/* --- Content area — scrollable, fills remaining space --- */
	.vx-toolkit-dialog > .e-con,
	.vx-toolkit-dialog > .vx-toolkit-dialog__template-preview {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 4px 20px 20px;
	}

	/* --- Body scroll lock when dialog is open --- */
	body.vx-dialog-body-lock {
		overflow: hidden !important;
		position: fixed;
		width: 100%;
	}

	/* --- Editor mode: disable bottom sheet (editor is desktop) --- */
	body.vx-toolkit-dialog-in-editor .vx-toolkit-dialog {
		/* Revert to centered modal in editor */
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: min( 720px, 90vw ) !important;
		max-width: 90vw !important;
		max-height: 90dvh;
		margin: auto;
		padding: 20px;
		border-radius: 0.475rem;
		overflow: auto;
		display: block;
	}

	body.vx-toolkit-dialog-in-editor .vx-toolkit-dialog__drag-handle {
		display: none;
	}
}