/**
 * Sticky Navigation Widget Styles
 * استایل‌های ویجت منوی ناوبری چسبان
 */


/* استایل‌های کلی */

.woolements-sticky-nav-wrapper {
    position: relative;
    width: 100%;
}

.woolements-sticky-nav {
    display: flex;
    align-items: center;
    position: fixed;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* موقعیت‌های مختلف منو */

.woolements-sticky-nav.position-top {
    top: 0;
    left: 0;
    right: 0;
    flex-direction: row;
}

.woolements-sticky-nav.position-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: row;
}

.woolements-sticky-nav.position-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    flex-direction: column;
}

.woolements-sticky-nav.position-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    flex-direction: column;
}


/* استایل آیتم‌های منو */

.woolements-sticky-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: visible;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.woolements-sticky-nav-item .nav-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


/* موقعیت آیکون نسبت به متن */

.icon-position-top .nav-item-content {
    flex-direction: column;
}

.icon-position-bottom .nav-item-content {
    flex-direction: column-reverse;
}

.icon-position-left .nav-item-content {
    flex-direction: row-reverse;
}

.icon-position-right .nav-item-content {
    flex-direction: row;
}


/* Text position controls */

.text-position-top .nav-item-content {
    flex-direction: column;
}

.text-position-bottom .nav-item-content {
    flex-direction: column-reverse;
}

.text-position-left .nav-item-content {
    flex-direction: row-reverse;
}

.text-position-right .nav-item-content {
    flex-direction: row;
}


/* استایل آیکون */

.woolements-sticky-nav-item .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.woolements-sticky-nav-item .nav-icon svg {
    transition: inherit;
}


/* استایل متن */

.woolements-sticky-nav-item .nav-text {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}


/* استایل نشان (Badge) */

.woolements-sticky-nav-item .nav-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}


/* استایل تولتیپ */

.woolements-sticky-nav-item .nav-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0);
    background-color: #333333;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 999;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}


/* فلش تولتیپ */

.woolements-sticky-nav-item .nav-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333333;
}


/* نمایش تولتیپ در هاور */

.woolements-sticky-nav-item:hover .nav-tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}


/* تنظیم موقعیت تولتیپ برای منوی چپ و راست */

.position-left .woolements-sticky-nav-item .nav-tooltip,
.position-right .woolements-sticky-nav-item .nav-tooltip {
    bottom: auto;
    left: auto;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.position-left .woolements-sticky-nav-item .nav-tooltip {
    right: calc(100% + 10px);
}

.position-right .woolements-sticky-nav-item .nav-tooltip {
    left: calc(100% + 10px);
}

.position-left .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateY(-50%) scale(1);
}

.position-right .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateY(-50%) scale(1);
}


/* فلش تولتیپ برای منوی چپ */

.position-left .woolements-sticky-nav-item .nav-tooltip::after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #333333;
    border-top-color: transparent;
}


/* فلش تولتیپ برای منوی راست */

.position-right .woolements-sticky-nav-item .nav-tooltip::after {
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #333333;
    border-top-color: transparent;
}


/* تولتیپ برای منوی بالا */

.position-top .woolements-sticky-nav-item .nav-tooltip {
    bottom: auto;
    top: calc(100% + 10px);
}

.position-top .woolements-sticky-nav-item .nav-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #333333;
}


/* ===== جهت‌های مختلف نمایش تولتیپ ===== */


/* تولتیپ بالا (پیش‌فرض) */

.tooltip-position-top .woolements-sticky-nav-item .nav-tooltip {
    bottom: calc(100% + 10px);
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(0);
}

.tooltip-position-top .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateX(-50%) scale(1);
}

.tooltip-position-top .woolements-sticky-nav-item .nav-tooltip::after {
    top: 100%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333333;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}


/* تولتیپ پایین */

.tooltip-position-bottom .woolements-sticky-nav-item .nav-tooltip {
    top: calc(100% + 10px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(0);
}

.tooltip-position-bottom .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateX(-50%) scale(1);
}

.tooltip-position-bottom .woolements-sticky-nav-item .nav-tooltip::after {
    bottom: 100%;
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #333333;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}


/* تولتیپ چپ */

.tooltip-position-left .woolements-sticky-nav-item .nav-tooltip {
    right: calc(100% + 10px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) scale(0);
}

.tooltip-position-left .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateY(-50%) scale(1);
}

.tooltip-position-left .woolements-sticky-nav-item .nav-tooltip::after {
    left: 100%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #333333;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}


/* تولتیپ راست */

.tooltip-position-right .woolements-sticky-nav-item .nav-tooltip {
    left: calc(100% + 10px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) scale(0);
}

.tooltip-position-right .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateY(-50%) scale(1);
}

