/**
 * Floating Navigation — Premium SaaS Dock (Responsive v2.2)
 *
 * @package Bargtunes
 */

/* ========================================
   SHARED DOCK CLEARANCE (page content)
======================================== */

:root {
    --fn-dock-clearance: calc(72px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 720px) {
    :root {
        --fn-dock-clearance: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 540px) {
    :root {
        /* Dual-layer dock is taller on small phones */
        --fn-dock-clearance: calc(132px + env(safe-area-inset-bottom, 0px));
    }
}

/* ========================================
   TOKENS
======================================== */

.fn-dock {
    --fn-accent-a: #4f6bff;
    --fn-accent-b: #6d5dfe;
    --fn-accent-glow: rgba(79, 107, 255, 0.38);
    --fn-surface: rgba(10, 10, 14, 0.78);
    --fn-border: rgba(255, 255, 255, 0.08);
    --fn-text: #ffffff;
    --fn-muted: rgba(255, 255, 255, 0.5);
    --fn-item-size: 38px;
    --fn-bar-height: 54px;
    --fn-bar-radius: 9999px;
    --fn-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fn-inset-x: clamp(16px, 4vw, 32px);
    --fn-inset-bottom: max(clamp(12px, 2vw, 22px), env(safe-area-inset-bottom, 0px));
    --fn-max-width: 640px;
}

/* ========================================
   WRAPPER
======================================== */

.fn-dock {
    position: fixed;
    bottom: var(--fn-inset-bottom);
    left: 50%;
    z-index: 9998;
    width: fit-content;
    max-width: min(var(--fn-max-width), calc(100vw - var(--fn-inset-x) * 2));
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    animation: fnDockEnter 0.75s var(--fn-ease) 0.2s forwards;
    padding-inline: 0;
    box-sizing: border-box;
}

.fn-dock.is-hidden .fn-dock__bar {
    transform: translateY(calc(100% + 56px)) scale(0.96);
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   PILL BAR
======================================== */

.fn-dock__bar {
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--fn-bar-radius);
    pointer-events: all;
    background: var(--fn-surface);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    border: 1px solid var(--fn-border);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.38),
        0 0 0 0.5px rgba(255, 255, 255, 0.04) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition:
        transform 0.5s var(--fn-ease),
        opacity 0.5s var(--fn-ease),
        box-shadow 0.35s ease,
        border-radius 0.4s var(--fn-ease);
}

.fn-dock__bar:hover {
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.42),
        0 0 0 0.5px rgba(255, 255, 255, 0.06) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.fn-dock__glow {
    position: absolute;
    inset: -50% -25%;
    background:
        radial-gradient(ellipse 45% 70% at 25% 100%, rgba(79, 107, 255, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 35% 60% at 80% 100%, rgba(109, 93, 254, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.7;
}

.fn-dock__progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    transform-origin: left center;
    transform: scaleX(var(--fn-scroll, 0));
    background: linear-gradient(90deg, var(--fn-accent-a), var(--fn-accent-b));
    opacity: 0.85;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.12s linear;
}

.fn-dock__row--main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.8vw, 16px);
    width: fit-content;
    min-height: var(--fn-bar-height);
    padding: 4px clamp(10px, 1.6vw, 14px);
}

/* ========================================
   NAV
======================================== */

.fn-dock__nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1vw, 8px);
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 2px;
}

.fn-dock__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: var(--fn-item-size);
    min-width: var(--fn-item-size);
    height: calc(var(--fn-bar-height) - 8px);
    padding-bottom: 1px;
    color: var(--fn-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.25s ease, transform 0.25s var(--fn-ease);
}

.fn-dock__item::after {
    content: '';
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fn-accent-a), var(--fn-accent-b));
    opacity: 0;
    transform: scaleX(0.35);
    transition:
        opacity 0.3s var(--fn-ease),
        transform 0.3s var(--fn-ease),
        box-shadow 0.3s var(--fn-ease);
}

.fn-dock__item-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--fn-text);
    background: rgba(18, 18, 22, 0.92);
    border: 1px solid var(--fn-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s var(--fn-ease), visibility 0.2s;
}

.fn-dock__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.25s var(--fn-ease);
}

.fn-dock__item:hover {
    color: rgba(255, 255, 255, 0.92);
    transform: translateY(-2px);
}

.fn-dock__item:hover::after {
    opacity: 0.8;
    transform: scaleX(1);
    box-shadow: 0 0 12px rgba(79, 107, 255, 0.4);
}

.fn-dock__item.is-active {
    color: var(--fn-text);
}

.fn-dock__item.is-active::after {
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 16px var(--fn-accent-glow);
}

.fn-dock__item.is-active .fn-dock__icon {
    transform: scale(1.06);
}

/* ========================================
   ACTIONS (lang + CTA)
======================================== */

