/* Mobile Menu Responsive Styles */

/* Topbar mobile adjustments */
@media (max-width: 576px) {
    .topbar {
        padding: 0.5rem 0;
        font-size: 0.7rem;
    }

    .topbar-content {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .topbar-left {
        order: 1;
        width: 100%;
        gap: 0.75rem;
        flex-wrap: wrap;
        padding: 0.5rem 0;
    }

    .topbar-label {
        display: block;
    }

    /* Hide email */
    .topbar-left a:nth-child(4) {
        display: none;
    }

    /* Show only phone and mobile numbers */
    .topbar-left a:nth-child(2),
    .topbar-left a:nth-child(3) {
        display: flex;
    }

    .topbar-left a span {
        display: inline;
    }

    .topbar-item {
        gap: 0.5rem;
    }

    .topbar-item i,
    .topbar-item svg {
        font-size: 1rem;
    }

    .topbar-right {
        display: none;
    }

    .topbar-menu {
        display: none;
    }

    .topbar-social {
        display: none;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .topbar {
        padding: 0.5rem 0;
        font-size: 0.75rem;
    }

    .topbar-item span {
        display: inline;
    }

    .topbar-menu {
        display: flex;
        gap: 0.75rem;
        font-size: 0.75rem;
    }

    .topbar-label {
        display: block;
    }
}

/* Navbar mobile adjustments */
@media (max-width: 991.98px) {
    .navbar-collapse {
        display: none !important;
    }

    .navbar-toggler {
        display: block !important;
        position: relative;
        z-index: 100;
        order: -1;
    }

    /* Hide desktop menu items */
    .navbar-nav {
        display: none !important;
    }

    /* Hide desktop button on mobile */
    .btn-primary.d-none.d-lg-inline-block {
        display: none !important;
    }

    /* Hide floating call center on mobile */
    .floating-call-center {
        display: none !important;
    }

    /* Mobile menu drawer styles */
    .offcanvas.mobile-menu-drawer {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .offcanvas-header {
        border-bottom: 1px solid #e0e0e0;
    }

    .mobile-menu-content {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
}

/* Desktop - hide mobile drawer */
@media (min-width: 992px) {
    .mobile-menu-drawer {
        display: none !important;
    }

    .floating-call-center {
        display: flex !important;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    .menu-item {
        padding: 1rem;
    }

    .menu-item:active {
        background-color: #e8f0f7;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .mobile-menu-drawer {
        width: 85% !important;
        max-width: 280px !important;
    }

    .menu-item {
        padding: 0.75rem 0.875rem;
        font-size: 0.9rem;
    }

    .menu-item i {
        font-size: 1rem;
    }
}

/* Scrollbar styling for mobile menu */
.mobile-menu-content::-webkit-scrollbar {
    width: 6px;
}

.mobile-menu-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mobile-menu-content::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 3px;
}

.mobile-menu-content::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* Appended overrides to match Figma mobile menu visuals */
.offcanvas.mobile-menu-drawer {
    width: 92% !important;
    max-width: 360px !important;
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(2,8,23,0.45) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}
.mobile-panel { display:flex; flex-direction:column; height:100%; }
.mobile-panel-body { flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; }
.mobile-panel-footer { flex:0 0 auto; position:sticky; bottom:0; background:#fff; border-top:1px solid rgba(0,0,0,0.04); padding:12px; }
.mobile-menu-content { display:flex; flex-direction:column; gap:6px; padding-top:6px; }
.menu-item { display:flex; align-items:center; gap:14px; padding:18px 20px; color:#0f2540 !important; text-decoration:none; font-size:16px; line-height:1; border-left:3px solid transparent; }
.menu-item i { width:20px; font-size:18px; color:inherit; }
.menu-item:hover { background:#f7f9fb !important; }
.menu-item.active { background:#e8f0f7 !important; color:#063b66 !important; border-left-color:#063b66 !important; font-weight:600; }
.submenu-box { background:#f1f3f5 !important; margin:8px 16px; padding:10px; border-radius:12px; }
.submenu-item { display:block; padding:10px 8px; color:#223 !important; text-decoration:none; font-size:15px; }
.contact-section { padding-top:6px; padding-bottom:6px; }
.contact-items .contact-item { display:flex; gap:10px; align-items:center; padding:8px 0; color:#444 !important; text-decoration:none; font-size:14px; }
.social-row a { font-size:18px; color:#5b6b7a !important; }
.btn-primary.w-100 { border-radius:28px !important; padding:12px 16px !important; height:48px !important; display:inline-flex; align-items:center; justify-content:center; font-size:16px; }

@media (max-width:360px) {
    .offcanvas.mobile-menu-drawer { width:96% !important; max-width:340px !important; border-radius:16px !important; }
    .menu-item { padding:14px 16px !important; font-size:15px !important; }
    .submenu-box { margin:6px 12px !important; padding:8px !important; }
    .btn-primary.w-100 { height:44px !important; font-size:15px !important; }
}