/* =====================================================================
   ECM Channel Mix Calculator — scoped styles
   All rules scoped under .ecm-cmc, ecm- prefixed, !important for
   Elementor override reliability. Brand: ECM Guidelines v1.0.
   ===================================================================== */

.ecm-cmc * { box-sizing: border-box !important; }

.ecm-cmc {
	--ecm-ink: #0F0A1E;
	--ecm-deep: #2D1B69;
	--ecm-dark: #3A2280;
	--ecm-mid: #5B3FB5;
	--ecm-bright: #7C5FD6;
	--ecm-light: #A78BFA;
	--ecm-soft: #EDE9FE;
	--ecm-coral: #F47458;
	--ecm-coral-hover: #E55D40;
	--ecm-green: #34D399;
	--ecm-g900: #1A1530;
	--ecm-g700: #3D3660;
	--ecm-g500: #6B6490;
	--ecm-g400: #8E89AB;
	--ecm-g300: #C4C0D8;
	--ecm-g200: #E8E5F0;
	--ecm-g100: #F3F1F9;
	--ecm-amber: #E0A030;

	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
	color: var(--ecm-g700) !important;
	max-width: 980px !important;
	margin: 0 auto !important;
	line-height: 1.55 !important;
	-webkit-font-smoothing: antialiased !important;
}

.ecm-cmc div { line-height: inherit; }

/* ---------- Hero ---------- */
.ecm-cmc-hero {
	background: linear-gradient(155deg, #2d1b69 0%, #3a2280 30%, #5b3fb5 65%, #7c5fd6 100%) !important;
	border-radius: 20px !important;
	padding: 38px 40px !important;
	color: #fff !important;
	margin-bottom: 22px !important;
}
.ecm-cmc-eyebrow {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: var(--ecm-light) !important;
	margin-bottom: 12px !important;
}
.ecm-cmc-hero-title {
	font-family: 'Instrument Serif', Georgia, serif !important;
	font-size: 46px !important;
	line-height: 1.05 !important;
	color: #fff !important;
	margin-bottom: 12px !important;
}
.ecm-cmc-hero-sub {
	font-size: 16px !important;
	color: rgba(255,255,255,0.78) !important;
	max-width: 620px !important;
}

/* ---------- Layout ---------- */
.ecm-cmc-grid {
	display: grid !important;
	grid-template-columns: 360px 1fr !important;
	gap: 20px !important;
	align-items: start !important;
}

/* ---------- Inputs ---------- */
.ecm-cmc-inputs {
	background: #fff !important;
	border: 1px solid var(--ecm-g200) !important;
	border-radius: 16px !important;
	padding: 24px !important;
	position: sticky !important;
	top: 20px !important;
}
.ecm-cmc-panel-label {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: var(--ecm-mid) !important;
	margin-bottom: 18px !important;
}
.ecm-cmc-field { margin-bottom: 16px !important; }
.ecm-cmc-field-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
}
.ecm-cmc-field-row .ecm-cmc-field { margin-bottom: 16px !important; }
.ecm-cmc-label {
	display: block !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--ecm-g700) !important;
	margin-bottom: 7px !important;
}
.ecm-cmc-input-wrap {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
}
.ecm-cmc-input-wrap::before {
	content: attr(data-prefix) !important;
	position: absolute !important;
	left: 13px !important;
	color: var(--ecm-g400) !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 14px !important;
	pointer-events: none !important;
}
.ecm-cmc-input-wrap[data-prefix=""]::before { content: "" !important; }
.ecm-cmc-input-wrap::after {
	content: attr(data-suffix) !important;
	position: absolute !important;
	right: 14px !important;
	color: var(--ecm-g400) !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 14px !important;
	pointer-events: none !important;
}
.ecm-cmc-input {
	width: 100% !important;
	border: 2px solid var(--ecm-g200) !important;
	background: #fff !important;
	border-radius: 10px !important;
	padding: 11px 14px 11px 26px !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--ecm-g900) !important;
	transition: border-color 0.15s ease !important;
}
.ecm-cmc-input-wrap[data-prefix=""] .ecm-cmc-input { padding-left: 14px !important; }
.ecm-cmc-input-wrap[data-suffix] .ecm-cmc-input { padding-right: 34px !important; }
.ecm-cmc-input:focus {
	outline: none !important;
	border-color: var(--ecm-g900) !important;
}

