/* ==========================================================================
   INAIVOM - Navbar
   File: app/static/css/navbar.css
   Premium Matrimony Platform
   Theme: Maroon #800020 | Gold #D4AF37 | White
   ========================================================================== */


/* ==========================================================================
   1. NAVBAR VARIABLES
   ========================================================================== */

:root {
    --navbar-maroon: #800020;
    --navbar-maroon-dark: #650019;
    --navbar-maroon-deep: #4f0014;
    --navbar-maroon-light: #9b1738;

    --navbar-gold: #d4af37;
    --navbar-gold-dark: #aa881f;
    --navbar-gold-light: #ead77f;

    --navbar-white: #ffffff;
    --navbar-bg: #ffffff;
    --navbar-bg-soft: #fdfafb;

    --navbar-text: #30292d;
    --navbar-muted: #776e73;
    --navbar-border: #ece5e8;

    --navbar-danger: #dc3545;
    --navbar-success: #198754;

    --navbar-height: 72px;
    --navbar-mobile-height: 62px;

    --navbar-container: 1320px;

    --navbar-radius: 10px;
    --navbar-radius-lg: 16px;

    --navbar-shadow:
        0 4px 22px rgba(43, 24, 32, 0.06);

    --navbar-dropdown-shadow:
        0 18px 48px rgba(37, 20, 27, 0.14);

    --navbar-transition:
        200ms cubic-bezier(0.4, 0, 0.2, 1);

    --navbar-z-index: 1030;
}


/* ==========================================================================
   2. NAVBAR BASE
   ========================================================================== */

.navbar,
.site-navbar,
.main-navbar {
    position: relative;
    z-index: var(--navbar-z-index);

    display: flex;
    align-items: center;

    width: 100%;
    min-height: var(--navbar-height);

    border-bottom: 1px solid var(--navbar-border);

    background: rgba(255, 255, 255, 0.98);

    box-shadow: var(--navbar-shadow);
}


/* ==========================================================================
   3. NAVBAR CONTAINER
   ========================================================================== */

.navbar-container,
.navbar > .container,
.navbar > .container-fluid {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: var(--navbar-container);

    margin-right: auto;
    margin-left: auto;

    padding-right: 1.5rem;
    padding-left: 1.5rem;
}


/* ==========================================================================
   4. FIXED / STICKY NAVBAR
   ========================================================================== */

.navbar-fixed,
.navbar.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;

    z-index: var(--navbar-z-index);
}

.navbar-sticky,
.navbar.sticky-top {
    position: sticky;
    top: 0;

    z-index: var(--navbar-z-index);
}

.navbar-scrolled {
    border-bottom-color: rgba(128, 0, 32, 0.08);

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 8px 28px rgba(42, 23, 31, 0.09);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* ==========================================================================
   5. NAVBAR BRAND
   ========================================================================== */

.navbar-brand {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    margin-right: 2rem;

    color: var(--navbar-maroon);

    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    white-space: nowrap;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--navbar-maroon-dark);

    text-decoration: none;
}


/* ==========================================================================
   6. BRAND LOGO
   ========================================================================== */

.navbar-brand img,
.navbar-logo {
    display: block;

    width: auto;
    max-width: 190px;
    height: 42px;

    object-fit: contain;
}

.navbar-logo-sm {
    height: 34px;
}

.navbar-logo-lg {
    height: 48px;
}


/* ==========================================================================
   7. TEXT BRAND
   ========================================================================== */

.navbar-brand-text {
    display: inline-flex;
    align-items: baseline;

    color: var(--navbar-maroon);

    font-size: 1.45rem;
    font-weight: 700;

    letter-spacing: -0.025em;
}

.navbar-brand-accent {
    color: var(--navbar-gold);
}


/* ==========================================================================
   8. NAVBAR COLLAPSE
   ========================================================================== */

.navbar-collapse {
    display: flex;
    align-items: center;

    min-width: 0;

    flex: 1 1 auto;
}

.navbar-collapse.collapse:not(.show) {
    display: flex;
}


/* ==========================================================================
   9. NAVIGATION LIST
   ========================================================================== */

.navbar-nav {
    display: flex;
    align-items: center;
    flex-direction: row;

    gap: 0.15rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.navbar-nav-main {
    flex: 1 1 auto;
}

.navbar-nav-actions {
    margin-left: auto;
}


/* ==========================================================================
   10. NAV ITEM
   ========================================================================== */

.nav-item {
    position: relative;
}

.nav-item + .nav-item {
    margin-left: 0.05rem;
}


/* ==========================================================================
   11. NAV LINK
   ========================================================================== */

.navbar .nav-link,
.navbar-nav .nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0.55rem 0.75rem;

    border-radius: 8px;

    color: var(--navbar-text);

    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color var(--navbar-transition),
        background-color var(--navbar-transition);
}