.fn-dock__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(8px, 1.5vw, 12px);
    flex-shrink: 0;
    min-width: 0;
    padding-inline: clamp(4px, 1vw, 8px);
}

.fn-dock__lang {
    position: relative;
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    margin-inline-end: 0;
}

.fn-dock__lang-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.32s var(--fn-ease);
    pointer-events: none;
}

.fn-dock__lang-slider[data-lang="fa"] {
    transform: translateX(100%);
}

.fn-dock__lang-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 30px;
    padding: 5px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--fn-muted);
    text-decoration: none;
    border-radius: 9999px;
    transition: color 0.25s ease;
}

.fn-dock__lang-btn.is-active {
    color: var(--fn-text);
}

.fn-dock__lang-btn:not(.is-active):hover {
    color: rgba(255, 255, 255, 0.8);
}

.fn-dock__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-height: 36px;
    padding: 0 clamp(14px, 2.5vw, 20px);
    border-radius: 9999px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fn-text);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--fn-accent-a), var(--fn-accent-b));
    box-shadow:
        0 0 20px var(--fn-accent-glow),
        0 2px 12px rgba(0, 0, 0, 0.24);
    transition: transform 0.25s var(--fn-ease), box-shadow 0.25s ease;
}

body.lang-persian .fn-dock__cta,
body.rtl .fn-dock__cta {
    font-family: ModamWeb, 'Poppins', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
}

.fn-dock__cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 0 42px var(--fn-accent-glow),
        0 8px 28px rgba(0, 0, 0, 0.32);
}

.fn-dock__cta-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--fn-ease);
}

.fn-dock__cta:hover .fn-dock__cta-arrow {
    transform: translate(2px, -2px);
}

/* ========================================
   RTL
======================================== */

body.rtl .fn-dock__row--main {
    flex-direction: row-reverse;
}

body.rtl .fn-dock__nav {
    flex-direction: row-reverse;
}

body.rtl .fn-dock__lang-slider {
    left: auto;
    right: 3px;
}

body.rtl .fn-dock__lang-slider[data-lang="fa"] {
    transform: translateX(-100%);
}

body.rtl .fn-dock__cta:hover .fn-dock__cta-arrow {
    transform: translate(-2px, -2px);
}

body.rtl .fn-dock__progress {
    transform-origin: right center;
}

/* ========================================
   RESPONSIVE — Advanced
======================================== */

