/* ==========================================================================
   Layout: floating buttons  (partials/site/floating.blade.php)
   --------------------------------------------------------------------------
   One button per bottom corner, so they never stack:
     · back to top   — bottom inline-start corner (right in RTL), desktop and
                       phones (above the tab bar). The ring around it fills
                       with the reading progress (--progress 0 → 1, set by
                       js/modules/back-to-top.js); hover turns it ink.
     · WhatsApp menu — bottom inline-end corner: a «تحدث معنا عبر واتساب»
                       pill (round on phones, above the tab bar) opening a
                       small card of four actions (a <details>).
   ========================================================================== */

.floating__top {
    position: fixed;
    bottom: var(--space-6);
    z-index: var(--z-float);
    display: grid;
    place-items: center;
    border-radius: 50%;
}

/* ── Back to top ─────────────────────────────────────────────────────────── */
.floating__top {
    --progress: 0;
    inset-inline-start: var(--space-6);
    width: 54px;
    height: 54px;
    background: var(--card);
    color: var(--ink);
    font-size: 1.2rem;
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--ink) 55%, transparent);
    opacity: 0;
    transform: translateY(14px) scale(0.9);
    pointer-events: none;                    /* not clickable while hidden */
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring),
                background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.floating__top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.floating__top[hidden] { display: none; }
.floating__top:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.floating__top .icon { position: relative; transition: transform var(--dur) var(--ease-out); }
.floating__top:hover .icon { transform: translateY(-2px); }

.floating__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.floating__track,
.floating__progress { fill: none; stroke-width: 2.5; }
.floating__track { stroke: var(--line); }
.floating__progress {
    stroke: var(--second-strong);
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--progress));
}
.floating__top:hover .floating__track { stroke: rgb(255 255 255 / 0.2); }
.floating__top:hover .floating__progress { stroke: var(--aqua); }

/* ── WhatsApp menu ───────────────────────────────────────────────────────── */
.wa {
    position: fixed;
    bottom: var(--space-6);
    inset-inline-end: var(--space-6);
    z-index: var(--z-float);
}
.wa__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding-inline: var(--space-4) var(--space-5);
    border-radius: var(--r-pill);
    background: var(--whatsapp);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    box-shadow: 0 16px 30px -16px rgb(0 0 0 / 0.45);
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.wa__toggle::-webkit-details-marker { display: none; }
.wa__toggle:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -16px rgb(0 0 0 / 0.5); }
.wa__toggle:focus-visible { outline: 3px solid var(--second-strong); outline-offset: 3px; }
.wa__icon { font-size: 1.6rem; }
.wa__close { display: none; font-size: 1.2rem; }
.wa[open] .wa__icon { display: none; }
.wa[open] .wa__close { display: block; }

.wa__menu {
    position: absolute;
    bottom: calc(100% + var(--space-3));
    inset-inline-end: 0;
    width: min(320px, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-5);
    border-radius: var(--r-xl);
    background: var(--card);
    box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.45), 0 0 0 1px var(--line);
    animation: wa-in var(--dur) var(--ease-out);
}
@keyframes wa-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.wa__title { font-family: var(--font-display); font-size: var(--fs-lg); }
.wa__note { margin: var(--space-1) 0 var(--space-4); color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.7; }
.wa__list { display: grid; gap: var(--space-2); }
.wa__list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.wa__list a:hover { border-color: var(--whatsapp); background: color-mix(in srgb, var(--whatsapp) 8%, #fff); }
.wa__list .icon { flex-shrink: 0; color: var(--second-text); font-size: 1.15rem; }
.wa__list li:first-child .icon, .wa__list li:nth-child(2) .icon { color: var(--whatsapp); }
.wa__list .num { margin-inline-start: auto; color: var(--ink-soft); }
[dir="ltr"] .wa__go { scale: -1 1; }

/* ── Phones: above the tab bar ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .floating__top {
        bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-4));
        inset-inline-start: var(--space-4);
        width: 46px;
        height: 46px;
        font-size: 1.05rem;
    }
    /* WhatsApp: a round button above the tab bar */
    .wa { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-4)); inset-inline-end: var(--space-4); }
    .wa__toggle { justify-content: center; width: 50px; height: 50px; padding: 0; }
    .wa__label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa__menu { animation: none; } }