.navbar .nav-link:hover,
.navbar-nav .nav-link:hover {
    background: rgba(128, 0, 32, 0.045);

    color: var(--navbar-maroon);
}

.navbar .nav-link:focus-visible,
.navbar-nav .nav-link:focus-visible {
    outline: 3px solid rgba(212, 175, 55, 0.3);
    outline-offset: 2px;
}


/* ==========================================================================
   12. ACTIVE NAV LINK
   ========================================================================== */

.navbar .nav-link.active,
.navbar-nav .nav-link.active,
.navbar .nav-item.active > .nav-link {
    background: rgba(128, 0, 32, 0.055);

    color: var(--navbar-maroon);

    font-weight: 650;
}

.navbar .nav-link.active::after,
.navbar-nav .nav-link.active::after,
.navbar .nav-item.active > .nav-link::after {
    content: "";

    position: absolute;
    right: 0.7rem;
    bottom: -1px;
    left: 0.7rem;

    height: 2px;

    border-radius: 999px 999px 0 0;

    background:
        linear-gradient(
            90deg,
            var(--navbar-maroon),
            var(--navbar-gold)
        );
}


/* ==========================================================================
   13. NAV LINK ICON
   ========================================================================== */

.nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: 0.4rem;

    color: inherit;

    font-size: 1rem;
}

.nav-link-icon-only {
    width: 42px;
    height: 42px;

    padding: 0 !important;

    border-radius: 50% !important;
}


/* ==========================================================================
   14. NAVBAR ACTIONS
   ========================================================================== */

.navbar-actions {
    display: flex;
    align-items: center;

    gap: 0.45rem;

    margin-left: auto;
}


/* ==========================================================================
   15. NAVBAR LOGIN BUTTON
   ========================================================================== */

.navbar-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0.5rem 0.9rem;

    border: 1px solid rgba(128, 0, 32, 0.18);
    border-radius: 9px;

    background: #ffffff;
    color: var(--navbar-maroon);

    font-size: 0.78rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        border-color var(--navbar-transition),
        background var(--navbar-transition),
        color var(--navbar-transition);
}

.navbar-login:hover {
    border-color: var(--navbar-maroon);

    background: rgba(128, 0, 32, 0.04);

    color: var(--navbar-maroon-dark);
}


/* ==========================================================================
   16. NAVBAR REGISTER / CTA
   ========================================================================== */

.navbar-register,
.navbar-cta {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0.5rem 1rem;

    overflow: hidden;

    border: 1px solid var(--navbar-maroon);
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            var(--navbar-maroon),
            var(--navbar-maroon-dark)
        );

    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(128, 0, 32, 0.16);

    font-size: 0.78rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform var(--navbar-transition),
        box-shadow var(--navbar-transition),
        background var(--navbar-transition);
}

.navbar-register:hover,
.navbar-cta:hover {
    background:
        linear-gradient(
            135deg,
            var(--navbar-maroon-light),
            var(--navbar-maroon)
        );

    color: #ffffff;

    box-shadow:
        0 7px 18px rgba(128, 0, 32, 0.22);

    transform: translateY(-1px);
}


/* ==========================================================================
   17. PREMIUM NAVBAR CTA
   ========================================================================== */

.navbar-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.35rem;

    min-height: 40px;

    padding: 0.5rem 0.85rem;

    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #fffdf5,
            #fff6d6
        );

    color: #755806;

    font-size: 0.75rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        border-color var(--navbar-transition),
        box-shadow var(--navbar-transition),
        transform var(--navbar-transition);
}

.navbar-premium:hover {
    border-color: var(--navbar-gold);

    color: #604800;

    box-shadow:
        0 5px 15px rgba(212, 175, 55, 0.18);

    transform: translateY(-1px);
}


/* ==========================================================================
   18. ICON ACTION BUTTON
   ========================================================================== */

.navbar-icon-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #645b60;

    font-size: 1.05rem;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color var(--navbar-transition),
        color var(--navbar-transition);
}

.navbar-icon-btn:hover {
    background: rgba(128, 0, 32, 0.055);

    color: var(--navbar-maroon);
}

.navbar-icon-btn:focus-visible {
    outline: 3px solid rgba(212, 175, 55, 0.3);
    outline-offset: 2px;
}


/* ==========================================================================
   19. NOTIFICATION BADGE
   ========================================================================== */

