/* Modal Block — layout + CSS vars (visuals via theme / dtk-blocks.css) */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.wp-block-design-toolkit-modal.ttm-modal,
.ttm-modal {
	--dtk-modal-panel-bg: var(--wp--preset--color--base, #fff);
	--dtk-modal-panel-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	--dtk-modal-close-bg: var(--wp--preset--color--base, #fff);
	--dtk-modal-close-color: var(--wp--preset--color--contrast, #1e1e1e);
	--dtk-modal-overlay-backdrop: blur(8px);

	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 9999;
}

.ttm-modal[hidden],
.wp-block-design-toolkit-modal.ttm-modal[hidden] {
	display: none !important;
}

.ttm-modal::before,
.wp-block-design-toolkit-modal.ttm-modal::before {
	content: '';
	position: absolute;
	inset: 0;
	backdrop-filter: var(--dtk-modal-overlay-backdrop);
	z-index: -1;
}

.ttm-modal__panel {
	position: relative;
	z-index: 1;
	width: min(900px, 100%);
	max-height: 100vh;
	overflow: auto;
	background: var(--dtk-modal-panel-bg);
	border-radius: 16px;
	box-shadow: var(--dtk-modal-panel-shadow);
	color: inherit;
}

.ttm-modal__close,
.modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--dtk-modal-close-bg);
	color: var(--dtk-modal-close-color);
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	z-index: 2;
	border-radius: 10px;
}

body.has-modal-open {
	overflow: hidden;
}

.wp-block-design-toolkit-modal:not(.ttm-modal)[hidden] {
	display: none !important;
}

body:not(.block-editor-page) .wp-block-design-toolkit-modal:not([data-initialized]):not(.ttm-modal) {
	display: none;
}