/* Kit Subscribe Forms — front-end styles
   Uses CSS variables set inline per-form so each instance can carry its
   own brand colors, font, size, and corner radius. Key visual properties
   use !important because this is a self-contained branded widget — many
   themes apply their own font/color rules directly to <input>/<button>
   elements (sometimes with !important of their own), which otherwise
   silently overrides whatever you configure in the plugin. */

.ksf-form-wrapper {
	--ksf-bg: #ffffff;
	--ksf-border: #e2e8f0;
	--ksf-title: #1f2933;
	--ksf-desc: #5a6472;
	--ksf-text: #1f2933;
	--ksf-input-bg: #ffffff;
	--ksf-input-text: #1f2933;
	--ksf-btn-bg: #1a73e8;
	--ksf-btn-text: #ffffff;
	--ksf-link: #1a73e8;
	--ksf-radius: 8px;
	--ksf-font: inherit;
	font-family: var(--ksf-font) !important;
	color: var(--ksf-text);
	box-sizing: border-box;
}
.ksf-form-wrapper *,
.ksf-form-wrapper *::before,
.ksf-form-wrapper *::after {
	box-sizing: border-box;
	font-family: inherit;
}

/* ---------- Shared inner card ---------- */
.ksf-form-inner {
	background: var(--ksf-bg);
	border: 1px solid var(--ksf-border);
	border-radius: var(--ksf-radius);
	padding: 24px;
	position: relative;
	width: 100%;
}
.ksf-type-sidebar .ksf-form-inner,
.ksf-type-in_post .ksf-form-inner,
.ksf-type-under_post .ksf-form-inner {
	height: auto;
}
.ksf-main-text {
	margin: 0 0 6px;
	font-size: var(--ksf-title-size, 22px);
	line-height: 1.3;
	color: var(--ksf-title) !important;
}
.ksf-description {
	margin: 0 0 12px;
	font-size: var(--ksf-desc-size, 15px);
	line-height: 1.5;
	color: var(--ksf-desc) !important;
}

/* ---------- Form fields ---------- */
.ksf-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ksf-email-input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--ksf-border);
	border-radius: calc(var(--ksf-radius) - 2px);
	font-size: 1em;
	font-family: inherit !important;
	color: var(--ksf-input-text) !important;
	background: var(--ksf-input-bg) !important;
}
.ksf-email-input::placeholder {
	color: var(--ksf-input-text);
	opacity: 0.55;
}
.ksf-email-input:focus {
	outline: 2px solid var(--ksf-btn-bg);
	outline-offset: 1px;
}
.ksf-submit-btn {
	flex: 0 0 auto;
	position: relative;
	padding: 12px 22px;
	border: none;
	border-radius: calc(var(--ksf-radius) - 2px);
	background: var(--ksf-btn-bg) !important;
	color: var(--ksf-btn-text) !important;
	font-size: var(--ksf-btn-size, 16px);
	font-weight: 600;
	font-family: inherit !important;
	cursor: pointer;
	transition: opacity 0.15s ease;
	white-space: nowrap;
}
.ksf-submit-btn:hover { opacity: 0.9; }
.ksf-submit-btn:disabled { opacity: 0.65; cursor: default; }
.ksf-submit-btn .ksf-spinner {
	display: none;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	border: 2px solid rgba(255,255,255,0.5);
	border-top-color: var(--ksf-btn-text);
	border-radius: 50%;
	vertical-align: middle;
	animation: ksf-spin 0.7s linear infinite;
}
.ksf-submit-btn.is-loading .ksf-btn-text { opacity: 0.6; }
.ksf-submit-btn.is-loading .ksf-spinner { display: inline-block; }
@keyframes ksf-spin { to { transform: rotate(360deg); } }

.ksf-privacy-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	font-size: 0.82em;
	line-height: 1.4;
	color: var(--ksf-desc);
	cursor: pointer;
}
.ksf-privacy-row input { margin-top: 3px; flex-shrink: 0; }
.ksf-privacy-row a { color: var(--ksf-link) !important; text-decoration: underline; }

.ksf-error-message {
	margin: 10px 0 0;
	font-size: 0.85em;
	color: #d93025;
	min-height: 0;
	display: none;
}
.ksf-error-message.is-visible { display: block; }

/* ---------- Success state ---------- */
.ksf-form-state { transition: opacity 0.25s ease; }
.ksf-state-success {
	text-align: center;
	padding: 10px 0;
}
.ksf-success-icon {
	width: 44px;
	height: 44px;
	line-height: 44px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: var(--ksf-btn-bg);
	color: var(--ksf-btn-text);
	font-size: 1.3em;
}
.ksf-success-text { margin: 0; font-size: 1em; color: var(--ksf-text) !important; }

/* ---------- Placement: sidebar ---------- */
.ksf-type-sidebar .ksf-form-inner {
	width: 100%;
}

