/**
 * Frontend calculator styles (ported from theme pricing calc look).
 */

.ppc-calc-noscript,
.ppc-calc-missing {
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--wp--preset--color--teal-50, #e8f4f5);
	color: var(--wp--preset--color--fg2, #334155);
}

.ppc-calc {
	margin-top: 32px;
	padding: 32px;
	border: 1px solid var(--wp--preset--color--line, #e2e8f0);
	border-radius: 12px;
	background: #fff;
}

.ppc-calc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.ppc-calc__field label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: var(--wp--preset--color--fg2, #334155);
}

.ppc-calc__field select,
.ppc-calc__field input[type="number"],
.ppc-calc__field input[type="text"],
.ppc-calc__field input[type="email"],
.ppc-calc__field input[type="tel"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--line, #e2e8f0);
	border-radius: 10px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--wp--preset--color--fg1, #0f172a);
	box-sizing: border-box;
}

.ppc-calc__field[hidden] {
	display: none !important;
}

.ppc-calc__help,
.ppc-calc__section-desc {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--wp--preset--color--fg2, #64748b);
}

.ppc-calc__section {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}

.ppc-calc__section legend {
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--brand-navy, #0b1f33);
	margin: 0 0 14px;
	padding: 0;
}

.ppc-calc .wp-block-buttons {
	margin-top: 28px;
}

.ppc-calc__honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ppc-calc__contact {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--line, #e2e8f0);
}

.ppc-calc__contact h3 {
	margin: 0 0 8px;
}

.ppc-calc__contact > p {
	margin: 0 0 20px;
	color: var(--wp--preset--color--fg2, #64748b);
}

.ppc-calc-results {
	margin-top: 32px;
	padding: 28px;
	border-radius: 12px;
	background: var(--wp--preset--color--brand-navy, #0b1f33);
	color: #fff;
}

.ppc-calc-results h3 {
	margin: 4px 0 8px;
	font-family: Quicksand, sans-serif;
}

.ppc-calc-results .sba-eyebrow,
.ppc-calc-results .ppc-calc-results__eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-300, #82c0c9);
}

.ppc-calc-results a {
	color: #fff;
}

.ppc-calc-amounts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 20px 0 24px;
}

.ppc-calc-amount {
	padding: 18px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	text-align: center;
	animation: ppc-amount-reveal 0.45s ease both;
	animation-delay: calc(var(--ppc-reveal, 0) * 0.18s);
}

@keyframes ppc-amount-reveal {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppc-calc-amount {
		animation: none;
	}
}

.ppc-calc-amount span {
	display: block;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.8;
	margin-bottom: 6px;
}

.ppc-calc-amount strong {
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	color: var(--wp--preset--color--teal-300, #82c0c9);
}

.ppc-calc-amount.is-featured {
	background: rgba(79, 166, 179, 0.22);
	box-shadow: inset 0 0 0 1px rgba(130, 192, 201, 0.45);
}

.ppc-calc-results__note {
	opacity: 0.9;
}

.ppc-calc-results .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
}

.ppc-calc-results .wp-block-button.is-style-outline {
	margin-left: 8px;
}

.ppc-calc-results .wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff !important;
	background-color: #fff !important;
	color: var(--wp--preset--color--brand-navy, #0b1f33) !important;
	box-shadow: none;
	border: 0;
}

.ppc-calc-results .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ppc-calc-results .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: #f1f5f9 !important;
	background-color: #f1f5f9 !important;
	color: var(--wp--preset--color--brand-navy, #0b1f33) !important;
}

@media (max-width: 700px) {
	.ppc-calc-amounts {
		grid-template-columns: 1fr;
	}

	.ppc-calc-results .wp-block-button.is-style-outline {
		margin-left: 0;
	}
}