/* Large desktop */
@media (min-width: 1200px) {
    .fn-dock {
        --fn-max-width: 600px;
    }

    @media (hover: hover) and (pointer: fine) {
        .fn-dock__item:hover .fn-dock__item-label {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
    }
}

/* Laptop compact */
@media (max-width: 1024px) {
    .fn-dock {
        --fn-item-size: 36px;
        --fn-bar-height: 52px;
    }

    .fn-dock__item-label {
        display: none;
    }
}

/* Tablet */
@media (max-width: 860px) {
    .fn-dock {
        max-width: calc(100vw - var(--fn-inset-x) * 2);
    }

    .fn-dock__row--main {
        gap: 10px;
    }

    .fn-dock__cta {
        padding: 0 16px;
        font-size: 11px;
    }

    .fn-dock__lang-btn {
        min-width: 36px;
        padding: 6px 10px;
    }
}

/* Tablet portrait — full width island */
@media (max-width: 720px) {
    .fn-dock {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        transform: none;
        padding-inline: clamp(12px, 3.5vw, 20px);
        --fn-inset-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    .fn-dock__bar {
        width: 100%;
        border-radius: clamp(22px, 5vw, 28px);
    }

    .fn-dock__row--main {
        width: 100%;
        justify-content: space-between;
        padding: 4px 6px;
        gap: 6px;
    }

    .fn-dock__nav {
        flex: 1 1 auto;
        justify-content: center;
    }

    .fn-dock {
        --fn-item-size: 36px;
        --fn-bar-height: 50px;
    }

    .fn-dock__item {
        gap: 3px;
        height: 44px;
    }

    .fn-dock__nav {
        gap: 2px;
    }

    .fn-dock__item::after {
        width: 14px;
        height: 2px;
    }

    .fn-dock__cta-text {
        display: none;
    }

    .fn-dock__cta {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
    }

    .fn-dock__actions {
        gap: clamp(10px, 2vw, 14px);
        min-width: 0;
        max-width: none;
        flex: 1 1 auto;
        justify-content: space-between;
        padding-inline: 6px;
    }
}

/* Mobile — dual-layer creative layout */
@media (max-width: 540px) {
    .fn-dock {
        --fn-bar-height: auto;
        --fn-item-size: 38px;
    }

    .fn-dock__bar {
        border-radius: 24px;
        padding-bottom: 6px;
    }

    .fn-dock__row--main {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0;
        padding: 8px 8px 0;
        min-height: auto;
    }

    .fn-dock__nav {
        order: 1;
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 0;
        padding: 4px 4px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .fn-dock__item {
        width: auto;
        flex: 1;
        min-width: 0;
        max-width: 72px;
        height: 48px;
        gap: 5px;
        padding-bottom: 0;
    }

    .fn-dock__item::after {
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%) scaleX(0.35);
    }

    .fn-dock__item:hover::after,
    .fn-dock__item.is-active::after {
        transform: translateX(-50%) scaleX(1);
    }

    .fn-dock__item-label {
        display: block;
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        font-size: 9px;
        font-weight: 600;
        color: inherit;
        opacity: 0.65;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.lang-persian .fn-dock__item-label,
    body.rtl .fn-dock__item-label {
        font-family: ModamWeb, 'Poppins', sans-serif;
        font-size: 8px;
    }

    .fn-dock__item.is-active .fn-dock__item-label {
        opacity: 1;
        color: var(--fn-text);
    }

    .fn-dock__icon {
        width: 18px;
        height: 18px;
    }

    .fn-dock__actions {
        order: 2;
        flex: 1 1 100%;
        justify-content: space-between;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 8px 8px 10px;
        margin-inline-start: 0;
        gap: clamp(12px, 3vw, 20px);
    }

    .fn-dock__lang {
        flex: 0 0 auto;
        max-width: none;
        justify-content: center;
    }

    .fn-dock__lang-btn {
        flex: 1;
        min-width: 0;
    }

    .fn-dock__cta {
        width: auto;
        min-width: 36px;
        min-height: 36px;
        height: 36px;
        padding: 0 12px;
    }

    .fn-dock__cta-text {
        display: inline;
        font-size: 11px;
    }

    body.lang-persian .fn-dock__cta,
    body.rtl .fn-dock__cta {
        font-size: 12px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .fn-dock {
        padding-inline: 10px;
        --fn-item-size: 34px;
    }

    .fn-dock__bar {
        border-radius: 20px;
    }

    .fn-dock__row--main {
        padding: 6px 6px 0;
    }

    .fn-dock__item {
        height: 44px;
        max-width: 64px;
    }

    .fn-dock__item-label {
        font-size: 8px;
    }

    .fn-dock__lang-btn {
        font-size: 10px;
        padding: 6px 10px;
        min-height: 32px;
    }

    .fn-dock__actions {
        gap: 12px;
        padding-inline: 8px;
        justify-content: space-between;
    }

    .fn-dock__cta {
        height: 34px;
        min-height: 34px;
        min-width: 34px;
        padding: 0 10px;
    }

    .fn-dock__cta-text {
        font-size: 10px;
    }
}

/* Ultra-narrow */
@media (max-width: 340px) {
    .fn-dock__item-label {
        display: none;
    }

    .fn-dock__item {
        height: 40px;
        max-width: none;
    }

    .fn-dock__nav {
        padding-bottom: 6px;
    }

    .fn-dock__cta-text {
        display: none;
    }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
    .fn-dock {
        --fn-inset-bottom: max(8px, env(safe-area-inset-bottom, 0px));
        --fn-bar-height: 46px;
        --fn-item-size: 34px;
    }

    .fn-dock__bar {
        border-radius: 18px;
        padding-bottom: 0;
    }

    .fn-dock__row--main {
        flex-wrap: nowrap;
        padding: 6px 10px;
        min-height: var(--fn-bar-height);
    }

    .fn-dock__nav {
        flex: 1;
        border-bottom: none;
        padding: 0 4px;
        order: unset;
    }

    .fn-dock__item {
        flex: 0 0 var(--fn-item-size);
        height: calc(var(--fn-bar-height) - 12px);
        max-width: none;
    }

    .fn-dock__item-label {
        display: none;
    }

    .fn-dock__actions {
        order: unset;
        padding: 0 4px;
        flex: 0 0 auto;
        min-width: 0;
        max-width: none;
        justify-content: flex-end;
    }
}

/* Touch */
@media (hover: none) and (pointer: coarse) {
    .fn-dock__item:hover {
        transform: none;
    }

    .fn-dock__item:active {
        transform: scale(0.94);
    }

    .fn-dock__cta:hover {
        transform: none;
    }

    .fn-dock__cta:active {
        transform: scale(0.97);
    }
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes fnDockEnter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 720px) {
    @keyframes fnDockEnter {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .fn-dock,
    .fn-dock__bar,
    .fn-dock__item,
    .fn-dock__lang-slider,
    .fn-dock__cta,
    .fn-dock__progress {
        animation: none !important;
        transition: none !important;
    }

    .fn-dock {
        opacity: 1;
    }

    .fn-dock.is-hidden .fn-dock__bar {
        transform: none;
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
    .fn-dock {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 721px) {
    .fn-dock {
        transform: translateX(-50%);
    }
}