/*
 * Theme demo preview.
 *
 * Its own chrome, deliberately separate from the site layout: a fixed bar and a
 * stage that fills the rest of the viewport. Loaded only on the preview view.
 */

.wh-preview-body {
	overflow: hidden;
	background: var(--secondary);
}

.wh-preview {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
}

/* -------------------------------------------------------------------------
 * Bar
 * ---------------------------------------------------------------------- */

.wh-preview__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	padding: 0.625rem 1rem;
	border-bottom: 1px solid var(--border);
	background: var(--card);
	box-shadow: var(--shadow-card);
	z-index: 2;
}

.wh-preview__group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.wh-preview__group--start {
	flex: 1 1 auto;
}

.wh-preview__group--center {
	flex: 0 0 auto;
	order: 3;
	width: 100%;
	justify-content: center;
}

.wh-preview__group--end {
	flex: 0 1 auto;
	margin-inline-start: auto;
}

/*
 * On the narrowest phones the bar carries too much: back link, title, price,
 * "open in new tab" and the buy button. The demo is already framed on screen,
 * so the external link is the first thing to go — the buy button is not.
 */
.wh-preview__external {
	display: none;
}

@media (min-width: 640px) {
	.wh-preview__external {
		display: inline-flex;
	}
}

@media (max-width: 480px) {
	.wh-preview__bar {
		padding-inline: 0.625rem;
		gap: 0.5rem;
	}

	.wh-preview__title {
		display: none;
	}
}

/* From tablet up the device switcher sits inline in the centre. */
@media (min-width: 900px) {
	.wh-preview__bar {
		flex-wrap: nowrap;
	}

	.wh-preview__group--center {
		order: 0;
		width: auto;
	}
}

.wh-preview__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
	color: var(--muted-foreground);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.wh-preview__back:hover {
	color: var(--foreground);
}

.wh-preview__back .wh-icon {
	width: 1rem;
	height: 1rem;
}

.wh-preview__back-text {
	display: none;
}

@media (min-width: 640px) {
	.wh-preview__back-text {
		display: inline;
	}
}

.wh-preview__title {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.wh-preview__price {
	display: none;
	font-size: 0.875rem;

	/* "NRs. 25,000" is one value; the bar must not break it across two lines. */
	white-space: nowrap;
}

@media (min-width: 640px) {
	.wh-preview__price {
		display: inline-flex;
	}
}

/* Device switcher */
.wh-preview__devices {
	display: inline-flex;
	gap: 0.125rem;
	padding: 0.1875rem;
	border-radius: 9999px;
	background: var(--secondary);
}

.wh-preview__device {
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--muted-foreground);
	padding: 0.3125rem 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.wh-preview__device:hover {
	color: var(--foreground);
}

.wh-preview__device[aria-pressed="true"] {
	background: var(--card);
	color: var(--foreground);
	box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------------------------
 * Stage
 * ---------------------------------------------------------------------- */

.wh-preview__stage {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	justify-content: center;
	padding: 0;
	background: var(--secondary);
	overflow: auto;
}

.wh-preview__frame {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--card);
	transition:
		width 0.3s ease,
		max-width 0.3s ease;
}

/* Constrained widths get a device-like frame with breathing room. */
.wh-preview__frame[data-width] {
	margin-block: 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-lift);
	overflow: hidden;
	height: calc(100% - 3rem);
}

.wh-preview__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Screenshot mode scrolls like a page. */
.wh-preview__frame--shots {
	overflow-y: auto;
	height: auto;
	min-height: 100%;
}

.wh-preview__shots {
	display: grid;
	gap: 1.5rem;
	padding: 1.5rem;
	/* Screenshots are page renders; stretching them across a 4K monitor makes
	   them unreadable rather than impressive. */
	max-width: 1280px;
	margin-inline: auto;
}

.wh-preview__shot img {
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
}

.wh-preview__note {
	padding: 0 1.5rem 2rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--muted-foreground);
}

/* Fallback panel */
.wh-preview__blocked {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem;
	text-align: center;
	background: var(--card);
	color: var(--muted-foreground);
	font-size: 0.9375rem;
}

.wh-preview__blocked[hidden] {
	display: none;
}

.wh-preview__blocked-title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--foreground);
}

/* The stage version (no iframe) is not absolutely positioned. */
.wh-preview__stage > .wh-preview__blocked {
	position: static;
	margin: auto;
	border-radius: var(--radius-2xl);
	max-width: 32rem;
}