.navbar-badge,
.notification-badge {
    position: absolute;
    top: 3px;
    right: 2px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    border: 2px solid #ffffff;
    border-radius: 999px;

    background: var(--navbar-maroon);
    color: #ffffff;

    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
}


/* ==========================================================================
   20. NOTIFICATION DOT
   ========================================================================== */

.navbar-dot {
    position: absolute;
    top: 6px;
    right: 6px;

    width: 8px;
    height: 8px;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: var(--navbar-danger);
}


/* ==========================================================================
   21. PROFILE MENU
   ========================================================================== */

.navbar-profile {
    position: relative;

    display: flex;
    align-items: center;

    margin-left: 0.25rem;
}

.navbar-profile-toggle {
    display: flex;
    align-items: center;

    gap: 0.55rem;

    min-height: 44px;

    padding: 0.25rem 0.45rem;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: var(--navbar-text);

    cursor: pointer;

    transition:
        background-color var(--navbar-transition);
}

.navbar-profile-toggle:hover,
.navbar-profile-toggle[aria-expanded="true"] {
    background: rgba(128, 0, 32, 0.05);
}


/* ==========================================================================
   22. PROFILE AVATAR
   ========================================================================== */

.navbar-avatar {
    position: relative;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    overflow: hidden;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f0e9ec,
            #e6dde1
        );

    box-shadow:
        0 0 0 1px rgba(128, 0, 32, 0.13);
}

.navbar-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================================
   23. PROFILE STATUS
   ========================================================================== */

.navbar-avatar-status {
    position: absolute;
    right: -1px;
    bottom: -1px;

    width: 10px;
    height: 10px;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: var(--navbar-success);
}


/* ==========================================================================
   24. PROFILE TEXT
   ========================================================================== */

.navbar-profile-info {
    min-width: 0;

    text-align: left;
}

.navbar-profile-name {
    display: block;

    max-width: 125px;

    overflow: hidden;

    color: var(--navbar-text);

    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.25;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.navbar-profile-meta {
    display: block;

    max-width: 125px;

    margin-top: 0.1rem;

    overflow: hidden;

    color: var(--navbar-muted);

    font-size: 0.62rem;
    line-height: 1.2;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ==========================================================================
   25. PROFILE CHEVRON
   ========================================================================== */

.navbar-profile-chevron {
    margin-left: 0.1rem;

    color: #8c8287;

    font-size: 0.65rem;

    transition:
        transform var(--navbar-transition);
}

.navbar-profile-toggle[aria-expanded="true"]
.navbar-profile-chevron {
    transform: rotate(180deg);
}


/* ==========================================================================
   26. DROPDOWN MENU
   ========================================================================== */

.navbar .dropdown-menu,
.navbar-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 1050;

    display: none;

    min-width: 220px;

    margin: 0;
    padding: 0.45rem;

    border: 1px solid var(--navbar-border);
    border-radius: var(--navbar-radius-lg);

    background: #ffffff;
    color: var(--navbar-text);

    box-shadow: var(--navbar-dropdown-shadow);

    list-style: none;

    opacity: 0;

    transform: translateY(6px);

    transform-origin: top right;
}

.navbar .dropdown-menu.show,
.navbar-dropdown.show,
.nav-item.show > .dropdown-menu,
.navbar-profile.show .navbar-dropdown {
    display: block;

    opacity: 1;

    transform: translateY(0);
}


/* ==========================================================================
   27. DROPDOWN ANIMATION
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    .navbar .dropdown-menu.show,
    .navbar-dropdown.show {
        animation: navbarDropdownIn 160ms ease-out;
    }

    @keyframes navbarDropdownIn {

        from {
            opacity: 0;

            transform: translateY(7px) scale(0.985);
        }

        to {
            opacity: 1;

            transform: translateY(0) scale(1);
        }
    }
}


/* ==========================================================================
   28. DROPDOWN HEADER
   ========================================================================== */

.navbar-dropdown-header,
.navbar .dropdown-header {
    padding: 0.7rem 0.75rem;

    color: var(--navbar-muted);

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}


/* ==========================================================================
   29. DROPDOWN ITEM
   ========================================================================== */

.navbar .dropdown-item,
.navbar-dropdown-item {
    display: flex;
    align-items: center;

    gap: 0.65rem;

    width: 100%;

    padding: 0.65rem 0.7rem;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: var(--navbar-text);

    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;

    text-align: left;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color var(--navbar-transition),
        color var(--navbar-transition);
}

.navbar .dropdown-item:hover,
.navbar-dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar-dropdown-item:focus {
    background: rgba(128, 0, 32, 0.055);

    color: var(--navbar-maroon);
}

.navbar .dropdown-item.active,
.navbar-dropdown-item.active {
    background: rgba(128, 0, 32, 0.075);

    color: var(--navbar-maroon);

    font-weight: 650;
}


/* ==========================================================================
   30. DROPDOWN ITEM ICON
   ========================================================================== */

.dropdown-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    border-radius: 7px;

    background: rgba(128, 0, 32, 0.055);
    color: var(--navbar-maroon);

    font-size: 0.82rem;
}


