/*
 * TradeVest Securities
 * Investment Calculators
 *
 * @package TradeVest_Securities
 */


/* =========================================================
   1. PAGE HERO
   ========================================================= */

.tv-calculators-hero {
	padding-bottom: 56px;
}


/* =========================================================
   2. CALCULATORS SECTION
   ========================================================= */

.tv-calculators-section {
	padding-top: 64px;
	padding-bottom: 80px;
}


/* =========================================================
   3. CALCULATOR GRID
   ========================================================= */

.tv-calculators-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}


/* =========================================================
   4. CALCULATOR CARD
   ========================================================= */

.tv-calculator-card {
	display: flex;
	flex-direction: column;

	min-width: 0;
	height: 100%;

	padding: 30px;

	background: var(--tv-white);

	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius-lg);

	box-shadow: var(--tv-shadow-sm);

	transition:
		transform var(--tv-transition),
		box-shadow var(--tv-transition),
		border-color var(--tv-transition);
}


.tv-calculator-card:hover {
	transform: translateY(-2px);

	border-color: var(--tv-border-dark);

	box-shadow: var(--tv-shadow-md);
}


/* =========================================================
   5. CALCULATOR HEADER
   ========================================================= */

.tv-calculator-card__header {
	margin-bottom: 26px;

	text-align: center;
}


.tv-calculator-card__title {
	margin: 0 0 7px;

	color: var(--tv-navy);

	font-size: var(--tv-text-xl);
	font-weight: var(--tv-weight-semibold);
	line-height: 1.25;
	letter-spacing: -0.02em;
}


.tv-calculator-card__description {
	max-width: 460px;

	margin: 0 auto;

	color: var(--tv-text-secondary);

	font-size: var(--tv-text-sm);
	line-height: 1.6;

	text-align: center;
}


/* =========================================================
   6. CALCULATOR FORM
   ========================================================= */

.tv-calculator-form {
	display: flex;
	flex-direction: column;
}


.tv-calculator-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}


.tv-calculator-field {
	width: 100%;
}


/* =========================================================
   7. FORM LABEL
   ========================================================= */

.tv-calculator-field .tv-form-label {
	display: block;

	margin-bottom: 7px;
}


/* =========================================================
   8. INPUT WRAPPER
   ========================================================= */

.tv-calculator-input-wrap {
	position: relative;

	width: 100%;
}


/* =========================================================
   9. CALCULATOR INPUT
   ========================================================= */

.tv-calculator-input {
	display: block;

	width: 100%;
	min-height: 50px;

	padding: 12px 14px;

	background: var(--tv-white);
	color: var(--tv-text);

	border: 1px solid var(--tv-border-dark);
	border-radius: var(--tv-radius-md);

	outline: none;

	font: inherit;
	font-size: var(--tv-text-sm);
	font-weight: var(--tv-weight-medium);

	transition:
		border-color var(--tv-transition-fast),
		box-shadow var(--tv-transition-fast);
}


.tv-calculator-input::placeholder {
	color: var(--tv-text-light);
	opacity: 1;
}


.tv-calculator-input:hover:not(:focus) {
	border-color: var(--tv-border-dark);
}


.tv-calculator-input:focus {
	border-color: var(--tv-teal);

	box-shadow: var(--tv-focus-ring);
}


.tv-calculator-input[aria-invalid="true"] {
	border-color: var(--tv-error);
}


/* =========================================================
   10. CURRENCY PREFIX
   ========================================================= */

.tv-calculator-input-wrap:has(
	.tv-calculator-input-prefix
) .tv-calculator-input {
	padding-left: 36px;
}


.tv-calculator-input-prefix {
	position: absolute;

	left: 14px;
	top: 50%;
	z-index: 1;

	color: var(--tv-text-secondary);

	font-size: var(--tv-text-sm);
	font-weight: var(--tv-weight-semibold);

	line-height: 1;

	pointer-events: none;

	transform: translateY(-50%);
}


/* =========================================================
   11. INPUT SUFFIX
   ========================================================= */

.tv-calculator-input--suffix {
	padding-right: 62px;
}


.tv-calculator-input-suffix {
	position: absolute;

	right: 14px;
	top: 50%;

	color: var(--tv-text-secondary);

	font-size: var(--tv-text-xs);
	font-weight: var(--tv-weight-semibold);

	line-height: 1;

	pointer-events: none;

	transform: translateY(-50%);
}


/* =========================================================
   12. NUMBER INPUT CLEANUP
   ========================================================= */

