/* =====================================================================
   Support switch (theme 1.4.37, /skytabv2) — inc/skytabv2-page.php.
   Since 1.4.39 on every page in s4d_sup_pages(), after seolp-hero.css.
   ===================================================================== */

/* "Already a SkyTab customer? … Go to Support →" under the form (Dan's mockup). */
.s4d-sup__switch {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 20px; padding-top: 20px;
	border-top: 1px solid var(--s4d-border);
}
.s4d-sup__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--s4d-ink-500); }
.s4d-sup__text strong { display: block; font-size: 16px; font-weight: 800; color: var(--s4d-navy); }
.s4d-sup__btn {
	flex: none; display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; padding: 10px 18px;
	border: 1.5px solid var(--s4d-navy); border-radius: 999px;
	background: #fff; color: var(--s4d-navy);
	font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
	cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.s4d-sup__btn:hover { background: var(--s4d-navy); color: #fff; }
.s4d-sup__btn:focus-visible,
.s4d-sup__back:focus-visible { outline: 3px solid var(--s4d-blue); outline-offset: 2px; }

/* The ticket panel replaces the demo form in the same card. */
.s4d-sup__back {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; margin: -6px 0 6px; padding: 0;
	border: 0; background: none; color: var(--s4d-blue);
	font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.s4d-sup__back:hover { text-decoration: underline; }
.s4d-sup__title:focus { outline: none; }
.s4d-ohero__card.is-support > :not(.s4d-sup),
.s4d-ohero__card.is-support .s4d-sup__switch { display: none !important; }
.s4d-ohero__card.is-support .s4d-sup__panel[hidden] { display: none; }

/* Phones: the card steps back for the quiz (seolp-hero.css), so the switch
   and the ticket panel bring their own white card. */
@media (max-width: 767px) {
	.s4d-ohero__card--quiz .s4d-sup__switch {
		margin-top: 12px; padding: 16px;
		border: 0; border-radius: 14px; background: #fff;
		box-shadow: 0 0 0 1px var(--s4d-border);
	}
	.s4d-ohero__card--quiz.is-support {
		background: #fff; padding: 20px 16px;
		box-shadow: 0 16px 40px -20px rgba(11, 27, 58, .35), 0 0 0 1px var(--s4d-border);
	}
}
@media (max-width: 380px) {
	.s4d-sup__switch { flex-wrap: wrap; }
	.s4d-sup__btn { width: 100%; justify-content: center; }
}