/* «الزر العائم» — includes/frontend/floating-button.php + assets/fab.js.
   Fixed bottom corner (.acs-fab--right / --left). Rest: gold bell circle (periodic swing + ring, .is-ringing).
   Hover (mouse only): a light-gold pill grows out of the circle with the title.
   Click: .is-open — card springs up from the corner, bell turns into ×. */
.acs-fab{--fab:60px;--fab-gold:#CB9B2A;--fab-gold-dark:#A87E1C;--fab-tint:#F7EFDD;--fab-out:cubic-bezier(.22,1,.36,1);--fab-spring:cubic-bezier(.34,1.56,.64,1);
	position:fixed;left:28px;bottom:28px;z-index:1000;direction:rtl;font-family:"Readex Pro",sans-serif}

/* the circle */
.acs-fab__btn{position:relative;z-index:2;width:var(--fab);height:var(--fab);border-radius:50%;border:0;padding:0;margin:0;cursor:pointer;
	background:var(--fab-gold);color:#fff;display:grid;place-items:center;
	box-shadow:0 6px 18px rgba(168,126,28,.35),0 2px 4px rgba(0,0,0,.12);
	transition:transform .35s var(--fab-spring)}
.acs-fab__btn:hover{transform:scale(1.05)}
.acs-fab__btn:active{transform:scale(.95)}
.acs-fab__btn:focus-visible{outline:3px solid rgba(203,155,42,.45);outline-offset:3px}

/* attention ring */
.acs-fab__btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--fab-gold);opacity:0;pointer-events:none}
.acs-fab.is-ringing .acs-fab__btn::after{animation:acs-fab-ring 1.4s var(--fab-out)}
@keyframes acs-fab-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}

/* bell <-> × */
.acs-fab__icon{grid-area:1/1;display:grid;place-items:center;transition:transform .4s var(--fab-spring),opacity .25s ease}
.acs-fab__icon--close{opacity:0;transform:rotate(-90deg) scale(.6)}
.acs-fab.is-open .acs-fab__icon--bell{opacity:0;transform:rotate(90deg) scale(.6)}
.acs-fab.is-open .acs-fab__icon--close{opacity:1;transform:none}
.acs-fab__bell{transform-origin:50% 12%}
.acs-fab.is-ringing .acs-fab__bell,.acs-fab__btn:hover .acs-fab__bell{animation:acs-fab-swing .9s ease-in-out}
@keyframes acs-fab-swing{
	0%,100%{transform:rotate(0)}
	15%{transform:rotate(16deg)}30%{transform:rotate(-13deg)}
	45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
.acs-fab__dot{transform-origin:center;transform-box:fill-box;animation:acs-fab-dot 2.4s ease-in-out infinite}
@keyframes acs-fab-dot{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.35)}}

/* hover pill — grows OUT of the circle toward the page centre */
.acs-fab__pill{position:absolute;left:0;bottom:0;z-index:1;height:var(--fab);display:flex;align-items:center;
	padding-left:calc(var(--fab) + 18px);padding-right:26px;border-radius:999px;background:var(--fab-tint);
	white-space:nowrap;pointer-events:none;
	clip-path:inset(0 calc(100% - var(--fab)) 0 0 round calc(var(--fab) / 2));
	transition:clip-path .45s var(--fab-out)}
.acs-fab__label{font-size:17px;font-weight:600;line-height:1;color:#231F20;opacity:0;transform:translateX(-10px);
	transition:opacity .2s ease,transform .3s var(--fab-out)}
@media (hover:hover){
	.acs-fab:not(.is-open):hover .acs-fab__pill{clip-path:inset(0 0 0 0 round calc(var(--fab) / 2))}
	.acs-fab:not(.is-open):hover .acs-fab__label{opacity:1;transform:none;transition-delay:.09s}
}

/* the card (an <a> when a link is set) */
.acs-fab__card{position:absolute;left:0;bottom:calc(var(--fab) + 16px);width:320px;max-width:calc(100vw - 56px);
	display:block;text-decoration:none;color:#231F20;background:#fff;border:1px solid var(--fab-gold);border-radius:14px;
	padding:22px 24px 18px;box-shadow:0 18px 40px rgba(35,31,32,.12);text-align:right;
	transform-origin:0 100%;opacity:0;visibility:hidden;pointer-events:none;
	transform:translateY(14px) scale(.85);
	transition:transform .22s ease-in,opacity .18s ease-in,visibility 0s linear .22s,box-shadow .3s ease,border-color .3s ease}
.acs-fab.is-open .acs-fab__card{opacity:1;visibility:visible;pointer-events:auto;transform:none;
	transition:transform .5s var(--fab-spring),opacity .22s ease-out,visibility 0s,box-shadow .3s ease,border-color .3s ease}
.acs-fab.is-open a.acs-fab__card:hover{transform:translateY(-3px);color:#231F20;
	box-shadow:0 0 0 4px rgba(203,155,42,.14),0 22px 44px rgba(35,31,32,.14);border-color:var(--fab-gold-dark)}
a.acs-fab__card:focus-visible{outline:3px solid rgba(203,155,42,.45);outline-offset:3px}

/* staggered lines */
.acs-fab__line{display:block;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.acs-fab.is-open .acs-fab__line{opacity:1;transform:none;transition:opacity .35s ease,transform .45s var(--fab-out)}
.acs-fab.is-open .acs-fab__line:nth-child(1){transition-delay:.10s}
.acs-fab.is-open .acs-fab__line:nth-child(2){transition-delay:.17s}
.acs-fab.is-open .acs-fab__line:nth-child(3){transition-delay:.24s}
.acs-fab.is-open .acs-fab__line:nth-child(4){transition-delay:.31s}
.acs-fab.is-open .acs-fab__line:nth-child(n+5){transition-delay:.38s}

.acs-fab__eyebrow{display:none;font-size:13px;font-weight:600;line-height:1.5;color:var(--fab-gold-dark);margin-bottom:6px}
.acs-fab__text{font-size:19px;font-weight:500;line-height:1.6}
.acs-fab__meta{font-size:14px;font-weight:400;line-height:1.6;color:#6E696A;margin-top:12px}
.acs-fab__meta + .acs-fab__meta{margin-top:2px}
.acs-fab__more{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:600;line-height:1.5;color:var(--fab-gold-dark)}
.acs-fab__arrow{display:inline-block;transition:transform .3s var(--fab-out)}
.acs-fab__card:hover .acs-fab__arrow{transform:translateX(-6px)}

/* right corner («مكان الزر العائم» = يمين): the left layout mirrored — the pill
   still grows toward the page centre and the card springs from its own corner */
.acs-fab--right{left:auto;right:28px}
.acs-fab--right .acs-fab__pill{left:auto;right:0;padding-left:26px;padding-right:calc(var(--fab) + 18px);
	clip-path:inset(0 0 0 calc(100% - var(--fab)) round calc(var(--fab) / 2))}
.acs-fab--right .acs-fab__label{transform:translateX(10px)}
.acs-fab--right .acs-fab__card{left:auto;right:0;transform-origin:100% 100%}

/* touch: no hover pill, the title moves into the card */
@media (hover:none){
	.acs-fab__pill{display:none}
	.acs-fab__eyebrow{display:block}
}
@media (max-width:478px){
	.acs-fab{left:16px;bottom:16px}
	.acs-fab--right{left:auto;right:16px}
	.acs-fab__card{max-width:calc(100vw - 32px)}
}
@media (prefers-reduced-motion:reduce){
	.acs-fab *,.acs-fab *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}