/* ============================================================
   NAUKRIGULF — COMPREHENSIVE MOBILE STYLESHEET
   Loaded last in header.php — overrides all other styles.
   ============================================================ */

/* ─── GLOBAL ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; }
body { overflow-x: hidden; }

/* ─── TOPBAR — hide on mobile ───────────────────────────── */
@media (max-width: 768px) {
  .ng-topbar { display: none !important; }
}

/* ─── HEADER ─────────────────────────────────────────────── */
/* ─── HEADER & MOBILE DRAWER ────────────────────────────── */
.ng-mobile-only-actions { display: none; }

@media (max-width: 992px) {
  .ng-header-inner { padding: 0 16px !important; height: 60px !important; }
  .ng-logo { height: 26px; }
  .ng-mobile-toggle { 
    display: flex !important; 
    align-items: center; 
    justify-content: center; 
    font-size: 22px; 
    width: 42px; 
    height: 42px; 
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
  }
  
  .ng-mobile-only-actions { display: block !important; }

  .ng-nav-primary.open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    background: #ffffff;
    overflow-y: auto;
    z-index: 9999;
    padding: 16px 20px 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  }
  
  .ng-nav-primary.open .ng-nav-list {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 0;
  }
  
  .ng-nav-primary.open .ng-nav-item {
    height: auto;
    display: block;
    border-bottom: 1px solid #f1f5f9;
  }

  .ng-nav-primary.open .ng-nav-link {
    padding: 14px 8px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #0f172a;
    text-decoration: none;
    cursor: pointer;
  }

  .ng-nav-primary.open .ng-caret {
    transition: transform 0.2s ease;
    display: inline-block;
  }

  .ng-nav-primary.open .ng-nav-item.ng-dd-active > .ng-nav-link .ng-caret {
    transform: rotate(180deg);
    color: #ef4444;
  }

  .ng-nav-primary.open .ng-dropdown,
  .ng-nav-primary.open .ng-mega-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    margin: 4px 0 14px;
    opacity: 1;
    visibility: visible;
  }

  .ng-nav-primary.open .ng-mega-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
  }

  .ng-nav-primary.open .ng-mega-col h4.ng-mega-head {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }

  .ng-nav-primary.open .ng-mega-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .ng-nav-primary.open .ng-mega-col ul li a {
    padding: 6px 0;
    font-size: 13.5px;
    color: #475569;
    display: block;
    text-decoration: none;
  }
  
  .ng-nav-primary.open .ng-nav-item.ng-dd-active > .ng-dropdown,
  .ng-nav-primary.open .ng-nav-item.ng-dd-active > .ng-mega-menu {
    display: block !important;
  }

  .ng-nav-primary.open .ng-dropdown a {
    padding: 8px 0;
    font-size: 14px;
    color: #475569;
    display: block;
    text-decoration: none;
    border-bottom: 1px dashed #e2e8f0;
  }

  .ng-nav-primary.open .ng-dropdown a:last-child {
    border-bottom: none;
  }
}

