/**
 * PollFlow web-poll widget — front-end styles.
 *
 * High-specificity rules with strategic !important on typography to defend
 * against host themes that style global tags (h1/h2/h3, p, button, label,
 * input) at giant sizes or with heavy resets. All rules are scoped to
 * .pf-web-poll so they cannot leak out into the host theme.
 */

/* ============ Reset within widget ============ */

.pf-web-poll,
.pf-web-poll *,
.pf-web-poll *::before,
.pf-web-poll *::after {
	box-sizing: border-box;
}

.pf-web-poll {
	--pf-bg: #ffffff;
	--pf-fg: #0f172a;
	--pf-muted: #64748b;
	--pf-border: #e2e8f0;
	--pf-primary: #4f46e5;
	--pf-primary-hover: #4338ca;
	--pf-primary-fg: #ffffff;
	--pf-soft: #f8fafc;
	--pf-success: #16a34a;
	--pf-danger: #dc2626;
	--pf-radius: 14px;
	--pf-shadow: 0 6px 24px rgba(15,23,42,0.08);

	display: block !important;
	max-width: 640px !important;
	width: 100% !important;
	margin: 24px auto !important;
	background: var(--pf-bg) !important;
	border: 1px solid var(--pf-border) !important;
	border-radius: var(--pf-radius) !important;
	padding: 24px 24px 20px !important;
	box-shadow: var(--pf-shadow) !important;
	color: var(--pf-fg) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	hyphens: auto;
	/* No overflow: hidden — we want long content to wrap, not be clipped. */
}

/* Reset every element the widget owns so theme h2/h3/p/button/label rules
 * cannot bleed in. The selector .pf-web-poll * is intentional + safe
 * because the entire widget is sandboxed. */
.pf-web-poll h1,
.pf-web-poll h2,
.pf-web-poll h3,
.pf-web-poll h4,
.pf-web-poll p,
.pf-web-poll label,
.pf-web-poll span,
.pf-web-poll div,
.pf-web-poll button,
.pf-web-poll input,
.pf-web-poll textarea,
.pf-web-poll select {
	font-family: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: inherit;
	background: transparent;
}

/* CRITICAL — text wrapping defense. Some themes force `white-space: nowrap`
 * on <p>, set min-width on flex children that prevents shrinking, or wrap
 * the widget in a flex/grid container. We force-wrap on every text element
 * with all four cross-browser break properties + max-width + min-width:0
 * so the widget can never push its text beyond its visible bounds. */
