/**
 * Horizontal Floating Menu — frontend
 */

.hpb-floating-nav {
    --hpb-fnav-size: 56px;
    --hpb-fnav-gap: 0;
    --hpb-fnav-radius: 0;
    --hpb-fnav-bg: #a4de02;
    --hpb-fnav-bg-hover: #8bc34a;
    --hpb-fnav-icon: #ffffff;
    --hpb-fnav-toggle-bg: var(--hpb-fnav-bg);
    --hpb-fnav-toggle-bg-hover: var(--hpb-fnav-bg-hover);
    --hpb-fnav-toggle-icon: var(--hpb-fnav-icon);
    --hpb-fnav-label-bg: #000000;
    --hpb-fnav-label-color: #ffffff;
    --hpb-fnav-offset-x: 15px;
    --hpb-fnav-offset-y: 24px;
    --hpb-fnav-step: calc(var(--hpb-fnav-size) + var(--hpb-fnav-gap));
    display: block;
    visibility: visible;
    position: fixed;
    z-index: 10250;
    pointer-events: none;
}

.hpb-floating-nav__inner {
    position: relative;
    pointer-events: auto;
    overflow: visible;
}

/* placement */
.hpb-floating-nav--pos_bottom_right {
    right: var(--hpb-fnav-offset-x);
    bottom: calc(var(--hpb-fnav-offset-y) + env(safe-area-inset-bottom, 0));
}

.hpb-floating-nav--pos_bottom_left {
    left: var(--hpb-fnav-offset-x);
    bottom: calc(var(--hpb-fnav-offset-y) + env(safe-area-inset-bottom, 0));
}

.hpb-floating-nav--pos_bottom_center {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--hpb-fnav-offset-y) + env(safe-area-inset-bottom, 0));
}

.hpb-floating-nav--pos_top_right {
    right: var(--hpb-fnav-offset-x);
    top: calc(var(--hpb-fnav-offset-y) + env(safe-area-inset-top, 0));
}

.hpb-floating-nav--pos_top_left {
    left: var(--hpb-fnav-offset-x);
    top: calc(var(--hpb-fnav-offset-y) + env(safe-area-inset-top, 0));
}

.hpb-floating-nav--pos_top_center {
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--hpb-fnav-offset-y) + env(safe-area-inset-top, 0));
}

/* toggle FAB */
.hpb-floating-nav__toggle {
    width: var(--hpb-fnav-size);
    height: var(--hpb-fnav-size);
    border: 0;
    border-radius: var(--hpb-fnav-radius);
    background: var(--hpb-fnav-toggle-bg);
    color: var(--hpb-fnav-toggle-icon);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease, transform 0.2s ease, border-radius 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.hpb-floating-nav__toggle:hover,
.hpb-floating-nav__toggle:focus-visible {
    background: var(--hpb-fnav-toggle-bg-hover);
    outline: none;
}

.hpb-floating-nav__toggle-title {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: var(--hpb-fnav-toggle-bg);
    max-width: calc(var(--hpb-fnav-size) + 24px);
    line-height: 1.3;
}

/* hamburger → X */
.hpb-floating-nav__hamburger {
    width: 22px;
    height: 16px;
    position: relative;
    display: block;
}

.hpb-floating-nav__hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--hpb-fnav-toggle-icon);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.hpb-floating-nav__hamburger span:nth-child(1) { top: 0; }
.hpb-floating-nav__hamburger span:nth-child(2) { top: 7px; }
.hpb-floating-nav__hamburger span:nth-child(3) { top: 14px; }

.hpb-floating-nav__toggle.is-open .hpb-floating-nav__hamburger span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.hpb-floating-nav__toggle.is-open .hpb-floating-nav__hamburger span:nth-child(2) {
    opacity: 0;
}

.hpb-floating-nav__toggle.is-open .hpb-floating-nav__hamburger span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

/* nav items container */
.hpb-floating-nav__nav {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
}

.hpb-floating-nav__item {
    position: absolute;
    width: var(--hpb-fnav-size);
    height: var(--hpb-fnav-size);
    border-radius: var(--hpb-fnav-radius);
    background: var(--hpb-fnav-item-bg, var(--hpb-fnav-bg));
    color: var(--hpb-fnav-item-icon, var(--hpb-fnav-icon));
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    box-shadow: none;
    transition: visibility 0.2s, opacity 0.2s, right 0.3s ease, left 0.3s ease, bottom 0.3s ease, top 0.3s ease, background 0.2s;
}

.hpb-floating-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    pointer-events: none;
}

.hpb-floating-nav__icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
}

.hpb-floating-nav__item:hover,
.hpb-floating-nav__item:focus-visible {
    background: var(--hpb-fnav-item-bg-hover, var(--hpb-fnav-bg-hover));
    outline: none;
}

.hpb-floating-nav__icon :is(.fa-light, .fal),
.hpb-floating-nav__icon :is(.fa-light, .fal)::before {
    font-weight: 300 !important;
    color: inherit;
}

