/* ==========================================================
   NAVBAR (Royal Horizon)  -  global/navbar.css
   Sections:
     1. Base (logo / company name)
     2. Destination dropdown (desktop)
     3. Desktop: mobile parts hidden
     4. Tablet + Mobile (<=992px)
     5. Phones (<=576px, <=400px)
========================================================== */


/* ==========================================================
   1. BASE
========================================================== */
.navbar,
.navbar *,
.navbar *::before,
.navbar *::after{
    box-sizing:border-box;
}

.navbar .logo{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    text-decoration:none;
}

.navbar .logo-container,
.navbar .company-details{
    min-width:0;
}

.navbar .logo-image{
    flex:none;
}

.navbar .logo-image img{
    display:block;
    max-width:100%;
    height:auto;
}

.navbar .company-details h3{
    margin:0;
    max-width:280px;
    font-size:clamp(16px,1.5vw,21px);
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.navbar .company-details span{
    display:block;
    font-size:12px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* ==========================================================
   2. DESTINATION DROPDOWN (desktop hover)
========================================================== */
.destination-menu{
    position:relative;
}

.destination-dropdown{
    position:absolute;
    top:calc(100% + 14px);
    left:50%;
    transform:translateX(-35%);
    width:620px;
    max-width:calc(100vw - 40px);
    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%;
}

/* Header */
.destination-header{
    padding:18px 22px;
    background:var(--surface-gradient);
    border-bottom:1px solid var(--border-primary);
}

.destination-header h4{
    margin:0 0 4px;
    font-size:18px;
    font-weight:700;
    color:var(--on-surface-gradient,var(--text-light,#fff));   /* theme ke header background ke hisaab se */
}

.destination-header p{
    margin:0;
    font-size:13px;
    color:var(--on-surface-secondary,rgba(255,255,255,.85));
}

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

.destination-tab{
    flex:1;
    padding:11px;
    border:0;
    border-radius:999px;
    background:var(--surface-tertiary);
    color:var(--text-secondary);
    font-weight:600;
    cursor:pointer;
    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);
}

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

.destination-mini-card{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    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 strong{
    min-width:0;
    font-size:15px;
    font-weight:600;
    line-height:1.4;
    color:var(--on-surface-primary,var(--text-primary));
    overflow-wrap:anywhere;
}

.destination-mini-card:hover{
    background:var(--surface-tertiary);
    border-color:var(--brand-accent);
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
}

/* Footer */
.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);
}


/* ==========================================================
   3. DESKTOP (993px+): mobile parts hidden
========================================================== */
@media (min-width:993px){
    .navbar .mobile-actions,
    .navbar .mobile-nav{
        display:none !important;
    }
}


/* ==========================================================
   4. TABLET + MOBILE (<=992px)
========================================================== */
@media (max-width:992px){

    /* ---------- desktop parts hidden ---------- */
    .navbar .nav-right,
    .navbar .desktop-nav{
        display:none !important;
    }

    /* ---------- header row ---------- */
    .navbar .nav-container{
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        height:auto;
        min-height:var(--navbar-height,64px);
        padding:8px 14px;
        position:relative;
    }

    .navbar .logo-container{
        flex:1 1 auto;
        max-width:calc(100% - 60px);
    }

    .navbar .logo-image{
        width:42px;
        height:42px;
    }

    .navbar .company-details h3{
        max-width:100%;
        font-size:clamp(14px,4.2vw,18px);
    }

    .navbar .company-details span{
        font-size:10.5px;
    }

    /* ---------- right side: hamburger only (Get Quote hidden) ---------- */
    .navbar .mobile-actions{
        display:flex !important;
        align-items:center;
        gap:8px;
        flex:none;
    }

    .navbar .mobile-quote{
        display:none !important;
    }

    .navbar .menu-toggle{
        display:grid;
        place-items:center;
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:18px;
        cursor:pointer;
        background:var(--surface-tertiary);
        color:var(--brand-primary);
        border:1px solid var(--border-primary);
    }

    /* ---------- slide-down menu panel ---------- */
    .navbar .mobile-nav{
        display:none;
        flex-direction:column;
        justify-content:flex-start;      /* IMPORTANT: center se Login cut ho raha tha */
        align-items:stretch;
        gap:0;                           /* global 28px gap hataya */
        flex:none;
        position:absolute;
        top:calc(100% + 8px);
        left:0;
        right:0;
        width:100%;
        z-index:1000;
        max-height:calc(100vh - 90px);
        max-height:calc(100dvh - 90px);
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        padding:12px;
        background:var(--surface-primary);
        border:1px solid var(--border-primary);
        border-radius:var(--radius-lg);
        box-shadow:var(--shadow-lg);
    }
    
    .navbar .mobile-nav.active{
        display:flex;
        overflow-y:auto;                 /* global .nav-links.active ka overflow:hidden override */
        background:var(--surface-primary);
        border-radius:var(--radius-lg);
    }
    
    /* ---------- LOGIN (top, primary CTA) ---------- */
    .navbar .mobile-nav > a.mobile-login{
        justify-content:center;
        gap:10px;
        margin-bottom:10px;
        padding:14px 16px;
        border:0;
        border-radius:14px;
        background:var(--button-primary-bg);
        color:var(--button-primary-text) !important;
        font-size:16px;
        font-weight:700;
        box-shadow:var(--shadow-sm);
    }
    
    .navbar .mobile-nav > a.mobile-login i{
        width:auto;
        color:var(--button-primary-text) !important;
        background:transparent;
        font-size:16px;
    }
    
    .navbar .mobile-nav > a.mobile-login:hover{
        background:var(--button-primary-hover);
        padding:14px 16px;
        transform:none;
    }
    
    /* ---------- normal menu rows ---------- */
    .navbar .mobile-nav > a:not(.mobile-login){
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:14px;
        width:100%;
        padding:12px 12px;
        margin:0;
        border:0;
        border-radius:12px;
        color:var(--on-surface-primary);
        font-size:15px;
        font-weight:600;
        text-decoration:none;
    }
    
    .navbar .mobile-nav > a:not(.mobile-login) i{
        flex:none;
        display:grid;
        place-items:center;
        width:36px;
        height:36px;
        border-radius:10px;
        background:var(--surface-tertiary);
        color:var(--brand-primary);
        font-size:15px;
    }
    
    .navbar .mobile-nav > a:not(.mobile-login):hover,
    .navbar .mobile-nav > a:not(.mobile-login):active{
        background:var(--surface-tertiary);
        color:var(--brand-secondary);
        padding:12px 12px;
        transform:none;
    }
    
    /* ---------- destinations accordion ---------- */
    .navbar .mobile-nav .destination-menu{
        width:100%;
        border:0;
        border-radius:12px;
        overflow:hidden;
    }
    
    .navbar .mobile-nav .destination-menu > a{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:14px;
        width:100%;
        padding:12px;
        border:0;
        border-radius:12px;
        color:var(--on-surface-primary);
        font-size:15px;
        font-weight:600;
        text-decoration:none;
    }
    
    .navbar .mobile-nav .destination-menu > a::after{
        display:none;
    }
    
    .navbar .mobile-nav .destination-menu > a i{
        margin-left:auto;
        color:var(--brand-primary);
        transition:.3s;
    }
    
    .navbar .mobile-nav .destination-menu.open > a{
        background:var(--surface-tertiary);
        color:var(--brand-secondary);
    }
    
    .navbar .mobile-nav .destination-menu.open > a i{
        transform:rotate(180deg);
    }
    
    .navbar .mobile-nav .destination-menu .destination-dropdown{
        position:static;
        width:100%;
        max-width:100%;
        max-height:0;
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        transform:none;
        border:0;
        border-radius:0 0 12px 12px;
        box-shadow:none;
        background:var(--surface-tertiary);
        transition:max-height .35s ease, opacity .25s ease;
    }
    
    .navbar .mobile-nav .destination-menu.open .destination-dropdown{
        max-height:2400px;
        opacity:1;
        visibility:visible;
    }

    .navbar .mobile-nav .destination-header{
        padding:18px 20px;
    }

    .navbar .mobile-nav .destination-header h4{
        font-size:17px;
    }

    .navbar .mobile-nav .destination-header p{
        margin-top:4px;
    }

    .navbar .mobile-nav .destination-tabs{
        position:static;
        overflow:visible;
        padding:14px;
        gap:8px;
    }

    .navbar .mobile-nav .destination-tab{
        padding:10px 8px;
        font-size:14px;
    }

    .navbar .mobile-nav .navbarDestinationList{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        padding:0 14px 14px;
    }

    .navbar .mobile-nav .destination-mini-card{
        gap:10px;
        background:var(--surface-primary);
        border:1px solid var(--border-primary);
    }

    .navbar .mobile-nav .destination-mini-card:hover{
        background:var(--surface-tertiary);
        transform:translateX(5px);
    }

    .navbar .mobile-nav .destination-mini-card img{
        width:52px;
        height:52px;
    }

    .navbar .mobile-nav .destination-mini-card strong{
        font-size:14px;
    }

    .navbar .mobile-nav .destination-footer{
        padding:14px;
        background:transparent;
    }
}


/* ==========================================================
   5. PHONES
========================================================== */
@media (max-width:576px){

    .navbar .nav-container{
        padding:8px 12px;
    }

    .navbar .logo-container{
        max-width:calc(100% - 56px);
    }

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

@media (max-width:400px){

    .navbar .company-details span{
        display:none;
    }

    .navbar .logo-image{
        width:38px;
        height:38px;
    }
}