/* Route-scoped replacement styles for the DB/plugin-backed Widget Demo page. */
.redux-protected-embed--widget-demo .widget-demo-page {
	color: var(--text-default) !important;
	font-family: var(--font-sans) !important;
}

.redux-protected-embed--widget-demo .wdemo-code-section,
.redux-protected-embed--widget-demo .wdemo-content {
	background: transparent !important;
	overflow: visible !important;
	padding: 0 !important;
	position: static !important;
}

.redux-protected-embed--widget-demo .wdemo-code-card,
.redux-protected-embed--widget-demo .wdemo-widget-card,
.redux-protected-embed--widget-demo .wdemo-instructions {
	background: #fff !important;
	border: 1px solid var(--rdx-ink-100) !important;
	border-radius: var(--r-md) !important;
	box-shadow: 0 18px 48px rgba(37, 40, 42, .1) !important;
	color: var(--text-default) !important;
	overflow: hidden !important;
	padding: clamp(24px, 3vw, 36px) !important;
}

.redux-protected-embed--widget-demo .wdemo-code-card {
	display: grid !important;
	gap: 14px !important;
	margin: 0 auto clamp(28px, 4vw, 44px) !important;
	max-width: 1120px !important;
}

.redux-protected-embed--widget-demo .wdemo-code-card h3,
.redux-protected-embed--widget-demo .wdemo-widget-card h2,
.redux-protected-embed--widget-demo .wdemo-instructions h2 {
	color: var(--text-strong) !important;
	font-family: var(--route-section-title-font) !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	line-height: 1.12 !important;
	margin: 0 !important;
	text-transform: none !important;
}

.redux-protected-embed--widget-demo .wdemo-code-card h3 {
	font-size: clamp(22px, 2vw, 30px) !important;
}

.redux-protected-embed--widget-demo .wdemo-widget-card h2,
.redux-protected-embed--widget-demo .wdemo-instructions h2 {
	font-size: clamp(24px, 2.6vw, 36px) !important;
}

.redux-protected-embed--widget-demo .wdemo-container {
	display: grid !important;
	gap: clamp(28px, 4vw, 44px) !important;
	max-width: 1120px !important;
	width: 100% !important;
}

.redux-protected-embed--widget-demo .wdemo-widget-card {
	display: grid !important;
	gap: 18px !important;
}

.redux-protected-embed--widget-demo .wdemo-description,
.redux-protected-embed--widget-demo .wdemo-step-content p,
.redux-protected-embed--widget-demo .wdemo-clinic-name {
	color: var(--text-default) !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
	margin: 0 !important;
}

.redux-protected-embed--widget-demo .wdemo-best-for {
	align-items: start !important;
	background: var(--rdx-sky-50) !important;
	border: 1px solid var(--rdx-blue-100) !important;
	border-radius: var(--r-md) !important;
	color: var(--text-default) !important;
	display: grid !important;
	gap: 4px !important;
	grid-template-columns: auto minmax(0, 1fr) !important;
	margin: 0 !important;
	padding: 14px 16px !important;
}

.redux-protected-embed--widget-demo .wdemo-best-for strong {
	color: var(--text-strong) !important;
	font-weight: 800 !important;
}

.redux-protected-embed--widget-demo .wdemo-discount-code {
	align-items: center !important;
	background: var(--rdx-sky-50) !important;
	border: 1px solid var(--rdx-blue-100) !important;
	border-radius: var(--r-md) !important;
	display: grid !important;
	gap: 12px !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	margin: 0 !important;
	max-width: 560px !important;
	padding: 12px !important;
	width: 100% !important;
}

.redux-protected-embed--widget-demo #wdemo-code-display {
	background: #fff !important;
	border: 1px solid var(--rdx-ink-100) !important;
	border-radius: 6px !important;
	color: var(--text-strong) !important;
	display: block !important;
	font-family: var(--font-mono) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	min-width: 0 !important;
	overflow-wrap: anywhere !important;
	padding: 11px 12px !important;
}

.redux-protected-embed--widget-demo .wdemo-copy-btn,
.redux-protected-embed--widget-demo .wdemo-code-copy {
	align-self: start !important;
	box-shadow: none !important;
	font-size: 11px !important;
	height: 38px !important;
	letter-spacing: .06em !important;
	line-height: 1 !important;
	margin: 0 !important;
	min-height: 38px !important;
	min-width: 78px !important;
	padding: 0 16px !important;
	position: static !important;
	white-space: nowrap !important;
	width: auto !important;
	z-index: 1 !important;
}

