/* =========================================================
   Compound Interest Calculator — plugin stylesheet
   Uses CSS custom properties so it adapts to theme colors.
   ========================================================= */

.cic-wrapper {
	box-sizing  : border-box;
	font-family : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size   : 15px;
	color       : #1a1a1a;
	max-width   : 720px;
	margin      : 2rem auto;
	padding     : 0;
}

/* ── Metric cards ─────────────────────────────────────────── */
.cic-metrics {
	display               : grid;
	grid-template-columns : repeat( 3, minmax( 0, 1fr ) );
	gap                   : 10px;
	margin-bottom         : 1.5rem;
}

.cic-metric {
	background    : #f4f4f4;
	border-radius : 8px;
	padding       : 0.85rem 1rem;
	text-align    : center;
}

.cic-metric__label {
	display     : block;
	font-size   : 12px;
	color       : #666;
	margin-bottom: 4px;
}

.cic-metric__value {
	display     : block;
	font-size   : 20px;
	font-weight : 500;
	color       : #111;
}

.cic-metric__sub {
	display   : block;
	font-size : 11px;
	color     : #888;
	margin-top: 4px;
}

/* ── Controls ─────────────────────────────────────────────── */
.cic-controls {
	margin-bottom : 1.25rem;
}

.cic-control {
	display     : flex;
	align-items : center;
	gap         : 12px;
	margin-bottom: 12px;
}

.cic-control__label {
	font-size   : 13px;
	color       : #555;
	width       : 110px;
	flex-shrink : 0;
}

.cic-control__val {
	font-size   : 13px;
	font-weight : 500;
	min-width   : 62px;
	text-align  : right;
	color       : #111;
}

/* ── Range slider ─────────────────────────────────────────── */
.cic-range {
	-webkit-appearance : none;
	appearance         : none;
	flex               : 1;
	height             : 4px;
	background         : #ddd;
	border-radius      : 2px;
	outline            : none;
	cursor             : pointer;
	border             : none;
}

.cic-range::-webkit-slider-thumb {
	-webkit-appearance : none;
	appearance         : none;
	width              : 18px;
	height             : 18px;
	border-radius      : 50%;
	background         : #185FA5;
	cursor             : pointer;
	border             : none;
}

.cic-range::-moz-range-thumb {
	width         : 18px;
	height        : 18px;
	border-radius : 50%;
	background    : #185FA5;
	cursor        : pointer;
	border        : none;
}

.cic-range:focus {
	outline : none;
}

.cic-range:focus::-webkit-slider-thumb {
	box-shadow : 0 0 0 3px rgba( 24, 95, 165, 0.25 );
}

/* ── Legend ───────────────────────────────────────────────── */
.cic-legend {
	display         : flex;
	flex-wrap       : wrap;
	gap             : 16px;
	margin-bottom   : 8px;
	font-size       : 12px;
	color           : #666;
}

.cic-legend__item {
	display     : flex;
	align-items : center;
	gap         : 6px;
}

.cic-legend__item::before {
	content       : '';
	display       : inline-block;
	width         : 10px;
	height        : 10px;
	border-radius : 2px;
	flex-shrink   : 0;
}

.cic-legend__item--balance::before  { background : #185FA5; }
.cic-legend__item--interest::before { background : #0F6E56; }
.cic-legend__item--principal::before{ background : #B4B2A9; }

/* ── Chart ────────────────────────────────────────────────── */
.cic-chart-wrap {
	position : relative;
	width    : 100%;
	height   : 260px;
}

.cic-chart {
	display : block;
}

/* ── Responsive ───────────────────────────────────────────── */
@media ( max-width: 480px ) {
	.cic-metrics {
		grid-template-columns : repeat( 2, minmax( 0, 1fr ) );
	}

	.cic-metric:last-child {
		grid-column : span 2;
	}

	.cic-control__label {
		width     : 90px;
		font-size : 12px;
	}

	.cic-chart-wrap {
		height : 200px;
	}
}