/* Destiantion Head */
.destination-header{

    padding:18px 22px;

    background:var(--surface-gradient);

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

}

.destination-header h4{
    font-size:18px;
    color:var(--on-surface-primary);
    margin-bottom:4px;
    font-weight:700;
}

.destination-header p{
    color:var(--text-secondary);
    font-size:13px;
}

/* Destination Tab */
.destination-tabs{
    display:flex;
    gap:10px;
    padding:16px 20px;
    background:transparent;
}

.destination-tab{
    flex:1;
    padding:11px;
    border-radius:999px;
    background:var(--surface-tertiary);
    color:var(--text-secondary);
    font-weight:600;
    transition:var(--transition);
}

.destination-tab.active{
    background:var(--button-primary-bg);
    color:var(--button-primary-text);
    box-shadow:var(--shadow-sm);
}

.destination-tab:hover{
    transform:translateY(-2px);
}
.destination-menu{
    position:relative;
}

.destination-dropdown{
    position:absolute;
    top:calc(100% + 14px);
    left:50%;
    transform:translateX(-35%);
    width:620px;
    background:var(--surface-primary);
    border:1px solid var(--border-primary);
    border-radius:20px;
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
}

.destination-menu:hover .destination-dropdown{
    opacity:1;
    visibility:visible;
    top:100%;
}

.navbarDestinationList{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:0 20px 20px;
}

.destination-mini-card{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px;

    border-radius:14px;

    background:var(--surface-secondary);

    border:1px solid transparent;

    transition:var(--transition);

}

.destination-mini-card img{
    width:64px;
    height:64px;
    border-radius:12px;
    object-fit:cover;
    flex-shrink:0;
}

.destination-mini-card:hover{

    background:var(--surface-tertiary);

    border-color:var(--brand-accent);

    transform:translateY(-2px);

    box-shadow:var(--shadow-sm);

}

.destination-mini-card strong{
    color:var(--on-surface-primary);
    font-size:15px;
    font-weight:600;
    line-height:1.4;
}
.destination-footer{

    padding:16px;

    text-align:center;

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

    background:var(--surface-tertiary);

}

.destination-footer a{

    color:var(--brand-secondary);

    font-weight:700;

}

.destination-footer a:hover{

    color:var(--brand-primary);

}



/* Tablets (Merged 992px Breakpoints) */
@media (max-width: 992px) {
    .mobile-login {
        background: var(--surface-gradient);
        color: var(--surface-highlight) !important;
        font-weight: 700;
    }

    .mobile-login i {
        color: var(--brand-primary) !important;
    }

    /* ==========================
       MOBILE DESTINATION MENU
    ========================== */

    .mobile-nav .destination-menu{
        width:100%;
        border-bottom:1px solid var(--border-primary);
    }

    .mobile-nav .destination-menu > a{

        width:100%;

        display:flex;

        align-items:center;

        justify-content:flex-start;

        gap:14px;

        padding:16px 20px;

        color:var(--surface-highlight);

        font-size:15px;

        font-weight:600;

        text-decoration:none;

    }

    .mobile-nav .destination-menu > a i{

        margin-left:auto;

        width:auto;

        transition:.35s;

    }

    .mobile-nav .destination-menu.open > a{

        background:var(--surface-secondary);

        color:var(--brand-primary);

    }

    .mobile-nav .destination-menu.open > a i{

        transform:rotate(180deg);

    }

    .mobile-nav .destination-dropdown{
        position:static;
        width:100%;
        max-height:0;
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        transform:none;
        border:none;
        border-radius:0;
        box-shadow:none;
        background:var(--surface-secondary);
        transition:max-height .35s ease, opacity .25s ease;
    }

    .mobile-nav .destination-menu.open .destination-dropdown{
        max-height:700px;   /* jitna content ho utna open ho jayega */
        opacity:1;
        visibility:visible;
    }


    /* Header */

    .mobile-nav .destination-header{

        padding:18px 20px;

        background:var(--surface-gradient);

    }

    .mobile-nav .destination-header h4{

        font-size:17px;

    }

    .mobile-nav .destination-header p{

        margin-top:4px;

    }

    /* Tabs */

    .mobile-nav .destination-tabs{

        padding:14px;

        display:flex;

        gap:10px;

    }

    /* Cards */

    .mobile-nav .navbarDestinationList{

        display:grid;

        /* grid-template-columns:1fr; */
        grid-template-columns:repeat(3,1fr);

        gap:10px;

        padding:0 14px 14px;

    }

    .mobile-nav .destination-mini-card{

        display:flex;

        align-items:center;

        gap:14px;

        padding:10px;

        border-radius:14px;

        background:var(--surface-primary);

        border:1px solid var(--border-primary);

        transition:var(--transition);

    }

    .mobile-nav .destination-mini-card:hover{

        transform:translateX(5px);

        background:var(--surface-tertiary);

    }

    .mobile-nav .destination-mini-card img{

        width:56px;

        height:56px;

        border-radius:12px;

    }

    .mobile-nav .destination-mini-card strong{

        font-size:14px;

    }

    /* Footer */

    .mobile-nav .destination-footer{

        background:transparent;

        padding:14px;

    }
}

/* Mobile Screens (Merged 768px Breakpoints) */
@media (max-width: 768px) {
    .destination-dropdown{
        width:100%;
        left:0;
        transform:none;
        border-radius:16px;
    }

    .navbarDestinationList{
        grid-template-columns:1fr;
    }

    .destination-tabs{
        padding:14px;
    }
    .destination-tab{
        font-size:14px;
    }
}

/* Small Mobile Screens (Merged 576px Breakpoints) */
@media (max-width: 576px) {
    .navbarDestinationList{
        grid-template-columns:1fr;
    }

    .destination-mini-card img{
        width:60px;
        height:60px;
    }

    .destination-tabs{
        position:sticky;
        top:0;
        overflow:auto;
    }
}