/* ==========================================================================
   Smartland Infographics — Compound Interest Calculator
   Scoped entirely under .sld-infographic to avoid conflicts with WordPress
   themes, other plugins, or the block editor.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   CSS Custom Properties (scoped to the component — no :root pollution)
--------------------------------------------------------------------------- */
.sld-infographic {
	--sld-pink:       #EB146E;
	--sld-pink-soft:  #ee237a;
	--sld-ink:        #1a1a1a;
	--sld-text:       #2b2b2b;
	--sld-muted:      #8a8a8a;
	--sld-border:     #e6e6e6;
	--sld-field-bg:   #f0f0f0;
	--sld-row-alt:    #f3f3f3;
	--sld-white:      #fff;
	--sld-shadow:     0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .04);
	--sld-radius:     6px;
	--sld-transition: 180ms ease;

	/* Base typography — scoped so it doesn't bleed into the theme */
	font-family: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: var(--sld-text);
	-webkit-font-smoothing: antialiased;
	line-height: 1.45;
}

/* Box-model reset scoped to the component */
.sld-infographic *,
.sld-infographic *::before,
.sld-infographic *::after {
	box-sizing: border-box;
}

.sld-infographic img  { max-width: 100%; display: block; }
.sld-infographic button { font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------------------
   Layout — the outer wrapper for this module
--------------------------------------------------------------------------- */
.sld-infographic--cic {
	max-width: 960px;
	margin:    0 auto;
	display:   flex;
	flex-direction: column;
	gap:       28px;
}

/* ---------------------------------------------------------------------------
   Card
--------------------------------------------------------------------------- */
.sld-infographic .sld-card {
	background:    var(--sld-white);
	border-radius: var(--sld-radius);
	box-shadow:    var(--sld-shadow);
	overflow:      hidden;
}

.sld-infographic .sld-card__head {
	padding:       22px 28px;
	border-bottom: 1px solid var(--sld-border);
}

.sld-infographic .sld-card__title {
	margin:         0;
	font-weight:    800;
	font-size:      26px;
	letter-spacing: -0.01em;
	color:          var(--sld-ink);
	/* Reset any h1/h2 margin a theme might add */
	line-height:    1.2;
}

.sld-infographic .sld-card__body {
	padding: 22px 28px 28px;
}

/* ---------------------------------------------------------------------------
   Form field rows
--------------------------------------------------------------------------- */
.sld-infographic .sld-field {
	display:               grid;
	grid-template-columns: 240px 1fr;
	align-items:           center;
	gap:                   16px;
	padding:               10px 0;
}

.sld-infographic .sld-field__label {
	display:     flex;
	align-items: center;
	gap:         14px;
	font-size:   16px;
	color:       var(--sld-ink);
	font-weight: 400;
	margin:      0; /* reset theme label margins */
}

.sld-infographic .sld-field__icon {
	width:       28px;
	height:      28px;
	flex:        0 0 28px;
	object-fit:  contain;
}

.sld-infographic .sld-field__control {
	position:    relative;
	display:     flex;
	align-items: center;
}

.sld-infographic .sld-field__unit {
	flex:        0 0 auto;
	font-weight: 700;
	color:       var(--sld-ink);
	font-size:   18px;
	line-height: 1;
	padding:     0 14px;
	border-left: 1px solid var(--sld-border);
	align-self:  stretch;
	display:     inline-flex;
	align-items: center;
}

.sld-infographic .sld-field__control > input,
.sld-infographic .sld-field__control > select {
	flex:      1 1 auto;
	min-width: 0;
}

.sld-infographic .sld-field__control input,
.sld-infographic .sld-field__control select {
	width:       100%;
	border:      1px solid transparent;
	background:  var(--sld-field-bg);
	border-radius: 4px;
	padding:     12px 14px;
	font-size:   15px;
	color:       var(--sld-text);
	font-family: inherit;
	transition:  border-color var(--sld-transition),
	             background   var(--sld-transition),
	             box-shadow   var(--sld-transition);
	/* Reset theme input styles */
	outline:     none;
	box-shadow:  none;
	line-height: 1.4;
}

.sld-infographic .sld-field__control input::placeholder {
	color: #9a9a9a;
}

.sld-infographic .sld-field__control input:focus,
.sld-infographic .sld-field__control select:focus {
	outline:      none;
	border-color: var(--sld-pink);
	background:   #fff;
	box-shadow:   0 0 0 3px rgba(235, 20, 110, .12);
}

.sld-infographic .sld-field__control input.is-invalid {
	border-color: var(--sld-pink);
	background:   #fff5f8;
}

/* Custom select arrow */
.sld-infographic .sld-field__control--select select {
	appearance:          none;
	-webkit-appearance:  none;
	background-image:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23EB146E' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
	background-repeat:   no-repeat;
	background-position: right 14px center;
	background-size:     12px;
	background-color:    #fff;
	padding-right:       38px;
	border-color:        var(--sld-pink);
}

/* ---------------------------------------------------------------------------
   Inline / checkbox row
--------------------------------------------------------------------------- */
.sld-infographic .sld-field--inline {
	grid-template-columns: 240px 1fr;
	padding-top: 14px;
}

.sld-infographic .sld-field--inline .sld-checkbox {
	grid-column: 1 / -1;
}

.sld-infographic .sld-checkbox {
	display:     inline-flex;
	align-items: center;
	gap:         10px;
	cursor:      pointer;
	user-select: none;
	font-size:   15px;
	color:       var(--sld-ink);
}

/* Visually hidden native checkbox */
.sld-infographic .sld-checkbox input[type="checkbox"] {
	position:       absolute;
	opacity:        0;
	pointer-events: none;
	width:          1px;
	height:         1px;
}

.sld-infographic .sld-checkbox__box {
	width:          18px;
	height:         18px;
	border:         1.5px solid var(--sld-pink);
	border-radius:  3px;
	display:        inline-block;
	position:       relative;
	flex-shrink:    0;
	transition:     background var(--sld-transition);
}

.sld-infographic .sld-checkbox input[type="checkbox"]:checked + .sld-checkbox__box {
	background: var(--sld-pink);
}

.sld-infographic .sld-checkbox input[type="checkbox"]:checked + .sld-checkbox__box::after {
	content:       '';
	position:      absolute;
	left:          5px;
	top:           1px;
	width:         5px;
	height:        10px;
	border:        solid #fff;
	border-width:  0 2px 2px 0;
	transform:     rotate(45deg);
}

.sld-infographic .sld-checkbox input[type="checkbox"]:focus-visible + .sld-checkbox__box {
	box-shadow: 0 0 0 3px rgba(235, 20, 110, .2);
}

/* ---------------------------------------------------------------------------
   Actions (button row)
--------------------------------------------------------------------------- */
.sld-infographic .sld-actions {
	display:    flex;
	gap:        12px;
	margin-top: 18px;
	flex-wrap:  wrap;
}

.sld-infographic .sld-btn {
	border-radius:  4px;
	padding:        12px 28px;
	font-weight:    700;
	font-size:      15px;
	border:         1.5px solid var(--sld-pink);
	letter-spacing: 0.02em;
	transition:     transform     var(--sld-transition),
	                background    var(--sld-transition),
	                color         var(--sld-transition),
	                box-shadow    var(--sld-transition);
	text-decoration: none;
	display:        inline-block;
}

.sld-infographic .sld-btn--primary {
	background: var(--sld-pink);
	color:      #fff;
}

.sld-infographic .sld-btn--primary:hover {
	background: var(--sld-pink-soft);
	box-shadow: 0 6px 18px rgba(235, 20, 110, .25);
}

.sld-infographic .sld-btn--primary:active {
	transform: translateY(1px);
}

.sld-infographic .sld-btn--ghost {
	background: #fff;
	color:      var(--sld-pink);
}

.sld-infographic .sld-btn--ghost:hover {
	background: #fff5f8;
}

/* ---------------------------------------------------------------------------
   Summary KPI row
--------------------------------------------------------------------------- */
.sld-infographic .sld-summary {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   14px;
	margin-bottom:         22px;
}

.sld-infographic .sld-summary__item {
	border:        1px solid var(--sld-border);
	border-radius: var(--sld-radius);
	padding:       16px 18px;
	background:    #fff;
	transition:    transform     var(--sld-transition),
	               box-shadow    var(--sld-transition),
	               border-color  var(--sld-transition);
}

.sld-infographic .sld-summary__item:hover {
	border-color: var(--sld-pink);
	box-shadow:   0 6px 18px rgba(0, 0, 0, .05);
}

.sld-infographic .sld-summary__label {
	display:        block;
	font-size:      12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color:          var(--sld-muted);
	margin-bottom:  6px;
}

.sld-infographic .sld-summary__value {
	display:     block;
	font-size:   22px;
	font-weight: 800;
	color:       var(--sld-ink);
}

/* ---------------------------------------------------------------------------
   Chart
--------------------------------------------------------------------------- */
.sld-infographic .sld-chart-wrap {
	padding:    8px 0 18px;
	min-height: 240px;
}

/* ---------------------------------------------------------------------------
   Yearly breakdown table
--------------------------------------------------------------------------- */
.sld-infographic .sld-table-wrap {
	overflow-x: auto;
}

.sld-infographic .sld-results-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       15px;
}

