/* ================================================================
   Chancery CTA Banner — cta-banner.css v1.2.0
   3 style presets. Mobile-first. Button text always white.
   Wise Digital Marketing © 2026
================================================================ */

.chcb-banner *,
.chcb-banner *::before,
.chcb-banner *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Banner wrapper ──────────────────────────────────────────── */
.chcb-banner {
	width: 100%;
	min-height: 320px;
	display: flex;
	align-items: stretch;
	position: relative;
	overflow: hidden;
}

/* ── PRESET 1: Berry Crimson ─────────────────────────────────── */
.chcb-preset-crimson {
	background: linear-gradient(135deg, #5a0a2c 0%, #A62461 55%, #7a1845 100%);
}
.chcb-preset-crimson .chcb-headline    { color: #ffffff; }
.chcb-preset-crimson .chcb-highlight   { color: #7ABFB8; }
.chcb-preset-crimson .chcb-supporting  { color: rgba(255,255,255,0.68); }
.chcb-preset-crimson .chcb-btn         { background-color: #A62461; color: #ffffff !important; border: 2px solid rgba(255,255,255,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.chcb-preset-crimson .chcb-btn:hover   { background-color: #8c1d52; border-color: rgba(255,255,255,0.5); }
.chcb-preset-crimson .chcb-trust-item  { color: rgba(255,255,255,0.45); }
.chcb-preset-crimson .chcb-trust-dot   { background: rgba(255,255,255,0.2); }
.chcb-preset-crimson .chcb-counter     { color: #ffffff; }
.chcb-preset-crimson .chcb-rev-label   { color: rgba(255,255,255,0.6); }
.chcb-preset-crimson .chcb-stars-row   { color: #7ABFB8; }
.chcb-preset-crimson .chcb-sep         { background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.14), transparent); }

/* ── PRESET 2: Black ─────────────────────────────────────────── */
.chcb-preset-black {
	background: #0d0d10;
}
.chcb-preset-black .chcb-headline   { color: #ffffff; }
.chcb-preset-black .chcb-highlight  { color: #7ABFB8; }
.chcb-preset-black .chcb-supporting { color: rgba(255,255,255,0.55); }
.chcb-preset-black .chcb-btn        { background-color: #A62461; color: #ffffff !important; border: none; box-shadow: 0 4px 20px rgba(166,36,97,0.4); }
.chcb-preset-black .chcb-btn:hover  { background-color: #8c1d52; }
.chcb-preset-black .chcb-trust-item { color: rgba(255,255,255,0.35); }
.chcb-preset-black .chcb-trust-dot  { background: rgba(255,255,255,0.12); }
.chcb-preset-black .chcb-counter    { color: #ffffff; }
.chcb-preset-black .chcb-rev-label  { color: rgba(255,255,255,0.5); }
.chcb-preset-black .chcb-stars-row  { color: #7ABFB8; }
.chcb-preset-black .chcb-sep        { background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.07), transparent); }

/* ── PRESET 3: White — crimson stars ─────────────────────────── */
.chcb-preset-white {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.06);
}
.chcb-preset-white .chcb-headline   { color: #0a0a0a; }
.chcb-preset-white .chcb-highlight  { color: #A62461; }
.chcb-preset-white .chcb-supporting { color: #6b7280; }
.chcb-preset-white .chcb-btn        { background-color: #A62461; color: #ffffff !important; border: none; box-shadow: 0 4px 20px rgba(166,36,97,0.25); }
.chcb-preset-white .chcb-btn:hover  { background-color: #8c1d52; }
.chcb-preset-white .chcb-trust-item { color: #9ca3af; }
.chcb-preset-white .chcb-trust-dot  { background: rgba(0,0,0,0.12); }
.chcb-preset-white .chcb-counter    { color: #0a0a0a; }
.chcb-preset-white .chcb-rev-label  { color: #6b7280; }
.chcb-preset-white .chcb-stars-row  { color: #A62461; }
.chcb-preset-white .chcb-right      { background: rgba(0,0,0,0.02); }
.chcb-preset-white .chcb-sep        { background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.08), transparent); }

/* ── Left column ─────────────────────────────────────────────── */
.chcb-left {
	flex: 0 0 58%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 40px 48px 52px;
	position: relative;
	z-index: 1;
}

/* ── Headline ────────────────────────────────────────────────── */
.chcb-headline {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(22px, 2.8vw, 38px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin-bottom: 14px;
}

/* ── Supporting ──────────────────────────────────────────────── */
.chcb-supporting {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	max-width: 400px;
	margin-bottom: 28px;
}

/* ── CTA Button — white text always ─────────────────────────── */
.chcb-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 28px;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff !important; /* enforced always */
	border-radius: 10px;
	cursor: pointer;
	width: fit-content;
	text-decoration: none;
	transition: background-color 180ms ease, transform 160ms ease, box-shadow 180ms ease;
}
.chcb-btn:hover { transform: translateY(-2px); }
.chcb-btn svg { flex-shrink: 0; transition: transform 160ms ease; }
.chcb-btn:hover svg { transform: translateX(3px); }

/* ── Trust badges ────────────────────────────────────────────── */
.chcb-trust-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	flex-wrap: wrap;
}
.chcb-trust-item {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.chcb-trust-dot {
	width: 4px; height: 4px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ── Full-width star canvas — covers whole banner ────────────── */
.chcb-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
}

/* ── Optional background image ───────────────────────────────── */
.chcb-bg-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}

/* ── Right column ────────────────────────────────────────────── */
.chcb-right {
	flex: 0 0 42%;
	position: relative;
	overflow: visible;
	z-index: 1;
}

.chcb-sep {
	position: absolute;
	left: 0; top: 12%; bottom: 12%;
	width: 1px;
	display: block;
}

/* ── Social proof centred overlay ────────────────────────────── */
.chcb-social-proof {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	pointer-events: none;
}

.chcb-counter {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(46px, 5.5vw, 70px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	text-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.chcb-stars-row {
	display: flex;
	gap: 5px;
}

.chcb-rev-label {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.chcb-btn { transition: none; }
}

/* ── Mobile — stack + centre everything ─────────────────────── */
@media (max-width: 767px) {
	.chcb-banner {
		flex-direction: column;
		min-height: auto;
	}
	.chcb-left {
		flex: none;
		padding: 40px 24px 32px;
		align-items: center;
		text-align: center;
	}
	.chcb-headline { text-align: center; }
	.chcb-supporting { text-align: center; max-width: 100%; }
	.chcb-trust-row { justify-content: center; }
	.chcb-right {
		flex: none;
		height: 220px;
		padding-top: 16px;
	}
	.chcb-sep { display: none; }
}