/* ============================================================
   Mobile Navigation Color Fix — v2
   Upload to: public_html/nexport/assets/css/mobile-nav-fix.css
============================================================ */

/* ── Wrapper & background ── */
.mobile-nav__wrapper { background: #021936 !important; }
.mobile-nav__wrapper .mobile-nav__content { background: #021936 !important; }
.mobile-nav__wrapper .mobile-nav__overlay { background: rgba(0,0,0,0.7) !important; }

/* ── ALL anchor tags inside mobile nav ── */
.mobile-nav__wrapper a,
.mobile-nav__wrapper a:link,
.mobile-nav__wrapper a:visited {
    color: #ffffff !important;
}
.mobile-nav__wrapper a:hover {
    color: #d62422 !important;
}

/* ── Nav list items ── */
.mobile-nav__wrapper ul li a,
.mobile-nav__wrapper ul li span,
.mobile-nav__wrapper li > a {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* ── Active / current page ── */
.mobile-nav__wrapper ul li.current > a,
.mobile-nav__wrapper ul li.active > a,
.mobile-nav__wrapper ul li.current-menu-item > a {
    color: #d62422 !important;
}

/* ── Dropdown toggle button ── */
.mobile-nav__wrapper .dropdown-btn,
.mobile-nav__wrapper .dropdown-btn span,
.mobile-nav__wrapper .menu-item-has-children > .dropdown-btn {
    color: #ffffff !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* ── Sub-menu ── */
.mobile-nav__wrapper ul ul,
.mobile-nav__wrapper .sub-menu {
    background: rgba(0,0,0,0.25) !important;
}
.mobile-nav__wrapper ul ul li a {
    color: rgba(255,255,255,0.80) !important;
    padding-left: 28px !important;
}

/* ── Contact info ── */
.mobile-nav__wrapper .mobile-nav__contact li { color: rgba(255,255,255,0.65) !important; }
.mobile-nav__wrapper .mobile-nav__contact a  { color: rgba(255,255,255,0.65) !important; }
.mobile-nav__wrapper .mobile-nav__contact a:hover { color: #ffffff !important; }
.mobile-nav__wrapper .mobile-nav__contact i  { color: #d62422 !important; }

/* ── Social icons ── */
.mobile-nav__wrapper .mobile-nav__social a { color: rgba(255,255,255,0.55) !important; }
.mobile-nav__wrapper .mobile-nav__social a:hover { color: #ffffff !important; }

/* ── Close button ── */
.mobile-nav__wrapper .mobile-nav__close { color: #ffffff !important; }
.mobile-nav__wrapper .mobile-nav__close i { color: #ffffff !important; }

/* ── Logo in mobile nav ── */
.mobile-nav__wrapper .mobile-nav__logo { filter: brightness(0) invert(1); }

/* ── Separator lines ── */
.mobile-nav__wrapper ul li {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── Mean menu fallback ── */
.mean-container .mean-bar { background: #021936 !important; padding: 4px 12px !important; }
.mean-container .mean-nav { background: #021936 !important; }
.mean-container .mean-nav ul { background: #021936 !important; }
.mean-container .mean-nav ul li a {
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 12px 5% !important;
}
.mean-container .mean-nav ul li a:hover { color: #d62422 !important; background: rgba(255,255,255,0.05) !important; }
.mean-container .mean-nav ul li a.mean-expand {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}
.mean-container .mean-push { background: #021936 !important; }
.mean-container .mean-nav ul li li a { padding-left: 10% !important; color: rgba(255,255,255,0.75) !important; }

/* ── Contact icon fix ── */
.mobile-nav__contact li i,
.mobile-nav__contact .icon,
.mobile-nav__contact [class*="icon"],
.mobile-nav__contact [class*="fa-"],
.mobile-nav__contact [class^="fa"],
.mobile-nav__contact [class^="icon"] {
    color: #ffffff !important;
    background: rgba(255,255,255,0.15) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

/* Fix icon box that shows as plain red circle */
.mobile-nav__contact li .icon-box,
.mobile-nav__contact li span.icon,
.mobile-nav__contact li > span:first-child {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
}

/* Make sure icon content shows */
.mobile-nav__contact i::before,
.mobile-nav__contact [class*="icon-"]::before {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ── Laboix custom icon fix ── */
.mobile-nav__wrapper [class*="laboix-icon"],
.mobile-nav__wrapper [class*="icon-phone"],
.mobile-nav__wrapper [class*="icon-email"],
.mobile-nav__wrapper [class*="icon-mail"],
.mobile-nav__wrapper .laboix-icon-phone2,
.mobile-nav__wrapper .laboix-icon-envelope {
    color: #ffffff !important;
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Override red background on icon boxes */
.mobile-nav__contact .icon-box {
    background: rgba(255,255,255,0.12) !important;
}
.mobile-nav__contact .icon-box i,
.mobile-nav__contact .icon-box span {
    color: #ffffff !important;
}