/*
 * Shared styles for MCW Calculator Widgets.
 *
 * Colour scheme:
 *   --mcw-accent / --mcw-accent-dark / --mcw-accent-rgb   override per widget type.
 *
 * Slider fill:
 *   --mcw-fill is written by JS (syncFill) onto each <input type=range>.
 *   It propagates into ::-webkit-slider-runnable-track via CSS inheritance.
 *   Firefox uses ::moz-range-progress for the same effect natively.
 *
 * Adding a second widget (e.g. Investment):
 *   1. Add wrapper class .mcw-investment-calculator
 *   2. Override --mcw-accent, --mcw-accent-dark, --mcw-accent-rgb on it
 *   3. All other rules apply automatically
 */

/* ── Variables & card wrapper ─────────────────────────────────────────────── */

.mcw-calculator {
	--mcw-accent:      #9744df;
	--mcw-accent-dark: #522579;
	--mcw-accent-rgb:  151, 68, 223;  /* used in rgba() shadow values */

	--mcw-text:    #111827;
	--mcw-muted:   #6b7280;
	--mcw-border:  #e5e7eb;
	--mcw-surface: #f9fafb;

	background:    #ffffff;
	border:        1px solid var( --mcw-border );
	border-radius: 14px;
	box-shadow:
		0 1px 3px  rgba( 0, 0, 0, 0.06 ),
		0 8px 24px rgba( 0, 0, 0, 0.08 );
	padding:       2em 2.25em 1.75em;
	max-width:     540px;
	box-sizing:    border-box;
	font-family:   'Poppins', sans-serif;
	color:         var( --mcw-text );
}

/* ── Slider field ─────────────────────────────────────────────────────────── */

.mcw-calc-field {
	margin-bottom: 1.75em;
}

.mcw-calc-field label {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	gap:             0.75em;
	margin-bottom:   0.65em;
	font-size:       0.75em;
	font-weight:     600;
	color:           var( --mcw-muted );
	letter-spacing:  0.07em;
	text-transform:  uppercase;
	line-height:     1;
}

.mcw-calc-value {
	font-size:      1.6em;   /* ~1.2em of root inside the 0.75em label */
	font-weight:    700;
	color:          var( --mcw-text );
	letter-spacing: -0.02em;
	text-transform: none;
	white-space:    nowrap;
	line-height:    1;
}

/* ── Range slider — base ──────────────────────────────────────────────────── */

.mcw-slider {
	-webkit-appearance: none;
	appearance:         none;
	display:            block;
	width:              100%;
	height:             20px;      /* tall click target; visual track is thinner */
	padding:            0;
	margin:             0;
	background:         transparent; /* track painted via pseudo-elements */
	border:             none;
	outline:            none;
	cursor:             pointer;
}

