.dialog-style-xyz {
	padding: 0;
	margin: auto;
	background-color: #111314;
	border-radius: 0.5rem;
	color: #fff;
	border: none;
	max-width: 95vw;      /* Increased from 32em */
	max-height: 95vh;     /* Added for taller dialog */
	position: relative;
}

.dialog-button {
	padding: 0.5rem;
	border: none;
	outline: none;
	color: white;
	cursor: pointer;
	background: none;
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.dialog-style-xyz > .dialog-inner {
	padding: 0;
	overflow: hidden;
}

.dialog-style-xyz::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

.dialog-style-xyz[open] {
	animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zoom {
	from {
		transform: scale(0.5);
	}
	to {
		transform: scale(1);
	}
}

.dialog-style-xyz[open]::backdrop {
	animation: fade 0.2s ease-out;
}

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.iframe-responsive {
	border: none;
	width: 95vw;    /* Full width for small screens */
	height: 90vh;   /* Use most of the vertical space */

	/* Small devices: min-width 640px */
	@media (min-width: 640px) {
		width: 700px;   /* Wider than before */
		height: 90vh;
	}

	/* Medium devices: min-width 768px */
	@media (min-width: 768px) {
		width: 800px;   /* Max width on desktop */
		height: 90vh;
	}
}