/* ==========================================================
   FRONTEND NAVBAR
   ========================================================== */

.front-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: color-mix(in srgb, var(--theme-navbar, #ffffff) 92%, transparent);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border, #e5e7eb) 80%, transparent);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}

.front-navbar-inner {
    width: min(1280px, calc(100% - 96px));
    min-height: 78px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.front-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
    color: var(--theme-primary);
    text-decoration: none;
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
}

.front-logo i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--theme-button-text, #ffffff);
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-primary) 24%, transparent);
}

.front-logo span {
    color: var(--theme-primary);
}

.front-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    min-width: 0;
}

.front-menu a {
    position: relative;
    color: var(--theme-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    opacity: .82;
    transition: .2s ease;
}

.front-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--theme-accent);
    transition: width .2s ease;
}

.front-menu a:hover,
.front-menu a.active {
    color: var(--theme-primary);
    opacity: 1;
}

.front-menu a:hover::after,
.front-menu a.active::after {
    width: 100%;
}

.front-action {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
}

.btn-login,
.btn-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: .2s ease;
}

.btn-login {
    color: var(--theme-primary);
    background: var(--theme-surface);
    border: 1px solid color-mix(in srgb, var(--theme-primary) 25%, var(--theme-border));
}

.btn-register {
    color: var(--theme-button-text, #ffffff);
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--theme-primary) 22%, transparent);
}

.btn-login:hover,
.btn-register:hover {
    transform: translateY(-2px);
}

.front-nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 16px;
    color: var(--theme-button-text, #ffffff);
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    font-size: 24px;
}

/* THEME SWITCHER */

.frontend-theme-switcher,
.theme-switcher {
    width: 48px;
    max-width: calc(100vw - 48px);
    overflow: hidden;
    transition: width .25s ease;
}

.frontend-theme-switcher:hover,
.frontend-theme-switcher:focus-within,
.theme-switcher:hover,
.theme-switcher:focus-within {
    width: 220px;
}

/* RESPONSIVE */

@media (max-width: 1280px) {
    .front-navbar-inner {
        width: min(1180px, calc(100% - 80px));
    }
}

@media (max-width: 1100px) {
    .front-navbar-inner {
        width: min(100%, calc(100% - 64px));
        gap: 22px;
    }

    .front-menu {
        gap: 20px;
    }

    .btn-login,
    .btn-register {
        padding-inline: 18px;
    }
}

@media (max-width: 991.98px) {
    .front-navbar-inner {
        width: min(100%, calc(100% - 56px));
        min-height: 72px;
        gap: 14px;
        flex-wrap: wrap;
    }

    .front-nav-toggle {
        display: inline-grid;
        place-items: center;
        margin-left: auto;
    }

    .front-menu,
    .front-action {
        display: none;
        width: 100%;
    }

    .front-navbar.is-open .front-menu,
    .front-navbar.is-open .front-action {
        display: flex;
    }

    .front-navbar.is-open .front-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px 0 4px;
    }

    .front-navbar.is-open .front-action {
        gap: 10px;
        padding: 8px 0 16px;
    }

    .front-menu a {
        padding: 12px 14px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-surface));
    }

    .front-menu a::after {
        display: none;
    }

    .btn-login,
    .btn-register {
        flex: 1;
    }

    .theme-switcher,
    .theme-dropdown,
    .theme-floating,
    .auth-theme-switcher {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .front-navbar-inner {
        width: min(100%, calc(100% - 44px));
        min-height: 72px;
    }

    .front-logo span {
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .front-navbar.is-open .front-action {
        flex-direction: column;
    }

    .btn-login,
    .btn-register {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .front-navbar-inner {
        width: min(100%, calc(100% - 36px));
    }

    .front-logo {
        gap: 10px;
        font-size: 16px;
    }

    .front-logo i {
        width: 42px;
        height: 42px;
    }
}