.sld-infographic .sld-results-table th,
.sld-infographic .sld-results-table td {
	padding:    14px 16px;
	text-align: left;
}

.sld-infographic .sld-results-table thead th {
	font-weight:   700;
	color:         var(--sld-ink);
	border-bottom: 1px solid var(--sld-border);
}

.sld-infographic .sld-results-table tbody tr {
	transition: background var(--sld-transition);
}

.sld-infographic .sld-results-table tbody tr:nth-child(even) {
	background: var(--sld-row-alt);
}

.sld-infographic .sld-results-table tbody tr.is-final {
	outline:        1.5px solid var(--sld-pink);
	outline-offset: -1px;
	font-weight:    700;
	color:          var(--sld-ink);
}

.sld-infographic .sld-empty {
	text-align: center;
	color:      var(--sld-muted);
	padding:    28px 16px;
}

/* ---------------------------------------------------------------------------
   Conclusion / final summary
--------------------------------------------------------------------------- */
.sld-infographic .sld-conclusion {
	margin-top: 22px;
}

.sld-infographic .sld-conclusion__title {
	font-weight: 800;
	color:       var(--sld-ink);
	margin:      0 0 8px;
}

.sld-infographic .sld-conclusion__list {
	list-style: none;
	padding:    0;
	margin:     0;
	display:    grid;
	gap:        4px;
	font-size:  15px;
}

