/*
 * Theme overrides.
 *
 * Loaded AFTER style.min.css / theme.min.css so individual rules and keyframes
 * can be replaced without touching those large minified files (which are not
 * rebuilt from style.css, so edits to the source never reach the site).
 *
 *   1-3  Animation performance: each block keeps the look of the original
 *        animation but removes what made the browser re-layout or re-paint on
 *        every frame.
 *   4    Footer offices in Arabic (RTL) mode.
 *   5    Contact page phone / WhatsApp numbers in Arabic (RTL) mode.
 */

/* -------------------------------------------------------------------------
 * 1. Off-screen sections do not animate.
 *    animation-visibility.js adds .cx-offscreen to every <section>/<footer>
 *    that is not near the viewport. Without JS nothing is paused, so the page
 *    behaves exactly as before.
 * ---------------------------------------------------------------------- */
.cx-offscreen,
.cx-offscreen *,
.cx-offscreen *::before,
.cx-offscreen *::after {
	animation-play-state: paused !important;
}

/* -------------------------------------------------------------------------
 * 2. OTP countdown bar: animate transform, not width.
 *    Animating width forces a layout pass every frame, forever (30s loop).
 *    scaleX(1 -> 0) from the left edge draws the same shrinking bar.
 * ---------------------------------------------------------------------- */
.otp-progress__bar {
	width: 100%;
	transform-origin: left center;
	animation-name: otpTimerScale;
}

@keyframes otpTimerScale {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* -------------------------------------------------------------------------
 * 3. Rich Messaging (RCS) section.
 * ---------------------------------------------------------------------- */

/* 3a. Ripple rings: no blur().
 *     The rings scale up to ~1600px wide; animating filter: blur() on layers
 *     that size re-rasterises them on every frame, which is what made this
 *     section feel like the page was hanging. Opacity + transform stay, and
 *     the ring still fades out as it expands. */
@keyframes rcsWaveRipple {
	0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
	15%  { opacity: 0.85; }
	100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* 3b. Card "breathing": keep the float, drop the animated box-shadow.
 *     Animating box-shadow repaints every card on every frame. The shadow is
 *     now the midpoint of the old animation, held still. !important because the
 *     old animation always overrode any other box-shadow (hover, active), so
 *     that is the look being preserved. */
@keyframes rcsCardBreathe {
	0%   { transform: translateY(0); }
	100% { transform: translateY(-2px); }
}

.rcs-feature-card,
.rcs-usecase-item {
	box-shadow: 0 6px 13px rgba(0, 0, 0, 0.185) !important;
}

/* -------------------------------------------------------------------------
 * 4. Footer offices in Arabic (RTL) mode.
 *    Each country name and address in the footer has an .arabic-text twin next
 *    to its .eng-text. In RTL mode .eng-text is hidden and .arabic-text is shown,
 *    but the generic .arabic-text rule is styled for body copy (13px, muted,
 *    with a top margin). Inside the offices block it must instead look like the
 *    English text it replaces, and follow the hover colours of its parent.
 *
 *    Phone numbers must stay left-to-right. Inside an RTL block the browser
 *    reverses the digit groups ("+971 55 833 2996" is drawn as
 *    "2996 833 55 971+"), so isolate the number as LTR and keep it right-aligned.
 * ---------------------------------------------------------------------- */
html[dir="rtl"] .footer-single-location .arabic-text,
html.rtl-active .footer-single-location .arabic-text,
body.rtl .footer-single-location .arabic-text {
	font-size: inherit;
	font-weight: inherit;
	margin-top: 0;
	color: inherit !important;
}

html[dir="rtl"] .footer-single-location .location-phone-number,
html.rtl-active .footer-single-location .location-phone-number,
body.rtl .footer-single-location .location-phone-number {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: right;
}

/* -------------------------------------------------------------------------
 * 5. Contact page channels in Arabic (RTL) mode.
 *    Same digit-group reversal as the footer phone numbers: "+971 55 452 2276"
 *    is drawn as "2276 452 55 971+". Isolate each channel value as LTR, keep it
 *    right-aligned like the label above it.
 * ---------------------------------------------------------------------- */
html[dir="rtl"] .cx-channel-meta p,
html.rtl-active .cx-channel-meta p,
body.rtl .cx-channel-meta p {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: right;
}