/* ==============================================================
   FIXED ACTIONS — GLASS MOBIL DOKK (ikon + felirat)
   ============================================================== */

:root {
    /* méretek */
    --fa-ico: 18px;
    /* ikon méret desktop */
    --fa-ico-m: 16px;
    /* ikon méret mobil */
    --fa-gap: 10px;
    /* elemköz */
    --fa-pad-x: 6px;
    /* tap-padding (vízszint) */
    --fa-pad-y: 6px;
    /* tap-padding (függőleges) */
    --fa-edge: 12px;
    /* oldaltávolság */
    --fa-z: 95;

    /* szélesség korlát — fit-content-hez */
    --fa-w-min: 72px;
    /* min szélesség */
    --fa-w-max: 98px;
    /* max (WhatsApp / Kezdőlap is befér) */

    /* színek */
    --fa-ink: #1b1f23;
    /* ikon/felirat alapszín */
    --fa-ink-dim: #5a6067;
    /* felirat */
    --fa-accent: var(--brand-green, #1F5A22);
    /* hívás/kiemelés */

    /* GLASS DOKKHOZ */
    --fa-glass-bg: color-mix(in srgb, #ffffff 72%, transparent);
    --fa-glass-border: color-mix(in srgb, #ffffff 60%, rgba(15, 23, 42, .22));
    --fa-glass-shadow: 0 18px 38px rgba(15, 23, 42, .35);
}

/* gyökér */
.fa2-root {
    position: relative;
    z-index: var(--fa-z);
}

/* ===== BAL oldali „Ajánlatkérés” sín — FINOM GLASS ===== */
.fa2-quote-rail {
    position: fixed;
    left: calc(6px + env(safe-area-inset-left));
    top: 48%;
    transform: translateY(-50%);
    z-index: var(--fa-z);

    display: grid;
    place-items: center;
    text-decoration: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;

    font-weight: 700;
    letter-spacing: .16em;
    font-size: 10px;
    line-height: 1;

    padding: 10px 4px;
    /* alacsonyabb, karcsúbb pill */
    border-radius: 999px;

    /* finom üveghatás, nem tömör zöld */
    color: var(--fa-accent);
    background: color-mix(in srgb, #ffffff 65%, transparent);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    border: 1px solid color-mix(in srgb, #ffffff 70%, rgba(15, 23, 42, .28));
    box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
}

.fa2-quote-rail:hover {
    background: color-mix(in srgb, #ffffff 80%, transparent);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .32);
    transform: translateY(-52%);
}

@media (max-width: 820px) {
    .fa2-quote-rail {
        font-size: 9.5px;
        padding: 9px 3px;
        left: calc(4px + env(safe-area-inset-left));
    }
}



/* ===== JOBB oldali oszlop (desktop) */
.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);
}

/* ===== Gombkártya — VALÓDI MINIMAL: csak ikon + felirat ===== */
.fa2-rbtn {
    --hit-x: var(--fa-pad-x);
    --hit-y: var(--fa-pad-y);
    display: grid;
    grid-template-rows: auto auto;
    gap: 6px;
    align-items: center;
    justify-items: center;
    inline-size: fit-content;
    min-inline-size: var(--fa-w-min);
    max-inline-size: var(--fa-w-max);
    padding: var(--hit-y) var(--hit-x);
    color: var(--fa-ink);
    text-decoration: none;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
    transition: transform .18s, color .18s, opacity .18s;
}

.fa2-ico {
    width: calc(var(--fa-ico) + 2px);
    height: calc(var(--fa-ico) + 2px);
    display: grid;
    place-items: center;
}

.fa2-ico svg,
.fa2-ico img {
    width: var(--fa-ico);
    height: var(--fa-ico);
    display: block;
}

.fa2-mini {
    font-size: 10px;
    line-height: 1;
    color: var(--fa-ink-dim);
    white-space: nowrap;
    text-align: center;
}

/* interakció — minimál változás (szín + 1px mozdul) */
.fa2-rbtn:hover {
    transform: translateY(-1px);
}

.fa2-rbtn:hover .fa2-mini {
    color: var(--fa-ink);
}

/* fókuszgyűrű a hozzáférhetőségért */
.fa2-rbtn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--fa-accent) 55%, transparent);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Hívás ikon kap márka-zöldet */
.fa2-rbtn--call .fa2-ico svg {
    color: var(--fa-accent);
}

/* Fel a tetejére – alapból rejtve; JS mutatja scroll után */
.fa2-top {
    opacity: 0;
    pointer-events: none;
}

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

/* ===== MOBIL DOKK — GLASS / ÜVEGHATÁS ===== */
.fa2-dock {
    position: fixed;
    left: max(var(--fa-edge), calc(env(safe-area-inset-left) + 10px));
    right: max(var(--fa-edge), calc(env(safe-area-inset-right) + 10px));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    z-index: var(--fa-z);

    /* GLASS STÍLUS */
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--fa-glass-bg);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    border: 1px solid var(--fa-glass-border);
    box-shadow: var(--fa-glass-shadow);
}

.fa2-dock-btn {
    flex: 1 1 0;
    /* minden gomb egyforma széles, kitöltik a sávot */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--fa-pad-y) var(--fa-pad-x);
    color: var(--fa-ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.fa2-dock-btn svg,
.fa2-dock-btn img {
    width: var(--fa-ico-m);
    height: var(--fa-ico-m);
}

.fa2-dock-btn span {
    font-size: 10px;
    line-height: 1;
    color: var(--fa-ink-dim);
    white-space: nowrap;
}


.fa2-dock-btn svg,
.fa2-dock-btn img {
    width: var(--fa-ico-m);
    height: var(--fa-ico-m);
}

.fa2-dock-btn span {
    font-size: 10px;
    line-height: 1;
    color: var(--fa-ink-dim);
    white-space: nowrap;
}

.fa2-dock-btn.is-call svg {
    color: var(--fa-accent);
}

.fa2-dock-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--fa-accent) 55%, transparent);
    outline-offset: 2px;
    border-radius: 8px;
}

/* MOBIL külön „Fel” (kis kör) */
.fa2-fabTop {
    position: fixed;
    right: calc(var(--fa-edge) + env(safe-area-inset-right));
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: none;
    place-items: center;
    background: transparent;
    color: var(--fa-ink);
    border: 1px solid color-mix(in srgb, var(--fa-ink) 24%, transparent);
    z-index: var(--fa-z);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s, border-color .18s;
}

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

.fa2-fabTop:hover {
    transform: translateY(-1px);
}

.fa2-fabTop svg {
    width: 16px;
    height: 16px;
}

/* Overlay (oldalsáv nyitva) — rejtsük a fix elemeket */
.sidebar-open .fa2-right-rail,
.sidebar-open .fa2-quote-rail,
.sidebar-open .fa2-dock,
.sidebar-open .fa2-fabTop {
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s;
}

/* ===== Breakpointok ===== */
@media (min-width:1024px) {
    :root {
        --fa-ico: 18px;
        --fa-w-min: 74px;
        --fa-w-max: 100px;
        /* desktopon pici mozgástér */
    }
}

@media (max-width:820px) {
    :root {
        --fa-ico: 16px;
        --fa-edge: 10px;
        --fa-w-min: 70px;
        --fa-w-max: 94px;
    }

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

    /* csak a mobil dokk marad */
    .fa2-dock {
        display: flex;
    }

    .fa2-fabTop {
        display: grid;
    }

    .fa2-top {
        display: none !important;
        /* ne legyen duplán Fel */
    }
}

/* mozgáscsökkentés */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}