.pf-web-poll,
.pf-web-poll *,
.pf-web-poll *::before,
.pf-web-poll *::after {
	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
	word-break: normal !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.pf-web-poll h1,
.pf-web-poll h2,
.pf-web-poll h3,
.pf-web-poll h4,
.pf-web-poll p {
	margin: 0 !important;
	padding: 0 !important;
	font-weight: normal !important;
	line-height: 1.4 !important;
	font-size: inherit;
	text-align: left !important;
	background: transparent !important;
	border: none !important;
	text-decoration: none !important;
	display: block !important;
	float: none !important;
	clear: none !important;
	position: static !important;
}
.pf-web-poll p { margin-bottom: 14px !important; }

/* ============ Errors / loading ============ */

.pf-web-poll-error {
	color: var(--pf-danger);
	font-size: 14px;
	padding: 16px;
	border: 1px solid #fecaca;
	border-radius: 12px;
	background: #fef2f2;
	max-width: 640px;
	margin: 24px auto;
}
.pf-web-poll .pf-web-poll-loading {
	color: var(--pf-muted) !important;
	padding: 24px 0 !important;
	text-align: center !important;
	font-size: 15px !important;
}

/* ============ Header ============ */

.pf-web-poll .pf-web-poll-header { margin: 0 0 18px !important; padding: 0 !important; }
.pf-web-poll .pf-web-poll-title {
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin: 0 0 4px !important;
	color: var(--pf-fg) !important;
	letter-spacing: -0.01em !important;
	overflow-wrap: break-word !important;
}
.pf-web-poll .pf-web-poll-sub {
	color: var(--pf-muted) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	font-weight: 400 !important;
}

/* ============ Progress bar ============ */

.pf-web-poll .pf-web-poll-progress {
	display: block !important;
	height: 6px !important;
	background: var(--pf-soft) !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	margin: 0 0 20px !important;
	width: 100% !important;
}
.pf-web-poll .pf-web-poll-progress-bar {
	display: block !important;
	height: 100% !important;
	width: 0;
	background: var(--pf-primary) !important;
	border-radius: 999px !important;
	transition: width 280ms ease-out;
}

/* ============ Steps ============ */

.pf-web-poll .pf-web-poll-step { animation: pfFadeIn 240ms ease-out; }
@keyframes pfFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
.pf-web-poll .pf-web-poll-step h3 {
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 14px !important;
	color: var(--pf-fg) !important;
}
.pf-web-poll .pf-web-poll-step p {
	font-size: 15px !important;
	line-height: 1.55 !important;
	margin: 0 0 14px !important;
	color: var(--pf-fg) !important;
}

/* ============ Inputs ============ */

.pf-web-poll .pf-web-poll-field { margin-bottom: 14px !important; }
.pf-web-poll .pf-web-poll-label {
	display: block !important;
	font-size: 12px !important;
	color: var(--pf-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	margin: 0 0 4px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}
.pf-web-poll .pf-web-poll-input,
.pf-web-poll .pf-web-poll-textarea {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 10px 12px !important;
	border: 1px solid var(--pf-border) !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	background: #fff !important;
	color: var(--pf-fg) !important;
	font-family: inherit !important;
	transition: border-color 120ms, box-shadow 120ms;
	box-shadow: none !important;
	margin: 0 !important;
	outline: none;
}
.pf-web-poll .pf-web-poll-textarea {
	min-height: 90px !important;
	resize: vertical !important;
}
.pf-web-poll .pf-web-poll-input:focus,
.pf-web-poll .pf-web-poll-textarea:focus {
	border-color: var(--pf-primary) !important;
	box-shadow: 0 0 0 3px rgba(79,70,229,0.18) !important;
}
.pf-web-poll .pf-web-poll-help {
	font-size: 12px !important;
	color: var(--pf-muted) !important;
	margin: 4px 0 0 !important;
	line-height: 1.5 !important;
}

/* ============ Buttons ============ */

.pf-web-poll .pf-web-poll-actions {
	display: flex !important;
	gap: 10px !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin: 18px 0 0 !important;
	flex-wrap: wrap !important;
	padding: 0 !important;
}
.pf-web-poll .pf-web-poll-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
	border-radius: 10px !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	border: 1px solid var(--pf-border) !important;
	background: #fff !important;
	color: var(--pf-fg) !important;
	transition: background 120ms, transform 80ms;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	text-decoration: none !important;
	display: inline-block !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}
.pf-web-poll .pf-web-poll-btn:hover { background: var(--pf-soft) !important; }
.pf-web-poll .pf-web-poll-btn:active { transform: translateY(1px); }
.pf-web-poll .pf-web-poll-btn-primary {
	background: var(--pf-primary) !important;
	border-color: var(--pf-primary) !important;
	color: var(--pf-primary-fg) !important;
}
.pf-web-poll .pf-web-poll-btn-primary:hover { background: var(--pf-primary-hover) !important; }
.pf-web-poll .pf-web-poll-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============ Choices (yesno + likert + mcq) ============ */

.pf-web-poll .pf-web-poll-choices {
	display: grid !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.pf-web-poll .pf-web-poll-choices.pf-web-poll-choices-2 { grid-template-columns: 1fr 1fr !important; }
.pf-web-poll .pf-web-poll-choices.pf-web-poll-choices-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.pf-web-poll .pf-web-poll-choice {
	width: 100% !important;
	text-align: left !important;
	padding: 14px 16px !important;
	border: 2px solid var(--pf-border) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--pf-fg) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	transition: border-color 120ms, background 120ms, transform 80ms;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	overflow-wrap: break-word !important;
}
.pf-web-poll .pf-web-poll-choice:hover { border-color: var(--pf-primary) !important; background: #f5f3ff !important; }
.pf-web-poll .pf-web-poll-choice:active { transform: translateY(1px); }
.pf-web-poll .pf-web-poll-choices-5 .pf-web-poll-choice {
	text-align: center !important;
	padding: 12px 6px !important;
	font-size: 12px !important;
	line-height: 1.25 !important;
}

/* ============ Opt-in row ============ */

.pf-web-poll .pf-web-poll-checkbox-row {
	display: flex !important;
	gap: 10px !important;
	align-items: flex-start !important;
	background: var(--pf-soft) !important;
	padding: 12px !important;
	border-radius: 10px !important;
	margin: 12px 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}
.pf-web-poll .pf-web-poll-checkbox-row input { margin-top: 2px !important; }

/* ============ Banners ============ */

.pf-web-poll .pf-web-poll-banner {
	padding: 10px 12px !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin: 0 0 12px !important;
}
.pf-web-poll .pf-web-poll-banner-info    { background: #eff6ff !important; color: #1e3a8a !important; border: 1px solid #bfdbfe !important; }
.pf-web-poll .pf-web-poll-banner-error   { background: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }
.pf-web-poll .pf-web-poll-banner-success { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; }

/* ============ Mobile ============ */

@media (max-width: 540px) {
	.pf-web-poll {
		padding: 18px !important;
		margin: 12px !important;
		border-radius: 12px !important;
		max-width: calc(100vw - 24px) !important;
	}
	.pf-web-poll .pf-web-poll-title { font-size: 19px !important; }
	.pf-web-poll .pf-web-poll-choices.pf-web-poll-choices-5 { grid-template-columns: 1fr 1fr !important; }
	.pf-web-poll .pf-web-poll-choices.pf-web-poll-choices-5 .pf-web-poll-choice {
		text-align: left !important;
		padding: 12px 14px !important;
		font-size: 14px !important;
	}
}