/*********************************
Funnel (/match)

Wizard + results rendered by the funnel manager, dressed in the existing InquireEDU components
(.sidebar_section--inquiry, .comment_input, .comment_button, .course, .degree_tile). The ADX
FieldsRenderer emits Bootstrap 4 markup (.row / .form-group.col-md-N / .form-control), which the
site already loads, so only the controls themselves are restyled here — scoped to .funnel_fields.
*********************************/

.funnel {
	padding-top: 40px;
	padding-bottom: 60px;
}

/* --- Progress --- */

.funnel_progress {
	margin-bottom: 25px;
}

.funnel_progress__meta {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: #384158;
	margin-bottom: 8px;
}

.funnel_progress__track {
	width: 100%;
	height: 6px;
	background: #f2f4f5;
}

.funnel_progress__bar {
	height: 100%;
	background: #297984;
	transition: width 400ms ease;
}

/* --- Steps --- */

.funnel_step {
	display: none;
}

.funnel_step.active {
	display: block;
	animation: funnelSlideIn 350ms ease-out;
}

.funnel_step.slide-back {
	animation-name: funnelSlideBack;
}

@keyframes funnelSlideIn {
	from { opacity: 0; transform: translateX(30px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes funnelSlideBack {
	from { opacity: 0; transform: translateX(-30px); }
	to { opacity: 1; transform: translateX(0); }
}

.funnel_card {
	background: #FFFFFF;
	box-shadow: 0px 1px 10px rgba(29,34,47,0.1);
}

.funnel_card .sidebar_subtitle {
	margin-bottom: 25px;
}

.funnel_nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 25px;
	padding-top: 20px;
	border-top: solid 1px #ebebeb;
}

.funnel_nav .comment_button {
	margin-top: 0;
}

.funnel_back {
	height: 46px;
	padding: 0 20px;
	background: #FFFFFF;
	border: solid 1px #d9d9d9;
	color: #384158;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 200ms ease;
}

.funnel_back:hover {
	border-color: #297984;
	color: #297984;
}

.funnel_back:focus,
.funnel_button:focus {
	outline: none;
}

.funnel_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
}

a.funnel_button,
a.funnel_button:hover {
	color: #FFFFFF;
}

.funnel_button--wide {
	width: auto;
	padding: 0 30px;
}

.funnel_fineprint {
	text-align: center;
	margin-top: 15px;
}

.funnel_fineprint a {
	color: #297984;
}

/* Single-question step: the step title already asks the question, so drop the field's own label. */
.funnel_step--single .funnel_fields .form-group > label:not(.funnel_option):not(.error):not(.container_check) {
	display: none;
}

/* --- Fields (ADX FieldsRenderer output) --- */

/* A field with no column slot renders as "col-md-0", which Bootstrap doesn't define: full width. */
.funnel_fields .row > .form-group {
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 18px;
}

.funnel_fields .row > .form-group.col-md-0,
.funnel_fields .row > .form-group:not([class*="col-md-"]) {
	flex: 0 0 100%;
	max-width: 100%;
}

.funnel_fields .form-group > label:not(.funnel_option):not(.container_check):not(.error) {
	display: block;
	font-size: 14px;
	margin-bottom: 6px;
	opacity: 0.9;
	color: black;
}

.funnel_fields sup {
	color: red;
}

.funnel_fields input.form-control:not([type="radio"]):not([type="checkbox"]),
.funnel_fields select.form-control {
	width: 100%;
	height: 46px;
	border: solid 1px #d9d9d9;
	border-radius: 0;
	padding-left: 19px;
	font-size: 16px;
	font-weight: 400;
	color: #2c3145;
	box-shadow: none;
}

.funnel_fields select.form-control {
	cursor: pointer;
}

.funnel_fields input.form-control:focus,
.funnel_fields select.form-control:focus {
	border: solid 1px #297984;
	outline: none;
	box-shadow: none;
}

.funnel_fields .hidden-input-group,
.funnel_fields .form-group:has(> .hidden-input-group) {
	display: none;
}

/* Radio options as selectable tiles (same look as the legacy .degree_tile picker). */
.funnel_fields .form-group:has(.funnel_option) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.funnel_fields .form-group:has(.funnel_option) > label:not(.funnel_option):not(.error) {
	flex: 1 1 100%;
	margin-bottom: 0;
}

.funnel_fields .funnel_option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 calc(50% - 5px);
	min-height: 46px;
	margin: 0;
	padding: 10px 14px;
	background: #f2f4f5;
	border: 2px solid transparent;
	color: #384158;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: transform .12s ease, border-color .12s ease;
}

