/**
 * Home V2 — FAB منوی شناور (الهام: codepen.io/nguyenanhtuan/pen/zYyGMPx)
 */

.hpb-floating-side-nav {
    --hpb-fab-ease: cubic-bezier(0.4, 2.08, 0.55, 1);
    --hpb-fab-brand: #2563eb;
    --hpb-fab-brand-dark: #0d48a2;
    --hpb-fab-accent: #812990;
    position: fixed;
    inset-block: 50% auto;
    left: max(12px, env(safe-area-inset-left, 0));
    right: auto;
    transform: translateY(-50%);
    z-index: 1025;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform-origin: center;
}

.hpb-fab-trigger {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 10px 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #1e293b;
    cursor: pointer;
    outline: none;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.12),
        0 8px 24px rgba(37, 99, 235, 0.18);
    transform: scale(0.72);
    transition: transform 0.35s var(--hpb-fab-ease), box-shadow 0.25s ease, background 0.25s ease;
}

.hpb-fab-trigger:hover {
    background: var(--hpb-fab-brand);
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.15),
        0 10px 28px rgba(37, 99, 235, 0.28);
}

.hpb-fab-trigger__icon,
.hpb-fab-trigger__icon::before,
.hpb-fab-trigger__icon::after {
    position: absolute;
    display: block;
    background: currentColor;
    border-radius: 10px;
    transition:
        background 0.2s ease,
        width 0.1s ease 0.1s,
        height 0.1s ease,
        transform 0.3s ease 0.2s,
        left 0.1s ease 0.1s,
        right 0.1s ease 0.1s;
}

.hpb-fab-trigger__icon {
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
}

.hpb-fab-trigger__icon::before,
.hpb-fab-trigger__icon::after {
    content: "";
    width: 6px;
    height: 6px;
}

.hpb-fab-trigger__icon::before {
    left: -11px;
    transform: translateX(-50%);
}

.hpb-fab-trigger__icon::after {
    right: -11px;
    transform: translateX(50%);
}

.hpb-floating-side-nav.is-expanded .hpb-fab-trigger {
    transform: scale(1);
}

.hpb-floating-side-nav.is-expanded .hpb-fab-trigger__icon {
    background: transparent;
}

.hpb-floating-side-nav.is-expanded .hpb-fab-trigger__icon,
.hpb-floating-side-nav.is-expanded .hpb-fab-trigger__icon::before,
.hpb-floating-side-nav.is-expanded .hpb-fab-trigger__icon::after {
    height: 3px;
}

.hpb-floating-side-nav.is-expanded .hpb-fab-trigger__icon::before,
.hpb-floating-side-nav.is-expanded .hpb-fab-trigger__icon::after {
    width: 18px;
    top: 50%;
    transform-origin: 50% 50%;
}

.hpb-floating-side-nav.is-expanded .hpb-fab-trigger__icon::before {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) rotate(45deg);
}

.hpb-floating-side-nav.is-expanded .hpb-fab-trigger__icon::after {
    right: 50%;
    left: auto;
    transform: translate(50%, -50%) rotate(-45deg);
}

.hpb-fab-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hpb-fab-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.hpb-fab-nav__item {
    margin: 8px 0;
}

.hpb-fab-nav__link {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    text-decoration: none;
    color: #1e293b;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.1),
        0 4px 14px rgba(15, 23, 42, 0.08);
    opacity: 0.0001;
    visibility: hidden;
    will-change: transform, opacity;
    transform: scale(0.78);
    transition:
        opacity 0.35s var(--hpb-fab-ease),
        transform 0.35s var(--hpb-fab-ease),
        visibility 0.35s var(--hpb-fab-ease),
        box-shadow 0.2s ease;
}

.hpb-fab-nav__link::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: #fff;
    transition: background 0.25s ease;
}

.hpb-fab-nav__link::after {
    content: "";
    width: 18px;
    height: 18px;
    mask: var(--hpb-fsn-icon) center / contain no-repeat;
    -webkit-mask: var(--hpb-fsn-icon) center / contain no-repeat;
    background: currentColor;
    transition: color 0.25s ease;
}

