/* Anders job design — Contact Form 7 bridge.
   Theme-authored. The design's forms are plain markup; the real forms are CF7,
   which wraps every control in <span class="wpcf7-form-control-wrap">. That
   wrapper breaks two things in the ported CSS, and this file repairs both
   without editing the ported file. */

/* 1. Layout. The wrapper is a inline box between .field and its control, so it
   would otherwise sit in the middle of every grid/flex relationship the design
   set up. display:contents removes it from the box tree while leaving the DOM
   (and CF7's JS hooks) untouched. */
.anders-design .wpcf7-form-control-wrap {
	display: contents;
}

/* 2. The floating label. The design selects it as an adjacent sibling
   (`.field input:focus + label`), which no longer matches once the input is
   nested inside the wrapper. :has() re-expresses the same three states against
   the .field itself, so nesting stops mattering. The design already relies on
   :has() elsewhere, so this adds no new browser requirement. */
.anders-design .field:has(input:focus) label,
.anders-design .field:has(textarea:focus) label,
.anders-design .field:has(select:focus) label,
.anders-design .field:has(input:not(:placeholder-shown)) label,
.anders-design .field:has(textarea:not(:placeholder-shown)) label {
	top: 7px;
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 600;
}

/* CF7 emits its own <p> wrappers and a response block; neither is in the
   design. Strip the spacing rather than the elements, so CF7 can still write
   status messages into them.

   :not([class]) is what separates the two kinds of <p> inside the form. CF7's
   wrappers are bare; the design's own paragraphs are always classed, and
   .field-hint carries a deliberate `-5px 0 11px` that pulls the hint up under
   the textarea and opens a gap before the button. A blanket `form p` zeroed
   that, closing the gap under the Ask an Expert hint. */
.anders-design .wpcf7 form p:not([class]) {
	margin: 0;
}

/* Inside a .field, zeroing the margin is not enough. wpautop's <p> is a block
   with a line box, and the control inside it is inline-level, so the line
   box's strut adds its own descent under the control — a 52px field measuring
   53, and the textarea's field 4px over. It compounds down the form, which is
   what pushed the Ask an Expert modal into a scrollbar. display:contents drops
   the wrapper out of the box tree for the same reason it is dropped from
   .wpcf7-form-control-wrap above, leaving .field holding the control directly,
   exactly as the design's own markup does. */
.anders-design .field > p:not([class]) {
	display: contents;
}

/* The design hangs the ask form off its own id — `#ask-form{margin-top:16px}`
   — which CF7 cannot honour: it renders the form with a generated id inside a
   .wpcf7 wrapper, so the rule matched nothing and the form sat flush against
   the job pill. Restate it against the wrapper the shortcode actually emits. */
.anders-design .ask-card .wpcf7 {
	margin-top: var(--s-4);
}

/* The Apply card is rendered once and moved into this centered dialog below
   1024px. Native top-layer placement supplies the backdrop, background
   inertness, focus containment and Escape behavior while the existing card
   remains the scrollport for genuinely short mobile viewports. */
.anders-design dialog.apply-sheet {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--s-4);
	border: 0;
	background: transparent;
	color: inherit;
	justify-content: center;
	align-items: center;
	overflow: auto;
	overscroll-behavior: contain;
	transform: none;
	transition: none;
}

.anders-design dialog.apply-sheet:not([open]) {
	display: none;
}

.anders-design dialog.apply-sheet[open] {
	display: flex;
}

body.anders-design dialog.apply-sheet::backdrop {
	background: var(--scrim);
}

.anders-design dialog.apply-sheet .apply-card {
	width: 100%;
	max-width: 400px;
	max-height: calc(100vh - (2 * var(--s-4)));
	max-height: calc(100dvh - (2 * var(--s-4)));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--r);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
}

.anders-design dialog.apply-sheet .apply-head {
	/* Keep the blue fill inside the card's 1px border without clipping its sticky header. */
	border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}

.anders-design dialog.apply-sheet .apply-head-row {
	gap: 10px;
}

.anders-design dialog.apply-sheet .apply-head-row .pill-action {
	margin-inline-start: auto;
}

.anders-design dialog.apply-sheet .sheet-handle {
	display: none;
}

/* The Apply form and its desktop-only question route are separate sibling
   cards, matching the supplied rail reference without nesting one card inside
   another. Their wrapper is the single node moved between the desktop rail and
   mobile dialog, so typed form state survives a breakpoint change. */
.anders-design .apply-stack {
	display: grid;
	gap: var(--s-4);
	width: 100%;
}

.anders-design .apply-support {
	display: none;
	padding: 20px;
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	border-radius: var(--r);
}