/* ---------- Placement: in-post / under-post ---------- */
.ksf-type-in_post,
.ksf-type-under_post {
	margin: 28px 0;
}
.ksf-type-in_post .ksf-form-inner,
.ksf-type-under_post .ksf-form-inner {
	max-width: 100%;
}

/* ---------- Placement: popup ---------- */
.ksf-type-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.ksf-type-popup.ksf-is-visible {
	display: flex;
}
.ksf-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}

/* The popup card itself — width/height here are just sensible fallbacks;
   an inline style (from the "Width"/"Height" fields in the editor) on this
   same element will always take precedence over these plain rules. */
.ksf-type-popup .ksf-form-inner {
	position: relative;
	width: 460px;
	max-width: 100%;
	max-height: 90vh;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0,0,0,0.25);
	animation: ksf-pop-in 0.22s ease;
}
.ksf-type-popup .ksf-form-inner:not(.ksf-has-image) {
	overflow-y: auto;
	padding: 22px;
}
@keyframes ksf-pop-in {
	from { opacity: 0; transform: scale(0.94) translateY(8px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ksf-close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border: none;
	background: rgba(255,255,255,0.85);
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #1f2933;
	z-index: 2;
}
.ksf-close-btn:hover { background: #ffffff; }

/* ---------- Popup layout: image as a side panel, content stacked and
   aligned next to it (header → description → email → button → checkbox),
   kept snug so there's no leftover dead space below the fields. ---------- */
.ksf-type-popup .ksf-form-inner.ksf-has-image.ksf-image-left,
.ksf-type-popup .ksf-form-inner.ksf-has-image.ksf-image-right {
	display: flex;
	align-items: stretch;
	padding: 0;
	/* Keeps a tall image from forcing the content column taller than the
	   text actually needs — the image crops to fit via object-fit: cover
	   rather than dictating the whole card's height. */
	min-height: 300px;
	max-height: 420px;
}
.ksf-type-popup .ksf-form-inner.ksf-has-image.ksf-image-left { flex-direction: row; }
.ksf-type-popup .ksf-form-inner.ksf-has-image.ksf-image-right { flex-direction: row-reverse; }

.ksf-type-popup .ksf-has-image .ksf-image {
	flex: 0 0 42%;
	min-width: 140px;
	overflow: hidden;
}
.ksf-type-popup .ksf-has-image .ksf-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ksf-type-popup .ksf-has-image .ksf-form-content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	overflow-y: auto;
	max-height: 420px;
}

/* "Top" variant: image as a banner above the content, full width */
.ksf-type-popup .ksf-form-inner.ksf-has-image.ksf-image-top {
	display: block;

	padding: 0;
	overflow-y: auto;
}
.ksf-type-popup .ksf-image-top .ksf-image {
	width: 100%;
	max-height: 220px;
	overflow: hidden;
}
.ksf-type-popup .ksf-image-top .ksf-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.ksf-type-popup .ksf-image-top .ksf-form-content {
	padding: 24px;
}

/* Prevent background scroll while popup open (class toggled on <html>) */
html.ksf-no-scroll { overflow: hidden; }

/* ---------- Responsive: tablet ---------- */
@media (max-width: 782px) {
	.ksf-form-inner { padding: 20px; }
	.ksf-type-popup .ksf-form-inner { width: 90vw; }
	.ksf-type-popup .ksf-form-inner.ksf-has-image.ksf-image-left,
	.ksf-type-popup .ksf-form-inner.ksf-has-image.ksf-image-right {
		flex-direction: column;
		max-height: 90vh;
		overflow-y: auto;
	}
	.ksf-type-popup .ksf-has-image .ksf-image {
		flex: 0 0 auto;
		width: 100%;
		max-height: 180px;
	}
	.ksf-type-popup .ksf-has-image .ksf-image img { height: 180px; }
	.ksf-type-popup .ksf-has-image .ksf-form-content {
		padding: 22px;
		max-height: none;
		overflow-y: visible;
	}
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 480px) {
	.ksf-form-inner { padding: 16px; }
	.ksf-field-row { flex-direction: column; }
	.ksf-field-row .ksf-email-input { flex: 0 0 auto; width: 100%; }
	.ksf-submit-btn { width: 100%; }
	.ksf-type-popup { padding: 10px; }
	.ksf-type-popup .ksf-form-inner { width: 100%; }
	.ksf-type-in_post .ksf-form-inner,
	.ksf-type-under_post .ksf-form-inner {
		flex-direction: column;
		text-align: center;
	}
	.ksf-type-popup .ksf-has-image .ksf-image {
		max-height: 140px;
	}
	.ksf-type-popup .ksf-has-image .ksf-image img { height: 140px; }
	.ksf-type-popup .ksf-has-image .ksf-form-content {
		padding: 18px;
	}
}

.ksf-recaptcha-disclosure {
	margin: 10px 0 0;
	font-size: 0.72em;
	line-height: 1.4;
	opacity: 0.6;
}
.ksf-recaptcha-disclosure a {
	color: inherit;
	text-decoration: underline;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}