/**
 * WhatsApp floating button, product button and contact banner.
 *
 * Uses logical properties (inset-inline-*, margin-inline-*) rather than
 * left/right so everything mirrors on Arabic pages from the one rule; the RTL
 * build only has to flip the things logical properties cannot express, such as
 * the direction an arrow glyph points.
 *
 * The floating button's size and offsets arrive as inline custom properties
 * from the template, because they are merchant settings — the values below are
 * only the fallback for a render that predates them.
 */

:root {
	--rc-wa-green: #25D366;
	--rc-wa-green-dark: #128C7E;
	--rc-wa-ink: #1D1D1D;
}

/* --------------------------------------------------------------------------
   Floating button

   Icon-only by design: the image is a finished WhatsApp mark with its own
   background and rounded-square silhouette, so the anchor deliberately paints
   nothing of its own — no pill, no label, no away bubble. Everything the
   button would have said in text lives in its title/aria-label instead.
   -------------------------------------------------------------------------- */
.rc-wa-widget {
	--rc-wa-size: 60px;
	--rc-wa-offset-x: 20px;
	--rc-wa-offset-y: 20px;
	position: fixed;
	z-index: 9998;
	display: block;
	width: var(--rc-wa-size);
	height: var(--rc-wa-size);
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	text-decoration: none;
	transition: opacity .25s ease, visibility .25s ease;
}

.rc-wa-widget-icon {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 24%;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
	transition: transform .18s ease, box-shadow .18s ease;
}

.rc-wa-widget:hover .rc-wa-widget-icon,
.rc-wa-widget:focus .rc-wa-widget-icon {
	transform: scale(1.08);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.rc-wa-widget:focus-visible {
	outline: 3px solid rgba(37, 211, 102, .55);
	outline-offset: 4px;
	border-radius: 24%;
}

/* Positions ---------------------------------------------------------------
   The two "middle" ones centre with a transform on the anchor, which is
   exactly why every attention animation below runs on the inner image and the
   ring pseudo-element instead: animating the anchor would overwrite the
   centering transform and drop the button to the top of the viewport. */
.rc-wa-bottom-right,
.rc-wa-bottom-left {
	inset-block-end: var(--rc-wa-offset-y);
}

.rc-wa-top-right,
.rc-wa-top-left {
	inset-block-start: var(--rc-wa-offset-y);
}

.rc-wa-middle-right,
.rc-wa-middle-left {
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.rc-wa-bottom-right,
.rc-wa-top-right,
.rc-wa-middle-right {
	inset-inline-end: var(--rc-wa-offset-x);
}

.rc-wa-bottom-left,
.rc-wa-top-left,
.rc-wa-middle-left {
	inset-inline-start: var(--rc-wa-offset-x);
}

/* Attention animations -----------------------------------------------------
   `is-animating` is added by the script once per interval and taken off again
   when the animation ends, so the button is a plain static icon the rest of
   the time. */
.rc-wa-widget::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24%;
	opacity: 0;
	pointer-events: none;
}

.rc-wa-widget[data-rc-wa-animation="pulse"].is-animating::after {
	border: 2px solid var(--rc-wa-green);
	animation: rc-wa-pulse 1.4s ease-out;
}

.rc-wa-widget[data-rc-wa-animation="beat"].is-animating .rc-wa-widget-icon {
	animation: rc-wa-beat 1.2s ease-in-out;
}

.rc-wa-widget[data-rc-wa-animation="bounce"].is-animating .rc-wa-widget-icon {
	animation: rc-wa-bounce 1.1s cubic-bezier(.28, .84, .42, 1);
}

.rc-wa-widget[data-rc-wa-animation="shake"].is-animating .rc-wa-widget-icon {
	animation: rc-wa-shake .8s ease-in-out;
}

.rc-wa-widget[data-rc-wa-animation="swing"].is-animating .rc-wa-widget-icon {
	transform-origin: top center;
	animation: rc-wa-swing 1s ease-in-out;
}

.rc-wa-widget[data-rc-wa-animation="tada"].is-animating .rc-wa-widget-icon {
	animation: rc-wa-tada 1s ease-in-out;
}

.rc-wa-widget[data-rc-wa-animation="wobble"].is-animating .rc-wa-widget-icon {
	animation: rc-wa-wobble 1s ease-in-out;
}

.rc-wa-widget[data-rc-wa-animation="spin"].is-animating .rc-wa-widget-icon {
	animation: rc-wa-spin .9s ease-in-out;
}

@keyframes rc-wa-pulse {
	0%   { opacity: .85; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1.75); }
}

@keyframes rc-wa-beat {
	0%, 100%   { transform: scale(1); }
	14%, 42%   { transform: scale(1.16); }
	28%, 70%   { transform: scale(1); }
}

@keyframes rc-wa-bounce {
	0%, 20%, 53%, 100% { transform: translateY(0); }
	40%, 43%           { transform: translateY(-22%); }
	70%                { transform: translateY(-11%); }
	90%                { transform: translateY(-4%); }
}

@keyframes rc-wa-shake {
	0%, 100%              { transform: rotate(0); }
	10%, 30%, 50%, 70%    { transform: rotate(-11deg); }
	20%, 40%, 60%, 80%    { transform: rotate(11deg); }
}

@keyframes rc-wa-swing {
	20%      { transform: rotate(14deg); }
	40%      { transform: rotate(-10deg); }
	60%      { transform: rotate(6deg); }
	80%      { transform: rotate(-4deg); }
	100%     { transform: rotate(0); }
}