.anders-design .apply-support h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--navy);
}

.anders-design .apply-support__icon {
	flex: none;
	color: var(--accent);
}

.anders-design .apply-support__copy {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--slate);
}

.anders-design .apply-support__button {
	margin-top: var(--s-4);
	background: var(--accent);
	color: var(--on-dark);
	box-shadow: none;
}

.anders-design .apply-support__button:hover {
	background: var(--accent-d);
	color: var(--on-dark);
	transform: translateY(-1px);
}

.anders-design .apply-support__button:active {
	transform: translateY(0);
}

/* The question dialog continues the blue action established by its opener.
   Scope this to the Ask form so Apply Now remains the one neon action. */
.anders-design .ask-card .wpcf7-submit {
	background: var(--accent);
	color: var(--on-dark);
	box-shadow: none;
}

.anders-design .ask-card .wpcf7-submit:not(:disabled):hover {
	background: var(--accent-d);
	color: var(--on-dark);
	transform: translateY(-1px);
}

.anders-design .ask-card .wpcf7-submit:not(:disabled):active {
	transform: translateY(0);
}

.anders-design .apply-support__note {
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	color: var(--muted);
}

/* The stack becomes the mobile scrollport. The support card is hidden below
   1024px, leaving the shortened application form reachable on short screens. */
.anders-design dialog.apply-sheet .apply-stack {
	max-width: 400px;
	max-height: calc(100vh - (2 * var(--s-4)));
	max-height: calc(100dvh - (2 * var(--s-4)));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--r);
}

.anders-design dialog.apply-sheet .apply-stack > .apply-card {
	max-width: none;
	max-height: none;
	overflow: visible;
}

@media (min-width: 1024px) {
	.anders-design .apply-support {
		display: block;
	}
}

/* Search-card Apply Now uses the approved job-search reference card inside a
   native dialog. The compact card stays centered at every viewport width. */
.anders-design dialog.anders-qa-dialog {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--s-4);
	border: 0;
	background: transparent;
	color: inherit;
	justify-content: center;
	align-items: center;
	overflow: auto;
	overscroll-behavior: contain;
}

.anders-design dialog.anders-qa-dialog:not([open]) {
	display: none;
}

.anders-design dialog.anders-qa-dialog[open] {
	display: flex;
}

.anders-design dialog.anders-qa-dialog::backdrop {
	background: var(--scrim);
}

.anders-design dialog.anders-qa-dialog .apply-card {
	width: 100%;
	max-width: 400px;
	max-height: calc(100dvh - (2 * var(--s-4)));
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: var(--shadow-lg);
}

/* One authored arrival connects the clicked card action to the application
   task. The card comes into focus from that CTA's direction while the scrim
   settles behind it; there is no overshoot or elastic rebound. */
.anders-design dialog.apply-sheet.is-entering::backdrop,
.anders-design dialog.anders-qa-dialog.is-entering::backdrop {
	animation: anders-qa-backdrop-in 320ms cubic-bezier(.16, 1, .3, 1) both;
}

.anders-design dialog.apply-sheet.is-entering .apply-stack,
.anders-design dialog.anders-qa-dialog.is-entering .apply-card {
	animation: anders-qa-dialog-in 420ms cubic-bezier(.16, 1, .3, 1) both;
	transform-origin: center;
	will-change: transform, opacity, filter;
}

/* Dialog-only type roles. Keep the established system face and 700 ceiling,
   but give the task heading, supporting copy and form controls enough size to
   scan comfortably. The 16px inputs also avoid iOS focus zoom. */
.anders-design dialog.anders-qa-dialog .apply-head h2 {
	font-size: 22px;
	line-height: 1.18;
	letter-spacing: -.018em;
	text-wrap: balance;
}

.anders-design dialog.anders-qa-dialog .apply-head p {
	max-width: 32ch;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .005em;
}

.anders-design dialog.anders-qa-dialog .apply-ctx {
	font-size: 13.5px;
	line-height: 1.5;
}

.anders-design dialog.anders-qa-dialog #qaModalJob {
	font-size: 13px;
}

.anders-design dialog.anders-qa-dialog .field input,
.anders-design dialog.anders-qa-dialog .field select,
.anders-design dialog.anders-qa-dialog .field textarea {
	font-size: 16px;
	line-height: 1.25;
}

.anders-design dialog.anders-qa-dialog .field label {
	font-weight: 500;
}

