/* Floating chat button (includes/whatsapp.php): bottom-right, brand orange chat bubble, opens WhatsApp. */
.yns-wa {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 10px;
	color: #fffffc;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) { .yns-wa { right: 28px; bottom: 28px; } }
body.admin-bar .yns-wa { bottom: 20px; }

.yns-wa__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 100px;
	background: var(--yn-orange, #FF7515);
	color: #fffffc;
	box-shadow: 0 10px 26px -8px rgba(255, 117, 21, .7), 0 2px 6px rgba(15, 23, 42, .15);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.yns-wa__btn svg { width: 28px; height: 28px; }
.yns-wa__ring {
	position: absolute;
	inset: 0;
	border-radius: 100px;
	border: 2px solid var(--yn-orange, #FF7515);
	animation: yns-wa-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes yns-wa-pulse {
	0% { transform: scale(1); opacity: .7; }
	70% { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

.yns-wa__label {
	padding: 10px 16px;
	border-radius: 100px;
	background: #fffffc;
	color: var(--yn-heading, #1E293B);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 10px 26px -14px rgba(2, 88, 162, .45), 0 1px 0 rgba(30, 41, 59, .05);
	opacity: 0;
	transform: translateX(8px);
	transition: opacity .25s, transform .3s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}
.yns-wa:hover .yns-wa__label,
.yns-wa:focus-visible .yns-wa__label { opacity: 1; transform: translateX(0); }
.yns-wa:hover .yns-wa__btn,
.yns-wa:focus-visible .yns-wa__btn { transform: scale(1.06); box-shadow: 0 16px 32px -10px rgba(255, 117, 21, .8), 0 2px 6px rgba(15, 23, 42, .15); }
.yns-wa:active .yns-wa__btn { transform: scale(1); }
.yns-wa:focus-visible { outline: none; }
.yns-wa:focus-visible .yns-wa__btn { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 3px; }

/* Phones: no hover, so the label is hidden; the round button alone. */
@media (max-width: 767px) { .yns-wa__label { display: none; } .yns-wa__btn { width: 54px; height: 54px; } }
/* Phones: hidden while the cookie card is up (it spans the width). */
@media (max-width: 767px) { body:has(.yns-ck:not([hidden])) .yns-wa { opacity: 0; pointer-events: none; } }
/* Out of the way while a header panel (menu/cart/search) is open. */
html.ofh-lock .yns-wa { opacity: 0; pointer-events: none; }
.yns-wa { transition: opacity .2s; }

@media (prefers-reduced-motion: reduce) { .yns-wa__ring { animation: none; } }