/* label tooltip */
.hpb-floating-nav__label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--hpb-fnav-label-bg);
    color: var(--hpb-fnav-label-color);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.hpb-floating-nav__item:hover .hpb-floating-nav__label,
.hpb-floating-nav__item:focus-visible .hpb-floating-nav__label {
    opacity: 1;
    visibility: visible;
}

/* expand horizontal-left (from anchor toward left) */
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__item {
    right: 0;
    bottom: 0;
}

.hpb-floating-nav--expand_horizontal_left.hpb-floating-nav--open .hpb-floating-nav__item,
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__nav.is-open .hpb-floating-nav__item {
    visibility: visible;
    opacity: 1;
}

.hpb-floating-nav--expand_horizontal_left.hpb-floating-nav--open .hpb-floating-nav__item--1,
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--1 { right: calc(var(--hpb-fnav-step) * 1); transition-duration: 0.15s; }
.hpb-floating-nav--expand_horizontal_left.hpb-floating-nav--open .hpb-floating-nav__item--2,
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--2 { right: calc(var(--hpb-fnav-step) * 2); transition-duration: 0.25s; }
.hpb-floating-nav--expand_horizontal_left.hpb-floating-nav--open .hpb-floating-nav__item--3,
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--3 { right: calc(var(--hpb-fnav-step) * 3); transition-duration: 0.35s; }
.hpb-floating-nav--expand_horizontal_left.hpb-floating-nav--open .hpb-floating-nav__item--4,
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--4 { right: calc(var(--hpb-fnav-step) * 4); transition-duration: 0.45s; }
.hpb-floating-nav--expand_horizontal_left.hpb-floating-nav--open .hpb-floating-nav__item--5,
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--5 { right: calc(var(--hpb-fnav-step) * 5); transition-duration: 0.55s; }
.hpb-floating-nav--expand_horizontal_left.hpb-floating-nav--open .hpb-floating-nav__item--6,
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--6 { right: calc(var(--hpb-fnav-step) * 6); transition-duration: 0.65s; }
.hpb-floating-nav--expand_horizontal_left.hpb-floating-nav--open .hpb-floating-nav__item--7,
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--7 { right: calc(var(--hpb-fnav-step) * 7); transition-duration: 0.75s; }
.hpb-floating-nav--expand_horizontal_left.hpb-floating-nav--open .hpb-floating-nav__item--8,
.hpb-floating-nav--expand_horizontal_left .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--8 { right: calc(var(--hpb-fnav-step) * 8); transition-duration: 0.85s; }

/* expand horizontal-right */
.hpb-floating-nav--expand_horizontal_right .hpb-floating-nav__item {
    left: 0;
    bottom: 0;
}

.hpb-floating-nav--expand_horizontal_right.hpb-floating-nav--open .hpb-floating-nav__item,
.hpb-floating-nav--expand_horizontal_right .hpb-floating-nav__nav.is-open .hpb-floating-nav__item {
    visibility: visible;
    opacity: 1;
}

.hpb-floating-nav--expand_horizontal_right.hpb-floating-nav--open .hpb-floating-nav__item--1,
.hpb-floating-nav--expand_horizontal_right .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--1 { left: calc(var(--hpb-fnav-step) * 1); transition-duration: 0.15s; }
.hpb-floating-nav--expand_horizontal_right.hpb-floating-nav--open .hpb-floating-nav__item--2,
.hpb-floating-nav--expand_horizontal_right .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--2 { left: calc(var(--hpb-fnav-step) * 2); transition-duration: 0.25s; }
.hpb-floating-nav--expand_horizontal_right.hpb-floating-nav--open .hpb-floating-nav__item--3,
.hpb-floating-nav--expand_horizontal_right .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--3 { left: calc(var(--hpb-fnav-step) * 3); transition-duration: 0.35s; }
.hpb-floating-nav--expand_horizontal_right.hpb-floating-nav--open .hpb-floating-nav__item--4,
.hpb-floating-nav--expand_horizontal_right .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--4 { left: calc(var(--hpb-fnav-step) * 4); transition-duration: 0.45s; }
.hpb-floating-nav--expand_horizontal_right.hpb-floating-nav--open .hpb-floating-nav__item--5,
.hpb-floating-nav--expand_horizontal_right .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--5 { left: calc(var(--hpb-fnav-step) * 5); transition-duration: 0.55s; }
.hpb-floating-nav--expand_horizontal_right.hpb-floating-nav--open .hpb-floating-nav__item--6,
.hpb-floating-nav--expand_horizontal_right .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--6 { left: calc(var(--hpb-fnav-step) * 6); transition-duration: 0.65s; }

/* expand vertical-up */
.hpb-floating-nav--expand_vertical_up .hpb-floating-nav__item {
    right: 0;
    bottom: 0;
}

.hpb-floating-nav--expand_vertical_up.hpb-floating-nav--open .hpb-floating-nav__item,
.hpb-floating-nav--expand_vertical_up .hpb-floating-nav__nav.is-open .hpb-floating-nav__item {
    visibility: visible;
    opacity: 1;
}

