/* Reset and Base Styles */
.tfm-valve-calculator,
.tfm-valve-calculator * {
  box-sizing: border-box;
}

/* Undo any global link underline added by the chart file */
:where(body) :where(a) { text-decoration: inherit !important; }

/* If you want underlined links only inside the calculator, keep it local */
.tfm-valve-calculator a { text-decoration: underline; }

	body {
		font-family: "Inter", system-ui, -apple-system, sans-serif;
		margin: 0;
		padding: 0;
		line-height: 1.5;
		color: #212529;
		background-color: #fff;
	}
h3{
	margin-top: 0rem !important;
}
	/* Container System (replacing Bootstrap containers) */
	.tfm-container-fluid {
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
		max-width: 1200px;
	}

	/* Grid System (replacing Bootstrap grid) */
	.tfm-row {
		display: flex;
		flex-wrap: wrap;
		margin-right: -15px;
		margin-left: -15px;
	}

	.tfm-col-lg-4 {
		position: relative;
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		flex: 0 0 100%;
		max-width: 100%;
	}

	.tfm-col-lg-8 {
		position: relative;
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		flex: 0 0 100%;
		max-width: 100%;
	}

	.tfm-col-5 {
		position: relative;
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.tfm-col-2 {
		position: relative;
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.tfm-col-sm-6 {
		position: relative;
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		flex: 0 0 100%;
		max-width: 100%;
	}

	.tfm-col-4 {
		position: relative;
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.tfm-col-sm-2 {
		position: relative;
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	/* Responsive Grid */
	@media (min-width: 576px) {
		.tfm-col-sm-6 {
			flex: 0 0 50%;
			max-width: 50%;
		}
		.tfm-col-sm-2 {
			flex: 0 0 16.666667%;
			max-width: 16.666667%;
		}
	}

	@media (min-width: 992px) {
		.tfm-col-lg-4 {
			flex: 0 0 33.333333%;
			max-width: 33.333333%;
		}
		.tfm-col-lg-8 {
			flex: 0 0 66.666667%;
			max-width: 66.666667%;
		}
	}

	/* Gap System (replacing Bootstrap gap classes) */
	.tfm-g-3 > * {
		margin-bottom: 1rem;
	}

	.tfm-g-3 {
		margin-right: -0.5rem;
		margin-left: -0.5rem;
	}

	.tfm-g-3 > * {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}

	@media (min-width: 992px) {
		.tfm-g-lg-4 > * {
			margin-bottom: 1.5rem;
		}
		.tfm-g-lg-4 {
			margin-right: -0.75rem;
			margin-left: -0.75rem;
		}
		.tfm-g-lg-4 > * {
			padding-right: 0.75rem;
			padding-left: 0.75rem;
		}
	}

	.tfm-g-2 {
		margin-right: -0.25rem;
		margin-left: -0.25rem;
	}

	.tfm-g-2 > * {
		padding-right: 0.25rem;
		padding-left: 0.25rem;
		margin-bottom: 0.5rem;
	}

	/* Flexbox Utilities */
	.tfm-d-flex {
		display: flex !important;
	}

	.tfm-flex-column {
		flex-direction: column !important;
	}

	.tfm-align-items-center {
		align-items: center !important;
	}

	.tfm-align-items-start {
		align-items: flex-start !important;
	}

	.tfm-justify-content-between {
		justify-content: space-between !important;
	}

	.tfm-justify-content-center {
		justify-content: center !important;
	}

	.tfm-gap-3 {
		gap: 1rem !important;
	}

	.tfm-gap-4 {
		gap: 1.5rem !important;
	}

	.tfm-gap-2 {
		gap: 0.5rem !important;
	}

	@media (min-width: 992px) {
		.tfm-gap-lg-4 {
			gap: 1.5rem !important;
		}
	}

	.tfm-flex-fill {
		flex: 1 1 auto !important;
	}

	.tfm-flex-wrap {
		flex-wrap: wrap !important;
	}

	/* Display Utilities */
	.tfm-d-none {
		display: none !important;
	}

	/* Viewport Height */
	.tfm-min-vh-100 {
		min-height: 100vh !important;
	}

	/* Padding and Margin Utilities */
	.tfm-py-3 {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	.tfm-py-2 {
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
	}

	@media (min-width: 768px) {
		.tfm-py-md-4 {
			padding-top: 1.5rem !important;
			padding-bottom: 1.5rem !important;
		}
		.tfm-p-md-4 {
			padding: 1.5rem !important;
		}
	}

	.tfm-p-3 {
		padding: 1rem !important;
	}

	.tfm-p-4 {
		padding: 1.5rem !important;
	}

	.tfm-px-2 {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}

	.tfm-px-3 {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.tfm-mb-4 {
		margin-bottom: 1.5rem !important;
	}

	.tfm-mb-3 {
		margin-bottom: 1.5rem !important;
	}
	.tfm-mb-2 {
		margin-bottom: 0.5rem !important;
	}

	.tfm-mb-0 {
		margin-bottom: 0 !important;
	}

	.tfm-mt-3 {
		margin-top: 1rem !important;
	}

	.tfm-mt-1 {
		margin-top: 0.25rem !important;
	}

	@media (min-width: 992px) {
		.tfm-mt-lg-4 {
			margin-top: 1.5rem !important;
		}
	}

	.tfm-pt-3 {
		padding-top: 1rem !important;
	}

	.tfm-pt-4 {
		padding-top: 1.5rem !important;
		padding-bottom:1.5rem !important;
	}

	.tfm-pt-1 {
		padding-top: 0.25rem !important;
	}

	.tfm-me-2 {
		margin-right: 0.5rem !important;
	}

	/* Width Utilities */
	.tfm-w-100 {
		width: 100% !important;
	}

	/* Card Components */
	.tfm-card {
		position: relative;
		display: flex;
		flex-direction: column;
		min-width: 0;
		word-wrap: break-word;
		background-color: #fff;
		background-clip: border-box;
		border: 1px solid #dee2e6;
		border-radius: 0.375rem;
	}

	.tfm-card-body {
		flex: 1 1 auto;
		padding: 1rem;
	}

	.tfm-card-header {
		padding: 0.5rem 1rem;
		margin-bottom: 0;
		background-color: rgba(0, 0, 0, 0.03);
		border-bottom: 1px solid #dee2e6;
		border-top-left-radius: calc(0.375rem - 1px);
		border-top-right-radius: calc(0.375rem - 1px);
	}

	.tfm-bg-white {
		background-color: #fff !important;
	}

	.tfm-border-bottom {
		border-bottom: 1px solid #dee2e6 !important;
	}

	/* Form Components */
	.tfm-form-label {
		margin-bottom: 2.5rem !important;
		font-weight: 500;
	}
.tfm-form-label.tfm-mb-3 {
    margin-bottom: 2.5rem !important;
}
	.tfm-form-select {
		display: block;
		width: 100%;
		padding: 0.375rem 2.25rem 0.375rem 0.75rem;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #212529;
		background-color: #fff;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 6 6 6-6'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: right 0.75rem center;
		background-size: 16px 12px;
		border: 1px solid #ced4da;
		border-radius: 0.375rem;
		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		appearance: none;
	}

	.tfm-form-select:focus {
		border-color: #86b7fe;
		outline: 0;
		box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
	}

	/* Button Components */
	.tfm-btn {
		display: inline-block;
		font-weight: 400;
		line-height: 1.5;
		color: #212529;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		cursor: pointer;
		user-select: none;
		background-color: transparent;
		border: 1px solid transparent;
		padding: 0.375rem 0.75rem;
		font-size: 1rem;
		border-radius: 0.375rem;
		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}

	.tfm-btn-secondary {
		color: #fff;
		background-color: #6c757d;
		border-color: #6c757d;
	}

	.tfm-btn-secondary:hover {
		color: #fff;
		background-color: #5c636a;
		border-color: #565e64;
	}

	.tfm-btn-danger {
		color: #fff;
		background-color: #dc3545;
		border-color: #dc3545;
	}

	.tfm-btn-danger:hover {
		color: #fff;
		background-color: #c82333;
		border-color: #bd2130;
	}

	/* Alert Components */
	.tfm-alert {
		position: relative;
		padding: 0.75rem 1.25rem;
		margin-bottom: 1rem;
		border: 1px solid transparent;
		border-radius: 0.375rem;
	}

	.tfm-alert-warning {
		color: #664d03;
		background-color: #fff3cd;
		border-color: #ffecb5;
	}

	/* Text Utilities */
	.tfm-text-dark {
		color: #212529 !important;
	}

	.tfm-text-muted {
		color: #6c757d !important;
	}

	.tfm-text-warning {
		color: #ffc107 !important;
	}

	.tfm-text-black {
		color: #000 !important;
	}

	.tfm-text-white {
		color: #fff !important;
	}

	.tfm-text-center {
		text-align: center !important;
	}

	.tfm-text-left {
		text-align: left !important;
	}

	/* Typography */
	.tfm-h5 {
		font-size: 1.25rem;
		font-weight: 500;
		line-height: 1.2;
		margin-bottom: 1.5rem;
	}

	.tfm-h4 {
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.2;
		margin-bottom: 0.5rem;
	}

	.tfm-h2 {
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1.2;
		margin-bottom: 0.5rem;
	}

	.tfm-fw-semibold {
		font-weight: 600 !important;
	}

	.tfm-fw-bold {
		font-weight: 700 !important;
	}

	.tfm-fw-medium {
		font-weight: 500 !important;
	}

	.tfm-small {
		font-size: 0.875em;
	}

	.tfm-opacity-75 {
		opacity: 0.75 !important;
	}

	/* Background Utilities */
	.tfm-bg-dark {
		background-color: #212529 !important;
	}

	.tfm-bg-danger {
		background-color: #dc3545 !important;
	}

	.tfm-bg-primary {
		background-color: #0d6efd !important;
	}

	.tfm-bg-warning {
		background-color: #ffc107 !important;
	}

	/* Rounded Utilities */
	.tfm-rounded {
		border-radius: 0.375rem !important;
	}

	/* Position Utilities */
	.tfm-position-relative {
		position: relative !important;
	}

	/* Your existing custom styles */
	.tfm-valve-calculator {
		font-family: "Inter", system-ui, -apple-system, sans-serif;
	}

/* Range slider styles */
/* === Range slider (Astra-proof, no unwanted shadows) === */
.tfm-valve-calculator input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100%;
  height: 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;      /* kill theme shadows */
  filter: none !important;          /* kill drop-shadows/filters */
  outline: none !important;
  cursor: pointer;
  padding:20px 0px 20px 0px;
}

/* WebKit track — keep gradient, no shadows */
.tfm-valve-calculator input[type="range"]::-webkit-slider-runnable-track,
.tfm-valve-calculator input[type="range"]:hover::-webkit-slider-runnable-track,
.tfm-valve-calculator input[type="range"]:focus::-webkit-slider-runnable-track,
.tfm-valve-calculator input[type="range"]:active::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(to right, #0d6efd 0%, #dc3545 100%) !important;
  border-radius: 4px;
  box-shadow: none !important;
  filter: none !important;
}

/* WebKit thumb — no theme shadows */
.tfm-valve-calculator input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #212529;
  margin-top: -8px; /* center on 8px track */
  transition: transform 0.2s ease;
  cursor: pointer;
  box-shadow: none !important;
  filter: none !important;
}
.tfm-valve-calculator input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.06);
}
.tfm-valve-calculator input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.02);
}

