/* ====================================
   Navigation Menu Styles — pill-стиль (перенесён из v1)
   ==================================== */

/* Pill-контейнер вокруг 3 кнопок навигации */
header nav.tw-hidden.desktop\:tw-flex {
    background: #fff;
    border: 0.776px solid #E4ECF5;
    border-radius: 78px;
    padding: 5.4px 7px;
    gap: 3.9px !important;
}

/* Desktop Navigation Links — pill-кнопки */
.nav-link-desktop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7.8px 19.4px;
    border-radius: 39px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18.6px;
    color: #000;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.nav-link-desktop .nav-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

/* Active — на случай если используется class вместо inline style */
.nav-link-desktop.active {
    background: linear-gradient(135deg, #FFD93D, #F6C344);
    color: #1a1a1a;
}

/* Hover (только для неактивной — у активной inline-style "background:..." перебивает) */
.nav-link-desktop:not([style]):not(.active):hover {
    background: #f5f5f5;
}

.nav-link-desktop:hover .nav-icon {
    transform: scale(1.05);
}

/* Mobile Navigation Links */
.nav-link-mobile {
    font-size: 1.125rem;
    font-weight: 600;
    color: #14142b;
    text-decoration: none;
    display: block;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: center;
}

.nav-link-mobile:hover,
.nav-link-mobile:active {
    background: rgba(246, 195, 68, 0.12);
    color: #1a1a1a;
    font-weight: 700;
}

/* Hide desktop nav on mobile */
@media screen and (max-width: 1023px) {
    nav.tw-hidden.desktop\:tw-flex {
        display: none !important;
    }
}

/* Show desktop nav on desktop */
@media screen and (min-width: 1024px) {
    nav.tw-hidden.desktop\:tw-flex {
        display: flex !important;
    }
}