.anders-design dialog.anders-qa-dialog .field:has(input:focus) label,
.anders-design dialog.anders-qa-dialog .field:has(textarea:focus) label,
.anders-design dialog.anders-qa-dialog .field:has(select:focus) label,
.anders-design dialog.anders-qa-dialog .field:has(input:not(:placeholder-shown)) label,
.anders-design dialog.anders-qa-dialog .field:has(textarea:not(:placeholder-shown)) label {
	font-size: 11px;
	line-height: 1;
	letter-spacing: .05em;
}

.anders-design dialog.anders-qa-dialog .attach-line {
	font-size: 14px;
	line-height: 1.35;
}

.anders-design dialog.anders-qa-dialog .attach-meta,
.anders-design dialog.anders-qa-dialog .consent span {
	font-size: 12.5px;
	line-height: 1.5;
}

.anders-design dialog.anders-qa-dialog .apply-rating {
	font-size: 13px;
	line-height: 1.45;
}

.anders-design dialog.anders-qa-dialog .apply-success:not([hidden]) {
	display: block;
}

body.anders-design.cxs-quick-apply-open {
	overflow: hidden;
}

@keyframes anders-qa-backdrop-in {
	from {
		background: rgba(3, 29, 47, 0);
	}
	to {
		background: var(--scrim);
	}
}

