/* ==========================================
   Trac-Vac Chute Selector v1.1
   ========================================== */

/* ==========================================
   Container
   ========================================== */

.tvcs-selector {

	max-width: 550px;
	margin: 30px auto;
	padding: 28px;

	background: #fff;

	border-radius: 12px;

	box-shadow: 0 12px 35px rgba(0,0,0,.12);

}

/* ==========================================
   Form Layout
   ========================================== */

.tvcs-selector p {

	margin: 0 0 16px;

}

.tvcs-selector label {

	display: block;

	margin-bottom: 6px;

	font-size: 16px;

	font-weight: 700;

	color: #333;

}

/* ==========================================
   Inputs
   ========================================== */

.tvcs-selector select,
.tvcs-selector input {

	width: 100%;

	padding: 11px 12px;

	font-size: 16px;

	background: #fff;

	border: 1px solid #cfcfcf;
	border-radius: 6px;

	box-sizing: border-box;

	transition: all .20s ease;

}

.tvcs-selector select:focus,
.tvcs-selector input:focus {

	outline: none;

	border-color: #3d7c2d;

	box-shadow: 0 0 0 3px rgba(61,124,45,.18);

}

/* ==========================================
   Button
   ========================================== */

#tvcs-find-chute {

	width: 100%;

	margin-top: 8px;

	padding: 15px;

	background: #3d7c2d;

	color: #fff;

	font-size: 18px;

	font-weight: 700;

	border: none;

	border-radius: 8px;

	cursor: pointer;

	transition: all .25s ease;

}

#tvcs-find-chute:hover {

	background: #2f6423;

	transform: translateY(-1px);

	box-shadow: 0 6px 18px rgba(0,0,0,.18);

}

#tvcs-find-chute:active {

	transform: scale(.98);

}

/* ==========================================
   Loading
   ========================================== */

.tvcs-loading {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 10px;

	margin-top: 20px;

	padding: 16px;

	background: #eef7ff;

	border-left: 5px solid #2f7bdc;

	border-radius: 6px;

	font-style: italic;

	font-weight: 600;

	color: #24509A;

	animation: tvcsFadeIn .25s ease;

}

/* ==========================================
   Spinner
   ========================================== */

.tvcs-spinner {

	width: 18px;
	height: 18px;

	border: 3px solid #d9d9d9;
	border-top: 3px solid #3d7c2d;

	border-radius: 50%;

	flex-shrink: 0;

	animation: tvcsSpin .65s linear infinite;

}

/* ==========================================
   Result Cards
   ========================================== */

.tvcs-result {

	margin-top: 28px;

	background: #fff;

	border-radius: 10px;

	overflow: hidden;

	box-shadow: 0 8px 24px rgba(0,0,0,.12);

	animation: tvcsFadeIn .35s ease;

}

.tvcs-success {

	border: 2px solid #3d7c2d;

}

.tvcs-error {

	border: 2px solid #c62828;

}

/* ==========================================
   Result Headers
   ========================================== */

.tvcs-success h3,
.tvcs-error h3 {

	margin: 0;

	padding: 18px;

	color: #fff;

	font-size: 22px;

	text-align: center;

}

.tvcs-success h3 {

	background: #3d7c2d;

}

.tvcs-error h3 {

	background: #c62828;

}

/* ==========================================
   Chute Number
   ========================================== */

.tvcs-chute-model {

	padding: 28px 20px;

	text-align: center;

}

.tvcs-chute-model span {

	display: block;

	font-size: 14px;

	text-transform: uppercase;

	letter-spacing: 2px;

	color: #666;

}

.tvcs-chute-model strong {

	display: block;

	margin-top: 10px;

	font-size: 72px;

	line-height: 1;

	font-weight: 800;

	color: #3d7c2d;

}

/* ==========================================
   Summary Table
   ========================================== */

.tvcs-summary {

	width: 100%;

	border-collapse: collapse;

}

.tvcs-summary th {

	width: 130px;

	padding: 12px 18px;

	text-align: left;

	font-weight: 700;

	background: #f4f6f8;

	color: #444;

}

.tvcs-summary td {

	padding: 12px 18px;

}

.tvcs-summary tr:nth-child(even) {

	background: #fcfcfc;

}

/* ==========================================
   Footer
   ========================================== */

.tvcs-result p {

	margin: 0;

	padding: 18px 20px;

	text-align: center;

	font-size: 16px;

}

/* ==========================================
   Animations
   ========================================== */

@keyframes tvcsFadeIn {

	from {

		opacity: 0;

		transform: translateY(12px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}

@keyframes tvcsSpin {

	from {

		transform: rotate(0deg);

	}

	to {

		transform: rotate(360deg);

	}

}