/* ==========================================================================
   31. DANGER DROPDOWN ITEM
   ========================================================================== */

.navbar .dropdown-item-danger,
.dropdown-item-danger {
    color: #b52d3a;
}

.navbar .dropdown-item-danger:hover,
.dropdown-item-danger:hover {
    background: rgba(220, 53, 69, 0.06);

    color: var(--navbar-danger);
}

.dropdown-item-danger .dropdown-item-icon {
    background: rgba(220, 53, 69, 0.07);

    color: var(--navbar-danger);
}


/* ==========================================================================
   32. DROPDOWN DIVIDER
   ========================================================================== */

.navbar .dropdown-divider,
.navbar-dropdown-divider {
    height: 1px;

    margin: 0.4rem 0;

    border: 0;

    background: var(--navbar-border);
}


/* ==========================================================================
   33. LARGE NOTIFICATION DROPDOWN
   ========================================================================== */

.notification-dropdown {
    width: min(380px, calc(100vw - 2rem));

    padding: 0;
}

.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1rem;

    border-bottom: 1px solid var(--navbar-border);
}

.notification-dropdown-title {
    margin: 0;

    color: var(--navbar-maroon);

    font-size: 0.85rem;
    font-weight: 700;
}

.notification-dropdown-list {
    max-height: 380px;

    overflow-y: auto;
}


/* ==========================================================================
   34. NOTIFICATION ITEM
   ========================================================================== */

.navbar-notification {
    display: flex;
    align-items: flex-start;

    gap: 0.7rem;

    padding: 0.8rem 1rem;

    border-bottom: 1px solid #f0ebed;

    color: var(--navbar-text);

    text-decoration: none;

    transition:
        background-color var(--navbar-transition);
}

.navbar-notification:last-child {
    border-bottom: 0;
}

.navbar-notification:hover {
    background: #fffafb;
}

.navbar-notification.unread {
    background: rgba(128, 0, 32, 0.025);
}

.navbar-notification.unread:hover {
    background: rgba(128, 0, 32, 0.05);
}


/* ==========================================================================
   35. NOTIFICATION ICON
   ========================================================================== */

.navbar-notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;

    background: rgba(128, 0, 32, 0.065);
    color: var(--navbar-maroon);

    font-size: 0.9rem;
}

.navbar-notification-content {
    min-width: 0;

    flex: 1;
}

.navbar-notification-text {
    margin: 0;

    color: var(--navbar-text);

    font-size: 0.72rem;
    line-height: 1.45;
}

.navbar-notification-time {
    display: block;

    margin-top: 0.2rem;

    color: var(--navbar-muted);

    font-size: 0.62rem;
}


/* ==========================================================================
   36. NOTIFICATION FOOTER
   ========================================================================== */

.notification-dropdown-footer {
    padding: 0.75rem 1rem;

    border-top: 1px solid var(--navbar-border);

    text-align: center;
}

.notification-dropdown-footer a {
    color: var(--navbar-maroon);

    font-size: 0.7rem;
    font-weight: 650;

    text-decoration: none;
}

.notification-dropdown-footer a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   37. NAVBAR SEARCH
   ========================================================================== */

.navbar-search {
    position: relative;

    width: min(300px, 25vw);

    margin-right: 0.75rem;
}

.navbar-search-input {
    width: 100%;
    min-height: 40px;

    padding: 0.5rem 2.5rem 0.5rem 2.4rem;

    border: 1px solid var(--navbar-border);
    border-radius: 999px;

    background: #f9f7f8;
    color: var(--navbar-text);

    font-family: inherit;
    font-size: 0.75rem;

    outline: 0;

    transition:
        border-color var(--navbar-transition),
        background-color var(--navbar-transition),
        box-shadow var(--navbar-transition);
}

.navbar-search-input::placeholder {
    color: #a0989c;
}

.navbar-search-input:focus {
    border-color: rgba(128, 0, 32, 0.4);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(128, 0, 32, 0.06);
}


/* ==========================================================================
   38. SEARCH ICON
   ========================================================================== */

.navbar-search-icon {
    position: absolute;
    top: 50%;
    left: 0.85rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    color: #91878c;

    pointer-events: none;
}

