/* Root variables and theme isolation. */
.psc-fct {
	--psc-fct-tab-bg: #ffcc33;
	--psc-fct-tab-text: #000;
	--psc-fct-panel-bg: #fff;
	--psc-fct-panel-text: #111;
	--psc-fct-font-size: 18px;
	--psc-fct-panel-width: 440px;
	--psc-fct-transition: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
	font-family: inherit;
}

.psc-fct,
.psc-fct *,
.psc-fct *::before,
.psc-fct *::after {
	box-sizing: border-box;
}

.psc-fct [hidden] {
	display: none !important;
}

/* Floating tab button. */
.psc-fct__trigger {
	appearance: none;
	background: var(--psc-fct-tab-bg) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
	color: var(--psc-fct-tab-text) !important;
	cursor: pointer;
	font: inherit !important;
	font-size: var(--psc-fct-font-size) !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	line-height: 1.15 !important;
	margin: 0 !important;
	min-height: 48px;
	padding: 18px 14px !important;
	position: fixed;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	z-index: 2147483000;
}

.psc-fct__trigger:hover {
	filter: brightness(0.94);
}

.psc-fct__trigger:focus-visible {
	outline: 4px solid #fff !important;
	outline-offset: -6px;
	box-shadow: 0 0 0 3px #111, 0 4px 18px rgba(0, 0, 0, 0.22) !important;
}

/* Right- and left-side tabs read vertically as one phrase. */
.psc-fct--right .psc-fct__trigger,
.psc-fct--left .psc-fct__trigger {
	top: 50%;
	writing-mode: vertical-rl;
}

.psc-fct--right .psc-fct__trigger {
	right: 0;
	transform: translateY(-50%);
}

.psc-fct--left .psc-fct__trigger {
	left: 0;
	transform: translateY(-50%) rotate(180deg);
}

/* Bottom placement remains horizontal and centered. */
.psc-fct--bottom .psc-fct__trigger {
	border-radius: 8px 8px 0 0 !important;
	bottom: 0;
	left: 50%;
	padding: 14px 22px !important;
	transform: translateX(-50%);
}

/* Shared dimmed backdrop. */
.psc-fct__overlay {
	background: rgba(0, 0, 0, 0.68);
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity var(--psc-fct-transition);
	z-index: 2147483001;
}

.psc-fct__overlay.is-open {
	opacity: 1;
}

/* Shared panel structure. */
.psc-fct__panel {
	background: var(--psc-fct-panel-bg) !important;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
	margin: 0 !important;
	overflow-y: auto;
	position: fixed;
	transition: opacity var(--psc-fct-transition), transform var(--psc-fct-transition);
	z-index: 2147483002;
}

/* Theme styling is the default; custom mode only changes the panel text color. */
.psc-fct--custom-content .psc-fct__panel {
	color: var(--psc-fct-panel-text) !important;
}

.psc-fct__close {
	align-items: center;
	appearance: none;
	background: transparent !important;
	border: 0 !important;
	border-radius: 4px !important;
	color: inherit !important;
	cursor: pointer;
	display: flex;
	font: inherit !important;
	font-size: 36px !important;
	font-weight: 400 !important;
	height: 48px;
	justify-content: center;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	position: absolute;
	right: 12px;
	top: 10px;
	width: 48px;
	z-index: 2;
}

.psc-fct__close:hover {
	background: rgba(127, 127, 127, 0.14) !important;
}

.psc-fct__close:focus-visible {
	outline: 3px solid currentColor !important;
	outline-offset: 1px;
}

.psc-fct__content {
	margin: 0 auto;
	max-width: 100%;
	padding: 72px 34px 42px;
}

/* The heading intentionally keeps the active theme's typography and color. */
.psc-fct__heading {
	max-width: calc(100% - 58px);
}

.psc-fct__content > :first-child {
	margin-top: 0 !important;
}

.psc-fct__content > :last-child {
	margin-bottom: 0 !important;
}

.psc-fct__content img,
.psc-fct__content video {
	height: auto;
	max-width: 100%;
}

.psc-fct__content iframe {
	border: 0;
	max-width: 100%;
	width: 100%;
}

.psc-fct__content iframe[src*="youtube.com"],
.psc-fct__content iframe[src*="youtube-nocookie.com"],
.psc-fct__content iframe[src*="vimeo.com"] {
	aspect-ratio: 16 / 9;
	height: auto;
}