@keyframes rc-wa-tada {
	0%          { transform: scale(1); }
	10%, 20%    { transform: scale(.92) rotate(-4deg); }
	30%, 50%, 70%, 90% { transform: scale(1.14) rotate(4deg); }
	40%, 60%, 80%      { transform: scale(1.14) rotate(-4deg); }
	100%        { transform: scale(1) rotate(0); }
}

@keyframes rc-wa-wobble {
	0%, 100% { transform: none; }
	15%      { transform: translateX(-18%) rotate(-6deg); }
	30%      { transform: translateX(12%) rotate(5deg); }
	45%      { transform: translateX(-9%) rotate(-4deg); }
	60%      { transform: translateX(6%) rotate(3deg); }
	75%      { transform: translateX(-3%) rotate(-2deg); }
}

@keyframes rc-wa-spin {
	0%   { transform: rotate(0); }
	100% { transform: rotate(360deg); }
}

/* Below 1025px Woodmart shows its sticky bottom toolbar (opt-bottom-toolbar.css,
   `.wd-toolbar{display:none}` only above that width), and the child theme adds
   a WhatsApp entry directly into that toolbar (see functions.php) — so the
   floating button would just duplicate it while sitting on top of the drawer.
   Hidden outright here rather than repositioned. */
@media ( max-width: 1024px ) {
	.rc-wa-widget {
		display: none;
	}
}

/* Side panel / drawer clearance ------------------------------------------
   When a side drawer such as the Woodmart slide-out cart (.cart-widget-side)
   or mobile navigation opens, hide the floating button so it never overlaps
   the drawer contents, buttons or close triggers. */
body:has(.cart-widget-side.wd-opened) .rc-wa-widget,
body:has(.wd-side-hidden.wd-opened) .rc-wa-widget,
body:has(.wd-close-side-opened) .rc-wa-widget,
.rc-wa-widget.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Product page button
   -------------------------------------------------------------------------- */
.rc-wa-product-button {
	display: inline-flex !important;
	align-items: center;
	gap: .5em;
	margin-top: 10px;
	background: var(--rc-wa-green) !important;
	color: #fff !important;
	border: 0;
}

.rc-wa-product-button:hover,
.rc-wa-product-button:focus {
	background: var(--rc-wa-green-dark) !important;
	color: #fff !important;
}

/* The theme lays add-to-cart out as a flex row; keep our button on its own
   line rather than squeezing into it. */
.woocommerce div.product form.cart .rc-wa-product-button {
	flex: 1 0 100%;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Contact banner

   Sits directly under the delivery timeline, so it borrows that card's shape —
   same radius, same border weight, same shadow — and separates itself with a
   green edge and medallion rather than a different silhouette.
   -------------------------------------------------------------------------- */
.rc-wa-banner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	padding: 16px 20px;
	overflow: hidden;
	background: #FFFFFF;
	background: linear-gradient(135deg, rgba(37, 211, 102, .10), rgba(37, 211, 102, .02) 55%, #FFFFFF 100%);
	border: 1px solid rgba(37, 211, 102, .28);
	border-inline-start: 3px solid var(--rc-wa-green);
	border-radius: var(--wd-brd-radius, 16px);
	box-shadow: 0 6px 20px rgba(29, 29, 29, .05);
	text-decoration: none !important;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.rc-wa-banner:hover,
.rc-wa-banner:focus {
	border-color: rgba(37, 211, 102, .5);
	box-shadow: 0 10px 26px rgba(18, 140, 126, .16);
	transform: translateY(-2px);
}

.rc-wa-banner-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--rc-wa-green), var(--rc-wa-green-dark));
	box-shadow: 0 4px 12px rgba(37, 211, 102, .35);
	color: #fff;
}

.rc-wa-banner-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.rc-wa-banner-text {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rc-wa-ink);
}

.rc-wa-banner-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
}

.rc-wa-banner-number {
	color: var(--rc-wa-green-dark);
	/* A phone number reads left-to-right even inside an Arabic sentence. */
	direction: ltr;
	unicode-bidi: isolate;
}

.rc-wa-banner-reply {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	color: #7A7A7A;
}

.rc-wa-banner-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rc-wa-green);
	box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
}

.rc-wa-banner-go {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--rc-wa-green-dark);
	opacity: .55;
	transition: opacity .18s ease, transform .18s ease;
}

.rc-wa-banner:hover .rc-wa-banner-go {
	opacity: 1;
	transform: translateX(3px);
}

@media ( max-width: 480px ) {
	.rc-wa-banner {
		gap: 12px;
		padding: 14px 16px;
	}

	.rc-wa-banner-text {
		font-size: 13.5px;
	}

	.rc-wa-banner-go {
		display: none;
	}
}

/* Respect users who have asked for less motion. The script checks the same
   query before it ever adds `is-animating`; this is the belt-and-braces half,
   and it also covers the hover transforms the script knows nothing about. */
@media ( prefers-reduced-motion: reduce ) {
	.rc-wa-widget-icon,
	.rc-wa-banner,
	.rc-wa-banner-go {
		transition: none;
	}

	.rc-wa-widget::after,
	.rc-wa-widget .rc-wa-widget-icon {
		animation: none !important;
	}

	.rc-wa-widget:hover .rc-wa-widget-icon,
	.rc-wa-widget:focus .rc-wa-widget-icon,
	.rc-wa-banner:hover,
	.rc-wa-banner:focus,
	.rc-wa-banner:hover .rc-wa-banner-go {
		transform: none;
	}
}