/* ---------- Stage toggle ---------- */
.ecm-cmc-stage {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr !important;
	gap: 6px !important;
	background: var(--ecm-g100) !important;
	border-radius: 10px !important;
	padding: 4px !important;
}
.ecm-cmc-stage-btn {
	border: none !important;
	background: transparent !important;
	border-radius: 7px !important;
	padding: 9px 4px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--ecm-g500) !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	line-height: 1.2 !important;
}
.ecm-cmc-stage-btn.is-active {
	background: var(--ecm-mid) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(91,63,181,0.30) !important;
}
.ecm-cmc-stage-note {
	font-size: 12px !important;
	color: var(--ecm-g400) !important;
	margin-top: 8px !important;
	min-height: 16px !important;
}

/* ---------- CTA ---------- */
.ecm-cmc-cta {
	width: 100% !important;
	border: none !important;
	background: var(--ecm-coral) !important;
	color: #fff !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	padding: 14px 28px !important;
	cursor: pointer !important;
	margin-top: 8px !important;
	transition: all 0.15s ease !important;
}
.ecm-cmc-cta:hover {
	background: var(--ecm-coral-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(244,116,88,0.35) !important;
}

/* ---------- Results ---------- */
.ecm-cmc-results { min-height: 200px !important; }

.ecm-cmc-verdict {
	border-radius: 14px !important;
	padding: 20px 22px !important;
	margin-bottom: 16px !important;
	display: flex !important;
	gap: 14px !important;
	align-items: flex-start !important;
}
.ecm-cmc-verdict.is-green { background: rgba(52,211,153,0.12) !important; border: 1px solid rgba(52,211,153,0.40) !important; }
.ecm-cmc-verdict.is-amber { background: rgba(224,160,48,0.12) !important; border: 1px solid rgba(224,160,48,0.40) !important; }
.ecm-cmc-verdict.is-red { background: rgba(244,116,88,0.12) !important; border: 1px solid rgba(244,116,88,0.40) !important; }
.ecm-cmc-verdict-dot {
	width: 11px !important; height: 11px !important;
	border-radius: 50% !important; margin-top: 6px !important; flex: 0 0 auto !important;
}
.is-green .ecm-cmc-verdict-dot { background: var(--ecm-green) !important; box-shadow: 0 0 0 4px rgba(52,211,153,0.20) !important; }
.is-amber .ecm-cmc-verdict-dot { background: var(--ecm-amber) !important; box-shadow: 0 0 0 4px rgba(224,160,48,0.20) !important; }
.is-red .ecm-cmc-verdict-dot { background: var(--ecm-coral) !important; box-shadow: 0 0 0 4px rgba(244,116,88,0.20) !important; }
.ecm-cmc-verdict-title {
	font-family: 'Instrument Serif', Georgia, serif !important;
	font-size: 23px !important;
	color: var(--ecm-g900) !important;
	line-height: 1.15 !important;
	margin-bottom: 4px !important;
}
.ecm-cmc-verdict-body { font-size: 14px !important; color: var(--ecm-g700) !important; }

/* Stat row */
.ecm-cmc-stats {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 12px !important;
	margin-bottom: 18px !important;
}
.ecm-cmc-stat {
	background: #fff !important;
	border: 1px solid var(--ecm-g200) !important;
	border-radius: 12px !important;
	padding: 14px 14px 13px !important;
}
.ecm-cmc-stat-label {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	color: var(--ecm-g400) !important;
	margin-bottom: 6px !important;
}
.ecm-cmc-stat-value {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--ecm-g900) !important;
	line-height: 1.05 !important;
}
.ecm-cmc-stat-sub { font-size: 11.5px !important; color: var(--ecm-g500) !important; margin-top: 3px !important; }

/* Channel table */
.ecm-cmc-table-card {
	background: #fff !important;
	border: 1px solid var(--ecm-g200) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	margin-bottom: 16px !important;
}
.ecm-cmc-table-head {
	padding: 16px 18px 12px !important;
	border-bottom: 1px solid var(--ecm-g200) !important;
}
.ecm-cmc-table-head-title {
	font-family: 'Instrument Serif', Georgia, serif !important;
	font-size: 21px !important;
	color: var(--ecm-g900) !important;
}
.ecm-cmc-table-head-sub { font-size: 12.5px !important; color: var(--ecm-g500) !important; margin-top: 2px !important; }

.ecm-cmc-row {
	display: grid !important;
	grid-template-columns: 1.7fr 0.9fr 0.7fr 1fr !important;
	gap: 10px !important;
	padding: 13px 18px !important;
	border-bottom: 1px solid var(--ecm-g100) !important;
	align-items: center !important;
}
.ecm-cmc-row:last-child { border-bottom: none !important; }
.ecm-cmc-row.is-header {
	background: var(--ecm-g100) !important;
	padding-top: 9px !important; padding-bottom: 9px !important;
}
.ecm-cmc-row.is-header .ecm-cmc-cell {
	font-size: 10.5px !important; font-weight: 700 !important;
	letter-spacing: 0.5px !important; text-transform: uppercase !important;
	color: var(--ecm-g400) !important;
}
.ecm-cmc-row.is-retention { background: var(--ecm-soft) !important; }
.ecm-cmc-cell { font-size: 13.5px !important; color: var(--ecm-g700) !important; }
.ecm-cmc-cell.is-num { font-family: 'JetBrains Mono', monospace !important; font-weight: 500 !important; text-align: right !important; }
.ecm-cmc-chan-name { font-weight: 600 !important; color: var(--ecm-g900) !important; }
.ecm-cmc-chan-note { font-size: 11.5px !important; color: var(--ecm-g400) !important; margin-top: 1px !important; }

.ecm-cmc-bar {
	height: 6px !important; border-radius: 4px !important;
	background: var(--ecm-g200) !important; margin-top: 7px !important; overflow: hidden !important;
}
.ecm-cmc-bar-fill {
	height: 100% !important; border-radius: 4px !important;
	background: linear-gradient(90deg, var(--ecm-mid), var(--ecm-bright)) !important;
}

.ecm-cmc-row.is-total {
	background: var(--ecm-g900) !important;
}
.ecm-cmc-row.is-total .ecm-cmc-cell { color: #fff !important; }
.ecm-cmc-row.is-total .ecm-cmc-chan-name { color: #fff !important; }

/* Companion + newsletter */
.ecm-cmc-companion {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	background: var(--ecm-soft) !important;
	border: 1px solid rgba(91,63,181,0.20) !important;
	border-radius: 12px !important;
	padding: 16px 18px !important;
	margin-bottom: 14px !important;
}
.ecm-cmc-companion-text { font-size: 13.5px !important; color: var(--ecm-g700) !important; }
.ecm-cmc-companion-text strong { color: var(--ecm-g900) !important; }
.ecm-cmc-link-btn {
	flex: 0 0 auto !important;
	background: var(--ecm-mid) !important;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	padding: 10px 16px !important;
	transition: background 0.15s ease !important;
}
.ecm-cmc-link-btn:hover { background: var(--ecm-dark) !important; color: #fff !important; }

.ecm-cmc-news {
	background: linear-gradient(155deg, #2d1b69 0%, #3a2280 55%, #5b3fb5 100%) !important;
	border-radius: 14px !important;
	padding: 22px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 18px !important;
	flex-wrap: wrap !important;
}
.ecm-cmc-news-title {
	font-family: 'Instrument Serif', Georgia, serif !important;
	font-size: 22px !important; color: #fff !important; margin-bottom: 4px !important;
}
.ecm-cmc-news-sub { font-size: 13px !important; color: rgba(255,255,255,0.72) !important; display: flex !important; align-items: center !important; gap: 7px !important; }
.ecm-cmc-news-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--ecm-green) !important; box-shadow: 0 0 0 3px rgba(52,211,153,0.25) !important; }

/* Methodology */
.ecm-cmc-method {
	margin-top: 20px !important;
	font-size: 12px !important;
	color: var(--ecm-g400) !important;
	border-top: 1px solid var(--ecm-g200) !important;
	padding-top: 14px !important;
	line-height: 1.6 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
	.ecm-cmc-grid { grid-template-columns: 1fr !important; }
	.ecm-cmc-inputs { position: relative !important; top: 0 !important; }
	.ecm-cmc-hero-title { font-size: 34px !important; }
	.ecm-cmc-hero { padding: 28px 24px !important; }
	.ecm-cmc-stats { grid-template-columns: 1fr 1fr !important; }
	.ecm-cmc-row { grid-template-columns: 1.4fr 0.8fr 0.7fr 1fr !important; }
}
@media (max-width: 480px) {
	.ecm-cmc-row { grid-template-columns: 1.3fr 0.8fr 1fr !important; }
	.ecm-cmc-row .ecm-cmc-hide-sm { display: none !important; }
}