.redux-protected-embed--widget-demo .wdemo-preview {
	align-items: center !important;
	background: linear-gradient(180deg, #fff 0%, var(--rdx-sky-50) 100%) !important;
	border: 1px solid var(--rdx-ink-100) !important;
	border-radius: var(--r-md) !important;
	display: flex !important;
	justify-content: center !important;
	justify-self: center !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-height: 176px !important;
	overflow: hidden !important;
	padding: clamp(18px, 3vw, 28px) !important;
	width: fit-content !important;
}

.redux-protected-embed--widget-demo .wdemo-widget-card:first-of-type .wdemo-preview {
	align-items: flex-start !important;
	justify-content: center !important;
	min-height: 0 !important;
}

.redux-protected-embed--widget-demo .wdemo-preview .redux-widget {
	box-shadow: none !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: auto !important;
}

.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-card {
	max-width: 360px !important;
	width: min(360px, 100%) !important;
}

.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-compact {
	max-width: 560px !important;
	width: min(560px, 100%) !important;
}

.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button {
	max-width: 420px !important;
	width: min(420px, 100%) !important;
}

.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button,
.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button:hover,
.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button:focus,
.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button-compact,
.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button-compact:hover,
.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button-compact:focus,
.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button-large,
.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button-large:hover,
.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button-large:focus,
.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-button-price {
	color: #fff !important;
}

.redux-protected-embed--widget-demo .wdemo-preview .redux-widget-price-original-btn {
	color: rgba(255, 255, 255, .68) !important;
}

.redux-protected-embed--widget-demo .wdemo-code-block {
	align-items: start !important;
	background: var(--rdx-ink-900) !important;
	border: 1px solid rgba(255, 255, 255, .08) !important;
	border-radius: var(--r-md) !important;
	box-shadow: none !important;
	color: #fff !important;
	display: grid !important;
	gap: 12px !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	margin: 0 !important;
	overflow: hidden !important;
	padding: 14px !important;
	position: static !important;
	width: 100% !important;
}

.redux-protected-embed--widget-demo .wdemo-code-block code {
	background: transparent !important;
	color: var(--rdx-blue-50) !important;
	display: block !important;
	font-family: var(--font-mono) !important;
	font-size: 13px !important;
	grid-column: 1 !important;
	line-height: 1.55 !important;
	margin: 0 !important;
	min-height: 48px !important;
	min-width: 0 !important;
	overflow: visible !important;
	overflow-wrap: anywhere !important;
	padding: 2px 0 !important;
	white-space: pre-wrap !important;
}

.redux-protected-embed--widget-demo .wdemo-code-block .wdemo-code-copy {
	background: var(--rdx-blue-500) !important;
	border-color: var(--rdx-blue-500) !important;
	color: #fff !important;
	grid-column: 2 !important;
	grid-row: 1 !important;
}

.redux-protected-embed--widget-demo .wdemo-instructions {
	display: grid !important;
	gap: 18px !important;
}

.redux-protected-embed--widget-demo .wdemo-step {
	align-items: start !important;
	background: var(--rdx-ink-25) !important;
	border: 1px solid var(--rdx-ink-100) !important;
	border-radius: var(--r-md) !important;
	display: grid !important;
	gap: 16px !important;
	grid-template-columns: 44px minmax(0, 1fr) !important;
	margin: 0 !important;
	padding: 18px !important;
}

.redux-protected-embed--widget-demo .wdemo-step-num {
	align-items: center !important;
	background: var(--rdx-blue-500) !important;
	border-radius: 50% !important;
	box-shadow: var(--sh-glow-blue) !important;
	color: #fff !important;
	display: inline-flex !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	height: 38px !important;
	justify-content: center !important;
	line-height: 1 !important;
	width: 38px !important;
}

.redux-protected-embed--widget-demo .wdemo-step-content {
	display: grid !important;
	gap: 10px !important;
	min-width: 0 !important;
}

.redux-protected-embed--widget-demo .wdemo-step-content h4 {
	color: var(--text-strong) !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	margin: 0 !important;
}

.redux-protected-embed--widget-demo .wdemo-step-content .wdemo-code-block {
	margin-top: 2px !important;
}

.redux-protected-embed--widget-demo .wdemo-footer {
	background: transparent !important;
	color: var(--text-default) !important;
	margin: 0 !important;
	padding: 0 0 6px !important;
	text-align: center !important;
}

.redux-protected-embed--widget-demo .wdemo-footer p {
	margin: 0 !important;
}

@media (max-width: 760px) {
	body.redux-route-hcp-widget-demo #rdxManageBtn.rdx-manage {
		bottom: 8px !important;
		font-size: 10px !important;
		left: 8px !important;
		line-height: 1 !important;
		min-height: 0 !important;
		opacity: .72 !important;
		padding: 4px 7px !important;
		right: auto !important;
	}

	.redux-protected-embed--widget-demo .wdemo-code-card,
	.redux-protected-embed--widget-demo .wdemo-widget-card,
	.redux-protected-embed--widget-demo .wdemo-instructions {
		padding: 20px !important;
	}

	.redux-protected-embed--widget-demo .wdemo-discount-code,
	.redux-protected-embed--widget-demo .wdemo-best-for,
	.redux-protected-embed--widget-demo .wdemo-code-block,
	.redux-protected-embed--widget-demo .wdemo-step {
		grid-template-columns: 1fr !important;
	}

	.redux-protected-embed--widget-demo .wdemo-code-block .wdemo-code-copy {
		grid-column: 1 !important;
		grid-row: 2 !important;
		justify-self: start !important;
	}

	.redux-protected-embed--widget-demo .wdemo-widget-card:first-of-type .wdemo-preview {
		justify-content: center !important;
		justify-self: center !important;
		min-height: 0 !important;
		width: 100% !important;
	}
}