.mcw-slider:focus-visible {
	outline: 2px solid var( --mcw-accent );
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── WebKit track (Chrome, Safari, Edge) ──────────────────────────────────── */
/* --mcw-fill is set by JS syncFill() on the <input> element and inherits here. */

.mcw-slider::-webkit-slider-runnable-track {
	height:        5px;
	border-radius: 2.5px;
	background:    linear-gradient(
		to right,
		var( --mcw-accent ) 0%,
		var( --mcw-accent ) var( --mcw-fill, 0% ),
		var( --mcw-border ) var( --mcw-fill, 0% ),
		var( --mcw-border ) 100%
	);
}

/* ── WebKit thumb ─────────────────────────────────────────────────────────── */

.mcw-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance:         none;
	width:              22px;
	height:             22px;
	margin-top:         -8.5px;  /* (22 − 5) / 2 to centre on 5 px track */
	border-radius:      50%;
	background:         var( --mcw-accent );
	box-shadow:
		0 0 0 3px #ffffff,
		0 2px 8px rgba( var( --mcw-accent-rgb ), 0.35 );
	cursor:     grab;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mcw-slider:hover::-webkit-slider-thumb,
.mcw-slider:focus::-webkit-slider-thumb {
	transform:  scale( 1.1 );
	box-shadow:
		0 0 0 3px #ffffff,
		0 4px 14px rgba( var( --mcw-accent-rgb ), 0.5 );
}

.mcw-slider:active::-webkit-slider-thumb {
	cursor:    grabbing;
	transform: scale( 1.18 );
}

/* ── Firefox track & fill ────────────────────────────────────────────────────*/

.mcw-slider::-moz-range-track {
	height:        5px;
	border-radius: 2.5px;
	background:    var( --mcw-border );
	border:        none;
}

/* Filled portion up to the thumb (non-standard but widely supported in FF) */
.mcw-slider::-moz-range-progress {
	height:        5px;
	border-radius: 2.5px;
	background:    var( --mcw-accent );
}

/* ── Firefox thumb ────────────────────────────────────────────────────────── */

.mcw-slider::-moz-range-thumb {
	width:         22px;
	height:        22px;
	border-radius: 50%;
	border:        3px solid #ffffff;  /* white ring without affecting layout */
	background:    var( --mcw-accent );
	box-sizing:    border-box;
	cursor:        grab;
	transition:    transform 0.15s ease;
}

.mcw-slider:hover::-moz-range-thumb {
	transform: scale( 1.1 );
}

/* ── Interest rate info ───────────────────────────────────────────────────── */

.mcw-calc-rate {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             0.35em;
	margin-top:      0.25em;   /* breathe after second slider */
	padding:         0.6em 1em;
	background:      var( --mcw-surface );
	border:          1px solid var( --mcw-border );
	border-radius:   8px;
	font-size:       0.82em;
	color:           var( --mcw-muted );
	line-height:     1;
}

.mcw-calc-rate strong {
	color:       var( --mcw-text );
	font-weight: 600;
}

/* ── Result — dominant visual element ────────────────────────────────────── */

.mcw-calc-result {
	margin-top:    1.25em;
	padding:       1.4em 1.75em 1.5em;
	background:    linear-gradient( 135deg, var( --mcw-accent-dark ) 0%, var( --mcw-accent ) 100% );
	border-radius: 10px;
	text-align:    center;
	color:         #ffffff;
}

.mcw-result-label {
	display:        block;
	font-size:      0.68em;
	font-weight:    600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity:        0.8;
	margin-bottom:  0.5em;
}

.mcw-result-value {
	display:        block;
	font-size:      2.1em;
	font-weight:    800;
	letter-spacing: -0.03em;
	line-height:    1.1;
}

/* ── Disclaimer ───────────────────────────────────────────────────────────── */

.mcw-disclaimer {
	margin-top:  1em;
	font-size:   0.7em;
	line-height: 1.55;
	color:       var( --mcw-muted );
	text-align:  center;
	opacity:     0.75;
}

/* ── Inline-editable loan amount ──────────────────────────────────────────── */
/* Looks identical to static text at rest; a thin accent underline appears on
   focus so the user knows the value is editable. contenteditable="true" on
   the span drives the edit behaviour; all typography is inherited from
   .mcw-calc-value so no separate font/size/colour declarations are needed. */

.mcw-loan-inline {
	cursor:         text;
	border-bottom:  2px solid transparent;
	padding-bottom: 1px;
	outline:        none;
	transition:     border-bottom-color 0.15s ease;
}

.mcw-loan-inline:focus {
	border-bottom-color: var( --mcw-accent );
}

/* ── Investment calculator — wider card ───────────────────────────────────── */

.mcw-investment-calculator {
	max-width: 900px;
}

/* ── Two-column layout (controls | output) ───────────────────────────────── */

.mcw-inv-layout {
	display:               grid;
	grid-template-columns: 1fr 1.65fr;
	gap:                   2em;
	/* align-items: stretch (default) lets both columns reach the same height,
	   which is required for margin-top:auto on the result box to work. */
}

@media ( max-width: 640px ) {
	.mcw-inv-layout {
		grid-template-columns: 1fr;
	}
}

/* ── Left column: flex-column so result box sits flush at the bottom ─────── */

.mcw-inv-controls {
	display:        flex;
	flex-direction: column;
}

/* ── Number inputs (lump sum + monthly) ──────────────────────────────────── */

.mcw-inv-controls .mcw-calc-field {
	margin-bottom: 1.4em;
}

/* ── Result box in left column ───────────────────────────────────────────── */
/* margin-top: auto pushes the box to the bottom of the flex column, so it
   aligns with the base of the chart on the right regardless of content height. */

.mcw-inv-controls .mcw-calc-result {
	margin-top: auto;
	padding:    1.1em 1.25em 1.2em;
}

/* Slightly smaller value number to fit the narrower left column comfortably. */
.mcw-inv-controls .mcw-result-value {
	font-size: 1.75em;
}

.mcw-inv-input-wrap {
	display:    flex;
	align-items: stretch;
	border:      1px solid var( --mcw-border );
	border-radius: 8px;
	background:  var( --mcw-surface );
	overflow:    hidden;
	transition:  box-shadow 0.15s ease, border-color 0.15s ease;
}

.mcw-inv-input-wrap:focus-within {
	border-color: var( --mcw-accent );
	box-shadow:   0 0 0 2px rgba( var( --mcw-accent-rgb ), 0.18 );
}

.mcw-inv-input-wrap input {
	flex:        1;
	min-width:   0;
	border:      none;
	background:  transparent;
	padding:     0.65em 0.75em;
	font-size:   1em;
	font-family: 'Poppins', sans-serif;
	color:       var( --mcw-text );
	outline:     none;
	-moz-appearance: textfield;
}

.mcw-inv-input-wrap input::-webkit-inner-spin-button,
.mcw-inv-input-wrap input::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.mcw-inv-input-suffix {
	display:      flex;
	align-items:  center;
	padding:      0 0.75em;
	font-size:    0.83em;
	font-weight:  500;
	color:        var( --mcw-muted );
	white-space:  nowrap;
	border-left:  1px solid var( --mcw-border );
	flex-shrink:  0;
}

/* ── Risk profile marks ──────────────────────────────────────────────────── */
/* The range thumb is 22px wide, so its centre sits 11px inset from each edge.
   padding: 0 11px shrinks the label container to match the thumb travel range,
   then 3 equal grid cells place each label directly under its thumb stop.    */

.mcw-inv-risk-marks {
	display:               grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding:               0 11px;
	box-sizing:            border-box;
	margin-top:            0.4em;
	font-size:             0.72em;
	color:                 var( --mcw-muted );
	pointer-events:        none;
	user-select:           none;
}

.mcw-inv-risk-marks span {
	transition: color 0.2s, font-weight 0.2s;
}

.mcw-inv-risk-marks span:nth-child(1) { text-align: left;   }
.mcw-inv-risk-marks span:nth-child(2) { text-align: center; }
.mcw-inv-risk-marks span:nth-child(3) { text-align: right;  }

.mcw-inv-risk-marks span.mcw-active {
	color:       var( --mcw-accent );
	font-weight: 600;
}

/* ── Chart wrapper ───────────────────────────────────────────────────────── */
/* Explicit height is required for maintainAspectRatio: false — Chart.js needs
   a measured container height before it can draw into the canvas. */

.mcw-inv-chart-wrap {
	position:   relative;
	height:     300px;
	margin-top: 0.75em;
}

/* ── Legend ──────────────────────────────────────────────────────────────── */

.mcw-inv-legend {
	display:    flex;
	flex-wrap:  wrap;
	gap:        0.6em 1.25em;
	margin-top: 0.75em;
	font-size:  0.75em;
	color:      var( --mcw-muted );
}

.mcw-inv-legend-item {
	display:     flex;
	align-items: center;
	gap:         0.4em;
}

.mcw-inv-legend-line {
	display:      inline-block;
	width:        22px;
	height:       3px;
	border-radius: 2px;
	flex-shrink:  0;
}

.mcw-inv-legend-expected {
	background: #9744df;
}

.mcw-inv-legend-band-line {
	background: repeating-linear-gradient(
		90deg,
		rgba( 151, 68, 223, 0.45 ) 0,
		rgba( 151, 68, 223, 0.45 ) 4px,
		transparent 4px,
		transparent 7px
	);
	height: 1.5px;
}

.mcw-inv-legend-deposits {
	background: repeating-linear-gradient(
		90deg,
		#9ca3af 0,
		#9ca3af 6px,
		transparent 6px,
		transparent 10px
	);
	height: 2px;
}

.mcw-inv-legend-band-swatch {
	display:      inline-block;
	width:        22px;
	height:       12px;
	border-radius: 3px;
	background:   rgba( 151, 68, 223, 0.12 );
	border:       1.5px dashed rgba( 151, 68, 223, 0.45 );
	flex-shrink:  0;
}