/* ==========================================
   EYESCODE MOBILE NAVBAR
   ========================================== */


@media(max-width:700px) {
  
  
  /* NAV DESKTOP */
  
  .eyes-navbar {
    
    display: none;
    
  }
  
  
  
  /* NAV MOBILE INFERIOR */
  
  
  .mobile-navbar {
    
    display: flex;
    
    position: fixed;
    
    bottom: 0;
    
    left: 0;
    
    width: 100%;
    
    height: 65px;
    
    background: #111827;
    
    border-top: 1px solid rgba(255, 255, 255, .08);
    
    z-index:1500;
    
    justify-content: space-around;
    
    align-items: center;
    
    
  }
  
  
  
  .mobile-navbar a {
    
    
    flex: 1;
    
    display: flex;
    
    flex-direction: column;
    
    align-items: center;
    
    justify-content: center;
    
    
    gap: 4px;
    
    
    color: #94a3b8;
    
    
    text-decoration: none;
    
    
    font-size: 11px;
    
    
  }
  
  
  
  .mobile-navbar i {
    
    font-size: 20px;
    
  }
  
  
  
  .mobile-navbar a.active {
    
    color: #3b82f6;
    
  }
  
  
  
  /* HEADER MOBILE */
  
  
  .desktop-header {
    
    display: none;
    
  }
  
  
  
  .mobile-header {
    
    
    display: flex;
    
    height: 60px;
    
    align-items: center;
    
    justify-content: space-between;
    
    
    padding: 0 15px;
    
    
    background: #111827;
    
    
  }
  
  
  
  /* LOGO */
  
  
  .mobile-logo {
    
    display: flex;
    
    align-items: center;
    
    gap: 8px;
    
    color: white;
    
    text-decoration: none;
    
    font-weight: 800;
    
  }
  
  
  
  .mobile-logo img {
    
    width: 35px;
    
    height: 35px;
    
  }
  
  
  
  .mobile-logo span {
    
    font-size: 18px;
    
  }
  
  
  
  /* AÇÕES */
  
  
  .mobile-actions {
    
    display: flex;
    
    align-items: center;
    
    gap: 15px;
    
  }
  
  
  
  .mobile-actions a,
  .mobile-actions button {
    
    
    color: white;
    
    background: none;
    
    border: 0;
    
    font-size: 20px;
    
    
  }
  
  
  
  /* MENU LATERAL */
  
  .mobile-menu {
    
    
    max-width: 320px;
    
  }
  
  
  
  /* ESPAÇO PARA NAV INFERIOR */
  
  
  body {
    
    padding-bottom: 75px;
    
  }
  
  
}

.create-live-mobile {
  
  display: none;
  
}


@media(max-width:768px) {
  
  .create-live-mobile {
    
    display: flex;
    
    position: fixed;
    
    right: 20px;
    
    bottom: 90px;
    
    z-index: 1200;
    
    align-items: center;
    
    gap: 10px;
    
    padding: 14px 20px;
    
    border: none;
    
    border-radius: 50px;
    
    background: #ef4444;
    
    color: white;
    
    font-size: 15px;
    
    font-weight: 700;
    
    box-shadow:
      0 0 20px rgba(239, 68, 68, .5);
    
  }
  
  
  .create-live-mobile i {
    
    font-size: 18px;
    
  }
  
  
}

.mobile-notification-btn {
  position: relative;
  font-size: 22px;
  color: white;
}


#notificationCount {
  
  position: absolute;
  
  top: -8px;
  right: -10px;
  
  background: red;
  
  color: white;
  
  font-size: 11px;
  
  min-width: 18px;
  height: 18px;
  
  border-radius: 50%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.mobile-bottom-navbar a {
  color: #94a3b8;
  text-decoration: none;
}


.mobile-bottom-navbar a.active {
  color: #3b82f6;
}


.mobile-bottom-navbar a.active i,
.mobile-bottom-navbar a.active span {
  color: #3b82f6;
}