/*
 * AI receptionist demo. Enqueued on the /demo/ page and on Tech for Trades
 * (which carries only the teaser) — see functions.php.
 * Markup: parts/tech-demo.html (the demo page section), parts/tech-demo-scripts.html
 * (the out-of-credit message and the scripts), parts/tech-demo-teaser.html.
 */

/* The teaser on Tech for Trades sits between two graphite bands and must butt
 * against both. Same 30px block-gap problem as the video band in theme.css. */
.ch-demo-band,
.ch-demo-band + * {
	margin-block-start: 0;
}

.ch-demo__card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 8px);
}

/* --- How to try it ------------------------------------------------------ */
.ch-demo__how {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
}

@media (min-width: 760px) {
	.ch-demo__how {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.ch-demo__how > div > :first-child {
	margin-top: 0;
}

.ch-demo__title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--large);
}

.ch-demo__ways {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.ch-demo__ways li {
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}

.ch-demo__pointer {
	margin: 1rem 0 0;
	font-weight: 700;
	color: var(--wp--preset--color--accent-dark);
}

.ch-demo__steps {
	margin: 0;
	padding-left: 1.2rem;
}

.ch-demo__steps li {
	margin: 0.4rem 0;
}

.ch-demo__small {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Chat text size: A / A+ / A++ */
.ch-demo__textsize {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.ch-demo__textsize button {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button, 6px);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
}

.ch-demo__textsize button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* --- Before and after "Start the demo" ------------------------------------ */
/* Nothing loads from Retell or Google until the button is pressed; the script
 * then adds .is-started to the section. */
.ch-demo__before-start {
	margin-top: 1.25rem;
}

.ch-demo__start {
	cursor: pointer;
}

.ch-demo__after-start,
.ch-demo.is-started .ch-demo__before-start,
.ch-demo.is-started .ch-demo__diary-wait,
.ch-demo:not(.is-started) .ch-demo__refresh,
.ch-demo:not(.is-started) .ch-demo__cal iframe,
.ch-demo:not(.is-started) .ch-demo__cal-note {
	display: none;
}

.ch-demo.is-started .ch-demo__after-start {
	display: block;
}

.ch-demo__diary-wait {
	margin: 0;
	padding: 3rem 1.25rem;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* --- The demo diary ------------------------------------------------------ */
.ch-demo__cal {
	display: flex;
	flex-direction: column;
	margin-top: var(--wp--preset--spacing--30);
	overflow: hidden;
}

.ch-demo__cal-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.8rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-weight: 700;
}

.ch-demo__refresh {
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent-dark);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.ch-demo__refresh:hover {
	border-color: var(--wp--preset--color--accent);
}

.ch-demo__cal iframe {
	display: block;
	width: 100%;
	height: 720px;
	border: 0;
}

.ch-demo__cal-note {
	margin: 0;
	padding: 0.6rem 1.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* --- reCAPTCHA ------------------------------------------------------------ */
/* Google allows hiding its badge (it covers the widget's button) only if this
 * notice is shown as text on the page. Don't remove one without the other. */
.grecaptcha-badge {
	visibility: hidden;
}

.ch-demo__recaptcha {
	margin: var(--wp--preset--spacing--30) 0 0;
	text-align: center;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.ch-demo__recaptcha a {
	color: inherit;
}

/* --- "Well, this is embarrassing…" ---------------------------------------- */
/* Shown when the demo can't start, usually because the Retell credit ran out.
 * Sits above the Retell widget, which uses a very high z-index of its own. */
/* The column is capped explicitly: with an auto column, the card sizes to its
 * longest line of text and runs off the sides of a phone screen. */
.ch-oops {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: grid;
	grid-template-columns: minmax(0, 460px);
	justify-content: center;
	align-content: center;
	padding: 1.25rem;
	background-color: rgba(35, 40, 35, 0.55);
}

.ch-oops[hidden] {
	display: none;
}

.ch-oops__card {
	box-sizing: border-box;
	width: 100%;
	max-width: 460px;
	padding: 1.75rem;
	border-radius: 16px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.ch-oops__card h2 {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--large);
}

.ch-oops__card p {
	margin: 0 0 1rem;
}

.ch-oops__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.ch-oops__secondary {
	display: inline-block;
	padding: 0.75em 1.5em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button, 6px);
	color: var(--wp--preset--color--accent-dark);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.ch-oops__close {
	margin-top: 1rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	cursor: pointer;
}