/**
 * CTA Buttons v1.2 — Call & WhatsApp
 * Force-LTR pill (icon LEFT · body RIGHT) regardless of page direction.
 * Rings live outside the pill to avoid bleeding into text.
 */

/* ── Fixed container — always physical left ── */
.cta-float-wrap {
	position: fixed;
	left: 20px;
	bottom: 26px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 14px;
	pointer-events: none;
}

/* ── Per-button wrapper (holds rings + pill) ── */
.cta-fb-outer {
	position: relative;
	display: inline-block;
	width: -moz-fit-content;
	width: fit-content;
	pointer-events: auto;
}

/* ── Sonar rings: outside the pill, around the icon ── */
.cta-ring {
	position: absolute;
	top: 50%;
	left: 0;                     /* aligns with icon on the left */
	width: 62px;
	height: 62px;
	border-radius: 50%;
	transform: translateY(-50%) scale(1);
	pointer-events: none;
	z-index: 0;
}
.cta-ring--1 { animation: ctab-sonar 2.6s ease-out           infinite; }
.cta-ring--2 { animation: ctab-sonar 2.6s ease-out  .8s      infinite; }

@keyframes ctab-sonar {
	0%   { transform: translateY(-50%) scale(1);   opacity: .75; }
	100% { transform: translateY(-50%) scale(3.4); opacity: 0;   }
}

/* ── Pill ── */
.cta-fb {
	position: relative;
	z-index: 1;

	/* Force LTR so icon is ALWAYS on the left */
	direction: ltr;
	display: inline-flex;
	align-items: stretch;

	border-radius: 60px;
	overflow: hidden;            /* clean pill clip — no inner-radius needed */
	box-shadow: 0 8px 28px rgba(0, 0, 0, .30);
	text-decoration: none !important;
	cursor: pointer;
	transition:
		transform  .3s cubic-bezier(.34, 1.56, .64, 1),
		box-shadow .3s ease;
	-webkit-tap-highlight-color: transparent;
}
.cta-fb:hover,
.cta-fb:focus-visible {
	transform: scale(1.07) translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .36);
	outline: none;
}

/* ── Icon circle (LEFT side) ── */
.cta-fb__icon {
	width: 62px;
	height: 62px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cta-fb__icon svg {
	width: 28px;
	height: 28px;
	fill: #fff;
	display: block;
}

/* ── Text body (RIGHT side of pill) ── */
.cta-fb__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 22px 0 14px;
	background: #1b2b40;
	min-width: 148px;
}
.cta-fb__label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .9px;
	text-transform: uppercase;
	line-height: 1.4;
	/* Keep Arabic text RTL inside the forced-LTR pill */
	direction: rtl;
	unicode-bidi: embed;
}
.cta-fb__number {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .3px;
	direction: ltr;              /* phone numbers are always LTR */
	unicode-bidi: isolate;
	line-height: 1.4;
}

/* ── CALL colours ── */
.cta-fb--call .cta-fb__icon  { background: linear-gradient(145deg, #e74c3c 0%, #c0392b 100%); }
.cta-fb--call .cta-fb__label { color: #ff8a80; }
.cta-fb-outer--call .cta-ring { background: rgba(231, 76, 60, .40); }

/* ── WhatsApp colours ── */
.cta-fb--wa   .cta-fb__icon  { background: linear-gradient(145deg, #2ecc71 0%, #1da852 100%); }
.cta-fb--wa   .cta-fb__label { color: #69f0ae; }
.cta-fb-outer--wa   .cta-ring { background: rgba(46, 204, 113, .40); }
.cta-fb-outer--wa   .cta-ring--1 { animation-delay: .9s;  }
.cta-fb-outer--wa   .cta-ring--2 { animation-delay: 1.7s; }

/* ── Attention shake (call only, 5 s delay, every 9 s) ── */
@keyframes ctab-shake {
	0%,  65%, 100% { transform: translateX(0)    rotate(0);     }
	67%            { transform: translateX(-8px)  rotate(-4deg); }
	69%            { transform: translateX( 8px)  rotate( 4deg); }
	71%            { transform: translateX(-6px);                }
	73%            { transform: translateX( 6px);                }
	75%            { transform: translateX(-3px);                }
	77%            { transform: translateX( 3px);                }
	79%            { transform: translateX(0);                   }
}
.cta-fb-outer--call { animation: ctab-shake 9s 5s ease-in-out infinite; }

/* ── Mobile ── */
@media (max-width: 480px) {
	.cta-float-wrap         { left: 12px; bottom: 16px; gap: 10px; }
	.cta-fb__icon           { width: 54px; height: 54px; }
	.cta-ring               { width: 54px; height: 54px; }
	.cta-fb__body           { min-width: 130px; padding: 0 16px 0 10px; }
	.cta-fb__label          { font-size: 9px; }
	.cta-fb__number         { font-size: 13px; }
}