/*
 * Quiz Timer styles.
 * Everything is driven by CSS variables so it can match any site. Set these on the form wrapper
 * (or let Forms > Settings > Quiz Timer do it):
 *   --gfpt-accent  --gfpt-warn  --gfpt-bg  --gfpt-text  --gfpt-border  --gfpt-radius
 *   --gfpt-btn-bg  --gfpt-btn-text  --gfpt-btn-radius
 * Unset = follows your theme (falls back to the Gravity Forms theme color).
 * Base rules use single-class selectors (beats generic theme resets like "div{border:0}") while any site CSS
 * written for these classes still wins (later or more specific). Forms > Settings > Quiz Timer > "Plugin styles win" reverses that.
 */
.gfpt-timer {
	--_accent: var(--gfpt-accent, var(--gf-color-primary, var(--wp--preset--color--primary, #1d6fb8)));
	--_warn: var(--gfpt-warn, #b3261e);
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 2px solid var(--gfpt-border, rgba(127, 127, 127, .35));
	border-radius: var(--gfpt-radius, 12px);
	background: var(--gfpt-bg, transparent);
	color: var(--gfpt-text, inherit);
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}
.gfpt-timer__icon {
	flex: none;
	width: 1.5em;
	height: 1.5em;
	color: var(--_accent);
}
.gfpt-timer__label { font-weight: 700; white-space: nowrap; }
.gfpt-timer__time {
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1;
	min-width: 3.2ch;
	text-align: right;
}
.gfpt-timer__track {
	flex: 1 1 auto;
	height: 12px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .25);
	overflow: hidden;
}
.gfpt-timer__fill {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 999px;
	background: var(--_accent);
	transition: width .25s linear, background-color .3s;
}
.gfpt-timer--text { display: inline-flex; padding: 8px 14px; }
.gfpt-timer--text .gfpt-timer__time { min-width: 0; font-size: 1.25em; }
.gfpt-timer.is-warning, .gfpt-timer.is-expired { border-color: var(--_warn); }
.gfpt-timer.is-warning .gfpt-timer__fill { background: var(--_warn); }
.gfpt-timer.is-warning .gfpt-timer__icon, .gfpt-timer.is-warning .gfpt-timer__time, .gfpt-timer.is-expired .gfpt-timer__icon, .gfpt-timer.is-expired .gfpt-timer__time { color: var(--_warn); }
.gfpt-timer.is-expired .gfpt-timer__fill { width: 0 !important; }
.gfpt-timer.is-expired .gfpt-timer__time { font-size: 1.1em; }
:where(.gfpt-hide-prev .gform_previous_button, .gfpt-hide-prev .gform_page_footer .gform_previous_button) { display: none !important; }
.gfpt-sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 480px) {
	.gfpt-timer { flex-wrap: wrap; gap: 8px 12px; }
	.gfpt-timer__track { flex-basis: 100%; order: 3; }
	.gfpt-timer__time { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.gfpt-timer__fill { transition: none; }
}

/* Intro screen */
.gfpt-intro-on .gform_body, .gfpt-intro-on .gform_footer, .gfpt-intro-on .gform_page_footer { display: none !important; }
.gfpt-intro {
	margin: 0 0 20px;
	padding: 24px 28px;
	border: 2px solid var(--gfpt-border, rgba(127, 127, 127, .35));
	border-radius: var(--gfpt-radius, 12px);
	background: var(--gfpt-bg, transparent);
	color: var(--gfpt-text, inherit);
	box-sizing: border-box;
}
.gfpt-intro__title { margin: 0 0 .5em; }
.gfpt-intro__text > :first-child { margin-top: 0; }
.gfpt-intro__text > :last-child { margin-bottom: 0; }
.gfpt-intro__meta { margin: 1em 0 0; font-weight: 700; }
.gfpt-intro__actions { margin-top: 1.25em; }
.gfpt-intro__start {
	appearance: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2;
	padding: .75em 1.7em;
	border: 0;
	border-radius: var(--gfpt-btn-radius, var(--gfpt-radius, 999px));
	background: var(--gfpt-btn-bg, var(--_accent, var(--gfpt-accent, var(--gf-color-primary, var(--wp--preset--color--primary, #1d6fb8)))));
	color: var(--gfpt-btn-text, #fff);
}
.gfpt-intro__start:hover { filter: brightness(.9); }
.gfpt-intro__start:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }