/* ECM Cart Abandonment Recovery ROI Calculator
 * All selectors scoped to .ecm-crc, ecm-crc- prefixed, !important for Elementor override reliability.
 * Brand: purple gradient, coral CTA/loss, green opportunity. Fonts: Instrument Serif / DM Sans / JetBrains Mono.
 */

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

.ecm-crc {
	--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-h: #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-serif: "Instrument Serif", Georgia, serif;
	--ecm-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ecm-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	font-family: var(--ecm-sans) !important;
	color: var(--ecm-g700) !important;
	max-width: 1080px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	line-height: 1.5 !important;
}

/* ---------- Head ---------- */
.ecm-crc-head {
	background: linear-gradient(155deg, #2d1b69 0%, #3a2280 30%, #5b3fb5 65%, #7c5fd6 100%) !important;
	border-radius: 18px 18px 0 0 !important;
	padding: 36px 32px 30px !important;
	color: #fff !important;
}
.ecm-crc-eyebrow {
	font-family: var(--ecm-mono) !important;
	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-crc-title {
	font-family: var(--ecm-serif) !important;
	font-size: 40px !important;
	line-height: 1.08 !important;
	color: #fff !important;
	margin: 0 0 10px !important;
	font-weight: 400 !important;
}
.ecm-crc-sub {
	font-size: 16px !important;
	color: rgba(255,255,255,0.78) !important;
	max-width: 680px !important;
	margin: 0 !important;
}

/* ---------- Grid ---------- */
.ecm-crc-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
	gap: 0 !important;
	background: #fff !important;
	border: 1px solid var(--ecm-g200) !important;
	border-top: none !important;
	border-radius: 0 0 18px 18px !important;
	overflow: hidden !important;
}

/* ---------- Inputs ---------- */
.ecm-crc-inputs {
	padding: 28px 28px 24px !important;
	background: var(--ecm-g100) !important;
	border-right: 1px solid var(--ecm-g200) !important;
}
.ecm-crc-panel-label, .ecm-crc-lead-title, .ecm-crc-opp-label, .ecm-crc-loss-label {
	font-family: var(--ecm-mono) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	color: var(--ecm-mid) !important;
	margin-bottom: 16px !important;
}
.ecm-crc-field { margin-bottom: 20px !important; }
.ecm-crc-field-top {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin-bottom: 8px !important;
}
.ecm-crc-label {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--ecm-g900) !important;
}
.ecm-crc-input-wrap {
	display: inline-flex !important;
	align-items: center !important;
	background: #fff !important;
	border: 2px solid var(--ecm-g200) !important;
	border-radius: 10px !important;
	padding: 0 8px !important;
	transition: border-color .15s ease !important;
}
.ecm-crc-input-wrap:focus-within { border-color: var(--ecm-g900) !important; }
.ecm-crc-affix {
	font-family: var(--ecm-mono) !important;
	font-size: 13px !important;
	color: var(--ecm-g400) !important;
}
.ecm-crc-num {
	font-family: var(--ecm-mono) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--ecm-g900) !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	width: 92px !important;
	text-align: right !important;
	padding: 9px 4px !important;
	-moz-appearance: textfield !important;
}
.ecm-crc-num::-webkit-outer-spin-button,
.ecm-crc-num::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.ecm-crc-help {
	font-size: 12px !important;
	color: var(--ecm-g500) !important;
	margin-top: 6px !important;
}

/* Range slider */
.ecm-crc-range {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 6px !important;
	border-radius: 999px !important;
	background: var(--ecm-g200) !important;
	outline: none !important;
	margin: 2px 0 0 !important;
	cursor: pointer !important;
}
.ecm-crc-range::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 18px !important; height: 18px !important;
	border-radius: 50% !important;
	background: var(--ecm-mid) !important;
	border: 3px solid #fff !important;
	box-shadow: 0 1px 4px rgba(45,27,105,0.4) !important;
}
.ecm-crc-range::-moz-range-thumb {
	width: 18px !important; height: 18px !important;
	border-radius: 50% !important;
	background: var(--ecm-mid) !important;
	border: 3px solid #fff !important;
	box-shadow: 0 1px 4px rgba(45,27,105,0.4) !important;
}

