/* ==========================================================================
   Navbar Responsive — Media Query & Breakpoints Overrides
   Memisahkan aturan tata letak responsif (mobile, tablet, & desktop).
   ========================================================================== */

/* ══════════════════════════════════
   1. SCREEN: MOBILE & TABLET (max-width: 991.98px)
   ══════════════════════════════════ */
@media (max-width: 991.98px) {
    body {
        padding-top: 76px !important;
    }

    .lp-bg {
        top: 76px !important;
    }

    .result-search,
    .member-area,
    .member-content-wrapper {
        margin-top: 0 !important;
    }

    .navbar {
        height: 76px !important;
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }

    .navbar .navbar-brand img,
    .navbar .navbar-brand .rounded-circle {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }

    /* Brand tidak boleh mendorong hamburger ke baris kedua:
       batasi lebarnya & potong teks panjang dengan elipsis */
    .navbar .navbar-brand {
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(100% - 60px);
        margin-right: 0;
    }

    .navbar .navbar-brand-text {
        min-width: 0;
        overflow: hidden;
    }

    .navbar .brand-title,
    .navbar .brand-subtitle {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar .navbar-toggler {
        flex-shrink: 0;
    }

    /* Laci menu / drawer dropdown */
    .navbar-collapse {
        background: linear-gradient(160deg, #161048 0%, #2a3a9e 60%, #3b50c0 100%) !important;
        margin-top: 10px !important;
        padding: 1.25rem !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        overflow: hidden;
    }

    .navbar-nav {
        gap: 0;
    }

    /* Menu aktif / hover di mobile */
    .navbar-nav .nav-item.active .nav-link::after {
        display: none;
    }

    .navbar-nav .nav-item.active .nav-link {
        background-color: rgba(255, 255, 255, .1);
    }

    .navbar .dropdown-menu {
        box-shadow: none;
        background-color: rgba(255, 255, 255, .05);
    }

    .navbar .dropdown-item {
        color: #fff;
    }

    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus {
        background-color: rgba(255, 255, 255, .1);
        color: #fff;
    }

    /* Kolom pencarian di mobile (di dalam laci menu) */
    .navbar .nav-search {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        margin: 0 0 1.25rem 0 !important;
    }

    .navbar .nav-search-form {
        border-radius: 12px;
    }

    .navbar .nav-search-category-custom {
        display: none;
    }

    /* Baris bawah drawer: chip user + bendera bahasa */
    .navbar .mobile-bottom-bar {
        border-top: 1px solid rgba(255, 255, 255, .12);
        margin-top: .85rem !important;
        padding-top: .85rem;
        justify-content: flex-start;
    }

    /* Icon menu link di mobile */
    .nav-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .06);
        margin-right: 10px;
        font-size: .75rem;
        color: rgba(255, 255, 255, .6);
        flex-shrink: 0;
        transition: all .2s ease;
    }

    .navbar-nav .nav-item.active .nav-link .nav-link-icon {
        background: rgba(82, 111, 255, .35);
        color: #fff;
    }

    .navbar-nav .nav-item .nav-link:hover .nav-link-icon {
        background: rgba(255, 255, 255, .1);
        color: rgba(255, 255, 255, .85);
    }
}

/* ══════════════════════════════════
   2. SCREEN: MID-SIZE TABLET & LAPTOP (max-width: 1199.98px) and (min-width: 992px)
   ══════════════════════════════════ */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .navbar .nav-search {
        max-width: 300px;
        margin: 0 .75rem;
    }

    .navbar .category-trigger {
        font-size: .72rem;
        padding: .65rem .3rem .65rem .65rem;
    }
}

/* ══════════════════════════════════
   3. SCREEN: DESKTOP ONLY (min-width: 992px)
   ══════════════════════════════════ */
@media (min-width: 992px) {
    .navbar>.container {
        flex-wrap: nowrap;
    }

    /* Sembunyikan icon link menu di desktop */
    .nav-link-icon {
        display: none !important;
    }

    /* Penyesuaian mobile bottom bar di desktop */
    .mobile-bottom-bar {
        background: transparent !important;
        border-top: none !important;
        padding: 0 !important;
        gap: 16px;
        align-items: center;
    }

    .mobile-bottom-bar>.nav-item:first-child {
        flex: unset;
    }

    .mobile-bottom-bar>.nav-item {
        list-style: none;
    }

    #navbarSupportedContent {
        align-items: center;
    }

    /* Penyesuaian margin wrapper login */
    .lp-wrapper {
        margin-top: 15px !important;
    }

    /* Rerata panel register */
    .lp-card--register .lp-panel--left {
        flex: 0 0 32% !important;
    }
    .lp-card--register .lp-panel--right {
        flex: 0 0 68% !important;
    }
}