/* ============================================================
 * כפתור וואטסאפ צף — deliz-short
 * המשתנים (--dwf-*) נכתבים מהגדרות האתר בתוך <style id="dwf-vars">.
 * ============================================================ */

.dwf-wrap {
	position: fixed;
	z-index: 1050;
	display: flex;
	align-items: center;
	gap: 10px;
	direction: ltr; /* סדר הפריטים נשלט במחלקות; טקסט הבועה מוחזר ל-RTL למטה */
	pointer-events: none;
}

.dwf-wrap > * {
	pointer-events: auto;
}

/* ---------- הכפתור ---------- */
.dwf-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dwf-size, 56px);
	height: var(--dwf-size, 56px);
	border-radius: var(--dwf-btn-radius, 50%);
	background: var(--dwf-bg, #25D366);
	color: var(--dwf-fg, #fff);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.dwf-wrap--circle .dwf-btn {
	--dwf-btn-radius: 50%;
}

.dwf-wrap--rounded .dwf-btn {
	--dwf-btn-radius: var(--dwf-radius, 16px);
}

.dwf-btn svg {
	width: 58%;
	height: 58%;
	display: block;
}

.dwf-has-shadow .dwf-btn {
	box-shadow: 0 6px 18px var(--dwf-shadow-color, rgba(0, 0, 0, .25));
}

.dwf-btn:hover,
.dwf-btn:focus {
	color: var(--dwf-fg, #fff);
	transform: scale(1.06);
}

.dwf-btn:focus-visible {
	outline: 3px solid var(--dwf-bg, #25D366);
	outline-offset: 3px;
}

/* פעימה עדינה — טבעת נפרדת, כדי לא להתנגש עם הצל של הכפתור */
@keyframes dwf-pulse {
	0%   { box-shadow: 0 0 0 0 var(--dwf-pulse-color, rgba(37, 211, 102, .5)); }
	70%  { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.dwf-has-pulse .dwf-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	animation: dwf-pulse 2.6s ease-out infinite;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.dwf-has-pulse .dwf-btn::after {
		animation: none;
	}

	.dwf-btn,
	.dwf-bubble,
	.dwf-wrap {
		transition: none;
	}
}

/* ---------- בועת ההודעה ---------- */
.dwf-bubble {
	position: relative;
	max-width: 230px;
	padding: 10px 14px;
	border-radius: 14px;
	background: #fff;
	color: #1f2937;
	font-size: 15px;
	line-height: 1.35;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.dwf-rtl .dwf-bubble {
	direction: rtl;
	text-align: right;
}

.dwf-wrap.is-bubble-open .dwf-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dwf-bubble::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -6px;
	border: 6px solid transparent;
}

.dwf-bubble__close {
	position: absolute;
	top: -8px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e5e7eb;
	color: #4b5563;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: none;
}

.dwf-bubble__close:hover {
	background: #d1d5db;
}

.dwf-bubble__close svg {
	width: 8px;
	height: 8px;
}

/* ---------- מיקום: דסקטופ (‎992px ומעלה) ---------- */
@media (min-width: 992px) {
	.dwf-wrap {
		--dwf-size: var(--dwf-d-size, 56px);
		bottom: var(--dwf-d-y, 15px);
	}

	.dwf-wrap.dwf-d-right {
		right: var(--dwf-d-x, 15px);
		left: auto;
		flex-direction: row; /* [בועה][כפתור] */
	}

	.dwf-wrap.dwf-d-left {
		left: var(--dwf-d-x, 15px);
		right: auto;
		flex-direction: row-reverse; /* [כפתור][בועה] */
	}

	.dwf-wrap.dwf-d-right .dwf-bubble::after {
		right: -11px;
		border-left-color: #fff;
	}

	.dwf-wrap.dwf-d-left .dwf-bubble::after {
		left: -11px;
		border-right-color: #fff;
	}

	.dwf-wrap.dwf-d-right .dwf-bubble__close {
		left: -8px;
	}

	.dwf-wrap.dwf-d-left .dwf-bubble__close {
		right: -8px;
	}

	.dwf-wrap.dwf-hide-desktop {
		display: none;
	}

	/* כפתור הנגישות של התבנית עולה מעל כפתור הוואטסאפ (אותה פינה) */
	body.dwf-a11y-stack-desktop button.my-userway-btn.desktop {
		bottom: calc(var(--dwf-d-y, 15px) + var(--dwf-d-size, 56px) + 12px) !important;
	}

	html[dir="rtl"] body.dwf-a11y-stack-desktop button.my-userway-btn.desktop {
		right: calc(var(--dwf-d-x, 15px) + (var(--dwf-d-size, 56px) - 44px) / 2) !important;
	}

	html:not([dir="rtl"]) body.dwf-a11y-stack-desktop button.my-userway-btn.desktop {
		left: calc(var(--dwf-d-x, 15px) + (var(--dwf-d-size, 56px) - 44px) / 2) !important;
	}
}

/* ---------- מיקום: מובייל / טאבלט (עד ‎991px) ---------- */
@media (max-width: 991px) {
	.dwf-wrap {
		--dwf-size: var(--dwf-m-size, 52px);
		bottom: var(--dwf-m-y, 15px);
	}

	.dwf-wrap.dwf-m-right {
		right: var(--dwf-m-x, 15px);
		left: auto;
		flex-direction: row;
	}

	.dwf-wrap.dwf-m-left {
		left: var(--dwf-m-x, 15px);
		right: auto;
		flex-direction: row-reverse;
	}

	.dwf-wrap.dwf-m-right .dwf-bubble::after {
		right: -11px;
		border-left-color: #fff;
	}

	.dwf-wrap.dwf-m-left .dwf-bubble::after {
		left: -11px;
		border-right-color: #fff;
	}

	.dwf-wrap.dwf-m-right .dwf-bubble__close {
		left: -8px;
	}

	.dwf-wrap.dwf-m-left .dwf-bubble__close {
		right: -8px;
	}

	.dwf-wrap.dwf-hide-mobile,
	.dwf-wrap.dwf-bubble-desktop-only .dwf-bubble {
		display: none;
	}

	.dwf-bubble {
		max-width: min(62vw, 230px);
		font-size: 14px;
	}

	/* התרוממות מעל סרגל "מעבר להזמנה" */
	.dwf-wrap.dwf-lift-cart {
		transition: bottom .3s ease, opacity .2s ease, visibility .2s;
	}

	.dwf-wrap.dwf-lift-cart.is-basket-open {
		bottom: calc(var(--dwf-m-y, 15px) + var(--dwf-basket-lift, 73px));
	}

	/* כפתור הנגישות של התבנית מוצג גם ב-600–991 — מרימים גם שם */
	body.dwf-a11y-stack-mobile button.my-userway-btn.desktop {
		bottom: calc(var(--dwf-m-y, 15px) + var(--dwf-m-size, 52px) + 12px) !important;
	}

	html[dir="rtl"] body.dwf-a11y-stack-mobile button.my-userway-btn.desktop {
		right: calc(var(--dwf-m-x, 15px) + (var(--dwf-m-size, 52px) - 44px) / 2) !important;
	}

	html:not([dir="rtl"]) body.dwf-a11y-stack-mobile button.my-userway-btn.desktop {
		left: calc(var(--dwf-m-x, 15px) + (var(--dwf-m-size, 52px) - 44px) / 2) !important;
	}
}

/* מתפנים מהדרך כשמגירה / פופ-אפ / תפריט פתוחים */
body.popup-open .dwf-wrap,
body.menu-open .dwf-wrap,
body.basket-open .dwf-wrap,
body.auth-active .dwf-wrap {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s;
}

@media print {
	.dwf-wrap {
		display: none !important;
	}
}