/* Topbar */
.topbar {
    display: flex;
    justify-content: space-between;
    padding: 10px 5%;
    font-size: 13px;
    color: #666;
    background: var(--bg-base);
}

.topbar-left, .topbar-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.top-link { color: #666; transition: color 0.3s; display: flex; align-items: center; gap: 6px; }
.top-link:hover { color: #0858bb; }

/* Navbar Setup (Compact Desktop Alignment) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: var(--bg-base);
    gap: 25px;
}

/* Logo Alignment */
.brand-logo { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex-shrink: 0; 
}
.logo-icon { width: 277px; height: auto; filter: drop-shadow(3px 3px 6px var(--shadow-dark)); }
.logo-text { font-weight: 800; font-size: 20px; color: var(--text-dark); display: none; }

/* Large Search Bar - Positioned Immediately After Logo */
.search-container {
    flex-grow: 1;
    max-width: 521px;
    display: flex;
    align-items: center;
    background: var(--bg-base);
    border-radius: 30px;
    padding: 4px 4px 4px 15px;
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}

/* Fix: Dropdown Custom Arrow & Placement */
.search-category {
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 22px 10px 5px; /* Arrow ke liye extra right padding */
    font-weight: 600;
    color: var(--text-dark);
    border-right: 2px solid var(--shadow-dark);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* Custom clean arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23666%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 18px;
}

.search-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 15px;
    font-size: 14px;
    color: var(--text-dark);
    width: 100px; /* Fallback */
}

/* Fix: Search Button Shrinking */
.search-btn {
    background: var(--bg-base);
    color: #0858bb;
    border: none;
    padding: 10px 18px;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
    transition: all 0.2s ease;
    flex-shrink: 0; 
}

.search-btn:hover { color: white; background: #0858bb; }
.search-btn:active { box-shadow: inset 3px 3px 6px rgba(0,0,0,0.2); }

/* Desktop Right Side CTA Button */
.desktop-cta {
    flex-shrink: 0;
}

.btn-list-free {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-base);
    color: #0858bb;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    transition: all 0.3s ease;
}

.btn-list-free:hover { color: white; background: #0858bb; }
.btn-list-free:active { box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3); }

/* Nav Menu */
.nav-menu { display: none; }
.mobile-only { display: none !important; }

/* ==========================================
   MOBILE APP VIEW
   ========================================== */
@media (max-width: 900px) {
    .topbar { display: none; }
    .desktop-cta { display: none; }

    .navbar {
        flex-wrap: wrap; 
        position: sticky; top: 0; z-index: 1000;
        padding: 12px 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .brand-logo { gap: 0; }
    .logo-icon { width: 342px; height: auto; }
    .logo-text { display: none; }

    /* Fix: Mobile Search Bar Layout */
    .search-container {
        width: 100%;
        max-width: 100%;
        margin-top: 10px;
        display: flex;
    }
    .search-category { 
        width: 32%; 
        font-size: 12px; 
        padding-right: 18px; /* Arrow ke liye jagah */
    }
    .search-input { 
        flex-grow: 1; /* Button ke baad bachi hui sari jagah input lega */
        width: 40%;
        font-size: 13px; 
        padding: 10px 8px;
    }
    .search-btn {
        padding: 8px 14px; /* Mobile ke hisab se chota button */
    }

    .mobile-only { display: flex !important; }
    
    /* Fix: Bottom App Nav Layout Alignment */
    .nav-menu {
        display: flex;
        position: fixed; bottom: 0; left: 0; width: 100%;
        background-color: var(--bg-base);
        justify-content: space-between; 
        align-items: center;
        padding: 5px 10px 15px 10px;
        box-shadow: 0 -5px 15px var(--shadow-dark);
        z-index: 1000;
        box-sizing: border-box;
    }

    .nav-link {
        flex: 1; /* Sabhi 5 buttons ko barabar space milega */
        display: flex;
        flex-direction: column; gap: 4px; font-size: 10px; 
        padding: 8px 0;
        height: 55px; /* Fixed height taki border shadow se alignment na bigde */
        box-shadow: none; background: transparent; 
        justify-content: center;
        align-items: center; color: var(--text-dark);
        border-radius: 12px;
        box-sizing: border-box;
    }
    
    .nav-link svg { width: 20px; height: 20px; fill: currentColor; }
    
    .nav-link.active, .nav-link:active {
        color: #0858bb; background: var(--bg-base);
        box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    }
    
    .btn-whatsapp { color: var(--accent-whatsapp); }
    .btn-whatsapp:active { color: #1da851; }

    body { padding-bottom: 80px; }
}