/**
 * JasaPanda Theme Child — Floating WhatsApp Widget
 *
 * Premium monochrome floating chat button with expandable card.
 * Uses the theme's design tokens (variables.css) exclusively —
 * no hue accents, fully consistent with the black/white brand system.
 *
 * @package JasaPanda_Theme_Child
 * @since   1.1.0
 */

/* ==========================================================================
   WRAPPER — fixed position, entrance animation
   ========================================================================== */

.jp-wa-float {
	position: fixed;
	bottom: var(--jp-space-6);
	right: var(--jp-space-6);
	z-index: var(--jp-z-scroll-top);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transform: translateY(28px) scale(0.85);
	transition: opacity var(--jp-duration-slower) var(--jp-ease-spring),
	            transform var(--jp-duration-slower) var(--jp-ease-spring),
	            visibility 0s linear var(--jp-duration-slower);
	pointer-events: none;
}

.jp-wa-float.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--jp-duration-slower) var(--jp-ease-spring),
	            transform var(--jp-duration-slower) var(--jp-ease-spring);
	pointer-events: auto;
}

.jp-wa-float[data-jp-wa-position="bottom-left"] {
	right: auto;
	left: var(--jp-space-6);
	align-items: flex-start;
}

@media (min-width: 768px) {
	.jp-wa-float {
		bottom: var(--jp-space-8);
		right: var(--jp-space-8);
	}

	.jp-wa-float[data-jp-wa-position="bottom-left"] {
		right: auto;
		left: var(--jp-space-8);
	}
}

/* Push the scroll-to-top button up so it never collides with the widget. */
.jp-has-wa-float .jp-scroll-top {
	bottom: calc(var(--jp-space-6) + 72px);
}

@media (min-width: 768px) {
	.jp-has-wa-float .jp-scroll-top {
		bottom: calc(var(--jp-space-8) + 80px);
	}
}

.jp-has-wa-float[data-jp-wa-position="bottom-left"] .jp-scroll-top,
body:has(.jp-wa-float[data-jp-wa-position="bottom-left"]) .jp-scroll-top {
	bottom: var(--jp-space-6);
}


/* ==========================================================================
   TRIGGER BUTTON
   ========================================================================== */

.jp-wa-float__btn {
	position: relative;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border: none;
	border-radius: var(--jp-radius-full);
	background: var(--jp-gradient-primary);
	color: var(--jp-color-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--jp-shadow-primary);
	transition: transform var(--jp-duration-base) var(--jp-ease-spring),
	            box-shadow var(--jp-duration-base) var(--jp-ease-out);
	-webkit-tap-highlight-color: transparent;
}

.jp-wa-float__btn:hover {
	transform: translateY(-4px) scale(1.06);
	box-shadow: var(--jp-shadow-primary-hover);
}

.jp-wa-float__btn:active {
	transform: scale(0.94);
}

.jp-wa-float__btn:focus-visible {
	outline: none;
	box-shadow: var(--jp-shadow-primary), var(--jp-focus-ring-invert);
}

/* Pulsing attention ring */
.jp-wa-float__ring,
.jp-wa-float__ring::before {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(var(--jp-color-primary-rgb), 0.4);
	pointer-events: none;
}

.jp-wa-float__ring {
	animation: jpWaPulse 2.8s var(--jp-ease-out) infinite;
}

.jp-wa-float__ring::before {
	content: "";
	animation: jpWaPulse 2.8s var(--jp-ease-out) 1.4s infinite;
}

.jp-wa-float.is-open .jp-wa-float__ring,
.jp-wa-float.is-open .jp-wa-float__ring::before {
	animation-play-state: paused;
	opacity: 0;
}

@keyframes jpWaPulse {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	80% {
		opacity: 0;
	}
	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

/* Chat / close icon crossfade */
.jp-wa-float__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--jp-duration-base) var(--jp-ease-out),
	            transform var(--jp-duration-slow) var(--jp-ease-spring);
}

.jp-wa-float__icon svg {
	width: 28px;
	height: 28px;
}

.jp-wa-float__icon--close {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
}

.jp-wa-float.is-open .jp-wa-float__icon--chat {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
}

.jp-wa-float.is-open .jp-wa-float__icon--close {
	opacity: 1;
	transform: none;
}

