/**
 * Shared interaction contract for the public non-NT calculators.
 *
 * Every selector is rooted in one of the four opted-in calculator modules.
 * The housing-market comparison module deliberately has no matching selector
 * and never enqueues this file.
 */

:root {
	--ff-calculator-ui-navy: #173a63;
	--ff-calculator-ui-navy-dark: #0f2948;
	--ff-calculator-ui-gold: #c5a15a;
	--ff-calculator-ui-gold-dark: #ad8743;
	--ff-calculator-ui-radius: 12px;
	--ff-calculator-ui-control-height: 50px;
}

/* Equal primary and secondary actions on dark calculator heroes. */
:where(
	.ff-spc-hero-actions,
	.ff-pvi-v5-hero-actions,
	.ff-iac .hero-actions
) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

:where(
	.ff-spc-hero-actions,
	.ff-pvi-v5-hero-actions,
	.ff-iac .hero-actions
) > :where(.wp-block-button, a) {
	display: flex;
	align-items: stretch;
}

:where(
	.ff-spc-hero-actions a,
	.ff-pvi-v5-hero-actions .wp-block-button__link,
	.ff-iac .hero-actions .btn,
	.ff-iac .hero-actions .hero-link
) {
	box-sizing: border-box;
	min-width: 210px;
	min-height: var(--ff-calculator-ui-control-height) !important;
	padding: 12px 20px !important;
	border: 1px solid transparent !important;
	border-radius: var(--ff-calculator-ui-radius) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans, "Montserrat", Arial, sans-serif) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

:where(
	.ff-spc-hero-actions .ff-spc-button-primary a,
	.ff-pvi-v5-hero-actions .ff-pvi-v5-primary-action .wp-block-button__link,
	.ff-iac .hero-actions .btn-primary
) {
	border-color: var(--ff-calculator-ui-gold) !important;
	background: linear-gradient(135deg, var(--ff-calculator-ui-gold), var(--ff-calculator-ui-gold-dark)) !important;
	box-shadow: 0 13px 30px rgba(197, 161, 90, 0.24) !important;
	color: var(--ff-calculator-ui-navy-dark) !important;
}

:where(
	.ff-spc-hero-actions .ff-spc-button-link a,
	.ff-pvi-v5-hero-actions .ff-pvi-v5-link-action .wp-block-button__link,
	.ff-iac .hero-actions .hero-link
) {
	border-color: rgba(255, 255, 255, 0.48) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	box-shadow: none !important;
	color: #fff !important;
}

:where(
	.ff-spc-hero-actions a,
	.ff-pvi-v5-hero-actions .wp-block-button__link,
	.ff-iac .hero-actions .btn,
	.ff-iac .hero-actions .hero-link
):hover {
	transform: translateY(-1px);
}

