.staylit-live-demo {
	width: 100%;
	max-width: 100%;
}

/* /live-demo/: header + full-bleed app, no page scroll */
html:has(body.staylit-live-demo-route),
body.staylit-live-demo-route {
	height: 100% !important;
	max-height: 100dvh !important;
	overflow: hidden !important;
	overscroll-behavior: none;
}

body.staylit-live-demo-route #footer-outer,
body.staylit-live-demo-route #copyright,
body.staylit-live-demo-route .nectar-global-section[data-section="global_footer"],
body.staylit-live-demo-route .nectar-box-roll,
body.staylit-live-demo-route #slide-out-widget-area-bg {
	display: none !important;
}

/* Only strip content chrome — never #header-outer .row/.col (that shoves nav left). */
body.staylit-live-demo-route .container-wrap,
body.staylit-live-demo-route #ajax-content-wrap,
body.staylit-live-demo-route .main-content {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
}

body.staylit-live-demo-route .container-wrap .row,
body.staylit-live-demo-route .container-wrap .col,
body.staylit-live-demo-route #ajax-content-wrap .row,
body.staylit-live-demo-route #ajax-content-wrap .col,
body.staylit-live-demo-route .main-content .row,
body.staylit-live-demo-route .main-content .col {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
}

body.staylit-live-demo-route #page-header-bg,
body.staylit-live-demo-route .page-header-no-bg {
	display: none !important;
}

.staylit-live-demo-page {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: 0;
	top: 90px; /* fallback; JS sets exact header bottom */
	width: 100%;
	max-width: 600px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: #000;
	z-index: 5;
	box-sizing: border-box;
	transform: translateX(-50%);
}

.staylit-live-demo-page .staylit-live-demo-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	background: #000;
}

/* On larger screens, present the real app inside a phone instead of as a
 * floating tablet-sized rectangle. Actual phones remain edge-to-edge below. */
@media (min-width: 481px) {
	.staylit-live-demo-page {
		width: min(430px, calc(100vw - 40px));
		max-width: 430px;
		padding: 12px;
		border: 1px solid #4a4a4a;
		border-radius: 44px;
		background: #111;
		box-shadow: 0 0 0 1px #080808, 0 24px 64px rgba(0, 0, 0, 0.45);
	}

	.staylit-live-demo-page::before {
		position: absolute;
		z-index: 3;
		top: 7px;
		left: 50%;
		width: 74px;
		height: 5px;
		border-radius: 999px;
		background: #333;
		content: "";
		transform: translateX(-50%);
	}

	.staylit-live-demo-page .staylit-live-demo-frame {
		border-radius: 32px;
	}
}

/* Shortcode embed (pages that use [staylit_live_demo]) */
.staylit-live-demo-frame-wrap {
	width: 100%;
	max-width: 100%;
	min-height: 480px;
	border: 0;
	overflow: hidden;
	background: #000;
}

.staylit-live-demo-frame-wrap.is-phone {
	width: 390px;
	max-width: calc(100vw - 2rem);
	height: min(780px, calc(100vh - 200px));
	min-height: 560px;
	margin: 0 auto;
	border-radius: 36px;
	border: 10px solid #1a1a1a;
	box-shadow:
		0 0 0 1px #333,
		0 24px 64px rgba(0, 0, 0, 0.45);
}

.staylit-live-demo-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.staylit-live-demo-link {
	margin: 0 0 1rem;
	text-align: center;
}

.staylit-live-demo-button {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	background: #111;
	color: #fff !important;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
}

.staylit-live-demo-button:hover,
.staylit-live-demo-button:focus {
	background: #333;
	color: #fff !important;
}

.staylit-live-demo-missing {
	padding: 1rem 1.25rem;
	border: 1px solid #dba617;
	background: #fcf9e8;
	color: #1a1a1a;
	border-radius: 6px;
	max-width: 32rem;
	text-align: center;
	margin: 2rem auto;
}

@media (max-width: 480px) {
	.staylit-live-demo-page {
		left: 0;
		width: 100%;
		max-width: 100%;
		transform: none;
	}

	.staylit-live-demo-frame-wrap.is-phone {
		width: 100%;
		max-width: 100%;
		height: calc(100vh - 140px);
		min-height: 480px;
		border-radius: 24px;
		border-width: 6px;
	}
}