.navbar-search-clear {
    position: absolute;
    top: 50%;
    right: 0.45rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    padding: 0;

    transform: translateY(-50%);

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #91878c;

    cursor: pointer;
}

.navbar-search-clear:hover {
    background: rgba(128, 0, 32, 0.06);

    color: var(--navbar-maroon);
}


/* ==========================================================================
   39. SEARCH SUGGESTIONS
   ========================================================================== */

.navbar-search-results {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: 0;
    z-index: 1060;

    display: none;

    max-height: 400px;

    overflow-y: auto;

    padding: 0.4rem;

    border: 1px solid var(--navbar-border);
    border-radius: 14px;

    background: #ffffff;

    box-shadow: var(--navbar-dropdown-shadow);
}

.navbar-search-results.show {
    display: block;
}

.navbar-search-result {
    display: flex;
    align-items: center;

    gap: 0.6rem;

    padding: 0.6rem;

    border-radius: 8px;

    color: var(--navbar-text);

    text-decoration: none;
}

.navbar-search-result:hover {
    background: rgba(128, 0, 32, 0.05);
}


/* ==========================================================================
   40. SEARCH RESULT AVATAR
   ========================================================================== */

.navbar-search-result-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    overflow: hidden;

    border-radius: 50%;

    background: #eee9eb;
}

.navbar-search-result-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.navbar-search-result-info {
    min-width: 0;

    flex: 1;
}

.navbar-search-result-name {
    overflow: hidden;

    color: var(--navbar-text);

    font-size: 0.73rem;
    font-weight: 650;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.navbar-search-result-meta {
    margin-top: 0.1rem;

    overflow: hidden;

    color: var(--navbar-muted);

    font-size: 0.62rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ==========================================================================
   41. MEGA MENU
   ========================================================================== */

.navbar-mega {
    position: static;
}

.navbar-mega-menu {
    position: absolute;
    top: 100%;
    right: 1.5rem;
    left: 1.5rem;
    z-index: 1050;

    display: none;

    max-width: 1180px;

    margin: 0.55rem auto 0;
    padding: 1.25rem;

    border: 1px solid var(--navbar-border);
    border-radius: 18px;

    background: #ffffff;

    box-shadow: var(--navbar-dropdown-shadow);
}

.navbar-mega.show .navbar-mega-menu,
.navbar-mega:hover .navbar-mega-menu {
    display: block;
}

.navbar-mega-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1rem;
}

.navbar-mega-title {
    margin: 0 0 0.55rem;

    color: var(--navbar-maroon);

    font-size: 0.72rem;
    font-weight: 700;
}

.navbar-mega-link {
    display: block;

    padding: 0.4rem 0;

    color: var(--navbar-muted);

    font-size: 0.7rem;

    text-decoration: none;
}

.navbar-mega-link:hover {
    color: var(--navbar-maroon);
}


/* ==========================================================================
   42. VERIFIED BADGE
   ========================================================================== */

.navbar-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    margin-left: 0.2rem;

    border-radius: 50%;

    background: var(--navbar-maroon);
    color: #ffffff;

    font-size: 0.5rem;
}


/* ==========================================================================
   43. MEMBERSHIP STATUS
   ========================================================================== */

.navbar-membership {
    display: inline-flex;
    align-items: center;

    gap: 0.3rem;

    padding: 0.25rem 0.5rem;

    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 999px;

    background: rgba(212, 175, 55, 0.09);
    color: #755806;

    font-size: 0.6rem;
    font-weight: 700;

    white-space: nowrap;
}


/* ==========================================================================
   44. NAVBAR TOGGLER
   ========================================================================== */

.navbar-toggler {
    display: none;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    padding: 0;

    border: 1px solid rgba(128, 0, 32, 0.1);
    border-radius: 10px;

    background: #ffffff;
    color: var(--navbar-maroon);

    cursor: pointer;

    transition:
        background-color var(--navbar-transition),
        border-color var(--navbar-transition);
}

.navbar-toggler:hover {
    border-color: rgba(128, 0, 32, 0.25);

    background: rgba(128, 0, 32, 0.04);
}

.navbar-toggler:focus-visible {
    outline: 3px solid rgba(212, 175, 55, 0.3);
    outline-offset: 2px;
}


/* ==========================================================================
   45. HAMBURGER
   ========================================================================== */

