/**
 * Floating contact button ("Liên hệ" FAB).
 *
 * Everything is scoped under .vh-contact. See inc/features/contact-fab.php.
 *
 * Motion budget: one 150ms ease-out on open and on close. Nothing loops. The
 * widget this replaced ran three infinite animations at once, which is what
 * made it exhausting to sit next to.
 */

.vh-contact {
	--vh-contact-brand: var( --primary-color, #b22222 );
	--vh-contact-surface: #fff;
	--vh-contact-ink: #2f2f2f;
	--vh-contact-muted: #7a7a7a;
	--vh-contact-inset: 24px;

	position: fixed;
	right: var( --vh-contact-inset );
	bottom: var( --vh-contact-inset );
	/* Above page content, below Flatsome's off-canvas and magnific popups so a
	   drawer or lightbox is never floated over. */
	z-index: 900;
	font-family: Inter, sans-serif;
	line-height: 1.35;
}

/* Flatsome's sticky add-to-cart bar is position:fixed at bottom:0 with z-index
   20, so the FAB would sit on top of "Thêm vào giỏ hàng". Lift out of its way
   while it is on screen. Browsers without :has() fall back to the normal inset,
   which is what the old plugin did in every browser. */
body:has( .sticky-add-to-cart--active ) .vh-contact {
	bottom: calc( var( --vh-contact-inset ) + 68px );
}

/* ---------------------------------------------------------------- toggle -- */

.vh-contact__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 20px 12px 16px;
	min-height: 48px; /* comfortable touch target */
	border: 0;
	border-radius: 999px;
	background-color: var( --vh-contact-brand );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}

.vh-contact__toggle:hover,
.vh-contact__toggle:focus-visible {
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.24 );
	transform: translateY( -1px );
}

.vh-contact__toggle:focus-visible {
	outline: 3px solid rgba( 178, 34, 34, 0.35 );
	outline-offset: 2px;
}

.vh-contact__toggle-icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
}

.vh-contact__toggle-label {
	white-space: nowrap;
}

.vh-contact__svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ----------------------------------------------------------------- panel -- */

.vh-contact__panel {
	position: absolute;
	right: 0;
	bottom: calc( 100% + 12px );
	width: 288px;
	border-radius: 16px;
	background-color: var( --vh-contact-surface );
	box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.2 );
	overflow: hidden;

	/* Closed. visibility:hidden keeps it out of the tab order and out of the
	   accessibility tree, so no `hidden` attribute juggling is needed. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY( 8px );
	transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms;
}

.vh-contact.is-open .vh-contact__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s;
}

/* Just the close button now — see vh_contact_fab_render(). Aligned right, with
   no hairline: a divider beneath a lone ✕ separates nothing from nothing.
   Every pixel of height here is a band that is empty for the ~240px left of
   the ✕, so the header is squeezed to the button and little else, and the list
   below drops its own top padding to meet it.
   The 4px top is not slack: the panel clips to a 16px corner radius, and at
   zero inset the close button's round hover fill got shaved flat against the
   top edge and sliced by that curve. This clears it. */
.vh-contact__header {
	display: flex;
	justify-content: flex-end;
	padding: 4px 4px 0;
}

/* 32px rather than the 36px it was: the button sets the header's height, so
   its size is the panel's top gap. It stays a comfortable target because it is
   never the only way out — Escape, a tap outside, and the toggle itself all
   close the panel too.
   margin/min-height/line-height are not tidiness, they are overrides. Flatsome
   styles bare `button` with `min-height: 36.375px` and
   `margin: 0 14.55px 14.55px 0`, and a min-height beats a height no matter how
   specific the selector — so without these the button rendered 36px tall and
   trailed ~15px of margin, which is most of the blank band above the first
   row. The toggle escapes this only because it already sets both itself. */
.vh-contact__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 0;
	line-height: 1;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --vh-contact-muted );
	cursor: pointer;
}

.vh-contact__close:hover,
.vh-contact__close:focus-visible {
	background-color: #f4f4f4;
	color: var( --vh-contact-ink );
}

.vh-contact__close .vh-contact__svg {
	width: 18px;
	height: 18px;
}

/* No top padding — the header immediately above is already a gap. */
.vh-contact__list {
	margin: 0;
	padding: 0 6px 6px;
	list-style: none;
}

.vh-contact__row {
	margin: 0;
	list-style: none;
}

.vh-contact__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px;
	border-radius: 10px;
	color: var( --vh-contact-ink );
	text-decoration: none;
	transition: background-color 150ms ease-out;
}

.vh-contact__item:hover,
.vh-contact__item:focus-visible {
	background-color: #f7f5f2;
	color: var( --vh-contact-ink );
}

.vh-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: #f0f0f0;
	color: #fff;
}

.vh-contact__icon .vh-contact__svg {
	width: 21px;
	height: 21px;
}

/* Zalo's mark is a bitmap rather than a path — see vh_contact_fab_icon(). It
   carries a wordmark where the others are single shapes, so it gets 26px
   against their 21px; below that the lettering stops resolving. Its white
   bubble is what separates it from the tile, so it must not be shrunk to match
   the others. Source is 100x100, ~4x the rendered size. */
.vh-contact__icon .vh-contact__img {
	display: block;
	width: 26px;
	height: auto;
}

/* Brand colours, so each row is identifiable at a glance. */
.vh-contact__item--zalo .vh-contact__icon {
	background-color: #0068ff;
}

.vh-contact__item--messenger .vh-contact__icon {
	background-color: #0084ff;
}

.vh-contact__item--phone .vh-contact__icon {
	background-color: var( --vh-contact-brand );
}

.vh-contact__item--email .vh-contact__icon {
	background-color: #6b7280;
}

.vh-contact__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vh-contact__label {
	font-size: 14px;
	font-weight: 600;
}

.vh-contact__note {
	color: var( --vh-contact-muted );
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- mobile -- */

/* 549px matches the theme's own mobile breakpoint. The panel becomes a bottom
   sheet: full width, square bottom corners, anchored to the viewport rather
   than to the button. */
@media ( max-width: 549px ) {
	.vh-contact {
		--vh-contact-inset: 16px;
	}

	.vh-contact__panel {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		border-radius: 16px 16px 0 0;
		transform: translateY( 16px );
	}

	.vh-contact__item {
		padding: 12px 10px;
	}

	/* The sheet is full-width at bottom:0, so by default it lands on top of the
	   toggle — putting a channel row exactly where the button the user just
	   tapped used to be. A second tap meant to close then opens the mail app
	   instead. Two halves to the fix, and both are needed:
	     1. raise the toggle above the sheet, so it stays visible and a second
	        tap closes, matching how it behaves on desktop;
	     2. reserve room at the foot of the list, so no row ever sits under it.
	   Toggle occupies 48px plus the 16px inset, so 76px clears it with margin. */
	.vh-contact__toggle {
		position: relative;
		z-index: 1;
	}

	.vh-contact__list {
		padding-bottom: 76px;
	}
}

/* ------------------------------------------------------- reduced motion -- */

@media ( prefers-reduced-motion: reduce ) {
	.vh-contact__toggle,
	.vh-contact__panel,
	.vh-contact__item {
		transition: none;
	}

	.vh-contact__toggle:hover,
	.vh-contact__toggle:focus-visible {
		transform: none;
	}

	.vh-contact__panel {
		transform: none;
	}
}

/* ------------------------------------------------------------- printing -- */

@media print {
	.vh-contact {
		display: none;
	}
}