/**
 * Floating contact buttons — frontend
 */

/* Hidden while mobile nav drawer is open (see header.js body.nav-open). */
body.nav-open .jawharet-floating {
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
}

.jawharet-floating {
	--jawharet-floating-z: 50000;
	--jawharet-floating-phone: var(--jw-color-primary, var(--color-teal, #087e8b));
	--jawharet-floating-phone-hover: var(--jw-color-accent, var(--color-teal-dark, #066670));
	--jawharet-floating-wa-brand: #25d366;
	--jawharet-floating-wa-brand-hover: #1da851;
	--jawharet-floating-wa-accent: var(--jw-color-accent, var(--color-teal-dark, #066670));
	--jawharet-floating-size: 3.25rem;
	--jawharet-floating-gap: 0.65rem;
	--jawharet-floating-offset-x: 1.15rem;
	--jawharet-floating-offset-y: 1.15rem;
	--jawharet-floating-icon: 1.35rem;

	position: fixed;
	z-index: var(--jawharet-floating-z);
	bottom: calc(var(--jawharet-floating-offset-y) + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--jawharet-floating-gap);
	font-family: var(--font-family-base, inherit);
	pointer-events: none;
}

.jawharet-floating--pos-right {
	right: calc(var(--jawharet-floating-offset-x) + env(safe-area-inset-right, 0px));
	left: auto;
}

.jawharet-floating--pos-left {
	left: calc(var(--jawharet-floating-offset-x) + env(safe-area-inset-left, 0px));
	right: auto;
	align-items: flex-start;
}

.jawharet-floating--offset-near {
	--jawharet-floating-offset-x: 0.65rem;
	--jawharet-floating-offset-y: 0.65rem;
}

.jawharet-floating--offset-medium {
	--jawharet-floating-offset-x: 1.15rem;
	--jawharet-floating-offset-y: 1.15rem;
}

.jawharet-floating--offset-far {
	--jawharet-floating-offset-x: 1.75rem;
	--jawharet-floating-offset-y: 1.75rem;
}

.jawharet-floating--size-small {
	--jawharet-floating-size: 2.75rem;
	--jawharet-floating-icon: 1.15rem;
}

.jawharet-floating--size-large {
	--jawharet-floating-size: 3.75rem;
	--jawharet-floating-icon: 1.5rem;
}

.jawharet-floating--hide-desktop {
	display: none;
}

@media (max-width: 781px) {
	.jawharet-floating--hide-mobile {
		display: none;
	}

	.jawharet-floating--hide-desktop {
		display: flex;
	}
}

@media (min-width: 782px) {
	.jawharet-floating--hide-desktop {
		display: none;
	}

	.jawharet-floating:not(.jawharet-floating--hide-mobile) {
		display: flex;
	}
}

.jawharet-floating__stack,
.jawharet-floating__menu,
.jawharet-floating__toggle {
	pointer-events: auto;
}

.jawharet-floating__stack,
.jawharet-floating__menu {
	display: flex;
	flex-direction: column;
	gap: var(--jawharet-floating-gap);
}

/* Expandable: menu stacks above the main trigger (DOM order: menu, then toggle). */
.jawharet-floating--mode-expandable {
	flex-direction: column;
	align-items: flex-end;
}

.jawharet-floating--mode-expandable.jawharet-floating--pos-left {
	align-items: flex-start;
}

.jawharet-floating__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-width: var(--jawharet-floating-size);
	min-height: var(--jawharet-floating-size);
	padding: 0 0.85rem;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgb(20 45 62 / 0.18);
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.jawharet-floating--shape-circle .jawharet-floating__btn:not(.jawharet-floating__btn--main) {
	width: var(--jawharet-floating-size);
	padding: 0;
}

.jawharet-floating--shape-circle .jawharet-floating__btn .jawharet-floating__btn-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.jawharet-floating--shape-rounded .jawharet-floating__btn {
	border-radius: 0.75rem;
}

.jawharet-floating__btn:focus-visible {
	outline: 2px solid var(--jw-color-primary, var(--color-teal, #087e8b));
	outline-offset: 3px;
}

/* Override global `a:hover` link colors (main.css) so labels/icons stay readable. */
.jawharet-floating a.jawharet-floating__btn:is(:hover, :focus-visible, :active),
.jawharet-floating button.jawharet-floating__btn:is(:hover, :focus-visible, :active),
.jawharet-floating.is-open .jawharet-floating__btn--main,
.jawharet-floating.is-open .jawharet-floating__toggle {
	color: #fff;
}

.jawharet-floating a.jawharet-floating__btn:is(:hover, :focus-visible, :active) .jawharet-floating__btn-text,
.jawharet-floating button.jawharet-floating__btn:is(:hover, :focus-visible, :active) .jawharet-floating__btn-text,
.jawharet-floating.is-open .jawharet-floating__btn--main .jawharet-floating__btn-text {
	color: #fff;
}

.jawharet-floating a.jawharet-floating__btn:is(:hover, :focus-visible, :active) .jawharet-floating__icon,
.jawharet-floating button.jawharet-floating__btn:is(:hover, :focus-visible, :active) .jawharet-floating__icon,
.jawharet-floating.is-open .jawharet-floating__btn--main .jawharet-floating__icon {
	color: #fff;
}

.jawharet-floating a.jawharet-floating__btn:is(:hover, :focus-visible, :active) .jawharet-floating__icon svg,
.jawharet-floating button.jawharet-floating__btn:is(:hover, :focus-visible, :active) .jawharet-floating__icon svg,
.jawharet-floating.is-open .jawharet-floating__btn--main .jawharet-floating__icon svg {
	color: #fff;
	fill: currentColor;
	stroke: currentColor;
}

.jawharet-floating__btn--color-primary {
	background: var(--jawharet-floating-phone);
}

.jawharet-floating__btn--color-primary:hover,
.jawharet-floating__btn--color-primary:focus-visible {
	background: var(--jawharet-floating-phone-hover);
}

.jawharet-floating__btn--color-accent {
	background: var(--jw-color-accent, var(--color-teal-dark, #066670));
}

.jawharet-floating__btn--color-brand {
	background: var(--jawharet-floating-btn-brand, var(--jawharet-floating-wa-brand));
}

.jawharet-floating__btn--color-brand:hover,
.jawharet-floating__btn--color-brand:focus-visible {
	filter: brightness(0.92);
}

.jawharet-floating__btn--color-custom {
	background: var(--jawharet-floating-btn-custom, var(--jawharet-floating-phone));
}

.jawharet-floating__btn--color-custom:hover,
.jawharet-floating__btn--color-custom:focus-visible {
	filter: brightness(0.92);
}

.jawharet-floating__btn--snapchat.jawharet-floating__btn--color-brand {
	color: #1a1a1a;
}

.jawharet-floating__btn--main {
	background: var(--jawharet-floating-phone);
	padding-inline: 1rem;
}

.jawharet-floating__btn--main:hover,
.jawharet-floating__btn--main:focus-visible {
	background: var(--jawharet-floating-phone-hover);
}

/* Expandable main trigger: stack open/close icons in one grid cell so width stays stable. */
.jawharet-floating--mode-expandable .jawharet-floating__toggle.jawharet-floating__btn--main {
	display: inline-grid;
	grid-template-columns: var(--jawharet-floating-icon) minmax(0, max-content);
	align-items: center;
	column-gap: 0.45rem;
	padding-inline: 1rem;
	min-height: var(--jawharet-floating-size);
	min-width: var(--jawharet-floating-size);
}

.jawharet-floating--mode-expandable .jawharet-floating__toggle .jawharet-floating__icon--main,
.jawharet-floating--mode-expandable .jawharet-floating__toggle .jawharet-floating__icon--close {
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
}

.jawharet-floating--mode-expandable .jawharet-floating__toggle .jawharet-floating__btn-text {
	grid-column: 2;
	grid-row: 1;
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: nowrap;
}

.jawharet-floating__icon {
	display: inline-flex;
	width: var(--jawharet-floating-icon);
	height: var(--jawharet-floating-icon);
	flex-shrink: 0;
}

.jawharet-floating__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.jawharet-floating__icon--close,
.jawharet-floating.is-open .jawharet-floating__icon--main {
	display: none;
}

.jawharet-floating.is-open .jawharet-floating__icon--close {
	display: inline-flex;
}

.jawharet-floating__menu[hidden] {
	display: none !important;
}

.jawharet-floating.is-open .jawharet-floating__menu {
	animation: jawharet-floating-menu-in 180ms ease;
}

@keyframes jawharet-floating-menu-in {
	from {
		opacity: 0;
		transform: translateY(0.35rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jawharet-floating__btn {
		transition: none;
	}

	.jawharet-floating.is-open .jawharet-floating__menu {
		animation: none;
	}
}

/* Separate mode only: reveal label on hover/focus (desktop). */
@media (min-width: 782px) {
	.jawharet-floating--mode-separate.jawharet-floating--shape-circle .jawharet-floating__btn:focus-visible .jawharet-floating__btn-text,
	.jawharet-floating--mode-separate.jawharet-floating--shape-circle .jawharet-floating__btn:hover .jawharet-floating__btn-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: nowrap;
		padding-inline-end: 0.15rem;
	}

	.jawharet-floating--mode-separate.jawharet-floating--shape-circle .jawharet-floating__btn:focus-visible,
	.jawharet-floating--mode-separate.jawharet-floating--shape-circle .jawharet-floating__btn:hover {
		width: auto;
		padding-inline: 0.85rem;
	}
}

/* Expandable menu: fixed-size child buttons; labels as non-layout tooltips. */
.jawharet-floating--mode-expandable .jawharet-floating__menu .jawharet-floating__btn {
	position: relative;
	flex-shrink: 0;
}

.jawharet-floating--mode-expandable.jawharet-floating--shape-circle .jawharet-floating__menu .jawharet-floating__btn {
	width: var(--jawharet-floating-size);
	height: var(--jawharet-floating-size);
	min-width: var(--jawharet-floating-size);
	max-width: var(--jawharet-floating-size);
	padding: 0;
}

.jawharet-floating--mode-expandable .jawharet-floating__menu .jawharet-floating__btn:is(:hover, :focus-visible) {
	width: var(--jawharet-floating-size);
	min-width: var(--jawharet-floating-size);
	max-width: var(--jawharet-floating-size);
	padding: 0;
}

.jawharet-floating--mode-expandable.jawharet-floating--shape-rounded .jawharet-floating__menu .jawharet-floating__btn {
	width: var(--jawharet-floating-size);
	height: var(--jawharet-floating-size);
	min-width: var(--jawharet-floating-size);
	max-width: var(--jawharet-floating-size);
	padding: 0;
}

.jawharet-floating--mode-expandable .jawharet-floating__menu .jawharet-floating__btn .jawharet-floating__btn-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.jawharet-floating--mode-expandable .jawharet-floating__menu .jawharet-floating__btn:is(:hover, :focus-visible) .jawharet-floating__btn-text {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: max-content;
	max-width: min(14rem, 70vw);
	height: auto;
	margin: 0;
	padding: 0.35rem 0.55rem;
	overflow: visible;
	clip: auto;
	white-space: nowrap;
	pointer-events: none;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	background: rgb(20 45 62 / 0.92);
	border-radius: 0.4rem;
	box-shadow: 0 2px 8px rgb(20 45 62 / 0.25);
	transform: translateY(-50%);
}

.jawharet-floating--mode-expandable.jawharet-floating--pos-right .jawharet-floating__menu .jawharet-floating__btn:is(:hover, :focus-visible) .jawharet-floating__btn-text {
	inset-inline-end: calc(100% + 0.5rem);
	inset-inline-start: auto;
}

.jawharet-floating--mode-expandable.jawharet-floating--pos-left .jawharet-floating__menu .jawharet-floating__btn:is(:hover, :focus-visible) .jawharet-floating__btn-text {
	inset-inline-start: calc(100% + 0.5rem);
	inset-inline-end: auto;
}

@media (prefers-reduced-motion: reduce) {
	.jawharet-floating--mode-expandable .jawharet-floating__menu .jawharet-floating__btn:is(:hover, :focus-visible) .jawharet-floating__btn-text {
		transition: none;
	}
}