/* AskMoli ROI calculator — the interactive layer the inline styles can't express
   (form controls, hover/focus states, responsive collapse). Tokens come from
   /askmoli/v2/landing.css, which the page loads first. */

/* ---------- inputs ---------- */
.moli-input {
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	background: #fff;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	padding: 10px 12px;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.moli-input:hover { border-color: #C3B7E8; }
.moli-input:focus {
	outline: none;
	border-color: var(--indigo-core);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

/* ---------- range slider ---------- */
.moli-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	cursor: pointer;
	background:
		linear-gradient(90deg, #7C3AED, #3B82F6) 0 / var(--fill, 50%) 100% no-repeat,
		#EDEBF6;
}
.moli-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid var(--indigo-core);
	box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
	transition: transform var(--dur) var(--ease);
}
.moli-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.moli-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid var(--indigo-core);
	box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}
.moli-range:focus-visible { outline: 2px solid var(--indigo-core); outline-offset: 4px; }

/* ---------- toggle ---------- */
.moli-toggle {
	position: relative;
	flex: none;
	width: 44px;
	height: 25px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
	background: #DCD9EA;
	transition: background var(--dur) var(--ease);
}
.moli-toggle[data-on="true"] { background: linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%); }
.moli-toggle span {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 19px;
	height: 19px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(11, 6, 32, 0.28);
	transition: transform var(--dur) var(--ease);
}
.moli-toggle[data-on="true"] span { transform: translateX(19px); }

/* ---------- table ---------- */
.moli-table { width: 100%; border-collapse: collapse; }
.moli-table th, .moli-table td { padding: 11px 22px; }
.moli-table tbody tr { border-top: 1px solid #EDEEF6; }
.moli-table tbody tr:hover { background: #FBFAFE; }

/* ---------- CTA ---------- */
.moli-cta { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.moli-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(124, 58, 237, 0.38); }
.moli-cta-light:hover { box-shadow: 0 14px 32px rgba(11, 6, 32, 0.34); }

/* ---------- spinner ---------- */
.moli-spinner {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 2.5px solid rgba(124, 58, 237, 0.18);
	border-top-color: var(--indigo-core);
	animation: moli-spin 0.7s linear infinite;
}
@keyframes moli-spin { to { transform: rotate(360deg); } }

/* ---------- overflow guards ----------
   Grid/flex children default to min-width:auto, so the wide comparison table
   would stretch the page instead of scrolling inside its own card. */
.moli-calc-grid > *, .moli-results > * { min-width: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
	.moli-calc-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
	.moli-kpis { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
	.moli-split { grid-template-columns: 1fr !important; }
	.moli-comm-grid { grid-template-columns: 1fr !important; }
	.moli-table th, .moli-table td { padding: 10px 14px; }
}
@media (max-width: 390px) {
	.moli-kpis { grid-template-columns: 1fr !important; }
}