/*!
 * DPXL WhatsApp — widget
 *
 * Fully static: the per-site colours and sizes arrive as custom properties in a
 * small inline block (see StyleVariables), so this file stays cacheable.
 */

.dpxl-wa {
	position: fixed;
	bottom: var(--dpxl-wa-offset-y, 20px);
	z-index: var(--dpxl-wa-z, 99990);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.35;
}

.dpxl-wa--bottom-right { right: var(--dpxl-wa-offset-x, 20px); }
.dpxl-wa--bottom-left  { left: var(--dpxl-wa-offset-x, 20px); }

/* ── Floating button ─────────────────────────────────────────────────────── */

.dpxl-wa__fab {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--dpxl-wa-size, 56px);
	height: var(--dpxl-wa-size, 56px);
	border-radius: 999px;
	background: var(--dpxl-wa-bg, #25d366);
	color: var(--dpxl-wa-icon, #fff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
}

/* <summary> renders a disclosure triangle by default in every engine. */
.dpxl-wa__fab { list-style: none; }
.dpxl-wa__fab::-webkit-details-marker { display: none; }
.dpxl-wa__fab::marker { content: ""; }

.dpxl-wa__glyph {
	width: 55%;
	height: 55%;
	flex: none;
	display: block;
}

.dpxl-wa__fab:hover {
	transform: scale(1.06);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
}

.dpxl-wa__fab:active { transform: scale(.97); }

.dpxl-wa__fab:focus-visible {
	outline: 2px solid var(--dpxl-wa-bg, #25d366);
	outline-offset: 3px;
}

/* Safari only got :focus-visible in 15.4, and iPhones keep whatever Safari
   shipped with the OS. Older ones fall back to :focus. */
@supports not selector(:focus-visible) {
	.dpxl-wa__fab:focus { outline: 2px solid var(--dpxl-wa-bg, #25d366); outline-offset: 3px; }
}

/* Pill shape */
.dpxl-wa--pill .dpxl-wa__fab {
	width: auto;
	padding: 0 20px;
	gap: 10px;
}

.dpxl-wa--pill .dpxl-wa__glyph {
	width: calc(var(--dpxl-wa-size, 56px) * .5);
	height: calc(var(--dpxl-wa-size, 56px) * .5);
}

.dpxl-wa__fab-label {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: currentColor;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */

.dpxl-wa__root { position: relative; }

.dpxl-wa__panel {
	position: absolute;
	bottom: calc(100% + 12px);
	width: 320px;
	max-width: calc(100vw - 32px);
	max-height: 70vh;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	border-radius: 16px;
	background: var(--dpxl-wa-panel-bg, #fff);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .16);
	overscroll-behavior: contain;
}

.dpxl-wa--bottom-right .dpxl-wa__panel { right: 0; }
.dpxl-wa--bottom-left  .dpxl-wa__panel { left: 0; }

.dpxl-wa__root[open] .dpxl-wa__panel {
	animation: dpxl-wa-in .18s ease-out;
}

@keyframes dpxl-wa-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.dpxl-wa__header {
	padding: 16px 20px;
	background: var(--dpxl-wa-header-bg, #075e54);
	color: var(--dpxl-wa-header-text, #fff);
}

.dpxl-wa__title,
.dpxl-wa__subtitle {
	margin: 0;
	color: inherit;
}

.dpxl-wa__title { font-size: 15px; font-weight: 600; }

.dpxl-wa__subtitle {
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	opacity: .8;
}

/* ── Contact list ────────────────────────────────────────────────────────── */

.dpxl-wa__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dpxl-wa__list > li + li { border-top: 1px solid rgba(0, 0, 0, .06); }

.dpxl-wa__item {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 64px;
	padding: 12px 20px;
	text-decoration: none;
	transition: background-color .12s ease;
}

.dpxl-wa__item:hover,
.dpxl-wa__item:focus-visible {
	background: var(--dpxl-wa-hover, #f0f2f5);
}

@supports not selector(:focus-visible) {
	.dpxl-wa__item:focus { background: var(--dpxl-wa-hover, #f0f2f5); }
}

.dpxl-wa__avatar {
	flex: none;
	width: 48px;
	height: 48px;
	/* margin, not gap: Safari only supports flex gap from 14.1. */
	margin-right: 12px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--dpxl-wa-bg, #25d366);
}

.dpxl-wa__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dpxl-wa-icon, #fff);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .02em;
}

.dpxl-wa__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dpxl-wa__name {
	color: var(--dpxl-wa-name, #111b21);
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.dpxl-wa__role {
	color: var(--dpxl-wa-role, #667781);
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* ── Consent notice ──────────────────────────────────────────────────────── */

/*
 * `hidden` works through a `display: none` rule in the browser's own
 * stylesheet, and any author `display` declaration outranks it. Nothing here
 * currently sets display on a hidden element, but the day someone does, the
 * consent gate would silently stop hiding — which is a privacy control, not a
 * cosmetic one. Cheaper to state it than to find out.
 */
.dpxl-wa [hidden] { display: none !important; }

.dpxl-wa__consent { padding: 20px; }

.dpxl-wa__consent-text {
	margin: 0 0 16px;
	color: var(--dpxl-wa-name, #111b21);
	font-size: 13px;
}

.dpxl-wa__consent-accept,
.dpxl-wa__consent-back {
	display: block;
	width: 100%;
	padding: 10px 16px;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.dpxl-wa__consent-accept {
	background: var(--dpxl-wa-bg, #25d366);
	color: var(--dpxl-wa-icon, #fff);
	font-weight: 600;
}

.dpxl-wa__consent-back {
	margin-top: 8px;
	background: none;
	color: var(--dpxl-wa-role, #667781);
}

/* ── Entrance ────────────────────────────────────────────────────────────── */

/* Hidden until widget.js reveals it, but only when a delay was configured —
   otherwise a visitor without JavaScript would never see the button. */
.dpxl-wa--delayed { opacity: 0; pointer-events: none; }

.dpxl-wa--enter-fade.dpxl-wa--ready  { animation: dpxl-wa-fade .3s ease-out; }
.dpxl-wa--enter-slide.dpxl-wa--ready { animation: dpxl-wa-slide .3s ease-out; }

.dpxl-wa--ready { opacity: 1; pointer-events: auto; }

@keyframes dpxl-wa-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes dpxl-wa-slide {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* ── Device visibility ───────────────────────────────────────────────────── */

/* Media queries, never wp_is_mobile(): the markup must be identical for every
   visitor of a URL or page caching serves the wrong thing to half of them. */
@media (max-width: 767px) {
	.dpxl-wa--no-mobile { display: none; }

	.dpxl-wa { bottom: var(--dpxl-wa-offset-y-sm, 16px); }
	.dpxl-wa__panel { max-height: 60vh; }

	/* A pill next to a narrow viewport pushes content around. */
	.dpxl-wa--pill .dpxl-wa__fab { width: var(--dpxl-wa-size, 56px); padding: 0; }
	.dpxl-wa__fab-label { display: none; }
	.dpxl-wa--pill .dpxl-wa__glyph { width: 55%; height: 55%; }
}

@media (min-width: 768px) {
	.dpxl-wa--no-desktop { display: none; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.dpxl-wa,
	.dpxl-wa * {
		animation: none !important;
		transition: none !important;
	}

	.dpxl-wa__fab:hover { transform: none; }
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */

/* Only applied when the panel colours are untouched — StyleVariables adds
   .dpxl-wa--custom-panel as soon as the client picks their own, and an explicit
   choice beats a system preference. The button never changes: the green is the
   recognition. */
@media (prefers-color-scheme: dark) {
	.dpxl-wa:not(.dpxl-wa--custom-panel) .dpxl-wa__panel { background: #1f2c34; }
	.dpxl-wa:not(.dpxl-wa--custom-panel) .dpxl-wa__name  { color: #e9edef; }
	.dpxl-wa:not(.dpxl-wa--custom-panel) .dpxl-wa__role  { color: #8696a0; }
	.dpxl-wa:not(.dpxl-wa--custom-panel) .dpxl-wa__item:hover,
	.dpxl-wa:not(.dpxl-wa--custom-panel) .dpxl-wa__item:focus-visible { background: #2a3942; }
	.dpxl-wa:not(.dpxl-wa--custom-panel) .dpxl-wa__list > li + li { border-top-color: rgba(255, 255, 255, .08); }
	.dpxl-wa:not(.dpxl-wa--custom-panel) .dpxl-wa__consent-text { color: #e9edef; }
}