/* HIDE MOBILE ELEMENTS ON DESKTOP */
.mob-drawer { display:none !important }
.bottom-nav { display:none !important }
.mob-menu-btn { display:none !important }

/* ONLY show on mobile */
@media(max-width:768px) {
  .mob-drawer.open { display:flex !important }
  .bottom-nav { display:block !important }
  .mob-menu-btn { display:flex !important }
}

/* ═══════════════════════════════════════════════════════
   AppToChain — Global Mobile Optimization
   Import this in every page: <link rel="stylesheet" href="mobile.css">
   ═══════════════════════════════════════════════════════ */

/* ── MOBILE NAV ─────────────────────────────────────── */
@media(max-width:768px) {

  /* Hide desktop nav links */
  .nav-links, .nav-sep { display:none !important }

  /* Hamburger menu button */
  .mob-menu-btn {
    display:flex !important;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
    padding:6px;
    margin-left:8px;
    background:none;
    border:none;
  }
  .mob-menu-btn span {
    display:block;
    width:18px;
    height:2px;
    background:var(--text3);
    border-radius:999px;
    transition:all 0.25s;
  }

  /* Mobile drawer */
  .mob-drawer {
    position:fixed;
    top:52px;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.97);
    backdrop-filter:blur(20px);
    z-index:999;
    display:none;
    flex-direction:column;
    padding:16px;
    overflow-y:auto;
  }
  .mob-drawer.open { display:flex }

  .mob-drawer a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    font-size:16px;
    font-weight:600;
    color:var(--text2);
    text-decoration:none;
    border-radius:10px;
    transition:all 0.12s;
    border-bottom:1px solid var(--border);
  }
  .mob-drawer a:last-child { border-bottom:none }
  .mob-drawer a:hover, .mob-drawer a.active {
    background:rgba(37,99,235,0.08);
    color:var(--text);
  }
  .mob-drawer a .mdi { font-size:18px; width:24px; text-align:center }

  .mob-drawer-footer {
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid var(--border);
    display:flex;
    gap:8px;
  }
  .mob-drawer-footer a {
    flex:1;
    height:42px;
    border-radius:9px;
    text-align:center;
    font-size:14px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    text-decoration:none;
  }
  .mob-df-login {
    background:var(--bg2);
    border:1px solid var(--border2) !important;
    color:var(--text2) !important;
  }
  .mob-df-signup {
    background:var(--blue);
    color:#fff !important;
  }

  /* Page padding fix */
  .page { padding-left:16px !important; padding-right:16px !important }

  /* Cards full width */
  .card, .input-card, .score-card, .cert-card,
  .findings-card, .plan, .section-card { width:100% !important }

  /* Grid overrides */
  .layout, .audit-layout, .form-grid,
  .net-grid, .net-picker { grid-template-columns:1fr !important }

  /* Plans grid */
  .plans { grid-template-columns:1fr !important; max-width:100% !important }

  /* Stats */
  .stats-row { grid-template-columns:repeat(3,1fr) !important }

  /* Hide heavy elements on mobile */
  .compare-table { display:none !important }

  /* Sidebar stacks below on mobile */
  .sidebar { order:0 }
  .main-content { order:1 }

  /* Font size adjustments */
  h1 { font-size:clamp(22px,6vw,32px) !important }
  h2 { font-size:clamp(18px,5vw,26px) !important }

  /* Button full width on mobile */
  .run-btn, .launch-btn, .cert-dl-btn,
  .pay-now-btn, .metamask-btn { width:100% !important }

  /* Modal full screen on mobile */
  .modal-bg { padding:0 !important; align-items:flex-end !important }
  .modal {
    border-radius:20px 20px 0 0 !important;
    max-height:90vh !important;
    overflow-y:auto !important;
    max-width:100% !important;
  }

  /* Table scroll */
  table { display:block; overflow-x:auto; white-space:nowrap }

  /* Wallet modal fix */
  #wallet-modal { max-width:100% !important; margin:0 16px !important }

  /* Toast position */
  #toast-container { bottom:16px !important; right:16px !important; left:16px !important }
  .toast { max-width:100% !important }
}

@media(max-width:480px) {
  /* Extra small phones */
  .plan-badges, .crypto-badges, .coins, .tool-badges { gap:4px !important }
  .tb, .coin, .cb { font-size:9px !important; padding:3px 7px !important }

  .stat-num { font-size:18px !important }
  .score-num { font-size:24px !important }

  .sub-actions, .cta-btns, .result-actions { flex-direction:column !important }
  .sub-btn, .cta-p, .cta-s, .ra-btn { width:100% !important; justify-content:center !important }

  .net-grid { grid-template-columns:1fr !important }

  .hero { padding-top:80px !important; padding-bottom:32px !important }
  .hero h1 { font-size:28px !important }

  /* Steps bar compact */
  .steps { gap:0 !important; margin:20px 0 24px !important }
  .step-label { display:none }
  .step-line { min-width:12px !important }
}

/* ── MOBILE NAV BUTTON (hidden on desktop) ──────────── */
.mob-menu-btn { display:none }

/* ── BOTTOM NAV BAR (mobile only) ──────────────────── */
.bottom-nav {
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:58px;
  background:rgba(0,0,0,0.97);
  border-top:1px solid var(--border);
  backdrop-filter:blur(20px);
  z-index:100;
  padding:0 8px;
}
.bottom-nav-inner {
  display:flex;
  height:100%;
  align-items:center;
  justify-content:space-around;
  max-width:480px;
  margin:0 auto;
}
.bn-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  text-decoration:none;
  color:var(--text3);
  cursor:pointer;
  padding:6px 12px;
  border-radius:10px;
  transition:all 0.15s;
  min-width:52px;
}
.bn-item:hover, .bn-item.active { color:var(--blue) }
.bn-item.active { background:rgba(37,99,235,0.08) }
.bn-icon { font-size:20px; line-height:1 }
.bn-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em }

@media(max-width:768px) {
  .bottom-nav { display:block }
  body { padding-bottom:58px }
  .page { padding-bottom:78px !important }
}