.tv-calculator-input::-webkit-outer-spin-button,
.tv-calculator-input::-webkit-inner-spin-button {
	margin: 0;

	-webkit-appearance: none;
}


.tv-calculator-input[type="number"] {
	-moz-appearance: textfield;
}


/* =========================================================
   13. VALIDATION ERROR
   ========================================================= */

.tv-calculator-error {
	min-height: 18px;

	margin: 9px 0 0;

	color: var(--tv-error);

	font-size: var(--tv-text-xs);
	line-height: 1.5;

	text-align: center;
}


.tv-calculator-error:empty {
	min-height: 0;

	margin-top: 0;
}


/* =========================================================
   14. CALCULATE BUTTON
   ========================================================= */

.tv-calculator-submit {
	display: block;

	width: auto;
	min-width: 118px;

	margin: 18px auto 0;
	padding: 10px 20px;

	font-size: var(--tv-text-sm);
	line-height: 1.4;
}


/* =========================================================
   15. CALCULATOR RESULTS
   ========================================================= */

.tv-calculator-results {
	margin-top: 22px;
	padding-top: 22px;

	border-top: 1px solid var(--tv-border);
}


/* =========================================================
   16. PRIMARY RESULT
   ========================================================= */

.tv-calculator-result--primary {
	padding: 18px;

	background: var(--tv-teal-soft);

	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius-md);

	text-align: center;
}


.tv-calculator-result__label {
	display: block;

	margin-bottom: 6px;

	color: var(--tv-text-secondary);

	font-size: var(--tv-text-xs);
	font-weight: var(--tv-weight-semibold);
	line-height: 1.4;
}


.tv-calculator-result--primary
.tv-calculator-result__label {
	color: var(--tv-teal-dark);
}


.tv-calculator-result__value {
	display: block;

	color: var(--tv-navy);

	font-size: var(--tv-text-base);
	font-weight: var(--tv-weight-bold);
	line-height: 1.25;

	overflow-wrap: anywhere;
}


.tv-calculator-result--primary
.tv-calculator-result__value {
	color: var(--tv-teal-dark);

	font-size: clamp(1.5rem, 2.3vw, 1.9rem);
}


/* =========================================================
   17. SECONDARY RESULTS
   ========================================================= */

.tv-calculator-result-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;

	margin-top: 10px;
}


.tv-calculator-result-grid
.tv-calculator-result {
	min-width: 0;

	padding: 14px;

	background: var(--tv-bg-soft);

	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius-md);

	text-align: center;
}


.tv-calculator-result-grid
.tv-calculator-result__value {
	font-size: var(--tv-text-sm);
}


/* =========================================================
   18. ADDITIONAL RESULT BLOCKS
   Used by SWP and Goal SIP.
   ========================================================= */

.tv-calculator-results
> .tv-calculator-result:not(.tv-calculator-result--primary) {
	margin-top: 10px;

	padding: 14px;

	background: var(--tv-bg-soft);

	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius-md);

	text-align: center;
}


/* =========================================================
   19. TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.tv-calculator-card {
		padding: 26px;
	}

}


/* =========================================================
   20. MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.tv-calculators-hero {
		padding-bottom: 44px;
	}


	.tv-calculators-section {
		padding-top: 52px;
		padding-bottom: 64px;
	}


	.tv-calculators-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}


	.tv-calculator-card {
		padding: 24px;
	}


	.tv-calculator-card__header {
		margin-bottom: 23px;
	}


	.tv-calculator-card__title {
		font-size: 1.25rem;
	}


	.tv-calculator-card__description {
		font-size: var(--tv-text-xs);
	}


	.tv-calculator-fields {
		gap: 16px;
	}


	.tv-calculator-submit {
		min-width: 112px;

		margin-top: 18px;
		margin-left: auto;
		margin-right: auto;

		padding: 9px 18px;
	}


	.tv-calculator-result-grid {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   21. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	.tv-calculator-card {
		padding: 20px;
	}


	.tv-calculator-input {
		min-height: 48px;
	}


	.tv-calculator-fields {
		gap: 15px;
	}


	.tv-calculator-field .tv-form-label {
		margin-bottom: 6px;
	}


	.tv-calculator-submit {
		margin-top: 18px;
	}


	.tv-calculator-result--primary
	.tv-calculator-result__value {
		font-size: 1.45rem;
	}

}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.tv-calculator-card,
	.tv-calculator-input {
		transition: none;
	}

}