.hpb-floating-nav--expand_vertical_up.hpb-floating-nav--open .hpb-floating-nav__item--1,
.hpb-floating-nav--expand_vertical_up .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--1 { bottom: calc(var(--hpb-fnav-step) * 1); transition-duration: 0.15s; }
.hpb-floating-nav--expand_vertical_up.hpb-floating-nav--open .hpb-floating-nav__item--2,
.hpb-floating-nav--expand_vertical_up .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--2 { bottom: calc(var(--hpb-fnav-step) * 2); transition-duration: 0.25s; }
.hpb-floating-nav--expand_vertical_up.hpb-floating-nav--open .hpb-floating-nav__item--3,
.hpb-floating-nav--expand_vertical_up .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--3 { bottom: calc(var(--hpb-fnav-step) * 3); transition-duration: 0.35s; }
.hpb-floating-nav--expand_vertical_up.hpb-floating-nav--open .hpb-floating-nav__item--4,
.hpb-floating-nav--expand_vertical_up .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--4 { bottom: calc(var(--hpb-fnav-step) * 4); transition-duration: 0.45s; }
.hpb-floating-nav--expand_vertical_up.hpb-floating-nav--open .hpb-floating-nav__item--5,
.hpb-floating-nav--expand_vertical_up .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--5 { bottom: calc(var(--hpb-fnav-step) * 5); transition-duration: 0.55s; }
.hpb-floating-nav--expand_vertical_up.hpb-floating-nav--open .hpb-floating-nav__item--6,
.hpb-floating-nav--expand_vertical_up .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--6 { bottom: calc(var(--hpb-fnav-step) * 6); transition-duration: 0.65s; }

/* expand vertical-down */
.hpb-floating-nav--expand_vertical_down .hpb-floating-nav__item {
    right: 0;
    top: 0;
}

.hpb-floating-nav--expand_vertical_down.hpb-floating-nav--open .hpb-floating-nav__item,
.hpb-floating-nav--expand_vertical_down .hpb-floating-nav__nav.is-open .hpb-floating-nav__item {
    visibility: visible;
    opacity: 1;
}

.hpb-floating-nav--expand_vertical_down.hpb-floating-nav--open .hpb-floating-nav__item--1,
.hpb-floating-nav--expand_vertical_down .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--1 { top: calc(var(--hpb-fnav-step) * 1); transition-duration: 0.15s; }
.hpb-floating-nav--expand_vertical_down.hpb-floating-nav--open .hpb-floating-nav__item--2,
.hpb-floating-nav--expand_vertical_down .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--2 { top: calc(var(--hpb-fnav-step) * 2); transition-duration: 0.25s; }
.hpb-floating-nav--expand_vertical_down.hpb-floating-nav--open .hpb-floating-nav__item--3,
.hpb-floating-nav--expand_vertical_down .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--3 { top: calc(var(--hpb-fnav-step) * 3); transition-duration: 0.35s; }
.hpb-floating-nav--expand_vertical_down.hpb-floating-nav--open .hpb-floating-nav__item--4,
.hpb-floating-nav--expand_vertical_down .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--4 { top: calc(var(--hpb-fnav-step) * 4); transition-duration: 0.45s; }
.hpb-floating-nav--expand_vertical_down.hpb-floating-nav--open .hpb-floating-nav__item--5,
.hpb-floating-nav--expand_vertical_down .hpb-floating-nav__nav.is-open .hpb-floating-nav__item--5 { top: calc(var(--hpb-fnav-step) * 5); transition-duration: 0.55s; }

/* mobile-only global setting */
@media (min-width: 992px) {
    body.hpb-floating-nav-mobile-only .hpb-floating-nav {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .hpb-floating-nav__label {
        font-size: 11px;
    }
}

/* ── Square bar (چسبیده، مثل mockup) ── */
.hpb-floating-nav--shape_square {
    --hpb-fnav-radius: 0;
    --hpb-fnav-gap: 0;
    --hpb-fnav-step: var(--hpb-fnav-size);
}

.hpb-floating-nav--shape_square .hpb-floating-nav__toggle,
.hpb-floating-nav--shape_square .hpb-floating-nav__item {
    border-radius: 0;
}

.hpb-floating-nav--shape_square.hpb-floating-nav--open .hpb-floating-nav__inner {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.hpb-floating-nav--shape_square.hpb-floating-nav--open .hpb-floating-nav__toggle {
    background: var(--hpb-fnav-toggle-bg-hover);
    box-shadow: none;
}

.hpb-floating-nav--shape_square.hpb-floating-nav--open .hpb-floating-nav__item {
    box-shadow: none;
}

.hpb-floating-nav--shape_square:not(.hpb-floating-nav--open) .hpb-floating-nav__toggle {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* ── Circle (FAB جدا با فاصله) ── */
.hpb-floating-nav--shape_circle {
    --hpb-fnav-radius: 50%;
}

.hpb-floating-nav--shape_circle .hpb-floating-nav__item {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}