/* Unread badge */
.jp-wa-float__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--jp-radius-pill);
	background: var(--jp-color-white);
	color: var(--jp-color-black);
	border: 2px solid var(--jp-color-black);
	font-size: 10px;
	font-weight: var(--jp-fw-extrabold);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(1);
	opacity: 1;
	transition: transform var(--jp-duration-base) var(--jp-ease-spring),
	            opacity var(--jp-duration-fast) var(--jp-ease-out);
	animation: jpWaBadgeBounce 2.6s ease-in-out infinite;
}

.jp-wa-float.is-open .jp-wa-float__badge,
.jp-wa-float.is-read .jp-wa-float__badge {
	transform: scale(0);
	opacity: 0;
}

@keyframes jpWaBadgeBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-2px); }
}


/* ==========================================================================
   TOOLTIP (desktop hover hint)
   ========================================================================== */

.jp-wa-float__tooltip {
	position: absolute;
	top: 50%;
	right: calc(100% + 14px);
	transform: translateY(-50%) translateX(6px);
	background: var(--jp-color-black);
	color: var(--jp-color-white);
	padding: var(--jp-space-2) var(--jp-space-4);
	border-radius: var(--jp-radius-pill);
	font-size: var(--jp-fs-xs);
	font-weight: var(--jp-fw-semibold);
	white-space: nowrap;
	box-shadow: var(--jp-shadow-md);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--jp-duration-fast) var(--jp-ease-out),
	            transform var(--jp-duration-fast) var(--jp-ease-out),
	            visibility 0s linear var(--jp-duration-fast);
	pointer-events: none;
}

.jp-wa-float[data-jp-wa-position="bottom-left"] .jp-wa-float__tooltip {
	right: auto;
	left: calc(100% + 14px);
	transform: translateY(-50%) translateX(-6px);
}

.jp-wa-float:not(.is-open):hover .jp-wa-float__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
	transition: opacity var(--jp-duration-fast) var(--jp-ease-out),
	            transform var(--jp-duration-fast) var(--jp-ease-out);
}

@media (max-width: 767px) {
	.jp-wa-float__tooltip {
		display: none;
	}
}


/* ==========================================================================
   MOBILE BACKDROP
   ========================================================================== */

.jp-wa-float__backdrop {
	display: none;
}

@media (max-width: 767px) {
	.jp-wa-float__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(10, 10, 10, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--jp-duration-base) var(--jp-ease-out),
		            visibility 0s linear var(--jp-duration-base);
		z-index: -1;
	}

	.jp-wa-float.is-open .jp-wa-float__backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--jp-duration-base) var(--jp-ease-out);
	}
}


/* ==========================================================================
   CARD
   ========================================================================== */

.jp-wa-float__card {
	position: absolute;
	bottom: calc(100% + 16px);
	right: 0;
	width: 340px;
	max-width: calc(100vw - 48px);
	background: var(--jp-color-white);
	border-radius: var(--jp-radius-2xl);
	border: 1px solid var(--jp-border-strong);
	box-shadow: var(--jp-shadow-2xl);
	overflow: hidden;
	transform-origin: bottom right;
	transform: scale(0.85) translateY(20px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform var(--jp-duration-slow) var(--jp-ease-spring),
	            opacity var(--jp-duration-base) var(--jp-ease-out),
	            visibility 0s linear var(--jp-duration-slow);
}

.jp-wa-float[data-jp-wa-position="bottom-left"] .jp-wa-float__card {
	right: auto;
	left: 0;
	transform-origin: bottom left;
}

.jp-wa-float.is-open .jp-wa-float__card {
	transform: scale(1) translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform var(--jp-duration-slow) var(--jp-ease-spring),
	            opacity var(--jp-duration-base) var(--jp-ease-out);
}

@media (max-width: 480px) {
	.jp-wa-float__card {
		width: calc(100vw - 32px);
	}
}

/* --- Card header (dark, matches footer surface) --- */

.jp-wa-float__card-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--jp-space-3);
	padding: var(--jp-space-5);
	background: var(--jp-gradient-dark);
	overflow: hidden;
}

.jp-wa-float__card-header::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -20%;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