@keyframes anders-qa-dialog-in {
	from {
		opacity: .35;
		transform: translate3d(var(--qa-origin-x, 0), var(--qa-origin-y, 18px), 0) scale(.96);
		filter: blur(3px);
		box-shadow: 0 8px 24px rgba(1, 22, 36, .10);
	}
	60% {
		opacity: 1;
		filter: blur(0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		filter: blur(0);
		box-shadow: var(--shadow-lg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.anders-design dialog.apply-sheet.is-entering::backdrop,
	.anders-design dialog.apply-sheet.is-entering .apply-stack,
	.anders-design dialog.anders-qa-dialog.is-entering::backdrop,
	.anders-design dialog.anders-qa-dialog.is-entering .apply-card {
		animation: none;
	}
}

/* Rebuild the question modal on the browser's native dialog top layer. This
   guarantees that both the card and its backdrop sit above the site's 1100
   z-index header. Neither the full-viewport dialog nor the card scrolls at the
   supported sizes, so a wheel/touch gesture over the question field cannot
   move the whole form or reveal a blank tail beneath the CTA. */
.anders-design dialog.ask-modal {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--s-4);
	border: 0;
	background: transparent;
	color: inherit;
	overflow-x: hidden;
	overflow-y: hidden;
	overscroll-behavior: none;
	scrollbar-width: none;
}

.anders-design dialog.ask-modal:not([open]) {
	display: none;
}

.anders-design dialog.ask-modal[open] {
	display: block;
}

body.anders-design dialog.ask-modal::backdrop {
	background: var(--scrim);
}

.anders-design .ask-modal-shell {
	display: flex;
	width: 100%;
	min-height: 100%;
}

.anders-design .ask-modal-shell .ask-card {
	width: 100%;
	max-width: 440px;
	max-height: none;
	margin: auto;
	overflow: visible;
}

.anders-design .ask-card textarea {
	overflow-x: hidden;
	resize: none;
	scrollbar-width: none;
}

.anders-design dialog.ask-modal::-webkit-scrollbar,
.anders-design .ask-card textarea::-webkit-scrollbar {
	display: none;
}

/* A 320 x 568 phone cannot hold the desktop rhythm without overflowing. Keep
   the same two-column form and hierarchy, but tighten only vertical metrics at
   this constrained size. This removes the former 87px modal scroll range
   while retaining 44px minimum close-button and control targets. */
@media (max-width: 639px) and (max-height: 640px) {
	.anders-design dialog.ask-modal {
		padding: var(--s-2);
	}

	.anders-design .ask-modal-shell .ask-card {
		padding: var(--s-4);
	}

	.anders-design .ask-card h2 {
		font-size: 18px;
		line-height: 1.18;
	}

	.anders-design .ask-sub {
		margin-top: 4px;
		font-size: 13px;
		line-height: 1.45;
	}

	.anders-design .job-pill {
		margin-top: var(--s-2);
		padding: 5px 10px;
		font-size: 12.5px;
	}

	.anders-design .ask-card .wpcf7 {
		margin-top: var(--s-2);
	}

	.anders-design .ask-card .field {
		margin-bottom: 7px;
	}

	.anders-design .ask-card .field input,
	.anders-design .ask-card .field textarea {
		min-height: 46px;
		padding: 17px 11px 5px;
		font-size: 14px;
	}

	.anders-design .ask-card .field textarea {
		min-height: 72px;
		padding-top: 22px;
	}

	.anders-design .ask-card .field label {
		left: 11px;
		top: 11px;
		font-size: 14px;
	}

	.anders-design .ask-card .field input:focus + label,
	.anders-design .ask-card .field textarea:focus + label,
	.anders-design .ask-card .field input:not(:placeholder-shown) + label,
	.anders-design .ask-card .field textarea:not(:placeholder-shown) + label,
	.anders-design .ask-card .field.filled label {
		top: 5px;
		font-size: 9.5px;
	}

	.anders-design .ask-card .field-hint {
		margin: -3px 0 7px;
		font-size: 11.5px;
		line-height: 1.35;
	}

	.anders-design .ask-card .btn-block {
		min-height: 46px;
		padding: 11px;
	}

	/* Keep the concise field errors on one line at 320px so validation does
	   not push the fixed dialog or its submit action below the viewport. */
	.anders-design .ask-card .wpcf7-not-valid-tip {
		margin-top: 2px;
		font-size: 10px;
		line-height: 1.2;
		white-space: nowrap;
	}
}

.anders-design .wpcf7-spinner {
	display: none;
}

/* Validation. CF7's default red border/message styling is a different design
   language, and so is a bare red outline: the article forms already say
   "error" in a fuller voice (assets/css/blog-components.css) — a soft danger
   wash behind the control, a red label, a bold tip, and a response block led
   by an icon. Someone who trips a form on an article and then on a job page
   should meet the same thing, so this restates that treatment against the
   design's own field boxes rather than inventing a second error language.

   The danger ramp is not in the ported token file (which must not be
   hand-edited), so declare it here on the design scope, at the values
   blog-tokens.css uses. --green / --green-soft the success state needs are
   already in anders-tokens.css at the blog's values. */
.anders-design {
	--danger: #b42318;
	--danger-soft: #fff3f1;
	--danger-line: #f0b7af;
}

/* The control. Reached through .field so it outranks the design's own
   `.field input` box on specificity instead of !important; the CF7-scoped
   selector catches anything marked outside a .field, and has to carry
   .wpcf7-form-control to clear CF7's own `.wpcf7 .wpcf7-form-control
   .wpcf7-not-valid` border. background-color rather than background, so the
   select keeps its chevron. */
.anders-design .wpcf7 .wpcf7-form-control.wpcf7-not-valid,
.anders-design .field input.wpcf7-not-valid,
.anders-design .field select.wpcf7-not-valid,
.anders-design .field textarea.wpcf7-not-valid {
	border-color: var(--danger-line);
	background-color: var(--danger-soft);
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .08);
}

/* The label. The blog toggles an .is-invalid class from JS (single-post.js);
   here the state is read straight off the control instead, since the design
   already depends on :has(). Placed after the floating-label rules above so
   danger wins over the focused label's accent at equal specificity. */
.anders-design .field:has(.wpcf7-not-valid) label {
	color: var(--danger);
}

.anders-design .wpcf7-not-valid-tip {
	display: flex;
	align-items: flex-start;
	margin: 6px 2px 0;
	color: var(--danger);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

/* The response block. Colour and border carry the state on their own — the
   status icon and the wide left gutter it sat in are gone, so the text starts
   at the same inset as every other side.

   CF7's own stylesheet sets the border, padding and margin here at
   `.wpcf7 form .wpcf7-response-output`, and repeats the border colour once
   per state. So each state is restated below rather than left to inherit the
   base rule: a base rule alone only ties with CF7's per-state ones, and the
   winner would then depend on which stylesheet the page happened to enqueue
   last. */
.anders-design .wpcf7 form .wpcf7-response-output,
.anders-design .wpcf7 form.invalid .wpcf7-response-output,
.anders-design .wpcf7 form.unaccepted .wpcf7-response-output,
.anders-design .wpcf7 form.failed .wpcf7-response-output,
.anders-design .wpcf7 form.aborted .wpcf7-response-output,
.anders-design .wpcf7 form.spam .wpcf7-response-output,
.anders-design .wpcf7 form.payment-required .wpcf7-response-output {
	display: block;
	margin: var(--s-3) 0 0;
	padding: 12px 14px;
	border: 1px solid var(--danger-line);
	border-radius: var(--r-sm);
	background: var(--danger-soft);
	box-shadow: 0 1px 2px rgba(1, 22, 36, .04);
	color: var(--danger);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
}

/* CF7 renders the block on every load and fills it on submit; unfilled it
   would otherwise sit under the button as an empty red bar. */
.anders-design .wpcf7 form .wpcf7-response-output:empty {
	display: none;
}

/* The `display: block` above outranks the `hidden` attribute's UA rule, so a
   controller that hides this block gets ignored. quick-apply-modal.js relies on
   exactly that to suppress CF7's own "Thanks…" while it drives the search
   dialog's success screen off its lead pipeline — without this the CF7 message
   showed through anyway, including on the lead-failed path where it contradicts
   the error underneath it. */
.anders-design .wpcf7 form .wpcf7-response-output[hidden] {
	display: none;
}

/* The lead pipeline's own failures — quick-apply-modal.js appends
   .qa-modal__error for a rejected admin-ajax submission or a phone that fails
   its client-side check. Those never reach CF7, so CF7 never renders them, and
   the archive stylesheet that styles this box (quick-apply-modal.css, scoped to
   .cxs-jobs-v2) is one of the sheets this design replaces. Matching the response
   block above keeps one error look in the card, whichever layer raised it. */
.anders-design .qa-modal__error {
	display: block;
	margin: var(--s-3) 0 0;
	padding: 12px 14px;
	border: 1px solid var(--danger-line);
	border-radius: var(--r-sm);
	background: var(--danger-soft);
	box-shadow: 0 1px 2px rgba(1, 22, 36, .04);
	color: var(--danger);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
}

/* Invalid Ask submissions already place one specific message beside every
   affected control, while CF7's clipped screen-reader response announces the
   form summary. Keeping the second, generic visual response below the button
   repeats the same error state and needlessly lengthens the compact dialog. */
.anders-design .ask-card .wpcf7 form.invalid .wpcf7-response-output {
	display: none;
}

/* `.resetting` rides along with `.sent`. On a successful send CF7 calls
   form.reset(), which starts a refill request and swaps the form's status from
   `sent` to `resetting` for the length of that round trip — and only then
   writes the success message into the response block. CF7's own stylesheet
   hides the block while resetting, but the base rule above re-shows it, so the
   success message would spend that round trip painted in the error colours
   before flipping to green. Nothing else fills the block during a reset: CF7
   empties it first, and `:empty` above hides it. */
.anders-design .wpcf7 form.sent .wpcf7-response-output,
.anders-design .wpcf7 form.resetting .wpcf7-response-output {
	border-color: #a9d8bf;
	background: var(--green-soft);
	color: var(--green);
}

/* The consent checkbox: CF7's [acceptance] renders its own label wrapper, which
   would nest a label inside the design's .consent label. Flatten it back to the
   design's checkbox + text row. */
.anders-design .consent .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.anders-design .consent .wpcf7-list-item-label {
	display: none;
}

/* The Quick Apply consent box is required (cxs_anders_apply_require_sms_consent()).
   CF7 puts its error tip inside the checkbox's wrapper, which would squeeze it
   into a column between the box and the text; unwrapping the wrapper lets the
   tip drop to its own row under the text. The selector clears the consent
   small print's `span` rules, the dialog's included, so the tip keeps the
   danger colour every other field tip uses. */
.anders-design .consent {
	flex-wrap: wrap;
	row-gap: 4px;
}

.anders-design .consent .wpcf7-form-control-wrap {
	display: contents;
}

/* Wrapping would otherwise move the whole text under the box, not just the tip. */
.anders-design .consent > span:not(.wpcf7-form-control-wrap) {
	flex: 1 1 0;
	min-width: 0;
}

.anders-design .consent .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	order: 1;
	flex-basis: 100%;
	margin: 0 0 0 25px; /* 16px box + 9px gap: aligned with the text. */
	color: var(--danger);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
}

/* wpautop turns every newline inside the form body into a <br>, which breaks a
   row whose parts are meant to sit on one line. The form bodies are authored
   accordingly (see scripts/sync-anders-forms.php); this keeps an edit made in
   CF7's own editor from silently stacking these rows again. */
.anders-design .attach-line br,
.anders-design .consent br {
	display: none;
}

/* The file input is styled by .attach-line in the design; CF7's control needs
   the same visually-hidden treatment the design gives the raw input. */
.anders-design .attach-line .wpcf7-file {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* The sheet handle and the close button are affordances for the mobile bottom
   sheet. The apply card is one node moved between the rail and the sheet, so
   they have to hide themselves in the rail rather than exist only in the
   sheet's copy. */
.anders-design .apply-rail .sheet-handle,
.anders-design .apply-rail .sheet-close {
	display: none;
}

/* Same for the Quick Apply confirmation's Keep Browsing: it closes the sheet,
   and the rail is not a pop-up, so there the confirmation ends at its text. */
.anders-design .apply-rail .apply-success .success-links {
	display: none;
}

/* anders-apply-success.js hides the mobile Apply Now bar once this job has
   been applied for; the ported bar rule sets display, which beats [hidden]. */
.anders-design .mobile-apply-bar[hidden] {
	display: none;
}