.tooltip-position-right .woolements-sticky-nav-item .nav-tooltip::after {
    right: 100%;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #333333;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}


/* تولتیپ بالا - چپ */

.tooltip-position-top-left .woolements-sticky-nav-item .nav-tooltip {
    bottom: calc(100% + 10px);
    top: auto;
    left: 0;
    right: auto;
    transform: translateX(0) scale(0);
}

.tooltip-position-top-left .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateX(0) scale(1);
}

.tooltip-position-top-left .woolements-sticky-nav-item .nav-tooltip::after {
    top: 100%;
    bottom: auto;
    left: 15px;
    right: auto;
    transform: translateX(0);
    border: 6px solid transparent;
    border-top-color: #333333;
    border-bottom-color: transparent;
}


/* تولتیپ بالا - راست */

.tooltip-position-top-right .woolements-sticky-nav-item .nav-tooltip {
    bottom: calc(100% + 10px);
    top: auto;
    right: 0;
    left: auto;
    transform: translateX(0) scale(0);
}

.tooltip-position-top-right .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateX(0) scale(1);
}

.tooltip-position-top-right .woolements-sticky-nav-item .nav-tooltip::after {
    top: 100%;
    bottom: auto;
    right: 15px;
    left: auto;
    transform: translateX(0);
    border: 6px solid transparent;
    border-top-color: #333333;
    border-bottom-color: transparent;
}


/* تولتیپ پایین - چپ */

.tooltip-position-bottom-left .woolements-sticky-nav-item .nav-tooltip {
    top: calc(100% + 10px);
    bottom: auto;
    left: 0;
    right: auto;
    transform: translateX(0) scale(0);
}

.tooltip-position-bottom-left .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateX(0) scale(1);
}

.tooltip-position-bottom-left .woolements-sticky-nav-item .nav-tooltip::after {
    bottom: 100%;
    top: auto;
    left: 15px;
    right: auto;
    transform: translateX(0);
    border: 6px solid transparent;
    border-bottom-color: #333333;
    border-top-color: transparent;
}


/* تولتیپ پایین - راست */

.tooltip-position-bottom-right .woolements-sticky-nav-item .nav-tooltip {
    top: calc(100% + 10px);
    bottom: auto;
    right: 0;
    left: auto;
    transform: translateX(0) scale(0);
}

.tooltip-position-bottom-right .woolements-sticky-nav-item:hover .nav-tooltip {
    transform: translateX(0) scale(1);
}

.tooltip-position-bottom-right .woolements-sticky-nav-item .nav-tooltip::after {
    bottom: 100%;
    top: auto;
    right: 15px;
    left: auto;
    transform: translateX(0);
    border: 6px solid transparent;
    border-bottom-color: #333333;
    border-top-color: transparent;
}


/* ===== انیمیشن‌های هاور ===== */


/* Bounce */

.woolements-sticky-nav-item.hover-bounce:hover {
    animation: bounceHover 0.6s ease;
}

@keyframes bounceHover {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}


/* Pulse */

.woolements-sticky-nav-item.hover-pulse:hover {
    animation: pulseHover 0.6s ease;
}

@keyframes pulseHover {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}


/* Shake */

.woolements-sticky-nav-item.hover-shake:hover {
    animation: shakeHover 0.5s ease;
}

@keyframes shakeHover {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}


/* Swing */

.woolements-sticky-nav-item.hover-swing:hover {
    animation: swingHover 0.6s ease;
}

@keyframes swingHover {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}


/* Tada */

.woolements-sticky-nav-item.hover-tada:hover {
    animation: tadaHover 0.8s ease;
}

@keyframes tadaHover {
    0%,
    100% {
        transform: scale(1) rotate(0);
    }
    10%,
    20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-3deg);
    }
}


/* Jello */

.woolements-sticky-nav-item.hover-jello:hover {
    animation: jelloHover 0.8s ease;
}

@keyframes jelloHover {
    0%,
    100% {
        transform: skewX(0deg) skewY(0deg);
    }
    30% {
        transform: skewX(25deg) skewY(25deg);
    }
    40% {
        transform: skewX(-15deg) skewY(-15deg);
    }
    50% {
        transform: skewX(15deg) skewY(15deg);
    }
    65% {
        transform: skewX(-5deg) skewY(-5deg);
    }
    75% {
        transform: skewX(5deg) skewY(5deg);
    }
}


/* Heartbeat */

.woolements-sticky-nav-item.hover-heartbeat:hover {
    animation: heartbeatHover 1s ease infinite;
}

