/**
 * Floating contact CTA — site-wide.
 * dr-amramal.com · 2026-09-21 · v2
 *
 * Ported from dramramal.com (theme AMR-Unique-2). Same structure, sizes and
 * motion; the two colours that belonged to the OLD brand are re-mapped:
 *   phone tab   teal  #0D9488  ->  gold       #FFD966 -> #C9960C
 *   centre btn  rose  #E11D48  ->  gold       #FFD966 -> #C9960C
 * WhatsApp green stays green — it is a brand mark, not a palette choice.
 *
 * NAMESPACE: every selector is `fcta-`, a prefix that exists nowhere else in
 * this theme or in any active plugin. The only shared selector is the `body`
 * bottom padding at the end of the file, which reserves the space the fixed
 * mobile bar occupies — the old site did exactly the same.
 *
 * CACHE: LiteSpeed has "Remove Query Strings" on site-wide, so ?ver= never
 * reaches the browser. To ship an edit, RENAME this file (float-cta-v3.css …)
 * and update the handle in functions.php. The handle is also listed in
 * hv3_skip_optimizer() so the optimizer never serves a stale minified copy.
 *
 * RTL: no letter-spacing anywhere — it breaks Arabic letter joining.
 */

.fcta-side,
.fcta-bar {
	--fcta-navy: #1B3F6B;
	--fcta-navy-deep: #143152;
	--fcta-blue: #1F6FBF;
	--fcta-gold: #C9960C;
	--fcta-gold-hi: #FFD966;
	--fcta-wa: #25D366;
	--fcta-wa-deep: #0E7C6B;
	--fcta-white: #fff;
	--fcta-ease: cubic-bezier(.4, 0, .2, 1);
	font-family: 'LNA', system-ui, -apple-system, 'Segoe UI', sans-serif;
	z-index: 1030;
}

/* ── desktop: two tabs clipped to the viewport edge ────────────────────── */
.fcta-side {
	position: fixed;
	inset-block-start: 50%;
	right: 0;
	transform: translateY(-50%);
	display: none;
	flex-direction: column;
	gap: 8px;
}
.fcta-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--fcta-white);
	border-radius: 16px 0 0 16px;
	/* The original grew the tab from 56px to 66px on hover. Animating width
	   relayouts on every frame; scaleX from the right edge is the same movement
	   on the compositor. The glyph is counter-scaled so it never distorts. */
	transform-origin: 100% 50%;
	transition: transform .3s var(--fcta-ease), filter .3s var(--fcta-ease);
}
.fcta-glyph { display: block; width: 28px; height: 28px; transition: transform .3s var(--fcta-ease); }
.fcta-glyph svg { width: 100%; height: 100%; display: block; }
.fcta-tab:hover,
.fcta-tab:focus-visible { transform: scaleX(1.179); filter: brightness(1.06); }
.fcta-tab:hover .fcta-glyph,
.fcta-tab:focus-visible .fcta-glyph { transform: scaleX(.848); }
.fcta-tab:focus-visible { outline: 3px solid var(--fcta-gold-hi); outline-offset: -3px; }

.fcta-tab--wa { background: linear-gradient(135deg, var(--fcta-wa), var(--fcta-wa-deep)); box-shadow: -4px 4px 20px rgb(37 211 102 / .32); }
/* Gold, not blue. A blue tab disappears against the navy hero that opens every
   service and treatment page — and that hero is the most-seen viewport on the
   site. Gold separates from navy AND from white, and it matches the raised
   centre button on mobile: green = WhatsApp, gold = call, everywhere.
   Navy glyph on gold = 4.89:1. */
.fcta-tab--tel { background: linear-gradient(135deg, var(--fcta-gold-hi), var(--fcta-gold)); color: var(--fcta-navy-deep); box-shadow: -4px 4px 20px rgb(201 150 12 / .42); }

@media (min-width: 992px) {
	.fcta-side { display: flex; }
}

/* ── mobile: pill bar with a raised centre call button ─────────────────── */
.fcta-bar {
	position: fixed;
	inset-block-end: 20px;
	inset-inline: 16px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 56px;
	max-width: 420px;
	margin-inline: auto;
	pointer-events: none;
}
.fcta-bar__sides {
	pointer-events: auto;
	flex: 1;
	height: 100%;
	display: flex;
	justify-content: space-between;
	border-radius: 9999px;
	overflow: hidden;
	background: var(--fcta-navy-deep);
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / .22), 0 8px 10px -6px rgb(0 0 0 / .1);
}
.fcta-half {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 24px;
	font-size: clamp(.8rem, .9vw, .875rem);
	font-weight: 700;
	line-height: 1;
	color: var(--fcta-white);
	transition: filter .15s var(--fcta-ease);
}
.fcta-half svg { width: 18px; height: 18px; flex: none; }
.fcta-half:hover, .fcta-half:focus-visible { filter: brightness(1.12); }
.fcta-half:focus-visible { outline: 3px solid var(--fcta-gold-hi); outline-offset: -3px; }
/* white on #1B3F6B = 10.6:1 · white on #0E7C6B = 5.1:1 — both pass AA.
   The bright brand green #25D366 carries the icon-only tab, never a text label. */
.fcta-half--tel { background: var(--fcta-navy); padding-inline-end: 42px; }
.fcta-half--wa { background: var(--fcta-wa-deep); padding-inline-start: 42px; }

.fcta-center {
	pointer-events: auto;
	position: absolute;
	left: 50%;
	inset-block-end: 8px;
	width: 62px;
	height: 62px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* navy glyph on gold = 4.89:1 */
	color: var(--fcta-navy-deep);
	background: linear-gradient(135deg, var(--fcta-gold-hi), var(--fcta-gold));
	border: 4px solid var(--fcta-white);
	box-shadow: 0 8px 25px rgb(201 150 12 / .45);
	transform: translateX(-50%);
	transition: transform .3s var(--fcta-ease), box-shadow .3s var(--fcta-ease);
	z-index: 10;
}
.fcta-center svg { width: 26px; height: 26px; animation: fctaRing 2s ease-in-out infinite; }
.fcta-center:hover, .fcta-center:focus-visible { transform: translateX(-50%) scale(1.06); box-shadow: 0 12px 30px rgb(201 150 12 / .55); }
.fcta-center:focus-visible { outline: 3px solid var(--fcta-navy); outline-offset: 2px; }

@keyframes fctaRing {
	0%, 100% { transform: rotate(0deg); }
	5%  { transform: rotate(-15deg); }
	10% { transform: rotate(15deg); }
	15% { transform: rotate(-10deg); }
	20% { transform: rotate(10deg); }
	25%, 100% { transform: rotate(0deg); }
}

@media (min-width: 992px) {
	.fcta-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fcta-center svg { animation: none; }
	.fcta-tab, .fcta-glyph, .fcta-center, .fcta-half { transition-duration: .01ms; }
}

/**
 * The one shared selector in this file. The mobile bar is fixed at the bottom,
 * so without this the last ~100px of every page (the footer) sits underneath it
 * and can never be read. The old site reserved the same 100px at the same
 * breakpoint; this is a port of that rule, not a new decision.
 */
@media (max-width: 991px) {
	body { padding-bottom: 100px; }
}