/* Power Hover Tooltip — Last Updated: October 1, 2026 (v1.4.0) */
.pht-wrap { position: relative; display: inline-block; line-height: 1; }
.pht-trigger { display: inline-flex; align-items: center; cursor: pointer; outline: none; }
.pht-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pht-trigger img { display: block; max-width: 100%; height: auto; }
.pht-underline .pht-trigger { text-decoration: underline dotted; text-underline-offset: 4px; }

/* Outer tip is transparent; its padding bridges the gap so hover doesn't drop */
.pht-tip {
	--pht-width: 260px; --pht-offset: 12px; --pht-bg: #1f2937; --pht-dur: 200ms;
	--pht-tx: 0px; --pht-ty: 0px; --pht-ax: 0px; --pht-ay: 0px; --pht-s: 1;
	position: absolute; z-index: 9999; display: block; box-sizing: content-box;
	width: var(--pht-width); max-width: 90vw;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translate(var(--pht-tx), var(--pht-ty)) translate(var(--pht-ax), var(--pht-ay)) scale(var(--pht-s));
	transition: opacity var(--pht-dur) ease, transform var(--pht-dur) ease, visibility 0s linear var(--pht-dur);
	text-align: left; line-height: 1.5; white-space: normal;
}
.pht-tip-inner {
	position: relative; display: block; box-sizing: border-box;
	background: var(--pht-bg); color: #fff;
	padding: 14px 16px; border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: 14px;
}
.pht-img { display: block; margin-bottom: 10px; overflow: hidden; border-radius: 4px; }
.pht-img img { display: block; width: 100%; height: auto; }
.pht-title { display: block; font-weight: 700; font-size: 1.05em; margin-bottom: 4px; }
.pht-text { display: block; }
.pht-text p { margin: 0 0 .5em; }
.pht-text p:last-child { margin-bottom: 0; }
.pht-btn { display: inline-block; margin-top: 10px; padding: 8px 14px; border-radius: 4px; background: #fff; color: #111; text-decoration: none; font-weight: 600; font-size: 13px; }

/* Open states */
@media (hover: hover) {
	.pht-wrap[data-trigger="hover"]:hover .pht-tip { opacity: 1; visibility: visible; pointer-events: auto; --pht-ax: 0px; --pht-ay: 0px; --pht-s: 1; transition-delay: 0s; }
}
.pht-wrap[data-trigger="hover"] .pht-trigger:focus-visible + .pht-tip,
.pht-wrap.pht-open .pht-tip.pht-tip { opacity: 1; visibility: visible; pointer-events: auto; --pht-ax: 0px; --pht-ay: 0px; --pht-s: 1; transition-delay: 0s; }

/* Positions */
.pht-pos-top .pht-tip    { bottom: 100%; left: 50%; --pht-tx: -50%; padding-bottom: var(--pht-offset); transform-origin: bottom center; }
.pht-pos-bottom .pht-tip { top: 100%;    left: 50%; --pht-tx: -50%; padding-top: var(--pht-offset);    transform-origin: top center; }
.pht-pos-left .pht-tip   { right: 100%;  top: 50%;  --pht-ty: -50%; padding-right: var(--pht-offset);  transform-origin: center right; }
.pht-pos-right .pht-tip  { left: 100%;   top: 50%;  --pht-ty: -50%; padding-left: var(--pht-offset);   transform-origin: center left; }

/* Animations (closed state offsets) */
.pht-anim-slide.pht-pos-top .pht-tip    { --pht-ay: 8px; }
.pht-anim-slide.pht-pos-bottom .pht-tip { --pht-ay: -8px; }
.pht-anim-slide.pht-pos-left .pht-tip   { --pht-ax: 8px; }
.pht-anim-slide.pht-pos-right .pht-tip  { --pht-ax: -8px; }
.pht-anim-zoom .pht-tip { --pht-s: .9; }

/* Arrow */
.pht-arrow { position: absolute; display: block; width: 12px; height: 12px; background: var(--pht-bg); transform: rotate(45deg); }
.pht-pos-top .pht-arrow    { bottom: -6px; left: calc(50% - 6px); }
.pht-pos-bottom .pht-arrow { top: -6px;    left: calc(50% - 6px); }
.pht-pos-left .pht-arrow   { right: -6px;  top: calc(50% - 6px); }
.pht-pos-right .pht-arrow  { left: -6px;   top: calc(50% - 6px); }
.pht-no-arrow .pht-arrow { display: none; }

@media (prefers-reduced-motion: reduce) {
	.pht-tip { transition: none !important; }
}

/* v1.1.0 – Container / Saved Template source */
.pht-src-container .pht-tip-inner,
.pht-src-template .pht-tip-inner { padding: 0; }
.pht-slot { display: block; }
.pht-slot > .pht-moved { width: 100%; max-width: 100%; margin: 0; }
.pht-placeholder { display: block; padding: 14px 16px; font-size: 13px; opacity: .8; }

/* v1.2.0 – Full-width image trigger */
.pht-wrap.pht-trigger-full { display: block; width: 100%; }
.pht-trigger-full .pht-trigger { display: block; width: 100%; }
.pht-trigger-full .pht-trigger img { width: 100%; height: auto; }

/* v1.2.0 – Fit content width */
.pht-fit .pht-tip { width: max-content; max-width: min(90vw, 1200px); }

/* v1.2.1 – Overlay: tooltip sits on top of the image, sized to its own content, centered */
.pht-wrap.pht-pos-overlay .pht-tip {
	top: 50%; left: 50%; width: var(--pht-width); max-width: 90vw; height: auto; padding: 0;
	--pht-tx: -50%; --pht-ty: -50%; transform-origin: center;
}
.pht-anim-slide.pht-pos-overlay .pht-tip { --pht-ay: 8px; }
.pht-pos-overlay .pht-arrow { display: none; }
/* v1.3.1 – removed width:auto override so the container's own Width setting is respected */

/* v1.3.0 – Disable on mobile */
.pht-wrap.pht-mobile-off .pht-tip { display: none !important; }
.pht-wrap.pht-mobile-off .pht-trigger { cursor: default; }

/* v1.3.2 – Overlay width follows Fit Content / Width setting */
.pht-wrap.pht-fit.pht-pos-overlay .pht-tip { width: max-content; }

/* v1.3.2 – No box background/shadow behind containers & templates (container supplies its own look) */
.pht-src-container .pht-tip-inner,
.pht-src-template .pht-tip-inner { background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* v1.4.0 – Horizontal align for Top / Bottom */
.pht-wrap.pht-align-left .pht-tip  { left: 0; right: auto; --pht-tx: 0px; transform-origin: top left; }
.pht-wrap.pht-align-right .pht-tip { left: auto; right: 0; --pht-tx: 0px; transform-origin: top right; }
.pht-wrap.pht-align-left .pht-arrow  { left: 24px; }
.pht-wrap.pht-align-right .pht-arrow { left: auto; right: 24px; }