/* ==========================================================================
   Care Runway Calculator — Calculator #1
   Max width 900px, centered. Deep green input panel, cream result panel,
   gold slider thumb/fill, animated runway bar. Loaded only on pages
   using this engine (see care-costs-core.php enqueue logic).
   ========================================================================== */

.cc-runway-calculator {
	max-width: 900px;
	margin: 0 auto;
	border-radius: var(--cc-radius-lg, 12px);
	overflow: hidden;
	box-shadow: var(--cc-shadow-md, 0 4px 16px rgba(11, 36, 29, 0.08));
}

/* ---------- Inputs panel (deep green) ---------- */

.cc-runway-inputs {
	background: var(--cc-color-deep-green, #0B241D);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.cc-runway-field-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	gap: 1rem;
}

.cc-runway-field-header label {
	font-family: var(--cc-font-sans, sans-serif);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--cc-color-warm-cream, #F4EEDC);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cc-runway-field-value {
	font-family: var(--cc-font-serif, serif);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--cc-color-gold, #C99A3D);
	white-space: nowrap;
}

/* Range slider — gold track fill + thumb, cross-browser */
.cc-runway-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: rgba(244, 238, 220, 0.2);
	outline: none;
	cursor: pointer;
	touch-action: pan-y;
}

.cc-runway-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cc-color-gold, #C99A3D);
	border: 3px solid var(--cc-color-deep-green, #0B241D);
	box-shadow: 0 0 0 1px rgba(201, 154, 61, 0.4);
	cursor: pointer;
	margin-top: -9px;
}

.cc-runway-slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cc-color-gold, #C99A3D);
	border: 3px solid var(--cc-color-deep-green, #0B241D);
	cursor: pointer;
}

.cc-runway-slider::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: rgba(244, 238, 220, 0.2);
}

.cc-runway-slider::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: rgba(244, 238, 220, 0.2);
}

.cc-runway-slider:focus-visible {
	outline: 3px solid var(--cc-color-gold, #C99A3D);
	outline-offset: 4px;
}

/* Thumb is 24px by default, which meets WCAG 2.2's minimum (2.5.8) but
   is below the 44px "comfortable touch target" both Apple's HIG and
   Google's Material guidelines recommend. Enlarging it specifically
   under 768px (touch-first viewports) rather than everywhere, so the
   desktop appearance — mouse precision isn't the same concern there —
   is untouched. */
@media (max-width: 767px) {
	.cc-runway-slider {
		height: 8px;
	}

	.cc-runway-slider::-webkit-slider-thumb {
		width: 32px;
		height: 32px;
		margin-top: -12px;
	}

	.cc-runway-slider::-moz-range-thumb {
		width: 32px;
		height: 32px;
	}
}

.cc-runway-field-range {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--cc-color-sage, #8FA397);
}

/* ---------- Results panel (cream) ---------- */

.cc-runway-results {
	background: var(--cc-color-warm-cream, #F4EEDC);
	padding: 2.5rem 2rem;
	text-align: center;
}

.cc-runway-result-label {
	font-family: var(--cc-font-sans, sans-serif);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cc-color-muted-text, #606E67);
	margin: 0 0 1rem;
}

.cc-runway-result-covered {
	font-family: var(--cc-font-serif, serif);
	font-size: 1.25rem;
	color: var(--cc-color-deep-green, #0B241D);
	max-width: 480px;
	margin: 0 auto 1.5rem;
}

.cc-runway-months {
	font-family: var(--cc-font-serif, serif);
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	color: var(--cc-color-deep-green, #0B241D);
	margin: 0;
}

.cc-runway-unit {
	font-size: 1.25rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cc-runway-years {
	font-family: var(--cc-font-sans, sans-serif);
	font-size: 1.125rem;
	color: var(--cc-color-gold-text, #826427);
	font-weight: 600;
	margin: 0.5rem 0 2rem;
}

.cc-runway-bar-track {
	width: 100%;
	height: 12px;
	border-radius: 999px;
	background: rgba(11, 36, 29, 0.08);
	overflow: hidden;
	margin-bottom: 2rem;
}

.cc-runway-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--cc-color-gold, #C99A3D);
	transition: width 0.3s ease;
}

.cc-runway-breakdown {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	text-align: left;
	max-width: 480px;
	margin: 0 auto;
}

.cc-runway-breakdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: var(--cc-color-card-white, #FFFDF7);
	border: 1px solid var(--cc-color-border, rgba(11, 36, 29, 0.12));
	border-radius: 8px;
}

.cc-runway-breakdown-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cc-color-muted-text, #606E67);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cc-runway-breakdown-value {
	font-family: var(--cc-font-serif, serif);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--cc-color-deep-green, #0B241D);
}

.cc-runway-breakdown-gap {
	color: var(--cc-color-gold-text, #826427);
}

/* ---------- Responsive ---------- */

@media (min-width: 640px) {
	.cc-runway-breakdown {
		grid-template-columns: repeat(3, 1fr);
	}

	.cc-runway-breakdown-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

@media (min-width: 768px) {
	.cc-runway-inputs {
		padding: 2.5rem;
	}

	.cc-runway-results {
		padding: 3rem 2.5rem;
	}

	.cc-runway-months {
		font-size: 3.5rem;
	}
}