/* Mobile Elements Hidden by default on Desktop */
.f95-drawer-content,
#f95-mobile-drawer,
#f95-drawer-overlay,
#f95-fab,
.f95-m-brand,
.f95-m-actions,
.f95-node-mobile-meta {
  display: none !important;
}

@media (max-width: 768px) {
  .f95-drawer-content { display: flex !important; }
  #f95-mobile-drawer {
    display: flex !important;
  }
  #f95-drawer-overlay {
    display: block !important;
  }
  #f95-fab {
    display: flex !important;
  }
  .f95-m-brand {
    display: flex !important;
  }
  .f95-m-actions,
.f95-node-mobile-meta {
    display: flex !important;
  }

  /* Mobile Top Bar (App-navigation) */
  .App-navigation {
    height: 50px !important;
    background: #1e2124 !important;
    border-bottom: 1px solid #282b30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 10px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
  }
  .App-navigation .Navigation.ButtonGroup {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
  }
  .Navigation-drawer {
    background: transparent !important;
    border: none !important;
    color: #e2e2e2 !important;
    font-size: 20px !important;
    padding: 8px !important;
    cursor: pointer !important;
  }

  /* Injected mobile bar elements */
  .f95-m-brand {
    display: flex !important;
    align-items: center !important;
    position: absolute !important;
    left: 55px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .f95-m-brand img {
    height: 28px !important;
    width: auto !important;
  }
  .f95-m-actions,
.f95-node-mobile-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
  }
  .f95-m-btn {
    background: transparent !important;
    border: none !important;
    color: #8c96a4 !important;
    font-size: 17px !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }
  .f95-m-btn:active, .f95-m-btn:hover {
    color: #ff3377 !important;
  }
  .f95-m-btn.f95-m-key {
    color: #00b0ff !important;
  }
  .f95-m-btn.f95-m-reg {
    color: #ff3377 !important;
  }
  .f95-m-btn.f95-m-bolt {
    color: #ffd600 !important;
  }

  /* Hide desktop horizontal navbars and drawer cloned header on mobile */
  #f95-top-navbar-wrapper, #f95-sub-navbar-wrapper {
    display: none !important;
  }
  .App-drawer #header {
    display: none !important;
  }
  
  /* Main Content spacing */
  body {
    padding-top: 50px !important;
  }
  .App-content {
    padding-top: 8px !important;
  }

  /* Category rows matching F95Zone mobile */
  .f95-home-container {
    padding: 0 8px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .f95-block-header {
    padding: 8px 12px !important;
  }
  .f95-block-header h2 {
    font-size: 13.5px !important;
  }
  .f95-node-row {
    padding: 10px 10px !important;
    gap: 10px !important;
  }
  .f95-node-icon {
    font-size: 20px !important;
    width: 32px !important;
    min-width: 32px !important;
  }
  .f95-node-title {
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
  }
  .f95-node-desc, .f95-subnodes, .f95-node-stats, .f95-node-last {
    display: none !important;
  }
  .f95-node-mobile-meta {
    display: block !important;
    font-size: 11.5px !important;
    color: #8c96a4 !important;
    margin-top: 3px !important;
  }
  .f95-m-stats {
    display: flex !important;
    gap: 12px !important;
    font-size: 11.5px !important;
    color: #8c96a4 !important;
    margin-bottom: 3px !important;
  }
  .f95-m-stats i {
    color: #647082 !important;
  }
  .f95-m-last {
    font-size: 11.5px !important;
    color: #9cb0c6 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .f95-m-last a {
    color: #abbbcf !important;
    text-decoration: none !important;
  }

  /* Right sidebar blocks stack below categories */
  .f95-side-col {
    width: 100% !important;
    margin-top: 10px !important;
  }

  /* Mobile Footer */
  .f95-footer-container {
    padding: 20px 14px !important;
  }
  .f95-footer-main {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .f95-footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
  .f95-footer-bottom-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* Floating Action Button */
  .f95-fab-btn {
    position: fixed !important;
    bottom: 22px !important;
    right: 18px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #d81b60 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important;
    z-index: 9999 !important;
    text-decoration: none !important;
    transition: transform 0.2s, background 0.2s !important;
  }
  .f95-fab-btn:hover, .f95-fab-btn:active {
    background: #ff3377 !important;
    transform: scale(1.08) !important;
    color: #fff !important;
  }

  /* Flarum Native Drawer Integration for F95Zone Mobile Drawer */
  #drawer.App-drawer {
    background: #1d2027 !important;
    width: 270px !important;
    max-width: 85vw !important;
    box-shadow: 2px 0 16px rgba(0,0,0,0.6) !important;
  }
  #drawer > header,
  #drawer > #f95-top-navbar-wrapper,
  #drawer > #f95-sub-navbar-wrapper {
    display: none !important;
  }
  .f95-drawer-content {
    display: flex !important;
    flex-direction: column !important;
    background: #1d2027 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }
  .f95-drawer-header {
    padding: 16px !important;
    background: #16181e !important;
    border-bottom: 1px solid #252a34 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .f95-drawer-close {
    background: none !important;
    border: none !important;
    color: #8c96a4 !important;
    font-size: 22px !important;
    cursor: pointer !important;
  }
  .f95-drawer-section-title {
    padding: 12px 16px 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #ff3377 !important;
  }
  .f95-drawer-link {
    display: flex !important;
    align-items: center !important;
    padding: 11px 16px !important;
    color: #e2e2e2 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid #20242c !important;
    transition: background 0.15s !important;
  }
  .f95-drawer-link i {
    width: 24px !important;
    margin-right: 10px !important;
    font-size: 14px !important;
    text-align: center !important;
  }
  .f95-drawer-link:hover, .f95-drawer-link:active {
    background: #252a34 !important;
    color: #ffffff !important;
  }
}
/* Mobile Authenticated User Avatar & Badges */
.f95-m-avatar-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ff3377 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
}

.f95-m-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.f95-m-btn.f95-m-notif {
  position: relative !important;
}

.f95-m-badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  background: #ff3377 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 1px 5px !important;
  line-height: 1.2 !important;
  min-width: 14px !important;
  text-align: center !important;
}

/* Mobile Drawer User Card */
.f95-drawer-user-box {
  padding: 14px 16px !important;
  background: #181b22 !important;
  border-bottom: 1px solid #282c37 !important;
}

.f95-drawer-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.f95-drawer-user-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #ff3377 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  flex-shrink: 0 !important;
}

.f95-drawer-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.f95-drawer-user-meta {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.f95-drawer-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.f95-drawer-status {
  font-size: 12px !important;
  color: #00e676 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

.f95-status-dot.online {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #00e676 !important;
  display: inline-block !important;
}