/* CTA Injector — Frontend Widget Styles */

/* Box widget — styled as an editorial callout rather than an ad-style card.
   Deliberately avoids the classic native-ad template (colored left-border
   stripe, white bordered card, thumbnail + headline + right-aligned button,
   small disclaimer underneath) since that composition reads as an ad. */

.jci-widget {
	margin: 32px 0 28px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The button always sits inside the box, pinned to the right of the copy
   (there used to be a "stacked" alternative with the button in its own row
   below the text; that choice added confusion without a real use case, so
   this one layout is now the only one). */
.jci-widget__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	background: #f6f8fb;
	border: 1px solid #e7eaf0;
	border-radius: 14px;
	padding: 22px 24px;
}
.jci-widget__copy {
	flex: 1;
	min-width: 0;
}
.jci-widget__action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	flex-shrink: 0;
	gap: 8px;
}
.jci-widget__subtext {
	max-width: none;
}
@media (max-width: 640px) {
	.jci-widget__inner {
		flex-direction: column;
		align-items: stretch;
	}
	.jci-widget__action {
		align-items: flex-start;
		text-align: left;
	}
}

.jci-widget__top-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.jci-widget__logo {
	display: block;
	height: 18px;
	width: auto;
}

.jci-widget__image-inline {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	overflow: hidden;
}

.jci-widget__image-inline img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jci-widget__headline {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	color: #111827;
	line-height: 1.45;
}

.jci-widget__subtext {
	margin: 0 0 16px;
	font-size: 14px;
	color: #4b5563;
	line-height: 1.6;
	max-width: 540px;
}

.jci-widget__btn {
	display: inline-block;
	padding: 10px 18px;
	background: #1d4ed8;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none !important;
	transition: background .15s;
	white-space: nowrap;
}

.jci-widget__btn:hover {
	background: #1741b3;
}

.jci-widget__trust {
	margin: 0;
	font-size: 12px;
	color: #6b7280;
}

@media (max-width: 600px) {
	.jci-widget__inner {
		padding: 18px 20px;
	}
}

/* ── Banner mode — unchanged: this one is meant to look like a designed
   promo, matching the site's existing GetSign banner, so it's not part
   of the "looks like an ad" concern. ── */

/* Redesigned smaller/tighter: the previous version ran 40-48px of padding
   and a 28px heading, which read as oversized and out of proportion with
   its own logo and body text next to normal article content. Everything
   below is intentionally more compact and proportioned relative to itself. */
.jci-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 28px 0 24px;
	padding: 22px 26px;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(135deg, #4f7fe8 0%, #3355c8 55%, #6c4fd9 100%);
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.jci-banner__text {
	flex: 1;
	min-width: 0;
	max-width: 480px;
	display: flex;
	flex-direction: column;
}

.jci-banner__logo {
	display: block;
	height: 16px;
	width: auto;
	margin-bottom: 10px;
}

.jci-banner__heading {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.jci-banner__description {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.jci-banner__btn {
	display: inline-block;
	padding: 9px 18px;
	background: #fff;
	color: #14152b !important;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none !important;
	transition: transform .12s, box-shadow .12s;
}

.jci-banner__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.jci-banner__image-wrap {
	flex-shrink: 0;
	max-width: 34%;
}

.jci-banner__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

@media (max-width: 760px) {
	.jci-banner {
		flex-direction: column;
		padding: 20px 20px;
		text-align: left;
	}
	.jci-banner__text {
		max-width: 100%;
	}
	.jci-banner__image-wrap {
		max-width: 100%;
	}
	.jci-banner__heading {
		font-size: 17px;
	}
}