/* B2B Apply — Multi-Step Application Form
   Colors/typography match the Divi child theme's existing Matador form styling
   (brand blue #0C71C3, 5px/20px radii, #f3f3f3 panel background — see child theme style.css). */

/* ---- Radio/checkbox option lists (e.g. Compact Yes/No) ----
   Matador's field-radio.php / field-checkbox.php templates render options as a
   plain <ul>; nothing in this theme resets its default list-style, so browser
   bullets show up next to each radio/checkbox. */
.b2b-apply-form .radio-options,
.b2b-apply-form .checkboxes {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.b2b-apply-form .radio-options .radio-option,
.b2b-apply-form .checkboxes .checkbox {
	margin: 0 0 6px;
}

.b2b-apply-form .radio-options label,
.b2b-apply-form .checkboxes label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
}

/* ---- Progress bar ---- */

.b2b-apply-progress {
	max-width: 720px;
	margin: 0 auto 30px;
}

.b2b-apply-progress-bar {
	height: 6px;
	background: #e2e2e2;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 16px;
}

.b2b-apply-progress-bar-fill {
	height: 100%;
	width: 25%;
	background: #0c71c3;
	border-radius: 3px;
	transition: width 0.3s ease;
}

.b2b-apply-progress-steps {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}

.b2b-apply-progress-step {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	opacity: 0.5;
	font-size: 14px;
}

.b2b-apply-progress-step.is-active,
.b2b-apply-progress-step.is-complete {
	opacity: 1;
}

.b2b-apply-progress-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #e2e2e2;
	color: #333;
	font-weight: 600;
	font-size: 13px;
	flex-shrink: 0;
}

.b2b-apply-progress-step.is-active .b2b-apply-progress-step-number {
	background: #0c71c3;
	color: #fff;
}

.b2b-apply-progress-step.is-complete .b2b-apply-progress-step-number {
	background: #1f9d55;
	color: #fff;
}

.b2b-apply-progress-step-label {
	font-weight: 500;
	display: none;
}

@media (min-width: 640px) {
	.b2b-apply-progress-step-label {
		display: inline;
	}
}

/* ---- "Apply Now" mobile fix ----
   The child theme's own pre-existing style.css (not written by this build) lays
   the job-detail meta row (Location / Type / Job ID / Apply Now) out with
   `display: flex` and no flex-wrap. On desktop that's fine -- four short items
   fit on one row. On narrow viewports the row has no room for all four, so the
   last item (the Apply Now link, which anchors down to #matador-application-form)
   gets flex-shrunk down to almost nothing while its text wraps vertically inside
   that squeezed space -- rendering as a thin, barely-tappable sliver instead of a
   button, on the one page type (job listings) whose whole point is reaching this
   form. Wrapping the row and giving the button its own full-width row fixes it
   without touching the shared theme stylesheet. */
@media (max-width: 767px) {
	body.single-matador-job-listings #main-content .matador-job-meta.single-job-detail {
		flex-wrap: wrap;
	}

	body.single-matador-job-listings #main-content .matador-job-meta.single-job-detail li.apply-btn {
		flex: 1 1 100%;
		text-align: center;
	}

	body.single-matador-job-listings #main-content .matador-job-meta.single-job-detail li.apply-btn a {
		display: block;
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
		padding-top: 14px;
		padding-bottom: 14px;
		min-height: 44px;
	}
}

/* ---- Form / steps ---- */

body.single-matador-job-listings #matador-application-form.b2b-apply-form {
	display: block;
}

.b2b-apply-step[hidden] {
	display: none !important;
}

.b2b-apply-step-title {
	font-size: 22px;
	margin: 0 0 20px;
}

.b2b-apply-step-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
}

.b2b-apply-step-fields > .matador-field-group {
	flex-basis: 100%;
}

@media (min-width: 640px) {
	.b2b-apply-step-fields > .matador-field-group.b2b-apply-field-half {
		flex-basis: 49%;
	}

	.b2b-apply-step-fields > .matador-field-group.b2b-apply-field-third {
		flex-basis: 32%;
	}
}

