/* ==========================================================================
   FLOATING ACTIONS (fa2) — FAST GLASS + LABEL FIX (FINAL)
   - Erősebb üveghatás, de nem lassít (nincs heavy blur mobilon)
   - Desktop: kisebb, tisztább stack + "Szolgáltatások" kifér
   - Desktopon nincs alsó dock
   ========================================================================== */

:root {
    --fa-z: 95;
    --fa-edge: 12px;

    /* Glass colors (fast) */
    --fa-a: rgba(16, 18, 22, .42);
    --fa-b: rgba(16, 18, 22, .66);
    --fa-a-h: rgba(18, 20, 24, .52);
    --fa-b-h: rgba(18, 20, 24, .78);

    --fa-border: rgba(255, 255, 255, .10);
    --fa-border-soft: rgba(255, 255, 255, .07);
    --fa-border-h: rgba(255, 255, 255, .16);

    --fa-shadow: 0 10px 22px rgba(0, 0, 0, .22);

    --fa-ico: #eef1f3;
    --fa-label: rgba(220, 226, 232, .78);

    /* Desktop stack — kicsi, de szélesebb, hogy a címke kiférjen */
    --fa-stack-w: 96px;
    /* EZ oldja meg a “Szolgáltatások” vágást */
    --fa-size: 38px;
    --fa-gap: 10px;
    --fa-radius: 14px;
    --fa-icon-size: 20px;

    --fa-stack-label-lines: 2;
    --fa-stack-label-fs: 9.2px;
    --fa-stack-label-lh: 1.08;

    /* Mobile dock */
    --fa-dock-h: 60px;
    --fa-dock-pad-x: 8px;
    --fa-dock-pad-y: 8px;
    --fa-dock-gap: 8px;
    --fa-dock-icon: 22px;
    --fa-dock-fs: 10px;
    --fa-dock-lh: 1.05;
    --fa-dock-label-lines: 2;

    /* Fast motion */
    --fa-t: 130ms;
    --fa-ease: cubic-bezier(.22, .61, .36, 1);

    --fa-focus: rgba(255, 106, 0, .55);
}

/* Base */
.fa2-root,
.fa2-root * {
    box-sizing: border-box;
}

.fa2-root {
    position: relative;
    z-index: var(--fa-z);
}

/* Ne vágja a hover-t */
.fa2-right-rail,
.fa2-dock,
.fa2-fabTop,
.fa2-quote-rail {
    overflow: visible;
}

/* Focus */
.fa2-root a:focus-visible,
.fa2-root button:focus-visible {
    outline: 2px solid var(--fa-focus);
    outline-offset: 2px;
}

/* ==========================================================================
     “FAST GLASS” SURFACE (NO pseudo-elements, NO heavy blur by default)
     One background with multi-layers = gyorsabb, mint ::before + blur mobilon
     ========================================================================== */