.funnel_fields .funnel_option:hover {
	transform: translateY(-1px);
	border-color: rgba(41,121,132,0.35);
}

.funnel_fields .funnel_option label {
	margin: 0;
	cursor: pointer;
	flex: 1;
}

.funnel_fields .funnel_option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.funnel_fields .funnel_option .checkmark {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #b5b8be;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	transition: all .12s ease;
}

.funnel_fields .funnel_option:has(input[type="radio"]:checked) {
	border-color: #297984;
	color: #297984;
	background: #FFFFFF;
}

.funnel_fields .funnel_option:has(input[type="radio"]:checked) .checkmark {
	border-color: #297984;
	background: #297984;
}

.funnel_fields .funnel_option:has(input[type="radio"]:checked) .checkmark::after {
	content: "";
	width: 6px;
	height: 10px;
	margin-top: -2px;
	border: solid #FFFFFF;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.funnel_fields .funnel_option:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(41,121,132,0.35);
}

/* TCPA consent line (same as the legacy inquiry form checkbox). */
.funnel_fields label.container_check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: black;
	opacity: 0.9;
	margin: 0;
	cursor: pointer;
}

.funnel_fields label.container_check input[type="checkbox"] {
	order: -1;
	width: auto;
	height: auto;
	margin-top: 2px;
	flex-shrink: 0;
}

.funnel_fields label.container_check .checkmark {
	display: none;
}

/* Validation: jquery.validate adds .error to the field and to the message label. */
.funnel_fields label.error {
	display: block;
	flex: 1 1 100%;
	margin: 6px 0 0;
	color: #c0392b;
	font-size: 13px;
	font-weight: 400;
	opacity: 1;
}

.funnel_fields .form-control.error {
	border-color: #c0392b !important;
}

/* --- School intro (/match?school=ABBR) --- */

.funnel_school {
	padding-top: 30px;
}

.funnel_school__inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.funnel_school .course_image2 {
	margin: 0 0 15px;
}

/* --- Results --- */

.funnel_heading {
	margin-bottom: 25px;
}

.funnel_heading .fa {
	margin-right: 6px;
}

.funnel_offer,
.funnel_notice {
	margin-bottom: 30px;
}

.funnel_offer .course_image {
	border-bottom: solid 1px #ebebeb;
}

.funnel_offer .course_title span {
	font-size: 20px;
	color: #384158;
}

.funnel_offer .funnel_fields {
	margin-top: 20px;
}

.funnel_actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-top: 15px;
}

.funnel_actions form {
	margin: 0;
}

.funnel_actions .comment_button {
	margin-top: 0;
}

.funnel_skip {
	background: none;
	border: none;
	padding: 4px 6px;
	font-size: 13px;
	color: #76777a;
	cursor: pointer;
}

.funnel_skip:hover {
	color: #384158;
	text-decoration: underline;
}

.funnel_offer--submitted .course_info .fa {
	color: #297984;
	margin-right: 4px;
}

/* Results sidebar: the banner sits under the side card with the same 30px rhythm as the cards. */
.funnel_sidebar_banner a {
	display: block;
}

.funnel_sidebar_banner img {
	display: block;
	width: 100%;
	height: auto;
}

.funnel_notice .comment_button {
	margin-top: 10px;
}

.funnel_spinner {
	margin-right: 6px;
}

.is-locked {
	pointer-events: none;
	opacity: 0.6;
}

/* --- Searching overlay --- */

.funnel_overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(255,255,255,0.95);
	display: flex;
	align-items: center;
	justify-content: center;
}

.funnel_overlay__content {
	text-align: center;
	padding: 0 20px;
}

.funnel_overlay__content .fa {
	font-size: 42px;
	color: #297984;
	margin-bottom: 18px;
}

/* --- Degree / study option pages --- */

/* Picker tiles are links here (they were submit buttons on the legacy results page). */
a.degree_tile,
a.degree_tile:hover {
	color: inherit;
	text-decoration: none;
}

.programs_cta .comment_button {
	margin-top: 0;
	padding: 0 30px;
	width: auto;
}

/* --- Resources pager --- */

.resources_pager {
	margin-top: 40px;
}

.resources_pager__item {
	display: inline-block;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	margin: 0 3px;
	background: #f2f4f5;
	color: #384158;
	font-weight: 500;
}

.resources_pager__item:hover,
.resources_pager__item.is-current {
	background: #297984;
	color: #FFFFFF;
}

@media only screen and (max-width: 767px) {
	.funnel_fields .funnel_option {
		flex-basis: 100%;
	}

	.funnel_nav .comment_button,
	.funnel_back {
		padding: 0 16px;
	}

	.funnel_button--wide {
		padding: 0 18px;
	}
}