.jp-wa-float__avatar {
	position: relative;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--jp-color-white);
	color: var(--jp-color-black);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--jp-fw-extrabold);
	font-size: var(--jp-fs-md);
	overflow: hidden;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.jp-wa-float__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jp-wa-float__meta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.jp-wa-float__name {
	color: var(--jp-color-white);
	font-family: var(--jp-font-display);
	font-weight: var(--jp-fw-bold);
	font-size: var(--jp-fs-md);
	letter-spacing: var(--jp-ls-tight);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jp-wa-float__status {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--jp-color-text-invert-muted);
	font-size: var(--jp-fs-xs);
}

.jp-wa-float__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--jp-color-white);
	animation: jpWaDot 2s infinite;
}

@keyframes jpWaDot {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
	70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.jp-wa-float__close {
	position: relative;
	margin-left: auto;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--jp-duration-fast) var(--jp-ease-out),
	            transform var(--jp-duration-base) var(--jp-ease-spring);
}

.jp-wa-float__close-icon {
	display: block;
	width: 13px;
	height: 13px;
	color: var(--jp-color-white);
	opacity: 0.85;
	transition: opacity var(--jp-duration-fast) var(--jp-ease-out);
	pointer-events: none;
}

.jp-wa-float__close:hover {
	background: rgba(255, 255, 255, 0.28);
	transform: rotate(90deg);
}

.jp-wa-float__close:hover .jp-wa-float__close-icon {
	opacity: 1;
}

.jp-wa-float__close:focus-visible {
	outline: none;
	box-shadow: var(--jp-focus-ring-invert);
}

/* --- Card body --- */

.jp-wa-float__card-body {
	padding: var(--jp-space-5);
	background: var(--jp-color-bg-alt);
}

.jp-wa-float__bubble {
	position: relative;
	background: var(--jp-color-white);
	border: 1px solid var(--jp-color-border);
	border-radius: var(--jp-radius-lg) var(--jp-radius-lg) var(--jp-radius-lg) var(--jp-radius-xs);
	padding: var(--jp-space-4);
	box-shadow: var(--jp-shadow-xs);
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	animation: jpWaBubbleIn var(--jp-duration-slow) var(--jp-ease-spring) 0.15s forwards;
}

.jp-wa-float.is-open .jp-wa-float__bubble {
	animation-name: jpWaBubbleIn;
}

@keyframes jpWaBubbleIn {
	to {
		opacity: 1;
		transform: none;
	}
}

.jp-wa-float__bubble p {
	margin: 0;
	color: var(--jp-color-text);
	font-size: var(--jp-fs-sm);
	line-height: var(--jp-lh-relaxed);
}

.jp-wa-float__time {
	display: block;
	margin-top: var(--jp-space-2);
	text-align: right;
	color: var(--jp-color-text-light);
	font-size: 11px;
	letter-spacing: var(--jp-ls-wide);
}

/* --- CTA button --- */

.jp-wa-float__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--jp-space-2);
	margin: var(--jp-space-4) var(--jp-space-5) var(--jp-space-5);
	padding: var(--jp-space-3) var(--jp-space-5);
	background: var(--jp-color-primary);
	color: var(--jp-color-white);
	border-radius: var(--jp-radius-pill);
	font-weight: var(--jp-fw-semibold);
	font-size: var(--jp-fs-sm);
	text-decoration: none;
	box-shadow: var(--jp-shadow-primary);
	transition: var(--jp-transition-spring), box-shadow var(--jp-duration-base) var(--jp-ease-out);
}

.jp-wa-float__cta svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.jp-wa-float__cta:hover {
	background: var(--jp-color-primary-hover);
	transform: translateY(-2px);
	box-shadow: var(--jp-shadow-primary-hover);
	color: var(--jp-color-white);
}

.jp-wa-float__cta:active {
	transform: translateY(0) scale(0.98);
}

.jp-wa-float__cta:focus-visible {
	outline: none;
	box-shadow: var(--jp-shadow-primary), var(--jp-focus-ring);
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Some of these components have transitions declared on more specific
	   compound selectors (e.g. state classes) elsewhere in this file -- kept
	   as !important, matching animations.css, so reduced-motion can't be
	   silently defeated by a more specific rule added later. */
	.jp-wa-float,
	.jp-wa-float__ring,
	.jp-wa-float__ring::before,
	.jp-wa-float__dot,
	.jp-wa-float__badge,
	.jp-wa-float__bubble,
	.jp-wa-float__btn,
	.jp-wa-float__card,
	.jp-wa-float__cta,
	.jp-wa-float__close {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}