/* ITS Move Sticky Bar. Colours come from --itsm-sb-* (set inline from the settings page). */
.itsm-sb {
	--itsm-sb-z: 9990;
	--itsm-sb-enroll: #ED6B08;
	--itsm-sb-whatsapp: #25D366;
	--itsm-sb-interview: #0472BA;
	font-family: inherit;
}

.itsm-sb *,
.itsm-sb *::before,
.itsm-sb *::after { box-sizing: border-box; }

/* Mobile action bar */
.itsm-sb__bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--itsm-sb-z);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 8px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid #D9D9D9;
	transform: translateY(0);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
	animation: itsm-sb-in .6s cubic-bezier(.16, 1, .3, 1) .4s backwards;
}

@keyframes itsm-sb-in { from { transform: translateY(110%); } }

.itsm-sb__bar.is-hidden { transform: translateY(110%); }

/* Selectors are deliberately specific: page builders colour every <a> and its :hover (Elementor kit). */
.itsm-sb .itsm-sb__bar a.itsm-sb__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 58px;
	padding: 7px 6px;
	border: 2px solid transparent;
	border-radius: 18px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600; /* the site font has Regular and Light only: the browser draws the bold, as on the site's own buttons */
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
	transition: transform .2s ease, filter .2s ease;
}

.itsm-sb .itsm-sb__bar a.itsm-sb__btn:hover,
.itsm-sb .itsm-sb__bar a.itsm-sb__btn:focus-visible { color: #fff; filter: brightness(1.06); text-decoration: none; }
.itsm-sb .itsm-sb__bar a.itsm-sb__btn:active { transform: scale(.97); }
.itsm-sb a.itsm-sb__btn:focus-visible,
.itsm-sb a.itsm-sb__float:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

.itsm-sb__btn svg { width: 22px; height: 22px; flex: none; }
.itsm-sb__btn span { max-width: 100%; text-wrap: balance; }

.itsm-sb .itsm-sb__bar a.itsm-sb__btn--enroll { background: var(--itsm-sb-enroll); }
.itsm-sb .itsm-sb__bar a.itsm-sb__btn--whatsapp { background: var(--itsm-sb-whatsapp); }
.itsm-sb .itsm-sb__bar a.itsm-sb__btn--interview { background: #fff; color: var(--itsm-sb-interview); border-color: var(--itsm-sb-interview); }
.itsm-sb .itsm-sb__bar a.itsm-sb__btn--interview:hover,
.itsm-sb .itsm-sb__bar a.itsm-sb__btn--interview:focus-visible { color: var(--itsm-sb-interview); }

/* Wider phones: icon beside the label, pill shape. */
@media (min-width: 440px) {
	.itsm-sb .itsm-sb__bar a.itsm-sb__btn { flex-direction: row; gap: 8px; min-height: 52px; padding: 8px 12px; border-radius: 999px; font-size: 15px; }
}

/* Floating WhatsApp button (desktop). Hidden by default, shown by the breakpoint rules added inline. */
.itsm-sb a.itsm-sb__float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: var(--itsm-sb-z);
	display: none;
	align-items: center;
	gap: 10px;
	height: 60px;
	padding: 0 18px;
	border-radius: 30px;
	background: var(--itsm-sb-whatsapp);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 12px 28px rgba(17, 17, 17, .2);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
	animation: itsm-sb-pop .6s cubic-bezier(.16, 1, .3, 1) .4s backwards;
}

@keyframes itsm-sb-pop { from { transform: scale(.6); opacity: 0; } }

.itsm-sb__float svg { width: 28px; height: 28px; flex: none; }

.itsm-sb__float-label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 15px;
	transition: max-width .45s cubic-bezier(.16, 1, .3, 1);
}

.itsm-sb a.itsm-sb__float:hover,
.itsm-sb a.itsm-sb__float:focus-visible { transform: translateY(-3px); color: #fff; text-decoration: none; box-shadow: 0 18px 36px rgba(17, 17, 17, .25); }
.itsm-sb__float:hover .itsm-sb__float-label,
.itsm-sb__float:focus-visible .itsm-sb__float-label { max-width: 240px; }

/* Keeps the end of the page reachable behind the fixed bar (height measured by sticky-bar.js). */
html.itsm-sb-pad body { padding-bottom: var(--itsm-sb-h, 0px); }

/* Cookiebot's preferences widget is fixed bottom-left: lift it above the bar while the bar is showing. */
html.itsm-sb-pad #CookiebotWidget { bottom: calc(var(--itsm-sb-h, 0px) + 12px) !important; }

/* Scroll threshold: hidden until the visitor scrolls (class added by JS only, so no JS means always visible). */
.itsm-sb.is-waiting .itsm-sb__bar { transform: translateY(110%); animation: none; }
.itsm-sb.is-waiting a.itsm-sb__float { opacity: 0; pointer-events: none; animation: none; }

/* Settings page preview */
.itsm-sb--preview .itsm-sb__bar { position: static; animation: none; transform: none; max-width: 420px; border: 1px solid #D9D9D9; border-radius: 16px; }
.itsm-sb.itsm-sb--preview a.itsm-sb__float { position: static; display: inline-flex; margin-top: 12px; animation: none; }
.itsm-sb--preview .itsm-sb__float-label { max-width: 240px; }

@media (prefers-reduced-motion: reduce) {
	.itsm-sb__bar,
	.itsm-sb a.itsm-sb__float { animation: none; transition: none; }
}

@media print { .itsm-sb { display: none !important; } }
