/* Survey block — lives inside of-engage's .oe-box, so it inherits that
   container's width/padding/centering. Reads the theme's --of-* variables
   when present, falls back to brand values otherwise (same convention as
   oe-popup.css) so this plugin doesn't depend on a specific theme. */

.ofsv-start-btn {
	display: inline-block;
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--of-yellow, #f7b32b);
	color: var(--of-ink, #1f2430);
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	transition: transform 0.12s ease, opacity 0.12s ease;
}
.ofsv-start-btn:hover { transform: translateY(-1px); opacity: 0.92; }

.ofsv-form {
	text-align: left;
}

/* Only the question list scrolls — Send/Skip stay outside it, always
   visible, so nobody has to scroll just to submit what they've answered
   so far (every field is optional). */
.ofsv-fields-wrap {
	position: relative;
}
.ofsv-fields {
	max-height: 320px;
	overflow-y: auto;
	padding-right: 4px;
}
@media (max-height: 700px), (max-width: 480px) {
	/* Short/small screens: give the list more of the available room
	   instead of a fixed desktop-sized cap. */
	.ofsv-fields { max-height: 38vh; }
}

/* Fades the last question near the edge and shows "↓ more questions"
   whenever there's unseen content below — hidden once nothing's left to
   scroll to, or if everything already fits without scrolling at all. */
.ofsv-scroll-hint {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 40px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--of-ink, #1f2430);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.ofsv-scroll-hint.is-visible { opacity: 1; }

.ofsv-field { margin-bottom: 12px; }
.ofsv-field label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--of-ink, #1f2430);
	margin-bottom: 4px;
}
.ofsv-field input[type="text"],
.ofsv-field textarea,
.ofsv-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--of-line, #ececf1);
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.88rem;
	color: var(--of-text, #3a3f4b);
	background: #fff;
	resize: vertical;
}
.ofsv-field input[type="text"]:focus,
.ofsv-field textarea:focus,
.ofsv-field select:focus {
	outline: 2px solid var(--of-yellow, #f7b32b);
	outline-offset: 1px;
}

.ofsv-privacy-note {
	font-size: 0.78rem;
	color: var(--of-muted, #8a8f9c);
	margin: 4px 0 14px;
}

.ofsv-form-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.ofsv-submit-btn {
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--of-yellow, #f7b32b);
	color: var(--of-ink, #1f2430);
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}
.ofsv-submit-btn:disabled { opacity: 0.6; cursor: default; }
.ofsv-skip-btn {
	background: none;
	border: 0;
	color: var(--of-muted, #8a8f9c);
	font-size: 0.85rem;
	cursor: pointer;
	text-decoration: underline;
}

.ofsv-thanks {
	text-align: center;
	font-weight: 600;
	color: var(--of-ink, #1f2430);
	padding: 10px 0;
}