@keyframes heartbeatHover {
    0%,
    50%,
    100% {
        transform: scale(1);
    }
    5%,
    15% {
        transform: scale(1.15);
    }
    10%,
    20% {
        transform: scale(1.05);
    }
}


/* Flip */

.woolements-sticky-nav-item.hover-flip:hover {
    animation: flipHover 0.6s ease;
}

@keyframes flipHover {
    0% {
        transform: perspective(400px) rotateY(0);
    }
    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}


/* Zoom */

.woolements-sticky-nav-item.hover-zoom:hover {
    transform: scale(1.2);
}


/* Float */

.woolements-sticky-nav-item.hover-float:hover {
    animation: floatHover 1.5s ease-in-out infinite;
}

@keyframes floatHover {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}


/* Glow */

.woolements-sticky-nav-item.hover-glow:hover {
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.6);
}


/* ===== انیمیشن‌های حالت فعال ===== */


/* Scale */

.woolements-sticky-nav-item.active.active-scale {
    transform: scale(1.15);
}


/* Scale Rotate */

.woolements-sticky-nav-item.active.active-scale-rotate {
    transform: scale(1.2) rotate(5deg);
}


/* Slide Up */

.woolements-sticky-nav-item.active.active-slide-up {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


/* Pop Out */

.woolements-sticky-nav-item.active.active-pop-out {
    animation: popOut 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: scale(1.15);
}

@keyframes popOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1.15);
    }
}


/* Morphing */

.woolements-sticky-nav-item.active.active-morphing {
    border-radius: 50%;
    padding: 15px;
}


/* Elastic */

.woolements-sticky-nav-item.active.active-elastic {
    animation: elastic 0.8s ease;
}

@keyframes elastic {
    0%,
    100% {
        transform: scaleX(1) scaleY(1);
    }
    25% {
        transform: scaleX(1.3) scaleY(0.7);
    }
    50% {
        transform: scaleX(0.8) scaleY(1.2);
    }
    75% {
        transform: scaleX(1.1) scaleY(0.9);
    }
}


/* Bounce In */

.woolements-sticky-nav-item.active.active-bounce-in {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1.1);
    }
}


/* Neon Glow */

.woolements-sticky-nav-item.active.active-neon-glow {
    animation: neonGlow 1.5s ease-in-out infinite;
}

@keyframes neonGlow {
    0%,
    100% {
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.5), 0 0 20px rgba(0, 123, 255, 0.3), inset 0 0 10px rgba(0, 123, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 123, 255, 0.8), 0 0 40px rgba(0, 123, 255, 0.5), inset 0 0 20px rgba(0, 123, 255, 0.4);
    }
}


/* ===== افکت‌های آیکون فعال ===== */


/* Scale Up */

.woolements-sticky-nav-item.active.icon-effect-scale-up .nav-icon {
    transform: scale(1.5);
}


/* Scale Down */

.woolements-sticky-nav-item.active.icon-effect-scale-down .nav-icon {
    transform: scale(0.8);
}


/* Rotate 360 */

.woolements-sticky-nav-item.active.icon-effect-rotate-360 .nav-icon {
    animation: rotate360 0.6s ease;
}

@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Rotate Y */

.woolements-sticky-nav-item.active.icon-effect-rotate-y .nav-icon {
    animation: rotateY 0.6s ease;
}

@keyframes rotateY {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}


/* Icon Change (Color) */

.woolements-sticky-nav-item.active.icon-effect-icon-change .nav-icon {
    filter: drop-shadow(0 0 8px currentColor);
}


/* Slide Bounce */

.woolements-sticky-nav-item.active.icon-effect-slide-bounce .nav-icon {
    animation: slideBounce 0.6s ease;
}

@keyframes slideBounce {
    0%,
    100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-15px);
    }
    50% {
        transform: translateY(-10px);
    }
    75% {
        transform: translateY(-5px);
    }
}


/* Double Size */

.woolements-sticky-nav-item.active.icon-effect-double-size .nav-icon {
    transform: scale(2);
}


/* Icon Pop */

.woolements-sticky-nav-item.active.icon-effect-icon-pop .nav-icon {
    animation: iconPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes iconPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.8);
    }
    100% {
        transform: scale(1.4);
    }
}


/* ===== انیمیشن‌های ورود منو ===== */


/* Fade In */