.psc-fct__content .wp-video,
.psc-fct__content .wp-video-shortcode {
	max-width: 100%;
}

/* Restore editor-created list markers when a theme resets list styles. */
.psc-fct__content > ul,
.psc-fct__content li > ul {
	list-style-position: outside !important;
	list-style-type: disc !important;
	margin-left: 0 !important;
	padding-left: 1.45em !important;
}

.psc-fct__content > ol,
.psc-fct__content li > ol {
	list-style-position: outside !important;
	list-style-type: decimal !important;
	margin-left: 0 !important;
	padding-left: 1.45em !important;
}

.psc-fct__content li > ul {
	list-style-type: circle !important;
}

.psc-fct__content li > ul li > ul {
	list-style-type: square !important;
}

.psc-fct__content li > ol {
	list-style-type: lower-alpha !important;
}

.psc-fct__content li > ol li > ol {
	list-style-type: lower-roman !important;
}

.psc-fct__content > ul > li,
.psc-fct__content > ol > li,
.psc-fct__content li > ul > li,
.psc-fct__content li > ol > li {
	display: list-item !important;
}

.psc-fct__content a:focus-visible {
	outline: 3px solid currentColor !important;
	outline-offset: 3px;
}

.psc-fct__screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Slideout panels follow the selected tab edge. */
.psc-fct--slideout.psc-fct--right .psc-fct__panel,
.psc-fct--slideout.psc-fct--left .psc-fct__panel {
	height: 100dvh;
	top: 0;
	width: min(var(--psc-fct-panel-width), 100vw);
}

.psc-fct--slideout.psc-fct--right .psc-fct__panel {
	right: 0;
	transform: translateX(104%);
}

.psc-fct--slideout.psc-fct--left .psc-fct__panel {
	left: 0;
	transform: translateX(-104%);
}

.psc-fct--slideout.psc-fct--right .psc-fct__panel.is-open,
.psc-fct--slideout.psc-fct--left .psc-fct__panel.is-open {
	transform: translateX(0);
}

.psc-fct--slideout.psc-fct--bottom .psc-fct__panel {
	bottom: 0;
	left: 0;
	max-height: min(82dvh, 800px);
	transform: translateY(104%);
	width: 100%;
}

.psc-fct--slideout.psc-fct--bottom .psc-fct__panel.is-open {
	transform: translateY(0);
}

.psc-fct--slideout.psc-fct--bottom .psc-fct__content {
	max-width: var(--psc-fct-panel-width);
}

/* Centered modal behavior. */
.psc-fct--modal .psc-fct__panel {
	border-radius: 10px;
	left: 50%;
	max-height: 86dvh;
	opacity: 0;
	top: 50%;
	transform: translate(-50%, -46%) scale(0.98);
	width: min(var(--psc-fct-panel-width), calc(100vw - 32px));
}

.psc-fct--modal .psc-fct__panel.is-open {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Prevent the page behind the open dialog from scrolling. */
body.psc-fct-is-open {
	overflow: hidden !important;
}

/* Accommodate the WordPress admin bar for signed-in users. */
body.admin-bar .psc-fct--slideout.psc-fct--right .psc-fct__panel,
body.admin-bar .psc-fct--slideout.psc-fct--left .psc-fct__panel {
	height: calc(100dvh - 32px);
	top: 32px;
}

/* Mobile sizing keeps controls comfortable and content readable. */
@media (max-width: 782px) {
	body.admin-bar .psc-fct--slideout.psc-fct--right .psc-fct__panel,
	body.admin-bar .psc-fct--slideout.psc-fct--left .psc-fct__panel {
		height: calc(100dvh - 46px);
		top: 46px;
	}
}

@media (max-width: 600px) {
	.psc-fct__content {
		padding: 68px 22px 34px;
	}

	.psc-fct--slideout.psc-fct--right .psc-fct__panel,
	.psc-fct--slideout.psc-fct--left .psc-fct__panel {
		width: min(var(--psc-fct-panel-width), 94vw);
	}

	.psc-fct__trigger {
		padding: 15px 12px !important;
	}
}

/* Respect visitors who request less motion. */
@media (prefers-reduced-motion: reduce) {
	.psc-fct__overlay,
	.psc-fct__panel {
		transition-duration: 1ms;
	}
}