.navbar-toggler-icon,
.navbar-hamburger {
    position: relative;

    display: block;

    width: 20px;
    height: 14px;

    background-image: none;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-hamburger::before,
.navbar-hamburger::after {
    content: "";

    position: absolute;
    left: 0;

    width: 20px;
    height: 2px;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform var(--navbar-transition),
        top var(--navbar-transition);
}

.navbar-toggler-icon::before,
.navbar-hamburger::before {
    top: 2px;
}

.navbar-toggler-icon::after,
.navbar-hamburger::after {
    top: 12px;
}

.navbar-toggler-line {
    position: absolute;
    top: 7px;
    left: 0;

    width: 20px;
    height: 2px;

    border-radius: 999px;

    background: currentColor;

    transition:
        opacity var(--navbar-transition);
}


/* ==========================================================================
   46. OPEN HAMBURGER
   ========================================================================== */

.navbar-toggler[aria-expanded="true"]
.navbar-toggler-icon::before,
.navbar-toggler.active
.navbar-hamburger::before {
    top: 7px;

    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"]
.navbar-toggler-icon::after,
.navbar-toggler.active
.navbar-hamburger::after {
    top: 7px;

    transform: rotate(-45deg);
}

.navbar-toggler[aria-expanded="true"]
.navbar-toggler-line,
.navbar-toggler.active
.navbar-toggler-line {
    opacity: 0;
}


/* ==========================================================================
   47. MOBILE NAV OVERLAY
   ========================================================================== */

.navbar-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--navbar-z-index) - 1);

    display: none;

    background: rgba(25, 12, 17, 0.48);

    opacity: 0;
    visibility: hidden;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    transition:
        opacity var(--navbar-transition),
        visibility var(--navbar-transition);
}

.navbar-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* ==========================================================================
   48. AUTHENTICATED NAVBAR
   ========================================================================== */

.navbar-authenticated .navbar-brand {
    margin-right: 1.25rem;
}

.navbar-authenticated .navbar-nav-main {
    gap: 0;
}


/* ==========================================================================
   49. PUBLIC NAVBAR
   ========================================================================== */

.navbar-public .navbar-nav {
    margin-left: auto;
}

.navbar-public .navbar-actions {
    margin-left: 1rem;
}


/* ==========================================================================
   50. TRANSPARENT NAVBAR
   ========================================================================== */

.navbar-transparent {
    border-bottom-color: transparent;

    background: transparent;

    box-shadow: none;
}

.navbar-transparent.navbar-scrolled {
    border-bottom-color: var(--navbar-border);

    background: rgba(255, 255, 255, 0.96);

    box-shadow: var(--navbar-shadow);
}


/* ==========================================================================
   51. MAROON NAVBAR
   ========================================================================== */

.navbar-maroon {
    border-bottom-color: rgba(255, 255, 255, 0.1);

    background:
        linear-gradient(
            135deg,
            var(--navbar-maroon-dark),
            var(--navbar-maroon)
        );

    color: #ffffff;
}

.navbar-maroon .navbar-brand,
.navbar-maroon .navbar-brand-text,
.navbar-maroon .nav-link,
.navbar-maroon .navbar-icon-btn,
.navbar-maroon .navbar-profile-toggle {
    color: #ffffff;
}

.navbar-maroon .nav-link:hover,
.navbar-maroon .navbar-icon-btn:hover,
.navbar-maroon .navbar-profile-toggle:hover {
    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;
}

.navbar-maroon .nav-link.active {
    background: rgba(255, 255, 255, 0.11);

    color: #ffffff;
}

.navbar-maroon .nav-link.active::after {
    background: var(--navbar-gold);
}

.navbar-maroon .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}


/* ==========================================================================
   52. ADMIN NAVBAR SUPPORT
   ========================================================================== */

.admin-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 64px;

    padding: 0 1.25rem;

    border-bottom: 1px solid var(--navbar-border);

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 3px 14px rgba(42, 24, 31, 0.045);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.admin-navbar-left,
.admin-navbar-right {
    display: flex;
    align-items: center;

    gap: 0.5rem;
}

.admin-navbar-title {
    margin: 0;

    color: var(--navbar-text);

    font-size: 0.95rem;
    font-weight: 700;
}


/* ==========================================================================
   53. DASHBOARD NAVBAR
   ========================================================================== */

.dashboard-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 64px;

    padding: 0 1.25rem;

    border-bottom: 1px solid var(--navbar-border);

    background: rgba(255, 255, 255, 0.97);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dashboard-navbar-left,
.dashboard-navbar-right {
    display: flex;
    align-items: center;

    gap: 0.5rem;
}


/* ==========================================================================
   54. MOBILE USER HEADER
   ========================================================================== */

.mobile-nav-user {
    display: none;

    padding: 1rem;

    border-bottom: 1px solid var(--navbar-border);
}

.mobile-nav-user-inner {
    display: flex;
    align-items: center;

    gap: 0.75rem;
}

