/**
 * SERPsKit Community Form — Shortcode (Form 2) styles.
 *
 * The frame uses min-height (set inline from settings) so the user-defined
 * height is respected, but content can push the box taller if needed.
 * On small screens the min-height is dropped and content flows naturally.
 */

.scf-sc-frame {
	position: relative;
	width: 100%;
	margin: 20px auto;
	overflow: hidden;
	background: #e8e3d5;
	isolation: isolate;
	box-sizing: border-box;
}

/* ---------- Background slideshow ---------- */

.scf-sc-bg {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden;
	z-index: 0;
}
.scf-sc-bg-slide {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.5s ease;
}
.scf-sc-bg-slide.scf-bg-active { opacity: 1; }

/* ---------- Inner content ---------- */

.scf-sc-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	/* No min-height: the frame auto-sizes to content + padding.
	   No justify-content: items stack naturally from the top of the
	   padding box. The form's actual height is determined entirely by
	   the inner content plus the user-set padding on all four sides. */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.scf-sc-logo-wrap {
	width: 100%;
	flex: 0 0 auto;
}
.scf-sc-logo { display: inline-block; max-height: 110px; vertical-align: middle; }

.scf-sc-heading {
	margin: 0;
	line-height: 1.1;
	font-weight: 700;
}

.scf-sc-description {
	margin: 0;
	line-height: 1.45;
	max-width: 760px;
}

/* ---------- Form row ---------- */

.scf-sc-form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.scf-sc-row {
	display: flex;
	gap: 12px;
	align-items: stretch;
	flex-wrap: wrap;
}
.scf-sc-name, .scf-sc-email {
	flex: 1 1 200px;
	min-width: 0;
	box-sizing: border-box;
	padding: 0 14px;
	outline: 0;
	line-height: 1;
	box-shadow: none;
}
.scf-sc-name::placeholder,
.scf-sc-email::placeholder { color: inherit; opacity: .85; }

.scf-sc-submit {
	flex: 0 0 auto;
	min-width: 160px;
	box-sizing: border-box;
	padding: 0 28px;
	cursor: pointer;
	border: 0;
	background-color: var(--scf-btn-bg, #FFC71D);
	color: var(--scf-btn-color, #000);
	transition: background-color .2s ease, color .2s ease;
	box-shadow: none;
	text-shadow: none;
	/* Text centering inside the button. */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	line-height: 1 !important;
}
.scf-sc-submit:hover,
.scf-sc-submit:focus-visible {
	background-color: var(--scf-btn-hover, #FFB800);
	color: var(--scf-btn-hover-color, #000);
}

.scf-sc-consent {
	cursor: pointer;
	user-select: none;
}
.scf-sc-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	cursor: pointer;
	accent-color: #FFC71D;
}

.scf-sc-message {
	margin-top: 6px;
	min-height: 1em;
	font-size: 15px;
}
.scf-sc-message.scf-error { color: #ff6b6b !important; }

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
	.scf-sc-frame {
		min-height: 0 !important;
	}
	.scf-sc-inner { padding: 24px 18px !important; gap: 12px; }
	.scf-sc-heading   { font-size: 26px !important; }
	.scf-sc-description { font-size: 15px !important; }
	.scf-sc-name, .scf-sc-email, .scf-sc-submit {
		flex: 1 1 100%;
		width: 100% !important;
		height: 44px !important;
		font-size: 15px !important;
	}
	.scf-sc-submit { padding: 0 18px; }
	.scf-sc-consent { font-size: 13px !important; }
	.scf-sc-logo { max-height: 70px; }
}