/* PX Doctor's Leave – floating tab on the right edge with a slide-out panel.
 * Tab + panel form one L-shape: the panel starts level with the tab's top edge.
 * "Icon only" rules are added inline by the loader using Elementor's breakpoints.
 */

.pxdl {
	--pxdl-tab-bg: #3F647E;
	--pxdl-tab-color: #FFFFFF;
	--pxdl-panel-bg: #3F647E;
	--pxdl-tab-h: 68px;
	--pxdl-tab-radius: 34px;
	--pxdl-icon-size: 22px;
	--pxdl-panel-w: 460px;
	--pxdl-panel-max: calc(100vw - 220px);
	--pxdl-panel-radius: 24px;
	--pxdl-speed: 0.35s;

	position: fixed;
	top: 220px;
	right: 0;
	z-index: 999;
	display: flex;
	align-items: flex-start;
	pointer-events: none; /* only the tab and the open panel catch clicks */
}

/* ---------- Tab ---------- */
.pxdl .pxdl-tab,
.pxdl .pxdl-tab:hover,
.pxdl .pxdl-tab:focus,
.pxdl .pxdl-tab:active {
	background-color: var(--pxdl-tab-bg);
	background-image: none;
	color: var(--pxdl-tab-color);
	border: 0;
	box-shadow: none;
	text-decoration: none;
}

.pxdl .pxdl-tab {
	pointer-events: auto;
	flex: none;
	height: var(--pxdl-tab-h);
	margin: 0;
	padding: 0 28px 0 24px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border-radius: var(--pxdl-tab-radius) 0 0 var(--pxdl-tab-radius);
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.pxdl .pxdl-tab:focus-visible {
	outline: 2px solid var(--pxdl-tab-color);
	outline-offset: -5px;
}

.pxdl-icon {
	display: inline-flex;
	font-size: var(--pxdl-icon-size);
	line-height: 0;
}

.pxdl-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------- Panel (slides out to the right of the tab) ---------- */
.pxdl-panel {
	pointer-events: auto;
	max-width: 0;
	overflow: hidden;
	visibility: hidden;
	background: var(--pxdl-panel-bg);
	border-radius: 0 0 0 var(--pxdl-panel-radius);
	transition:
		max-width var(--pxdl-speed) cubic-bezier(.4, 0, .2, 1),
		visibility 0s linear var(--pxdl-speed);
}

.pxdl.is-open .pxdl-panel {
	max-width: min(var(--pxdl-panel-w), var(--pxdl-panel-max));
	visibility: visible;
	transition:
		max-width var(--pxdl-speed) cubic-bezier(.4, 0, .2, 1),
		visibility 0s;
}

/* Fixed inner width so text doesn't re-wrap while the panel slides */
.pxdl-content {
	--pxdl-p-gap: 14px;
	box-sizing: border-box;
	width: min(var(--pxdl-panel-w), var(--pxdl-panel-max));
	padding: 22px 28px 26px 24px;
	color: #FFFFFF;
	font-size: 16px;
	line-height: 1.4;
}

.pxdl-content p {
	margin: 0 0 var(--pxdl-p-gap);
}

/* Title inside the panel: hidden by default, shown "always" or when the tab is icon-only
   (the icon-only case is added inline by the loader with Elementor's breakpoints) */
.pxdl .pxdl-content .pxdl-panel-title {
	display: none;
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.pxdl-ptitle-always .pxdl .pxdl-content .pxdl-panel-title {
	display: block;
}

.pxdl-content > :last-child {
	margin-bottom: 0;
}

.pxdl-content a {
	color: inherit;
	text-decoration: underline;
}

.pxdl-content ul,
.pxdl-content ol {
	margin: 0 0 var(--pxdl-p-gap);
	padding-left: 1.2em;
}

/* Hover trigger (desktop pointers only) */
@media (hover: hover) and (pointer: fine) {
	.pxdl-trigger-hover .pxdl:hover .pxdl-panel {
		max-width: min(var(--pxdl-panel-w), var(--pxdl-panel-max));
		visibility: visible;
		transition:
			max-width var(--pxdl-speed) cubic-bezier(.4, 0, .2, 1),
			visibility 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pxdl { --pxdl-speed: 0s; }
}