.mobile-nav-user-avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    overflow: hidden;

    border-radius: 50%;

    background: #eee9eb;
}

.mobile-nav-user-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.mobile-nav-user-info {
    min-width: 0;

    flex: 1;
}

.mobile-nav-user-name {
    overflow: hidden;

    color: var(--navbar-maroon);

    font-size: 0.82rem;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.mobile-nav-user-meta {
    margin-top: 0.15rem;

    color: var(--navbar-muted);

    font-size: 0.65rem;
}


/* ==========================================================================
   55. MOBILE NAV FOOTER
   ========================================================================== */

.mobile-nav-footer {
    display: none;

    margin-top: auto;
    padding: 1rem;

    border-top: 1px solid var(--navbar-border);
}


/* ==========================================================================
   56. MOBILE NAV CTA
   ========================================================================== */

.mobile-nav-cta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0.6rem;
}


/* ==========================================================================
   57. NAVBAR SPACER
   ========================================================================== */

.navbar-spacer {
    height: var(--navbar-height);
}


/* ==========================================================================
   58. SKIP NAVIGATION LINK
   ========================================================================== */

.skip-nav {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 9999;

    padding: 0.65rem 1rem;

    border-radius: 0 0 8px 8px;

    background: var(--navbar-maroon);
    color: #ffffff;

    font-size: 0.75rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        top var(--navbar-transition);
}

.skip-nav:focus {
    top: 0;
}


/* ==========================================================================
   59. RESPONSIVE - LARGE
   ========================================================================== */