.hpb-fab-nav__link[data-icon="user"] { --hpb-fsn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.hpb-fab-nav__link[data-icon="cart"] { --hpb-fsn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); }
.hpb-fab-nav__link[data-icon="home"] { --hpb-fsn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V9.5z'/%3E%3C/svg%3E"); }
.hpb-fab-nav__link[data-icon="plans"] { --hpb-fsn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h10M7 12h6'/%3E%3C/svg%3E"); }
.hpb-fab-nav__link[data-icon="phone"] { --hpb-fsn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.hpb-fab-nav__link[data-icon="shop"] { --hpb-fsn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.hpb-fab-nav__link[data-icon="star"] { --hpb-fsn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E"); }
.hpb-fab-nav__link[data-icon="club"] { --hpb-fsn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }

.hpb-fab-nav__tooltip {
    position: absolute;
    left: calc(100% + 12px);
    right: auto;
    top: 50%;
    z-index: -2;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(0, -50%) scale(0.6);
    transform-origin: center left;
    transition: opacity 0.35s ease, transform 0.35s var(--hpb-fab-ease), visibility 0.35s ease;
}

[dir="rtl"] .hpb-fab-nav__tooltip {
    transform-origin: center right;
}

.hpb-fab-nav--top .hpb-fab-nav__link {
    transform: scale(0.78) translateY(12px);
}

.hpb-fab-nav--bottom .hpb-fab-nav__link {
    transform: scale(0.78) translateY(-12px);
}

.hpb-floating-side-nav.is-expanded .hpb-fab-nav__link {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

.hpb-floating-side-nav.is-expanded .hpb-fab-nav--top .hpb-fab-nav__item:nth-child(1) .hpb-fab-nav__link { transition-delay: 0.28s; }
.hpb-floating-side-nav.is-expanded .hpb-fab-nav--top .hpb-fab-nav__item:nth-child(2) .hpb-fab-nav__link { transition-delay: 0.21s; }
.hpb-floating-side-nav.is-expanded .hpb-fab-nav--top .hpb-fab-nav__item:nth-child(3) .hpb-fab-nav__link { transition-delay: 0.14s; }
.hpb-floating-side-nav.is-expanded .hpb-fab-nav--top .hpb-fab-nav__item:nth-child(4) .hpb-fab-nav__link { transition-delay: 0.07s; }
.hpb-floating-side-nav.is-expanded .hpb-fab-nav--bottom .hpb-fab-nav__item:nth-child(1) .hpb-fab-nav__link { transition-delay: 0.07s; }
.hpb-floating-side-nav.is-expanded .hpb-fab-nav--bottom .hpb-fab-nav__item:nth-child(2) .hpb-fab-nav__link { transition-delay: 0.14s; }
.hpb-floating-side-nav.is-expanded .hpb-fab-nav--bottom .hpb-fab-nav__item:nth-child(3) .hpb-fab-nav__link { transition-delay: 0.21s; }
.hpb-floating-side-nav.is-expanded .hpb-fab-nav--bottom .hpb-fab-nav__item:nth-child(4) .hpb-fab-nav__link { transition-delay: 0.28s; }

.hpb-fab-nav__link:hover,
.hpb-fab-nav__link:focus-visible {
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28);
}

.hpb-fab-nav__link:hover::before,
.hpb-fab-nav__link:focus-visible::before {
    background: var(--hpb-fab-brand);
}

.hpb-fab-nav__link:hover .hpb-fab-nav__tooltip,
.hpb-fab-nav__link:focus-visible .hpb-fab-nav__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%) scale(1);
}

.hpb-fab-nav__link[aria-current="page"]::before {
    background: var(--hpb-fab-accent);
}

.hpb-fab-nav__link[aria-current="page"] {
    color: #fff;
}

@media (min-width: 992px) {
    .hpb-floating-side-nav {
        display: flex;
    }
}

@media (max-width: 991.98px) {
    .hpb-floating-side-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hpb-fab-trigger,
    .hpb-fab-nav__link,
    .hpb-fab-trigger__icon,
    .hpb-fab-trigger__icon::before,
    .hpb-fab-trigger__icon::after,
    .hpb-fab-nav__tooltip {
        transition: none !important;
        transition-delay: 0s !important;
    }
}