/* ==========================================================================
   Atkinson Service Calculators — modern skin over the legacy Bootstrap layout
   Keeps all markup, field positions and sizing. Only visuals change.
   ========================================================================== */

.asc-legacy {
	--asc-green:       #139448;
	--asc-green-dark:  #0f7a3a;
	--asc-green-soft:  #eaf5ee;
	--asc-ink:         #15201a;
	--asc-text:        #2b3a32;
	--asc-muted:       #6b7a72;
	--asc-border:      #e3e8e4;
	--asc-border-focus:#139448;
	--asc-surface:     #ffffff;
	--asc-surface-alt: #f7faf8;
	--asc-radius:      10px;
	--asc-radius-sm:   8px;
	--asc-shadow:      0 10px 30px rgba(15, 35, 20, .07), 0 1px 3px rgba(15, 35, 20, .04);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--asc-text);
	-webkit-font-smoothing: antialiased;
}

/* Card wrapper on the outer container. */
.asc-legacy > .container {
	background: var(--asc-surface);
	border: 1px solid var(--asc-border);
	border-radius: var(--asc-radius);
	box-shadow: var(--asc-shadow);
	padding: 1.5rem 1.75rem 1.75rem;
	max-width: 960px;
}

/* Title — modern, tight, branded underline accent. */
.asc-legacy .asc-legacy__title {
	color: var(--asc-ink);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 .25rem;
	position: relative;
	padding-bottom: .5rem;
}
.asc-legacy .asc-legacy__title::after {
	content: "";
	display: block;
	width: 38px;
	height: 3px;
	border-radius: 2px;
	background: var(--asc-green);
	margin-top: .45rem;
}

/* Intro / supporting copy. */
.asc-legacy > .container > p {
	color: var(--asc-muted);
	margin: .25rem 0 1.1rem;
	font-size: .92rem;
	line-height: 1.5;
}
.asc-legacy > .container > p strong { font-weight: 600; color: var(--asc-muted); }

/* Labels. */
.asc-legacy label {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--asc-muted);
	margin-bottom: .35rem;
}

/* Inputs and selects — unified modern look, overrides Bootstrap defaults. */
.asc-legacy .form-control,
.asc-legacy .form-select,
.asc-legacy .asc-legacy__input {
	color: var(--asc-ink) !important;
	background-color: var(--asc-surface-alt) !important;
	border: 1px solid var(--asc-border) !important;
	border-radius: var(--asc-radius-sm) !important;
	height: 42px;
	padding: .55rem .8rem;
	font-size: .95rem;
	font-weight: 500;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.asc-legacy .form-control::placeholder { color: #a8b2ac; font-weight: 400; }

.asc-legacy .form-control:hover,
.asc-legacy .form-select:hover {
	border-color: #c8d0cb !important;
}

.asc-legacy .form-control:focus,
.asc-legacy .form-select:focus {
	border-color: var(--asc-border-focus) !important;
	background-color: var(--asc-surface) !important;
	box-shadow: 0 0 0 3px rgba(19, 148, 72, .18) !important;
	outline: none;
}

/* Custom chevron on selects (replaces Bootstrap's default SVG). */
.asc-legacy .form-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23139448' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 8 11 13 6'/%3E%3C/svg%3E") !important;
	background-position: right .85rem center !important;
	background-size: 14px 14px !important;
	padding-right: 2.25rem;
}

/* Tighten the original item/dropdown padding so everything lines up neatly. */
.asc-legacy .item-padding    { padding-top: 0; }
.asc-legacy .dropdown-padding { padding-top: 0; }

/* ---- Result bar — modern, raised, with subtle surface treatment ---- */
.asc-legacy .asc-legacy__bar {
	background: linear-gradient(135deg, var(--asc-green) 0%, var(--asc-green-dark) 100%) !important;
	color: #fff;
	padding: .95rem 1.25rem !important;
	border-radius: var(--asc-radius);
	box-shadow: 0 8px 20px rgba(19, 148, 72, .22);
	align-items: center;
	font-family: inherit !important;
	position: relative;
	overflow: hidden;
}
.asc-legacy .asc-legacy__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 50%, rgba(255,255,255,.14) 0%, transparent 60%);
	pointer-events: none;
}
.asc-legacy .asc-legacy__bar > div { position: relative; }

.asc-legacy .asc-legacy__bar h4 {
	margin: 0;
	font-weight: 600;
	letter-spacing: .01em;
}
.asc-legacy .asc-legacy__bar h4:first-of-type {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity: .92;
	font-weight: 700;
}
.asc-legacy .asc-legacy__result {
	font-size: 1.45rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	margin: 0 !important;
}

/* Disclaimer text. */
.asc-legacy .asc-legacy__disclaimer {
	margin-top: .9rem;
	font-size: .78rem;
	font-style: italic;
	color: var(--asc-muted);
	text-align: center;
}

/* Mobile tweaks. */
@media screen and (max-width: 767px) {
	.asc-legacy > .container { padding: 1.1rem 1.1rem 1.25rem; border-radius: 10px; }
	.asc-legacy .asc-legacy__title { font-size: 1.2rem; }
	.asc-legacy .asc-legacy__bar {
		flex-direction: column;
		align-items: flex-start !important;
		gap: .2rem;
		padding: .9rem 1.1rem !important;
	}
	.asc-legacy .asc-legacy__result {
		font-size: 1.35rem !important;
		white-space: nowrap;
	}
}

/* Loading state — subtle, doesn't change layout. */
.asc-calculator.is-loading .asc-legacy__result { opacity: .6; }