@media (max-width: 1199.98px) {

    .navbar-container,
    .navbar > .container,
    .navbar > .container-fluid {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .navbar-brand {
        margin-right: 1.25rem;
    }

    .navbar .nav-link,
    .navbar-nav .nav-link {
        padding-right: 0.6rem;
        padding-left: 0.6rem;

        font-size: 0.75rem;
    }

    .navbar-search {
        width: 230px;
    }

    .navbar-profile-name,
    .navbar-profile-meta {
        max-width: 100px;
    }
}


/* ==========================================================================
   60. RESPONSIVE - TABLET / MOBILE NAVIGATION
   ========================================================================== */

@media (max-width: 991.98px) {

    :root {
        --navbar-height: var(--navbar-mobile-height);
    }

    .navbar,
    .site-navbar,
    .main-navbar {
        min-height: var(--navbar-mobile-height);
    }

    .navbar-container,
    .navbar > .container,
    .navbar > .container-fluid {
        min-height: var(--navbar-mobile-height);

        padding-right: 1rem;
        padding-left: 1rem;
    }

    .navbar-brand {
        margin-right: auto;
    }

    .navbar-brand img,
    .navbar-logo {
        max-width: 165px;
        height: 38px;
    }

    .navbar-toggler {
        display: inline-flex;

        margin-left: 0.5rem;
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: calc(var(--navbar-z-index) + 1);

        display: flex !important;
        align-items: stretch;
        flex-direction: column;

        width: min(340px, 88vw);

        overflow-y: auto;

        border-right: 1px solid var(--navbar-border);

        background: #ffffff;

        box-shadow:
            14px 0 40px rgba(28, 14, 20, 0.16);

        transform: translateX(-105%);

        visibility: hidden;

        transition:
            transform var(--navbar-transition),
            visibility var(--navbar-transition);
    }

    .navbar-collapse.show,
    .navbar-collapse.collapsing,
    .navbar.menu-open .navbar-collapse {
        transform: translateX(0);

        visibility: visible;
    }

    .navbar-overlay {
        display: block;
    }

    .navbar-nav {
        align-items: stretch;
        flex-direction: column;

        width: 100%;

        gap: 0;

        padding: 0.75rem;
    }

    .navbar-nav-main {
        flex: 0 0 auto;
    }

    .navbar-nav-actions {
        margin-left: 0;
    }

    .nav-item,
    .nav-item + .nav-item {
        width: 100%;

        margin-left: 0;
    }

    .navbar .nav-link,
    .navbar-nav .nav-link {
        justify-content: flex-start;

        width: 100%;
        min-height: 46px;

        padding: 0.65rem 0.75rem;

        border-radius: 9px;

        font-size: 0.78rem;
    }

    .navbar .nav-link.active::after,
    .navbar-nav .nav-link.active::after,
    .navbar .nav-item.active > .nav-link::after {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;

        width: 3px;
        height: 22px;

        transform: translateY(-50%);

        border-radius: 0 999px 999px 0;

        background: var(--navbar-maroon);
    }

    .mobile-nav-user,
    .mobile-nav-footer {
        display: block;
    }

    .navbar-actions {
        margin-left: auto;
    }

    .navbar-profile-info,
    .navbar-profile-chevron {
        display: none;
    }

    .navbar-search {
        display: none;
    }

    .navbar-mega {
        position: relative;
    }

    .navbar-mega-menu {
        position: static;

        width: 100%;
        max-width: none;

        margin: 0.25rem 0 0;
        padding: 0.6rem;

        border: 0;
        border-radius: 8px;

        background: #faf8f9;

        box-shadow: none;
    }

    .navbar-mega-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .navbar .dropdown-menu,
    .navbar-dropdown {
        position: static;

        width: 100%;

        margin: 0.25rem 0;
        padding: 0.35rem;

        border: 0;
        border-radius: 8px;

        background: #faf8f9;

        box-shadow: none;

        transform: none;
    }

    .navbar .dropdown-menu.show,
    .navbar-dropdown.show {
        transform: none;
    }
}


/* ==========================================================================
   61. RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {

    .navbar-container,
    .navbar > .container,
    .navbar > .container-fluid {
        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }

    .navbar-brand img,
    .navbar-logo {
        max-width: 150px;
        height: 36px;
    }

    .navbar-brand-text {
        font-size: 1.25rem;
    }

    .navbar-actions {
        gap: 0.25rem;
    }

    .navbar-login,
    .navbar-register,
    .navbar-cta,
    .navbar-premium {
        display: none;
    }

    .navbar-profile {
        margin-left: 0;
    }

    .navbar-avatar {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

    .notification-dropdown {
        width: 100%;
    }

    .admin-navbar,
    .dashboard-navbar {
        min-height: 60px;

        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }

    .admin-navbar-title {
        max-width: 180px;

        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }
}


/* ==========================================================================
   62. RESPONSIVE - SMALL MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

    .navbar-collapse {
        width: min(320px, 90vw);
    }

    .navbar-brand img,
    .navbar-logo {
        max-width: 140px;
        height: 34px;
    }

    .navbar-toggler {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .navbar-icon-btn {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .navbar-badge,
    .notification-badge {
        top: 2px;
        right: 1px;
    }

    .navbar-mega-grid {
        grid-template-columns: 1fr;
    }

    .mobile-nav-cta {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   63. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 390px) {

    .navbar-container,
    .navbar > .container,
    .navbar > .container-fluid {
        padding-right: 0.7rem;
        padding-left: 0.7rem;
    }

    .navbar-brand img,
    .navbar-logo {
        max-width: 125px;
    }

    .navbar-brand-text {
        font-size: 1.15rem;
    }

    .navbar-actions {
        gap: 0.1rem;
    }

    .navbar-icon-btn {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .navbar-toggler {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        margin-left: 0.25rem;
    }
}


/* ==========================================================================
   64. TOUCH DEVICES
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

    .navbar .nav-link,
    .navbar-nav .nav-link,
    .navbar-icon-btn,
    .navbar-profile-toggle,
    .navbar-toggler,
    .navbar .dropdown-item,
    .navbar-dropdown-item {
        touch-action: manipulation;
    }

    .navbar .nav-link,
    .navbar-nav .nav-link {
        min-height: 44px;
    }

    .navbar .dropdown-item,
    .navbar-dropdown-item {
        min-height: 44px;
    }
}


/* ==========================================================================
   65. HIGH CONTRAST / ACCESSIBILITY
   ========================================================================== */

@media (prefers-contrast: more) {

    .navbar,
    .site-navbar,
    .main-navbar {
        border-bottom-color: #b8afb4;
    }

    .navbar .nav-link.active,
    .navbar-nav .nav-link.active {
        outline: 1px solid var(--navbar-maroon);
    }

    .navbar-login,
    .navbar-register,
    .navbar-cta {
        border-width: 2px;
    }
}


/* ==========================================================================
   66. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .navbar,
    .navbar-collapse,
    .navbar-overlay,
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after,
    .navbar-hamburger::before,
    .navbar-hamburger::after,
    .navbar-toggler-line,
    .navbar-profile-chevron,
    .navbar-login,
    .navbar-register,
    .navbar-cta,
    .navbar-premium,
    .navbar-icon-btn {
        transition: none !important;
    }

    .navbar .dropdown-menu.show,
    .navbar-dropdown.show {
        animation: none !important;
    }
}


/* ==========================================================================
   67. PRINT
   ========================================================================== */

@media print {

    .navbar,
    .site-navbar,
    .main-navbar,
    .admin-navbar,
    .dashboard-navbar,
    .navbar-overlay,
    .navbar-spacer,
    .skip-nav {
        display: none !important;
    }
}