.woolements-sticky-nav.entrance-fade-in {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Slide Up */

.woolements-sticky-nav.entrance-slide-up {
    animation: slideUp 0.5s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}


/* Slide Down */

.woolements-sticky-nav.entrance-slide-down {
    animation: slideDown 0.5s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}


/* Slide Left */

.woolements-sticky-nav.entrance-slide-left {
    animation: slideLeft 0.5s ease;
}

@keyframes slideLeft {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}


/* Slide Right */

.woolements-sticky-nav.entrance-slide-right {
    animation: slideRight 0.5s ease;
}

@keyframes slideRight {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}


/* Zoom In */

.woolements-sticky-nav.entrance-zoom-in {
    animation: zoomIn 0.5s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* ===== رسپانسیو ===== */

@media (max-width: 768px) {
    .woolements-sticky-nav-item .nav-text {
        font-size: 10px;
    }
    .woolements-sticky-nav-item .nav-icon {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .woolements-sticky-nav {
        padding: 10px 5px;
    }
    .woolements-sticky-nav-item {
        padding: 8px 10px;
    }
}


/* RTL Support */

[dir="rtl"] .woolements-sticky-nav-item .nav-badge {
    right: auto;
    left: -5px;
}


/* پشتیبانی از حالت تاریک */

@media (prefers-color-scheme: dark) {
    .woolements-sticky-nav {
        background: rgba(30, 30, 30, 0.95);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    }
}


/* بهبود عملکرد انیمیشن‌ها */

.woolements-sticky-nav-item {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}


/* افکت‌های اضافی برای تجربه کاربری بهتر */

.woolements-sticky-nav-item:active {
    transform: scale(0.95);
}

.woolements-sticky-nav-item:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}


/* انیمیشن loading برای آیتم‌ها */

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.woolements-sticky-nav-item.loading {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}


/* ===== حالت‌های نمایش آیتم فعال ===== */


/* حالت نشان بالا (Badge Top) */

.active-style-badge-top .woolements-sticky-nav-item.active::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.6);
    animation: badgeTopPulse 2s infinite;
}

@keyframes badgeTopPulse {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 15px rgba(102, 126, 234, 0.6);
    }
    50% {
        transform: translateX(-50%) scale(1.3);
        box-shadow: 0 0 25px rgba(102, 126, 234, 0.8);
    }
}


/* حالت خط زیرین (Underline) */

.active-style-underline .woolements-sticky-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
    animation: underlineExpand 0.3s ease-out;
}

@keyframes underlineExpand {
    from {
        width: 0%;
    }
    to {
        width: 70%;
    }
}


/* حالت خط بالایی (Overline) */

.active-style-overline .woolements-sticky-nav-item.active::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
    animation: overlineExpand 0.3s ease-out;
}

@keyframes overlineExpand {
    from {
        width: 0%;
    }
    to {
        width: 70%;
    }
}


/* حالت حاشیه روشن (Outline) */

.active-style-outline .woolements-sticky-nav-item.active {
    border: 2px solid;
    border-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 1;
    box-shadow: inset 0 0 20px rgba(102, 126, 234, 0.2), 0 0 20px rgba(102, 126, 234, 0.3);
}


/* حالت پر شده (Filled) */

.active-style-filled .woolements-sticky-nav-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.active-style-filled .woolements-sticky-nav-item.active .nav-icon,
.active-style-filled .woolements-sticky-nav-item.active .nav-text {
    color: #ffffff !important;
}


/* حالت گرادیانت (Gradient) */

.active-style-gradient .woolements-sticky-nav-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    position: relative;
    overflow: hidden;
}

.active-style-gradient .woolements-sticky-nav-item.active::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    animation: gradientShine 2s infinite;
}

@keyframes gradientShine {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* حالت حاشیه درخشان (Glow Border) */

.active-style-glow-border .woolements-sticky-nav-item.active {
    border: 2px solid #667eea;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6), inset 0 0 20px rgba(102, 126, 234, 0.2);
    animation: glowPulse 2s infinite;
}

@keyframes glowPulse {
    0%,
    100% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.6), inset 0 0 20px rgba(102, 126, 234, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(102, 126, 234, 0.9), inset 0 0 30px rgba(102, 126, 234, 0.4);
    }
}


/* حالت حاشیه دوتایی (Split Border) */

.active-style-split-border .woolements-sticky-nav-item.active::before,
.active-style-split-border .woolements-sticky-nav-item.active::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
}

.active-style-split-border .woolements-sticky-nav-item.active::before {
    top: 0;
    left: 0;
    animation: splitBorderTop 0.3s ease-out;
}

.active-style-split-border .woolements-sticky-nav-item.active::after {
    bottom: 0;
    right: 0;
    animation: splitBorderBottom 0.3s ease-out;
}

@keyframes splitBorderTop {
    from {
        width: 0%;
    }
    to {
        width: 50%;
    }
}