.fa2-rbtn,
.fa2-quote-rail,
.fa2-dock,
.fa2-fabTop {
    background:
        radial-gradient(120% 90% at 18% 10%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(135deg, var(--fa-a), var(--fa-b));
    border: 1px solid var(--fa-border-soft);
    box-shadow: var(--fa-shadow);
}

/* Hover: NEM animálunk box-shadow-t (drága), csak background/border/transform */
.fa2-rbtn,
.fa2-quote-rail,
.fa2-fabTop {
    transition:
        transform var(--fa-t) var(--fa-ease),
        border-color var(--fa-t) var(--fa-ease),
        background var(--fa-t) var(--fa-ease),
        opacity var(--fa-t) var(--fa-ease);
}

.fa2-rbtn:hover,
.fa2-quote-rail:hover,
.fa2-fabTop:hover {
    background:
        radial-gradient(120% 90% at 18% 10%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(135deg, var(--fa-a-h), var(--fa-b-h));
    border-color: var(--fa-border-h);
    transform: translateY(-1px);
}

.fa2-rbtn:active,
.fa2-quote-rail:active {
    transform: translateY(0);
}

/* ==========================================================================
     LEFT “QUOTE” RAIL
     ========================================================================== */
.fa2-quote-rail {
    position: fixed;
    left: calc(var(--fa-edge) + env(safe-area-inset-left));
    top: 35%;

    width: 22px;
    min-height: 122px;

    display: grid;
    place-items: center;

    border-radius: 14px;
    color: var(--fa-ico);
    text-decoration: none;
}

.fa2-quote-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 800;
    letter-spacing: .25px;
    font-size: 10.5px;
    line-height: 1;
    padding: 10px 0;
}

/* ==========================================================================
     DESKTOP RIGHT STACK
     ========================================================================== */
.fa2-right-rail {
    position: fixed;
    right: calc(var(--fa-edge) + env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: var(--fa-gap);

    z-index: var(--fa-z);
}

.fa2-rbtn {
    width: var(--fa-stack-w);

    display: grid;
    grid-template-rows: var(--fa-size) auto;
    gap: 6px;
    align-items: center;
    justify-items: center;

    padding: 7px 7px 9px;
    border-radius: var(--fa-radius);

    color: var(--fa-ico);
    text-decoration: none;
}

.fa2-ico {
    width: var(--fa-size);
    height: var(--fa-size);
    display: grid;
    place-items: center;
    line-height: 0;
}

.fa2-ico svg,
.fa2-ico img {
    width: var(--fa-icon-size);
    height: var(--fa-icon-size);
    display: block;
    object-fit: contain;
}

.fa2-mini {
    width: 100%;
    padding: 0 6px;
    /* fontos: a szöveg ne érjen a széléhez */

    text-align: center;
    font-size: var(--fa-stack-label-fs);
    line-height: var(--fa-stack-label-lh);
    color: var(--fa-label);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--fa-stack-label-lines);
    overflow: hidden;

    min-height: calc(var(--fa-stack-label-lines) * 1em * var(--fa-stack-label-lh));

    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Desktop “Fel” (JS kezeli az is-visible-t) */
.fa2-top {
    opacity: 0;
    pointer-events: none;
}

.fa2-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
     MOBILE DOCK (4 buttons) — DESKTOPON REJTVE
     ========================================================================== */
.fa2-dock {
    position: fixed;
    left: calc(var(--fa-edge) + env(safe-area-inset-left));
    right: calc(var(--fa-edge) + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));

    height: var(--fa-dock-h);
    padding: var(--fa-dock-pad-y) var(--fa-dock-pad-x);

    border-radius: 16px;

    display: none;
    /* desktop: nincs */
    gap: var(--fa-dock-gap);
    align-items: center;

    z-index: var(--fa-z);
}

/* csak oszlop-szám (display-t nem állít!) */
.fa2-dock--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fa2-dock-btn {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;
    padding: 4px 2px;

    color: var(--fa-ico);
    text-decoration: none;

    background: transparent;
    border: 0;
    cursor: pointer;

    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;

    transition: background var(--fa-t) var(--fa-ease);
}

.fa2-dock-btn:hover {
    background: rgba(255, 255, 255, .05);
}

.fa2-dock-btn:active {
    background: rgba(255, 255, 255, .07);
}

.fa2-dock-btn svg,
.fa2-dock-btn img {
    width: var(--fa-dock-icon);
    height: var(--fa-dock-icon);
    display: block;
    object-fit: contain;
}

.fa2-dock-btn span {
    width: 100%;
    text-align: center;

    font-size: var(--fa-dock-fs);
    line-height: var(--fa-dock-lh);
    color: var(--fa-label);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--fa-dock-label-lines);
    overflow: hidden;

    min-height: calc(var(--fa-dock-label-lines) * 1em * var(--fa-dock-lh));
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* ==========================================================================
     MOBILE TOP FAB
     ========================================================================== */
.fa2-fabTop {
    position: fixed;
    right: calc(var(--fa-edge) + env(safe-area-inset-right));
    bottom: calc(var(--fa-dock-h) + 18px + env(safe-area-inset-bottom));

    width: 44px;
    height: 44px;
    border-radius: 999px;

    display: none;
    /* desktop: nincs */
    place-items: center;

    color: var(--fa-ico);

    opacity: 0;
    pointer-events: none;

    transition:
        transform var(--fa-t) var(--fa-ease),
        border-color var(--fa-t) var(--fa-ease),
        background var(--fa-t) var(--fa-ease),
        opacity var(--fa-t) var(--fa-ease);
}

.fa2-fabTop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.fa2-fabTop svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Sidebar nyitva -> rejtés */
.sidebar-open .fa2-right-rail,
.sidebar-open .fa2-quote-rail,
.sidebar-open .fa2-dock,
.sidebar-open .fa2-fabTop {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
     RESPONSIVE
     ========================================================================== */
@media (max-width: 820px) {
    :root {
        --fa-edge: 8px;

        /* mobilon kicsit kontrasztosabb glass */
        --fa-a: rgba(16, 18, 22, .62);
        --fa-b: rgba(16, 18, 22, .86);
        --fa-a-h: rgba(18, 20, 24, .70);
        --fa-b-h: rgba(18, 20, 24, .92);

        --fa-label: rgba(238, 241, 243, .78);

        --fa-dock-pad-x: 6px;
        --fa-dock-gap: 6px;
    }

    .fa2-right-rail {
        display: none;
    }

    .fa2-dock {
        display: grid;
    }

    .fa2-fabTop {
        display: grid;
    }

    .fa2-top {
        display: none !important;
    }

    body {
        padding-bottom: calc(var(--fa-dock-h) + 26px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 420px) {
    :root {
        --fa-dock-h: 58px;
        --fa-dock-gap: 5px;
        --fa-dock-icon: 21px;
        --fa-dock-fs: 9.6px;
    }
}

/* Hard safety: desktopon a dock sose jelenjen meg */
@media (min-width: 821px) {
    .fa2-dock {
        display: none !important;
    }
}

/* OPTIONAL: nagyon kicsi blur csak DESKTOPON (ha van támogatás)
     Ha abszolút max performance kell: ezt a blokkot töröld. */
@media (min-width: 821px) {
    @supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {

        .fa2-rbtn,
        .fa2-quote-rail {
            backdrop-filter: blur(6px) saturate(140%);
            -webkit-backdrop-filter: blur(6px) saturate(140%);
        }
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .fa2-quote-rail,
    .fa2-rbtn,
    .fa2-dock,
    .fa2-fabTop {
        transition: none !important;
    }
}