/* TCP Delivery Calculator — Frontend */

.tcp-calculator {
	font-family: "ITC Avant Garde Gothic", "Century Gothic", "Avant Garde", sans-serif;
	color: #00284C;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 40px rgba(0, 40, 76, 0.10);
	width: 100%;
	box-sizing: border-box;
	padding: 48px 52px 40px;
}

/* Headings */
#tcp-calculator .tcp-calc-heading,
#tcp-calculator .tcp-results-heading {
	font-family: "ITC Avant Garde Gothic", "Century Gothic", "Avant Garde", sans-serif !important;
	font-weight: 700 !important;
	color: #00284C !important;
	line-height: 1.3 !important;
	text-align: center !important;
	font-size: 23px !important;
}

#tcp-calculator .tcp-calc-heading {
	margin: 0 0 32px !important;
}

#tcp-calculator .tcp-results-heading {
	margin: 0 0 24px !important;
}

/* Tablet — Elementor default ≤ 1024px */
@media (max-width: 1024px) {
	#tcp-calculator .tcp-calc-heading,
	#tcp-calculator .tcp-results-heading {
		font-size: 21px !important;
	}
}

/* Mobile — Elementor default ≤ 767px */
@media (max-width: 767px) {
	#tcp-calculator .tcp-calc-heading,
	#tcp-calculator .tcp-results-heading {
		font-size: 20px !important;
	}
}

/* Slider wrap */
.tcp-slider-wrap {
	width: 100%;
}

/* Min / Max pill labels */
.tcp-slider-rail-labels {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.tcp-slider-rail-labels span {
	display: inline-block;
	background: #EDF2F4;
	border: 1px solid #d0dce6;
	border-radius: 4px;
	padding: 3px 12px;
	font-size: 0.72rem;
	font-weight: 700;
	color: #00284C;
	letter-spacing: 0.04em;
}

/* Slider Rail + Track */
.tcp-slider-rail {
	position: relative;
}

input[type="range"].tcp-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 5px;
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	background: linear-gradient(to right, #0094EF 20%, #dde7ee 20%);
	border: none;
	padding: 0;
	margin: 0;
	display: block;
	position: relative;
	z-index: 2; /* thumb sits above dots */
}

/* WebKit thumb */
input[type="range"].tcp-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #0094EF;
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 148, 239, 0.45);
	transition: box-shadow 0.18s ease, transform 0.15s ease;
}

input[type="range"].tcp-range::-webkit-slider-thumb:hover,
input[type="range"].tcp-range:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 7px rgba(0, 148, 239, 0.13), 0 2px 10px rgba(0, 148, 239, 0.45);
	transform: scale(1.1);
}

/* Firefox thumb */
input[type="range"].tcp-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #0094EF;
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 148, 239, 0.45);
}

input[type="range"].tcp-range::-moz-range-track {
	height: 5px;
	border-radius: 3px;
	background: transparent;
	border: none;
}

/* Slider Dots (on-track step markers)*/
.tcp-slider-dots {
	position: absolute;
	/* Vertically centre on the 5px-high track */
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Inset = half thumb width (22px / 2 = 11px) so edge dots
	   align with the thumb centre at min / max */
	padding: 0 11px;
	pointer-events: none; /* clicks pass through to the range input */
	z-index: 1;
}

.tcp-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #dde7ee;
	flex-shrink: 0;
	transition: background-color 0.12s ease;
}

.tcp-dot.tcp-dot--filled {
	background: #0094EF;
}

/* Current value text */
.tcp-slider-value {
	margin: 20px 0 0;
	font-size: 0.95rem;
	color: #00284C;
	text-align: center;
}

#tcp-current-val {
	font-size: 1.1rem;
	font-weight: 700;
	color: #0094EF;
}

.tcp-slider-unit {
	font-weight: 400;
	color: #7a8fa0;
}

/* Divider */
#tcp-calculator .tcp-calc-divider {
	border: none !important;
	border-top: 1px solid #e8eef3 !important;
	margin: 36px 0 0 !important;
}

/* Results */
#tcp-calculator .tcp-calc-results {
	text-align: center;
	padding-top: 36px;
}

/* Table */
.tcp-table-wrap {
	border-radius: 4px;
	overflow: hidden;
	/* box-shadow: 0 0 0 1px #e0eaf1; */
	margin-bottom: 20px;
}

.tcp-results-table {
	width: 100%;
	/* separate + spacing:0: prevents phantom bottom gap inside rounded wrapper */
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.92rem;
	margin: 0;
}

/* Header */
.tcp-results-table thead tr {
	background-color: #00284C;
}

.tcp-results-table thead th {
	padding: 13px 22px;
	color: #fff;
	text-align: center;
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* 1px separator between header and first body row */
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Vertical column divider — header */
.tcp-results-table thead th:first-child {
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Body rows */
.tcp-results-table tbody td {
	padding: 16px 22px;
	color: #00284C;
	text-align: center;
	border-bottom: 1px solid #edf2f6;
}

/* Vertical column divider — body */
.tcp-results-table tbody td:first-child {
	font-weight: 600;
	border-right: 1px solid #edf2f6;
}

/* Last row */
.tcp-results-table tbody tr:last-child td {
	border-bottom: 1px solid #76797B70;
}

.tcp-results-table tbody tr:hover td {
	background-color: #f7fafc;
}

.tcp-result-value {
	color: #0094EF !important;
	font-weight: 700 !important;
}

/* Disclaimer */
.tcp-disclaimer {
	font-size: 0.76rem;
	color: #9daebe;
	margin: 0 auto;
	line-height: 1.7;
	font-style: italic;
}

/* Responsiveness */
@media (max-width: 767px) {
	.tcp-calculator {
		padding: 32px 24px 28px;
		border-radius: 12px;
	}

	.tcp-results-table thead th,
	.tcp-results-table tbody td {
		padding: 13px 14px;
	}
}