/* Firefox track + progress — no shadows */
.tfm-valve-calculator input[type="range"]::-moz-range-track,
.tfm-valve-calculator input[type="range"]::-moz-range-progress {
  height: 8px;
  background: linear-gradient(to right, #0d6efd 0%, #dc3545 100%) !important;
  border-radius: 4px;
  border: none;
  box-shadow: none !important;
  filter: none !important;
}

/* Firefox thumb — no shadows */
.tfm-valve-calculator input[type="range"]::-moz-range-thumb {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #212529;
  transition: transform 0.2s ease;
  cursor: pointer;
  box-shadow: none !important;
  filter: none !important;
}
.tfm-valve-calculator input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.06);
}
.tfm-valve-calculator input[type="range"]::-moz-range-thumb:active {
  transform: scale(1.02);
}

/* Focus/disabled — no extra glow/shadow */
.tfm-valve-calculator input[type="range"]:focus,
.tfm-valve-calculator input[type="range"]:focus-visible,
.tfm-valve-calculator input[type="range"]:active {
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.tfm-valve-calculator input[type="range"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

	/* Animations */
	@keyframes slideIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.animate-slide-in {
		animation: slideIn 0.3s ease-out;
	}

	/* Chart container responsive */
	.chart-container {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 60%; /* 16:10 aspect ratio */
	}

	.chart-container canvas {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}

	/* Custom styles for components */
	.results-card {
		background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
		color: rgb(0, 0, 0);
	}

	.temp-marker {
		position: absolute;
		top: -5px;
		width: 6px;
		height: 18px;
		background: rgb(0, 0, 0);
		border-radius: 2px;
		border: 1px solid #000000;
		transform: translateX(-50%);
		left: 29%;
	}

	.temp-gradient {
		height: 8px;
		background: linear-gradient(
			to right,
			#0d6efd 0%,
			#ffc107 50%,
			#dc3545 100%
		);
		border-radius: 4px;
		position: relative;
	}

	.pulse-dot {
		width: 12px;
		height: 12px;
		background-color: #00af00;
		border-radius: 50%;
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}
		50% {
			transform: scale(1.1);
			opacity: 0.7;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.metric-card {
		background-color: #f8f9fa;
		border: 1px solid #dee2e6;
		backdrop-filter: blur(10px);
		border-radius: 0.5rem;
	}

	.operating-info {
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		border-radius: 0.5rem;
	}

	.btn-reset {
		transition: all 0.2s ease;
	}

	.legend-item {
		display: flex;
		align-items: center;
		font-size: 0.875rem;
	}

	.legend-line {
		width: 16px;
		height: 4px;
		border-radius: 2px;
		margin-right: 8px;
	}

	.spec-row {
		padding: 0.5rem 0;
		border-bottom: 1px solid #e9ecef;
	}

	.size-badge {
		background-color: #f7f7f7;
		border: 1px solid #dee2e6;
		border-radius: 0.375rem;
		padding: 0.25rem 0.5rem;
		font-size: 0.75rem;
		font-weight: 500;
		text-align: center;
	}