@keyframes splitBorderBottom {
    from {
        width: 0%;
    }
    to {
        width: 50%;
    }
}


/* حالت نشانه گوشه (Corner Marks) */

.active-style-corner-marks .woolements-sticky-nav-item.active::before,
.active-style-corner-marks .woolements-sticky-nav-item.active::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #667eea;
}

.active-style-corner-marks .woolements-sticky-nav-item.active::before {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
    animation: cornerMarkTL 0.3s ease-out;
}

.active-style-corner-marks .woolements-sticky-nav-item.active::after {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
    animation: cornerMarkBR 0.3s ease-out;
}

@keyframes cornerMarkTL {
    from {
        width: 0;
        height: 0;
    }
    to {
        width: 15px;
        height: 15px;
    }
}

@keyframes cornerMarkBR {
    from {
        width: 0;
        height: 0;
    }
    to {
        width: 15px;
        height: 15px;
    }
}


/* حالت شناور (Floating) */

.active-style-floating .woolements-sticky-nav-item.active {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
    animation: floatingShadow 2s ease-in-out infinite;
}

@keyframes floatingShadow {
    0%,
    100% {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
    }
    50% {
        transform: translateY(-12px);
        box-shadow: 0 20px 45px rgba(102, 126, 234, 0.5);
    }
}


/* حالت فشرده (Pressed) */

.active-style-pressed .woolements-sticky-nav-item.active {
    transform: scale(0.9);
    box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
}


/* حالت روبان (Ribbon) */

.active-style-ribbon .woolements-sticky-nav-item.active {
    position: relative;
    overflow: visible;
}

.active-style-ribbon .woolements-sticky-nav-item.active::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: rotate(45deg);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.5);
}

.active-style-ribbon .woolements-sticky-nav-item.active::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 12px;
    color: white;
    z-index: 1;
    animation: ribbonCheck 0.5s ease-out;
}

@keyframes ribbonCheck {
    from {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}


/* حالت نورافکن (Spotlight) */

.active-style-spotlight .woolements-sticky-nav-item.active {
    background: radial-gradient(circle at center, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.1) 50%, transparent 70%);
    animation: spotlightPulse 2s infinite;
}

@keyframes spotlightPulse {
    0%,
    100% {
        background: radial-gradient(circle at center, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.1) 50%, transparent 70%);
    }
    50% {
        background: radial-gradient(circle at center, rgba(102, 126, 234, 0.5) 0%, rgba(118, 75, 162, 0.2) 50%, transparent 70%);
    }
}


/* حالت حلقه پالس (Pulse Ring) */

.active-style-pulse-ring .woolements-sticky-nav-item.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid #667eea;
    border-radius: inherit;
    animation: pulseRingExpand 1.5s infinite;
}

@keyframes pulseRingExpand {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 150%;
        height: 150%;
        opacity: 0;
    }
}


/* حالت گلیچ (Glitch) */

.active-style-glitch .woolements-sticky-nav-item.active {
    animation: glitchEffect 0.3s infinite;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.active-style-glitch .woolements-sticky-nav-item.active::before,
.active-style-glitch .woolements-sticky-nav-item.active::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
}

.active-style-glitch .woolements-sticky-nav-item.active::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.active-style-glitch .woolements-sticky-nav-item.active::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitchEffect {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes glitch-anim {
    0% {
        clip: rect(10px, 9999px, 31px, 0);
    }
    25% {
        clip: rect(70px, 9999px, 71px, 0);
    }
    50% {
        clip: rect(70px, 9999px, 25px, 0);
    }
    75% {
        clip: rect(56px, 9999px, 85px, 0);
    }
    100% {
        clip: rect(69px, 9999px, 67px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 119px, 0);
    }
    25% {
        clip: rect(52px, 9999px, 74px, 0);
    }
    50% {
        clip: rect(79px, 9999px, 85px, 0);
    }
    75% {
        clip: rect(75px, 9999px, 5px, 0);
    }
    100% {
        clip: rect(67px, 9999px, 61px, 0);
    }
}


/* تنظیمات رسپانسیو برای حالت‌های نمایش */

@media (max-width: 768px) {
    .active-style-badge-top .woolements-sticky-nav-item.active::before {
        width: 6px;
        height: 6px;
    }
    .active-style-corner-marks .woolements-sticky-nav-item.active::before,
    .active-style-corner-marks .woolements-sticky-nav-item.active::after {
        width: 10px;
        height: 10px;
    }
    .active-style-ribbon .woolements-sticky-nav-item.active::before {
        width: 20px;
        height: 20px;
    }
}