:where(
	.ff-spc-hero-actions .ff-spc-button-primary a,
	.ff-pvi-v5-hero-actions .ff-pvi-v5-primary-action .wp-block-button__link,
	.ff-iac .hero-actions .btn-primary
):hover {
	background: linear-gradient(135deg, #d0ae69, #b28b47) !important;
	box-shadow: 0 16px 34px rgba(197, 161, 90, 0.3) !important;
}

:where(
	.ff-spc-hero-actions .ff-spc-button-link a,
	.ff-pvi-v5-hero-actions .ff-pvi-v5-link-action .wp-block-button__link,
	.ff-iac .hero-actions .hero-link
):hover {
	border-color: rgba(255, 255, 255, 0.72) !important;
	background: rgba(255, 255, 255, 0.15) !important;
}

/* The action which produces a calculator result is always navy. */
:where(
	.ff-spc .ff-spc-submit,
	.ff-loan-invest .ff-loan-invest__submit,
	.ff-iac #ff-iac-calculate
) {
	box-sizing: border-box;
	width: 100%;
	min-height: 53px !important;
	padding: 13px 18px !important;
	border: 1px solid var(--ff-calculator-ui-navy) !important;
	border-radius: var(--ff-calculator-ui-radius) !important;
	background: var(--ff-calculator-ui-navy) !important;
	box-shadow: 0 12px 27px rgba(23, 58, 99, 0.22) !important;
	color: #fff !important;
	font-family: var(--font-sans, "Montserrat", Arial, sans-serif) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
}

:where(
	.ff-spc .ff-spc-submit,
	.ff-loan-invest .ff-loan-invest__submit,
	.ff-iac #ff-iac-calculate
):hover {
	border-color: var(--ff-calculator-ui-navy-dark) !important;
	background: var(--ff-calculator-ui-navy-dark) !important;
	box-shadow: 0 15px 32px rgba(15, 41, 72, 0.28) !important;
	transform: translateY(-1px);
}

/* Result edit/reset actions share a compact outlined treatment. */
:where(
	.ff-spc .ff-spc-edit,
	.ff-loan-invest .ff-loan-invest__edit,
	.ff-loan-invest .ff-loan-invest__reset,
	.ff-iac #ff-iac-edit
) {
	box-sizing: border-box;
	min-height: 44px !important;
	padding: 10px 16px !important;
	border: 1px solid #9eb4cd !important;
	border-radius: var(--ff-calculator-ui-radius) !important;
	background: #fff !important;
	color: var(--ff-calculator-ui-navy) !important;
	font-family: var(--font-sans, "Montserrat", Arial, sans-serif) !important;
	font-size: 13px !important;
	font-weight: 750 !important;
	line-height: 1.2 !important;
}

/* Portfolio-management and consultation choices carry equal visual weight. */
:where(
	.calculator-consult-cta__actions,
	.ff-spc-choice-grid,
	.ff-pvi-v5-choice-grid,
	.ff-iac .consult-choice-grid
) {
	align-items: stretch;
}

.calculator-consult-cta__actions .button,
.ff-iac .consult-choice {
	box-sizing: border-box;
	min-height: 104px !important;
	border-radius: 14px !important;
}

.calculator-consult-cta__actions .button {
	flex: 1 1 240px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 20px !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	text-align: center;
}

/* Final service buttons inside II-pillar and loan choice cards. */
.ff-pvi-v5-choice-card .ff-pvi-v5-choice-action,
.ff-pvi-v5-choice-card .ff-pvi-v5-choice-action .wp-block-button {
	width: 100%;
}

body .ff-spc-choice-card .ff-spc-cta-buttons a,
.ff-pvi-v5-choice-card .ff-pvi-v5-choice-action .wp-block-button__link,
.ff-pvi-v5-management-action .wp-block-button__link,
.ff-pvi-v5-consultation-action .wp-block-button__link {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--ff-calculator-ui-control-height) !important;
	padding: 12px 20px !important;
	border: 1px solid var(--ff-calculator-ui-navy) !important;
	border-radius: var(--ff-calculator-ui-radius) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--ff-calculator-ui-navy) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: var(--font-sans, "Montserrat", Arial, sans-serif) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
}

body .ff-spc-choice-card .ff-spc-cta-buttons a:hover,
.ff-pvi-v5-choice-card .ff-pvi-v5-choice-action .wp-block-button__link:hover,
.ff-pvi-v5-management-action .wp-block-button__link:hover,
.ff-pvi-v5-consultation-action .wp-block-button__link:hover {
	border-color: var(--ff-calculator-ui-navy-dark) !important;
	background: var(--ff-calculator-ui-navy-dark) !important;
	transform: translateY(-1px);
}

:where(
	.ff-spc-hero-actions a,
	.ff-pvi-v5-hero-actions .wp-block-button__link,
	.ff-iac .hero-actions .btn,
	.ff-iac .hero-actions .hero-link,
	.ff-spc .ff-spc-submit,
	.ff-loan-invest .ff-loan-invest__submit,
	.ff-iac #ff-iac-calculate,
	.ff-spc .ff-spc-edit,
	.ff-loan-invest .ff-loan-invest__edit,
	.ff-loan-invest .ff-loan-invest__reset,
	.ff-iac #ff-iac-edit,
	.calculator-consult-cta__actions .button,
	.ff-iac .consult-choice,
	body .ff-spc-choice-card .ff-spc-cta-buttons a,
	.ff-pvi-v5-choice-card .ff-pvi-v5-choice-action .wp-block-button__link,
	.ff-pvi-v5-management-action .wp-block-button__link,
	.ff-pvi-v5-consultation-action .wp-block-button__link
):focus-visible {
	outline: 3px solid rgba(197, 161, 90, 0.72) !important;
	outline-offset: 3px;
}

@media (max-width: 640px) {
	:where(
		.ff-spc-hero-actions,
		.ff-pvi-v5-hero-actions,
		.ff-iac .hero-actions
	) {
		flex-direction: column;
		align-items: stretch;
	}

	:where(
		.ff-spc-hero-actions > .wp-block-button,
		.ff-pvi-v5-hero-actions > .wp-block-button,
		.ff-spc-hero-actions a,
		.ff-pvi-v5-hero-actions .wp-block-button__link,
		.ff-iac .hero-actions .btn,
		.ff-iac .hero-actions .hero-link
	) {
		width: 100% !important;
		min-width: 0;
	}
}