/*
 * Financials Calculator — front-end styles
 * Plugin: Financials Calculator | Author: Protean | Version: 1.1.0
 *
 * CUSTOMISATION GUIDE
 * ───────────────────
 * Override any of the CSS custom properties below in your theme's
 * Custom CSS panel to match your site's brand — no file edits needed.
 */

:root {
	--fc-btn-bg:          #e07020; /* Button background colour        */
	--fc-btn-bg-hover:    #fcab3f; /* Button background on hover      */
	--fc-btn-text:        #ffffff; /* Button label colour             */
	--fc-btn-radius:      4px;     /* Button corner rounding          */
	--fc-btn-padding:     12px 40px;
	--fc-btn-font-size:   1em;
}

/* ── Wrapper ── */
.fc-calculator {
	max-width: 900px;
	font-family: inherit;
	color: inherit;
	line-height: 1.5;
}

/* ── Question heading ── */
.fc-question {
	margin: 0 0 1.2em;
	font-size: 1.05em;
}

/* ── Age-group row — horizontal layout on desktop ── */
.fc-age-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 2.5em;
	margin-bottom: 1.6em;
	align-items: center;
}

/*
 * Each group: label and select sit side by side on one line.
 * On mobile this switches to a full-width stacked row (see media query).
 */
.fc-age-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.6em;
}

/* ── Labels ── */
.fc-age-label {
	font-weight: 600;
	font-size: 0.95em;
	white-space: nowrap;
}

/* ── Select / dropdown ── */
.fc-selector {
	width: 72px;
	padding: 6px 8px;
	font-size: 1em;
	font-family: inherit;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #fff;
	cursor: pointer;
	appearance: auto; /* Keep native dropdown arrow for accessibility */
}

/* ── Estimate button ── */
.fc-estimate-btn {
	display: inline-block;
	background-color: var(--fc-btn-bg);
	color: var(--fc-btn-text);
	border: none;
	border-radius: var(--fc-btn-radius);
	padding: var(--fc-btn-padding);
	font-size: var(--fc-btn-font-size);
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease;
	margin-bottom: 1.4em;
}

.fc-estimate-btn:hover,
.fc-estimate-btn:focus-visible {
	background-color: var(--fc-btn-bg-hover);
	outline: none;
}

/* ── Result wrapper (hidden until Estimate is clicked) ── */
.fc-result-wrapper {
	margin-top: 0.5em;
}

/* ── "You could receive..." line ── */
.fc-result {
	margin: 0 0 0.75em;
	font-size: 1.05em;
}

.fc-result .fc-total {
	font-weight: 700;
}

/* ── Disclaimer paragraphs ── */
.fc-disclaimer {
	margin: 0 0 0.5em;
	font-size: 0.82em;
	color: inherit;
	line-height: 1.5;
}

.fc-disclaimer:last-child {
	margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────
 * RESPONSIVE — mobile: one row per age group (label + selector
 * stay on the same line, but groups stack vertically)
 * ───────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.fc-age-groups {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75em;
	}

	/* Each group already has flex-direction: row, so label and
	   selector remain on one line — we just make the group full width. */
	.fc-age-group {
		width: 100%;
		justify-content: space-between;
		max-width: 280px;
	}

	.fc-estimate-btn {
		width: 100%;
		max-width: 280px;
	}
}