/* ---- Step 2 row width fix (Profession / Specialty / State of Professional
   Licensure or Certification) ----
   The Divi child theme's own pre-existing style.css sets flex-basis on these
   fields by name with !important: profession_ids at 32%, but specialty_ids
   and licensed_states at 23.5% (written for the old single-page form's
   different row groupings -- there, more fields shared each row). In this
   step's 3-field row, 32% + 23.5% + 23.5% + 2 gaps of 2% leaves roughly a
   fifth of the row as unfilled empty space on the right, and licensed_states
   ends up narrower than its "State of Professional Licensure or
   Certification" label needs, reading as cramped. This selector has three
   class-selectors of specificity against the theme's two, so it wins the
   !important-vs-!important tie regardless of stylesheet load order. */
@media (min-width: 640px) {
	.b2b-apply-step-fields > .matador-field-group.matador-field-profession_ids,
	.b2b-apply-step-fields > .matador-field-group.matador-field-specialty_ids,
	.b2b-apply-step-fields > .matador-field-group.matador-field-licensed_states {
		flex-basis: 32% !important;
	}
}

.b2b-apply-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	gap: 15px;
}

.b2b-apply-btn {
	padding: 14px 32px;
	font-weight: 600;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 16px;
}

.b2b-apply-btn-next,
.b2b-apply-btn-submit {
	background: #0c71c3;
	color: #fff;
	margin-left: auto;
}

.b2b-apply-btn-next:hover,
.b2b-apply-btn-submit:hover {
	background: #074d99;
}

.b2b-apply-btn-back {
	background: transparent;
	color: #0c71c3;
	border: 1px solid #0c71c3;
}

.b2b-apply-btn-back:hover {
	background: #f3f3f3;
}

.b2b-apply-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- Field validation ---- */

.b2b-apply-field-error {
	color: #ca4d2d;
	font-size: 14px;
	margin: -6px 0 10px;
	display: none;
}

.matador-field-group.b2b-apply-has-error .b2b-apply-field-error {
	display: block;
}

.matador-field-group.b2b-apply-has-error input,
.matador-field-group.b2b-apply-has-error select {
	border-color: #ca4d2d !important;
}

/* ---- Select loading state (Profession -> Specialty AJAX) ---- */

.b2b-apply-field-loading select {
	opacity: 0.6;
}

/* ---- Select2 sizing fix ----
   Matador's own plugin CSS (matador-styles.css) sets a 180px min-height on any
   <textarea> inside .matador-application, for genuine multi-line text fields.
   Select2's multi-select widget also renders its internal search box as a
   <textarea>, so it inherits that 180px min-height by accident, inflating the
   whole Specialty / State of License / Job Type / Preferred Shift control into
   a tall empty box instead of a compact dropdown. This resets just that
   internal search textarea back to an inline-search size. Higher specificity
   (two classes) than Matador's ".matador-application textarea" (one class,
   one tag) is enough to win the cascade, but !important guards against
   however the SiteGround CSS combiner orders the merged stylesheet. */
.b2b-apply-form .select2-search--inline .select2-search__field {
	min-height: 0 !important;
	height: 20px !important;
	padding: 0 !important;
	margin-top: 6px !important;
	font-size: 14px !important;
	box-shadow: none !important;
	border: none !important;
}

.b2b-apply-form .select2-selection--multiple {
	min-height: 40px;
}

/* ---- Review step ---- */

.b2b-apply-review-group {
	margin-bottom: 25px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ddd;
}

.b2b-apply-review-group:last-child {
	border-bottom: none;
}

.b2b-apply-review-group-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.b2b-apply-review-group-header h3 {
	font-size: 17px;
	margin: 0;
}

.b2b-apply-review-edit {
	background: none;
	border: none;
	color: #0c71c3;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

.b2b-apply-review-fields {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 8px 16px;
}

.b2b-apply-review-fields dt {
	font-weight: 500;
	opacity: 0.6;
}

.b2b-apply-review-fields dd {
	margin: 0;
}