.sld-infographic .sld-conclusion__list span {
	color: var(--sld-muted);
}

.sld-infographic .sld-conclusion__list strong {
	color: var(--sld-ink);
}

/* ---------------------------------------------------------------------------
   Animations
--------------------------------------------------------------------------- */
@keyframes sld-fade-up {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.sld-infographic .sld-animate-in {
	animation: sld-fade-up .35s ease both;
}

/* ---------------------------------------------------------------------------
   Responsive — mobile
--------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.sld-infographic--cic {
		padding: 18px 14px 48px;
		gap:     18px;
	}

	.sld-infographic .sld-card__head,
	.sld-infographic .sld-card__body {
		padding-left:  18px;
		padding-right: 18px;
	}

	.sld-infographic .sld-card__title {
		font-size: 22px;
	}

	.sld-infographic .sld-field {
		grid-template-columns: 1fr;
		gap:         8px;
		padding:     8px 0 14px;
		border-bottom: 1px solid #f1f1f1;
	}

	/* Hide the desktop unit badge; mobile shows it via CSS ::before */
	.sld-infographic .sld-field__unit {
		display: none;
	}

	/* Show unit inline inside the input via data-unit attribute */
	.sld-infographic .sld-field__control::before {
		content:       attr(data-unit);
		position:      absolute;
		left:          12px;
		top:           50%;
		transform:     translateY(-50%);
		color:         var(--sld-ink);
		font-weight:   700;
		pointer-events: none;
		font-size:     15px;
	}

	.sld-infographic .sld-field__control[data-unit] input {
		padding-left: 30px;
	}

	.sld-infographic .sld-field--inline {
		grid-template-columns: 1fr;
	}

	.sld-infographic .sld-summary {
		grid-template-columns: 1fr;
	}

	.sld-infographic .sld-actions .sld-btn {
		flex: 1;
	}
}