.ecm-crc-share-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-top: 24px !important;
	padding-top: 18px !important;
	border-top: 1px solid var(--ecm-g200) !important;
}
.ecm-crc-share-label { font-size: 13px !important; color: var(--ecm-g500) !important; }
.ecm-crc-copy {
	font-family: var(--ecm-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--ecm-mid) !important;
	background: transparent !important;
	border: 1.5px solid var(--ecm-g200) !important;
	border-radius: 8px !important;
	padding: 7px 14px !important;
	cursor: pointer !important;
	transition: background .15s ease !important;
}
.ecm-crc-copy:hover { background: #fff !important; }
.ecm-crc-copy.ecm-crc-copied { color: #fff !important; background: var(--ecm-green) !important; border-color: var(--ecm-green) !important; }

/* ---------- Results ---------- */
.ecm-crc-results { padding: 28px 28px 26px !important; }

.ecm-crc-loss-card {
	background: linear-gradient(155deg, #2d1b69 0%, #3a2280 55%, #5b3fb5 100%) !important;
	border-radius: 14px !important;
	padding: 24px 26px !important;
	color: #fff !important;
	margin-bottom: 18px !important;
}
.ecm-crc-loss-label { color: var(--ecm-light) !important; margin-bottom: 8px !important; }
.ecm-crc-loss-value {
	font-family: var(--ecm-mono) !important;
	font-size: 44px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: var(--ecm-coral) !important;
	letter-spacing: -1px !important;
}
.ecm-crc-loss-meta {
	font-family: var(--ecm-mono) !important;
	font-size: 13px !important;
	color: rgba(255,255,255,0.65) !important;
	margin-top: 10px !important;
}

.ecm-crc-current {
	font-size: 14px !important;
	color: var(--ecm-g700) !important;
	background: var(--ecm-soft) !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
	margin-bottom: 18px !important;
}
.ecm-crc-strong { font-family: var(--ecm-mono) !important; font-weight: 700 !important; color: var(--ecm-mid) !important; }

.ecm-crc-channels {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 12px !important;
	margin-bottom: 18px !important;
}
.ecm-crc-channel {
	background: #fff !important;
	border: 1px solid var(--ecm-g200) !important;
	border-top: 3px solid var(--ecm-mid) !important;
	border-radius: 12px !important;
	padding: 16px 14px !important;
	transition: transform .15s ease, box-shadow .15s ease !important;
}
.ecm-crc-channel:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 24px rgba(91,63,181,0.14) !important; }
.ecm-crc-channel-email { border-top-color: var(--ecm-mid) !important; }
.ecm-crc-channel-sms { border-top-color: var(--ecm-bright) !important; }
.ecm-crc-channel-ai { border-top-color: var(--ecm-coral) !important; }
.ecm-crc-channel-top {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin-bottom: 10px !important;
}
.ecm-crc-channel-name { font-size: 13px !important; font-weight: 700 !important; color: var(--ecm-g900) !important; }
.ecm-crc-channel-rate { font-family: var(--ecm-mono) !important; font-size: 12px !important; color: var(--ecm-g500) !important; white-space: nowrap !important; }
.ecm-crc-channel-gain {
	font-family: var(--ecm-mono) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--ecm-green) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.5px !important;
	word-break: break-word !important;
}
.ecm-crc-per { font-size: 12px !important; font-weight: 500 !important; color: var(--ecm-g400) !important; }
.ecm-crc-channel-note { font-size: 11.5px !important; color: var(--ecm-g500) !important; margin-top: 8px !important; line-height: 1.35 !important; }

.ecm-crc-opportunity {
	background: rgba(52,211,153,0.10) !important;
	border: 1px solid rgba(52,211,153,0.35) !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
	margin-bottom: 18px !important;
}
.ecm-crc-opp-label { color: #0f9d6b !important; margin-bottom: 6px !important; }
.ecm-crc-opp-value {
	font-family: var(--ecm-mono) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	color: #0f9d6b !important;
	line-height: 1 !important;
}
.ecm-crc-opp-note { font-size: 13px !important; color: var(--ecm-g700) !important; margin-top: 6px !important; }

/* CTAs */
.ecm-crc-ctas { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 18px !important; }
.ecm-crc-cta {
	font-family: var(--ecm-sans) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	border-radius: 10px !important;
	padding: 12px 20px !important;
	display: inline-block !important;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease !important;
}
.ecm-crc-cta-primary { background: var(--ecm-coral) !important; color: #fff !important; }
.ecm-crc-cta-primary:hover { background: var(--ecm-coral-h) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(244,116,88,0.35) !important; }
.ecm-crc-cta-secondary { background: var(--ecm-mid) !important; color: #fff !important; }
.ecm-crc-cta-secondary:hover { background: var(--ecm-dark) !important; transform: translateY(-2px) !important; }

/* Lead capture */
.ecm-crc-lead {
	background: var(--ecm-ink) !important;
	border-radius: 14px !important;
	padding: 22px 24px !important;
}
.ecm-crc-lead-title { color: var(--ecm-light) !important; margin-bottom: 14px !important; }
.ecm-crc-lead-row { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }
.ecm-crc-email {
	flex: 1 1 220px !important;
	font-family: var(--ecm-sans) !important;
	font-size: 15px !important;
	color: #fff !important;
	background: rgba(255,255,255,0.08) !important;
	border: 1.5px solid rgba(255,255,255,0.20) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	outline: none !important;
}
.ecm-crc-email::placeholder { color: rgba(255,255,255,0.45) !important; }
.ecm-crc-email:focus { border-color: rgba(255,255,255,0.45) !important; }
.ecm-crc-lead-btn {
	font-family: var(--ecm-sans) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: var(--ecm-coral) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 24px !important;
	cursor: pointer !important;
	transition: background .15s ease, transform .15s ease !important;
}
.ecm-crc-lead-btn:hover { background: var(--ecm-coral-h) !important; transform: translateY(-2px) !important; }
.ecm-crc-lead-btn:disabled { opacity: 0.6 !important; cursor: default !important; transform: none !important; }
.ecm-crc-lead-msg { font-size: 13px !important; margin-top: 10px !important; min-height: 16px !important; color: var(--ecm-green) !important; }
.ecm-crc-lead-msg.ecm-crc-err { color: #ffb4a0 !important; }
.ecm-crc-lead-fine { font-size: 11.5px !important; color: rgba(255,255,255,0.45) !important; margin-top: 10px !important; }

/* Methodology */
.ecm-crc-method { margin-top: 16px !important; }
.ecm-crc-method-toggle {
	font-family: var(--ecm-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--ecm-mid) !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	padding: 4px 0 !important;
}
.ecm-crc-method-body {
	font-size: 13px !important;
	color: var(--ecm-g500) !important;
	background: var(--ecm-g100) !important;
	border: 1px solid var(--ecm-g200) !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
	margin-top: 8px !important;
}
.ecm-crc-method-p { margin: 0 0 8px !important; line-height: 1.5 !important; }
.ecm-crc-method-p:last-child { margin-bottom: 0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
	.ecm-crc-grid { grid-template-columns: 1fr !important; }
	.ecm-crc-inputs { border-right: none !important; border-bottom: 1px solid var(--ecm-g200) !important; }
	.ecm-crc-title { font-size: 32px !important; }
	.ecm-crc-channels { grid-template-columns: 1fr !important; }
	.ecm-crc-loss-value { font-size: 36px !important; }
}

/* ---------- v1.1 additions ---------- */
.ecm-crc-select {
	width: 100% !important;
	font-family: var(--ecm-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--ecm-g900) !important;
	background: #fff !important;
	border: 2px solid var(--ecm-g200) !important;
	border-radius: 10px !important;
	padding: 11px 12px !important;
	outline: none !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}
.ecm-crc-select:focus { border-color: var(--ecm-g900) !important; }
.ecm-crc-field-vertical { margin-bottom: 20px !important; }

.ecm-crc-context {
	font-size: 13.5px !important;
	color: var(--ecm-g700) !important;
	background: var(--ecm-g100) !important;
	border-left: 3px solid var(--ecm-mid) !important;
	border-radius: 8px !important;
	padding: 11px 14px !important;
	margin-bottom: 16px !important;
}
.ecm-crc-context-vert {
	font-family: var(--ecm-mono) !important;
	font-weight: 700 !important;
	color: var(--ecm-mid) !important;
	margin-right: 6px !important;
}
.ecm-crc-context[data-ecm-tier="top"] { border-left-color: var(--ecm-green) !important; background: rgba(52,211,153,0.08) !important; }
.ecm-crc-context[data-ecm-tier="top"] .ecm-crc-context-vert { color: #0f9d6b !important; }
.ecm-crc-context[data-ecm-tier="above"] { border-left-color: var(--ecm-green) !important; }
.ecm-crc-context[data-ecm-tier="below"] { border-left-color: var(--ecm-coral) !important; background: rgba(244,116,88,0.07) !important; }
.ecm-crc-context[data-ecm-tier="below"] .ecm-crc-context-vert { color: var(--ecm-coral-h) !important; }

.ecm-crc-net {
	font-size: 13.5px !important;
	color: var(--ecm-g700) !important;
	padding: 10px 16px !important;
	margin-bottom: 16px !important;
	border: 1px dashed var(--ecm-g300) !important;
	border-radius: 10px !important;
}
.ecm-crc-net-strong { font-weight: 700 !important; color: var(--ecm-g900) !important; margin-right: 4px !important; }

.ecm-crc-rec {
	background: var(--ecm-soft) !important;
	border-radius: 10px !important;
	padding: 14px 16px !important;
	margin-bottom: 18px !important;
	font-size: 14px !important;
	color: var(--ecm-g900) !important;
}
.ecm-crc-rec-label {
	display: block !important;
	font-family: var(--ecm-mono) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	color: var(--ecm-mid) !important;
	margin-bottom: 6px !important;
}

.ecm-crc-share-btns { display: flex !important; gap: 8px !important; }

.ecm-crc-embed-box { margin-top: 12px !important; }
.ecm-crc-embed-label { font-size: 12px !important; color: var(--ecm-g500) !important; margin-bottom: 6px !important; }
.ecm-crc-embed-code {
	width: 100% !important;
	min-height: 86px !important;
	font-family: var(--ecm-mono) !important;
	font-size: 12px !important;
	color: var(--ecm-g700) !important;
	background: #fff !important;
	border: 1.5px solid var(--ecm-g200) !important;
	border-radius: 8px !important;
	padding: 10px !important;
	resize: vertical !important;
}

.ecm-crc-attrib {
	text-align: center !important;
	font-size: 13px !important;
	color: var(--ecm-g500) !important;
	padding: 14px 0 4px !important;
}
.ecm-crc-attrib a { color: var(--ecm-mid) !important; font-weight: 600 !important; text-decoration: none !important; }
.ecm-crc-attrib a:hover { text-decoration: underline !important; }

/* Embed mode: edge-to-edge inside the iframe */
.ecm-crc-embed { max-width: 100% !important; }

/* ---------- Data Study stats block ([ecm_cart_recovery_stats]) ---------- */
.ecm-crc-stats {
	background: #fff !important;
	border: 1px solid var(--ecm-g200) !important;
	border-radius: 18px !important;
	overflow: hidden !important;
}
.ecm-crc-stats-head {
	background: linear-gradient(155deg, #2d1b69 0%, #3a2280 30%, #5b3fb5 65%, #7c5fd6 100%) !important;
	padding: 28px 28px 24px !important;
	color: #fff !important;
}
.ecm-crc-stats-title {
	font-family: var(--ecm-serif) !important;
	font-size: 32px !important;
	line-height: 1.1 !important;
	color: #fff !important;
	margin: 8px 0 6px !important;
}
.ecm-crc-stats-sub { font-size: 14px !important; color: rgba(255,255,255,0.78) !important; }
.ecm-crc-stats-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1px !important;
	background: var(--ecm-g200) !important;
}
.ecm-crc-stat { background: #fff !important; padding: 22px 24px !important; }
.ecm-crc-stat-num {
	font-family: var(--ecm-mono) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	color: var(--ecm-mid) !important;
	letter-spacing: -0.5px !important;
	line-height: 1 !important;
}
.ecm-crc-stat-cap { font-size: 12.5px !important; color: var(--ecm-g500) !important; margin-top: 8px !important; line-height: 1.4 !important; }
.ecm-crc-stats-vtable { padding: 8px 24px 4px !important; }
.ecm-crc-stats-vrow {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr 1fr !important;
	gap: 10px !important;
	padding: 11px 0 !important;
	border-bottom: 1px solid var(--ecm-g100) !important;
	font-size: 13.5px !important;
	color: var(--ecm-g700) !important;
}
.ecm-crc-stats-vrow span:nth-child(2), .ecm-crc-stats-vrow span:nth-child(3) { font-family: var(--ecm-mono) !important; text-align: right !important; }
.ecm-crc-stats-vhead {
	font-family: var(--ecm-mono) !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	color: var(--ecm-g400) !important;
}
.ecm-crc-stats-vhead span { font-family: var(--ecm-mono) !important; }
.ecm-crc-stats-foot { padding: 14px 24px 20px !important; font-size: 11.5px !important; color: var(--ecm-g400) !important; line-height: 1.45 !important; }
@media (max-width: 820px) {
	.ecm-crc-stats-grid { grid-template-columns: 1fr !important; }
	.ecm-crc-stats-title { font-size: 26px !important; }
}