/* ─── STICKY MOBILE SEARCH / BOTTOM ACTIONS ────────────── */
@media (max-width: 768px) {
  .ng-hero-exact {
    padding: 24px 0 40px !important;
    background-position: center bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .ng-hero-title-exact { font-size: 22px !important; line-height: 1.3 !important; }
  .ng-hero-grid-exact { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ng-search-box-exact { flex-direction: column !important; gap: 10px !important; background: transparent !important; box-shadow: none !important; }
  .ng-search-input-exact { border-radius: 8px !important; border: 1.5px solid #cbd5e1 !important; padding: 14px 16px !important; font-size: 16px !important; background: #fff !important; }
  .ng-search-btn-exact { width: 100% !important; border-radius: 8px !important; padding: 14px !important; font-size: 16px !important; font-weight: 700 !important; }
  .ng-emp-find-card { padding: 18px !important; border-radius: 12px !important; }
  .ng-tabs-overlay { margin-top: -16px !important; }
  .ng-tabs-grid-exact { grid-template-columns: 1fr !important; gap: 12px !important; }
  .ng-tab-card-exact { padding: 18px !important; border-radius: 12px !important; }
  .ng-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .ng-industries-grid-exact { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .ng-employers-grid-exact { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .ng-employer-card-exact { height: 64px; }
  .ng-jobs-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .ng-reads-grid-exact { grid-template-columns: 1fr !important; }
  .ng-blog-grid { grid-template-columns: 1fr !important; }
  .ng-boost-grid-exact { grid-template-columns: 1fr !important; }
  .ng-poll-box-exact { flex-direction: column !important; padding: 20px !important; gap: 16px !important; }
  .ng-app-promo-exact { padding: 24px 16px !important; }
  .ng-app-promo-qr-row { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .ng-stats-inner { flex-direction: column !important; gap: 12px !important; }
}

@media (max-width: 480px) {
  .ng-cat-grid { grid-template-columns: 1fr 1fr !important; }
  .ng-employers-grid-exact { grid-template-columns: repeat(2, 1fr) !important; }
  .ng-industries-grid-exact { grid-template-columns: 1fr !important; }
}

/* ─── SEARCH PAGE MOBILE FINE-TUNING ────────────────────── */
@media (max-width: 768px) {
  .ng-search-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ng-search-box { flex-direction: column !important; border-radius: 8px !important; }
  .ng-search-field { border-right: none !important; border-bottom: 1px solid #e0e4ea; width: 100%; }
  .ng-search-divider { display: none !important; }
  .ng-search-submit { width: 100% !important; border-radius: 0 0 8px 8px !important; padding: 14px !important; font-size: 15px !important; }
  .ng-results-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .ng-filter-sidebar { display: none !important; position: static !important; margin-bottom: 12px; }
  .ng-filter-sidebar.ng-filter-open { display: block !important; }
  .ng-filter-toggle-btn { display: flex !important; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #1e61db; color: #1e61db; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; margin-bottom: 12px; font-family: inherit; width: 100%; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
  .ng-result-card { flex-direction: column !important; gap: 12px !important; padding: 16px !important; border-radius: 10px !important; }
  .ng-result-footer { flex-wrap: wrap !important; gap: 10px !important; }
  .ng-search-input { font-size: 16px !important; }
}

/* ─── JOB DETAIL PAGE MOBILE ────────────────────────────── */
@media (max-width: 992px) {
  .ng-jd-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .ng-jd-header { flex-direction: column !important; gap: 14px !important; }
  .ng-jd-title { font-size: 20px !important; line-height: 1.3 !important; }
  .ng-jd-card { padding: 18px !important; border-radius: 12px !important; }
  .ng-jd-info-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .ng-jd-apply-bar { flex-wrap: wrap !important; gap: 10px !important; }
  .ng-jd-apply-bar > a, .ng-jd-apply-bar > button { flex: 1 1 140px; text-align: center; padding: 12px !important; font-size: 14px !important; font-weight: 700 !important; }
}
@media (max-width: 480px) {
  .ng-jd-apply-bar { flex-direction: column !important; }
  .ng-jd-apply-bar > a, .ng-jd-apply-bar > button { width: 100% !important; }
}

/* ─── FOOTER RESPONSIVE OVERRIDES ───────────────────────── */
@media (max-width: 768px) {
  .ng-footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  .ng-footer { padding: 32px 0 0 !important; }
  .ng-footer-bottom-inner-exact { flex-direction: column !important; text-align: center !important; gap: 14px !important; }
  .ng-footer-partners { justify-content: center !important; flex-wrap: wrap !important; }
  .ng-footer-infoedge-logo { justify-content: center !important; }
}
@media (max-width: 480px) {
  .ng-footer-grid { grid-template-columns: 1fr !important; }
  .ng-container { padding: 0 14px !important; }
}

/* ─── TOUCH TARGETS & ACCESSIBILITY ─────────────────────── */
@media (max-width: 768px) {
  .ng-btn-red, .ng-btn-outline, .ng-auth-submit { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
  a, button { -webkit-tap-highlight-color: rgba(29,100,242,0.1); }
}